Commit 06e36a9b authored by FORESTIER Fabien's avatar FORESTIER Fabien Committed by ncastejon
Browse files

Make property values that are urls clickable in dataset details table...

Make property values that are urls clickable in dataset details table component and data details component
parent 516bb4a5
......@@ -43,7 +43,7 @@
<div *ngSwitchDefault class="property-value">
<span
*ngIf="!isUrl(properties[key])">{{ (properties[key] && properties[key] !== '') ? properties[key] : '-' }}</span>
<a [href]="properties[key]" *ngIf="isUrl(properties[key])">{{ properties[key] }}</a>
<a [href]="properties[key]" target="_blank" *ngIf="isUrl(properties[key])">{{ properties[key] }}</a>
</div>
</ng-container>
</div>
......
@import "../../../../../../scss/variables";
.property-value {
font-size: 0.875rem;
font-weight: 600;
word-break: break-word;
}
......
......@@ -89,7 +89,7 @@ export class DatasetDataDetailPropertiesComponent implements OnInit {
}
isUrl(value: any) {
const expression = 'https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)';
const expression = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
const regex = new RegExp(expression);
const isStringAndNotNull = value ? typeof value === 'string' : false;
return isStringAndNotNull ? value.match(regex) : false;
......
......@@ -18,7 +18,14 @@
<div [class]="'item-grid' + ' item-grid-' + indexData"
[ngClass]="{'is-first': indexRow === 0, 'selected': element.id === selectedFeature, 'visited': isVisited(element.id) }"
*ngFor="let key of displayedProperties; let indexRow=index;" (click)="emitSelectedData(element)">
<span *ngIf="!isPropertyComplex(element,key)" class="data-property-value">{{ element.properties[key] }}</span>
<ng-container *ngIf="!isPropertyComplex(element,key)">
<span *ngIf="!isUrl(element.properties[key]); else urlPropTemplate"
class="data-property-value">{{ element.properties[key] }}</span>
<ng-template #urlPropTemplate>
<a class="data-property-value" target="_blank"
[href]="element.properties[key]">{{ element.properties[key] }}</a>
</ng-template>
</ng-container>
<span *ngIf="isPropertyComplex(element,key)">
<span class="tooltip-right" i18n-data-tooltip="@@dataset.data.tooltip"
data-tooltip="Complex property, please unfold the line">
......
......@@ -91,6 +91,10 @@
}
}
a.data-property-value {
font-size: 0.875rem;
}
[class^="tooltip"] {
svg path {
fill: $grey-dark-color;
......
......@@ -156,6 +156,13 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
return type === 'object' || Array.isArray(element.properties[key]);
}
isUrl(value: any) {
const expression = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
const regex = new RegExp(expression);
const isStringAndNotNull = value ? typeof value === 'string' : false;
return isStringAndNotNull ? value.match(regex) : false;
}
addVisitedItem(id: number) {
this.visitedFeatures.push(id);
// Make there are no duplicates in the array
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment