diff --git a/src/app/mapping/class/dataset.ts b/src/app/mapping/class/dataset.ts index d4f2f6499b23d8608265d2e3ea7a7ce25e098516..080bc153abfdc97b2c8f36c2583454004aa9efb5 100644 --- a/src/app/mapping/class/dataset.ts +++ b/src/app/mapping/class/dataset.ts @@ -2,13 +2,19 @@ export class Dataset { public name: string; public identifier: string; public usageNote: string; + + constructor(name: string, identifier: string, usageNote: string) { + this.name = name; + this.identifier = identifier; + this.usageNote = usageNote; + } } export class DatasetPath { - public dcatProperty: string; + public dcatProperty: Dataset | string; public path: string - constructor(dcatProperty: string, path: string) { + constructor(dcatProperty: Dataset, path: string) { this.dcatProperty = dcatProperty; this.path = path; } diff --git a/src/app/mapping/mapping.component.html b/src/app/mapping/mapping.component.html index 2a4359bbc27fbb7a443e31cb3a5a5fdff27b172a..6f7a83288c57bde3b53c9a5ea6fb70a7764b4e6c 100644 --- a/src/app/mapping/mapping.component.html +++ b/src/app/mapping/mapping.component.html @@ -13,11 +13,11 @@ <input type="file" id="file" (change)="importJson($event)" accept=".json" /> </div> - <ng-container *ngFor="let dataset of datasetModel; let index = index;trackBy:trackByIndex;"> + <ng-container *ngFor="let dataset of obsDcatVocabulary | async; let index = index ;trackBy:trackByIndex ;"> <nb-form-field> <div class="row"> - <div class="col-4"> + <div class="col-3" style="margin-right: 10px;"> <nb-form-field> <input @@ -34,14 +34,14 @@ </nb-form-field> </div> - <div class="col-8"> + <div class="col-7"> <nb-form-field> <input *ngIf="dataset.identifier === 'dct:hasVersion' || dataset.identifier === 'dct:title' " required #autoInput #{{dataset.identifier}}="ngModel" fullWidth id="{{dataset.identifier}}" name="{{dataset.identifier}}" nbInput - (ngModelChange)="onModelChange($event)" placeholder="Enter value" [nbAutocomplete]="auto" + (ngModelChange)="onModelChange($event)" [nbAutocomplete]="auto" [(ngModel)]="selectedPaths[index]" autocomplete="false" (focus)="reset()" /> <div *ngIf="dataset.identifier.invalid && (dataset.identifier.dirty || dataset.identifier.touched)"> @@ -50,10 +50,9 @@ *ngIf=" dataset.identifier !== 'dct:hasVersion' && dataset.identifier !== 'dct:title'" #autoInput #{{dataset.identifier}}="ngModel" fullWidth id="{{dataset.identifier}}" name="{{dataset.identifier}}" nbInput - (ngModelChange)="onModelChange($event)" placeholder="Enter value" [nbAutocomplete]="auto" + (ngModelChange)="onModelChange($event)" [nbAutocomplete]="auto" [(ngModel)]="selectedPaths[index]" autocomplete="false" (focus)="reset()" /> - - + <nb-autocomplete #auto> <nb-option *ngFor="let option of filteredOptions | async" [value]="option"> @@ -63,7 +62,16 @@ </nb-autocomplete> </nb-form-field> </div> - + <div class="col-2" *ngIf="isMultiple(dataset)" style="margin-left: 10px;"> + <button nbButton ghost (click)="addField(index)"> + <nb-icon icon="plus-outline" status="primary"> + </nb-icon> + </button> + <button nbButton ghost *ngIf="dataset.identifier !== 'dct:hasVersion' && dataset.identifier !== 'dct:title'" (click)="deleteField(index)" > + <nb-icon icon="trash-2-outline" status="danger" > + </nb-icon> + </button> + </div> </div> </nb-form-field> </ng-container> @@ -89,7 +97,7 @@ <nb-list-item *ngFor="let data of mappedMetadatas[index] | keyvalue; trackBy:trackByIndex; "> <div class="row"> - <div class="col-5"><label for="{{data.key}}">{{data.key}}</label></div> + <div class="col-5"><label for="{{data.key}}">{{dcatVocabulary[data.key].identifier}}</label></div> <div class="col-5"> <input nbInput [ngModel]="data.value" (ngModelChange)="mappedMetadatas[index].set(data.key, $event)" /> </div> <div class="col-2"><button nbButton ghost> diff --git a/src/app/mapping/mapping.component.scss b/src/app/mapping/mapping.component.scss index 1227abfb2cd766e841e916aff1ec4e89d4e6fd38..68382b72937c99e6d9009eed3e99282479d2745e 100644 --- a/src/app/mapping/mapping.component.scss +++ b/src/app/mapping/mapping.component.scss @@ -4,12 +4,7 @@ flex: 1 0 calc(100%); margin: 0 -0.5rem; } - .row { - display: flex; - flex: 1 0 calc(100%); - margin: 5px -0.5rem; - - } + .card-col { width: 100%; @@ -22,10 +17,10 @@ margin: 10px 10px; } - - input-basic-disabled-text-color { - color: black; + input:disabled{ + color: black } + .button-center{ vertical-align: middle; diff --git a/src/app/mapping/mapping.component.ts b/src/app/mapping/mapping.component.ts index 0cc4c1ca3e4042aa15b945e0af4dbd68cfa33629..802334ddce296a929006f597f29a17414f39d702 100644 --- a/src/app/mapping/mapping.component.ts +++ b/src/app/mapping/mapping.component.ts @@ -24,19 +24,19 @@ import { FeedbackDialogComponent } from './dialog/feedback-dialog/feedback-dialo export class MappingComponent implements OnInit { itemsdataset: Object[] = [] - datasetModel: Dataset[]; + dcatVocabulary: Dataset[]; + obsDcatVocabulary: Observable<Dataset[]>; filteredOptions: Observable<string[]>; keys: string[] = []; selectedPaths: string[]; - mappedMetadatas: Map<string, string>[] = []; - obsMappedMetadatas: Observable<Map<string, string>[]>; + mappedMetadatas: Map<number, string>[] = []; DatasetToPublish: Map<string, string>[]; index: number = 0 first: boolean = true; loading: boolean = false; loadingCr = false; FDP_URL = environment.fdpUrl; - + Object: Object; ids: number[]; @ViewChild('autoInput') input; @Input() type: string; @@ -47,22 +47,14 @@ export class MappingComponent implements OnInit { ngOnInit() { this.dataSetService.getLocally('./assets/dataset.json').subscribe( dataset => { - this.datasetModel = dataset; - this.selectedPaths = new Array(dataset.length); + this.dcatVocabulary = dataset; + this.obsDcatVocabulary = of(this.dcatVocabulary) + this.selectedPaths = []; }, error => { console.error(error); }, ); - this.obsMappedMetadatas = of(this.mappedMetadatas) - this.populatecatalogue(); - console.log("TYPE: " + this.type) - } - - - - - populatecatalogue() { this.itemsdataset = this.dataSetService.itemsDataset; this.ids = this.dataSetService.ids; this.ids @@ -71,12 +63,14 @@ export class MappingComponent implements OnInit { this.filteredOptions = of(this.keys); } - createDataset(item: Object): Map<string, string> { - let mappedMetadata: Map<string, string> = new Map() + + createDataset(item: Object): Map<number, string> { + console.log("rerereer" + this.selectedPaths) + let mappedMetadata: Map<number, string> = new Map() for (let i = 0; i < this.selectedPaths.length; i++) { if (this.selectedPaths[i]) { let tab = this.selectedPaths[i].split(' : '); - this.type == "Dataverse" ? mappedMetadata.set(this.datasetModel[i].identifier, this.getValueDataverse(tab, item)) : mappedMetadata.set(this.datasetModel[i].identifier, this.getValueCustom(tab, item)); + this.type == "Dataverse" ? mappedMetadata.set(i, this.getValueDataverse(tab, item)) : mappedMetadata.set(i, this.getValueCustom(tab, item)); } } this.loadingCr = false; @@ -94,8 +88,9 @@ export class MappingComponent implements OnInit { let title = ""; properties = ""; - this.mappedMetadatas[i].forEach((value: string, key: string) => { - (value.length > 0) ? value = this.replaceAll(value, '\n', '') : value; + this.mappedMetadatas[i].forEach((value: string, index: number) => { + let key = this.dcatVocabulary[index].identifier; + (value && typeof value === "string") ? value = this.replaceAll(value, '\n', '') : value; if (key === 'dct:title') { title = value }; switch (key) { case 'dct:landingPage': @@ -289,9 +284,6 @@ export class MappingComponent implements OnInit { } } - - - mapDataset() { this.loadingCr = true; this.mappedMetadatas = []; @@ -320,11 +312,11 @@ export class MappingComponent implements OnInit { downloadJson() { let datasetPathArray: DatasetPath[] = []; - for (let i = 0; i < this.datasetModel.length; i++) { + for (let i = 0; i < this.dcatVocabulary.length; i++) { if (this.selectedPaths[i]) { - datasetPathArray.push(new DatasetPath(this.datasetModel[i].identifier, this.selectedPaths[i])); + datasetPathArray.push(new DatasetPath(this.dcatVocabulary[i], this.selectedPaths[i])); } else { - datasetPathArray.push(new DatasetPath(this.datasetModel[i].identifier, "")); + datasetPathArray.push(new DatasetPath(this.dcatVocabulary[i], "")); } } @@ -346,20 +338,52 @@ export class MappingComponent implements OnInit { let reader = new FileReader(); let datasetPath: DatasetPath[] = []; reader.onloadend = () => { - datasetPath = <DatasetPath[]>JSON.parse(reader.result as string); - datasetPath.forEach(e => { - this.selectedPaths[datasetPath.indexOf(e)] = e.path; - }) + for (let i = 0; i < datasetPath.length; i++) { + this.selectedPaths[i] = datasetPath[i].path; + if (typeof datasetPath[i].dcatProperty === 'string') { + this.dcatVocabulary[i] = new Dataset('',<string> datasetPath[i].dcatProperty, ''); + } else { + this.dcatVocabulary[i] = <Dataset> datasetPath[i].dcatProperty; + } + } } reader.readAsText(jsonFile); } addField(index: number) { - + this.dcatVocabulary.splice(index + 1, 0, this.dcatVocabulary[index]); + console.log('add'); + } + + deleteField(index: number) { + this.dcatVocabulary.splice(index, 1); } + + isMultiple(dataset: Dataset): boolean { + let bool: boolean = true; + switch (dataset.identifier) { + case "dct:isPartOf": + bool = false; + break; + case "dcat:landingPage": + bool = false; + break; + case "dcat:contactPoint": + bool = false; + break; + case "foaf:homePage": + bool = false; + break; + default: + bool = true; + break; + } + return bool; + } + // to delete a property of dcat dataset mapped - deleteProperty(key: string) { + deleteProperty(key: number) { this.mappedMetadatas[this.index].delete(key); } diff --git a/src/styles.scss b/src/styles.scss index 5efd1a01aadf7dec8161b1ce3efc1bc5b1558f29..1d822f21d2e6efa5528412a3252bfe3b3cf495bb 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -71,78 +71,77 @@ textarea { font-size: 1em; padding-left: .4em; } +.row { + display: flex; + flex: 1 0 calc(100%); + margin: 5px -0.5rem; + +} .col-1 { flex: 0 0 auto; width: 8.33333333%; - margin-right: 10px; + align-items: center; + } .col-2 { flex: 0 0 auto; width: 16.66666667%; - margin-right: 10px; + } .col-3 { flex: 0 0 auto; width: 25%; - margin-right: 10px; - + } .col-4 { flex: 0 0 auto; width: 33.33333333%; - margin-right: 10px; } .col-5 { flex: 0 0 auto; width: 41.66666667%; - margin-right: 10px; } .col-6 { flex: 0 0 auto; width: 50%; - margin-right: 10px; } .col-7 { flex: 0 0 auto; width: 58.33333333%; - margin-right: 10px; } .col-8 { flex: 0 0 auto; width: 66.66666667%; - margin-right: 10px; + + } .col-9 { flex: 0 0 auto; width: 75%; - margin-right: 10px; } .col-10 { flex: 0 0 auto; width: 83.33333333%; - margin-right: 10px; } .col-11 { flex: 0 0 auto; width: 91.66666667%; - margin-right: 10px; } .col-12 { flex: 0 0 auto; width: 100%; - margin-right: 10px; }