Commit 21afbf83 authored by FORESTIER Fabien's avatar FORESTIER Fabien
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 38c29492
Pipeline #1785 passed with stages
in 5 minutes and 44 seconds
......@@ -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