From 19113714f13d8abe25934dc745e8c7eb8a2137f7 Mon Sep 17 00:00:00 2001
From: Baptiste Toulemonde <toulemonde@cines.fr>
Date: Wed, 25 Aug 2021 16:36:55 +0200
Subject: [PATCH] feature: add field
---
src/app/mapping/mapping.component.html | 21 ++++++++++++------
src/app/mapping/mapping.component.scss | 13 ++++-------
src/app/mapping/mapping.component.ts | 30 ++++++++++++++------------
src/styles.scss | 24 ++++++++++-----------
4 files changed, 46 insertions(+), 42 deletions(-)
diff --git a/src/app/mapping/mapping.component.html b/src/app/mapping/mapping.component.html
index 2a4359bbc..8138d2998 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 obsDatasetModel | async; let index = index ;trackBy:trackByIndex ;">
<nb-form-field>
<div class="row">
- <div class="col-4">
+ <div class="col-3">
<nb-form-field>
<input
@@ -41,7 +41,7 @@
*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,7 +50,7 @@
*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()" />
@@ -63,7 +63,16 @@
</nb-autocomplete>
</nb-form-field>
</div>
-
+ <div class="col-1">
+ <button nbButton ghost *ngIf="dataset !== datasetModel[index-1]">
+ <nb-icon icon="plus-square-outline" status="primary" (click)="addField(index)">
+ </nb-icon>
+ </button>
+ <button nbButton ghost *ngIf="dataset === datasetModel[index-1]">
+ <nb-icon icon="trash-2-outline" status="danger" (click)="deleteField(index)">
+ </nb-icon>
+ </button>
+ </div>
</div>
</nb-form-field>
</ng-container>
@@ -89,7 +98,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}}">{{datasetModel[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 1227abfb2..61337c0e9 100644
--- a/src/app/mapping/mapping.component.scss
+++ b/src/app/mapping/mapping.component.scss
@@ -4,13 +4,8 @@
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%;
flex: calc(50% );
@@ -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 0cc4c1ca3..862ab4ce0 100644
--- a/src/app/mapping/mapping.component.ts
+++ b/src/app/mapping/mapping.component.ts
@@ -25,11 +25,11 @@ export class MappingComponent implements OnInit {
itemsdataset: Object[] = []
datasetModel: Dataset[];
+ obsDatasetModel: 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;
@@ -48,13 +48,13 @@ export class MappingComponent implements OnInit {
this.dataSetService.getLocally('./assets/dataset.json').subscribe(
dataset => {
this.datasetModel = dataset;
- this.selectedPaths = new Array(dataset.length);
+ this.obsDatasetModel = of(this.datasetModel)
+ this.selectedPaths = [];
},
error => {
console.error(error);
},
);
- this.obsMappedMetadatas = of(this.mappedMetadatas)
this.populatecatalogue();
console.log("TYPE: " + this.type)
}
@@ -71,12 +71,13 @@ 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 +95,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.datasetModel[index].identifier;
+ (value.length > 0 && typeof value === "string") ? value = this.replaceAll(value, '\n', '') : value;
if (key === 'dct:title') { title = value };
switch (key) {
case 'dct:landingPage':
@@ -289,9 +291,6 @@ export class MappingComponent implements OnInit {
}
}
-
-
-
mapDataset() {
this.loadingCr = true;
this.mappedMetadatas = [];
@@ -356,10 +355,13 @@ export class MappingComponent implements OnInit {
}
addField(index: number) {
-
+ this.datasetModel.splice(index + 1, 0, this.datasetModel[index]); }
+
+ deleteField(index: number) {
+ this.datasetModel.splice(index, 1);
}
// 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 5efd1a01a..6d26321aa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -71,78 +71,76 @@ textarea {
font-size: 1em;
padding-left: .4em;
}
+.row {
+ --bs-gutter-x: 1.5rem;
+ --bs-gutter-y: 0;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(var(--bs-gutter-y) * -1);
+ margin-right: calc(var(--bs-gutter-x) * -.5);
+ margin-left: calc(var(--bs-gutter-x) * -.5);
+}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
- margin-right: 10px;
}
.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;
}
--
GitLab