implement frontend prefill function

README.md

@@ -41,16 +41,18 @@ b)	Uploading your own SHACL- Schemata
 #### Upload shape Page
 
 ![screenshot3.png](./documentation/screenshots/Picture3.png)
-7) Click on Choose File to select your own schema
+7.1) Click on Choose File to select your own schema
 
-8) Your selected file name should appear above the button, afterwards click the upload button
+7.2) Click on Choose File to select your own claim file matching the schema to prefill the formfields (optional)
+
+8) Your selected file names should appear above the button, afterwards click the upload button
 
 #### Complete Form Page
 ![screenshot4.png](./documentation/screenshots/Picture4.png)
 
-The language can also be changed from this page
+9) The language can also be changed from this page
 
-10)  Fill out the fields (Required fields are demonstrated with an *)
+10) Fill out the fields (Required fields are demonstrated with an *)
 
 11) Save/Export the generated Self-Description
 
@@ -107,6 +109,40 @@ ex:DatasetShape
     ] ;
 	.
 ```
+Example claim file for uploading:
+```
+{
+  "@context": {
+    "xsd": "http://www.w3.org/2001/XMLSchema#",
+    "ex": "http://example.com/ns#",
+    "dct": "http://purl.org/dc/terms/",
+    "dcat": "http://www.w3.org/ns/dcat#",
+    "sh": "http://www.w3.org/ns/shacl#"
+  },
+  "@id": "did:example:1234",
+  "@type": "dcat:Dataset",
+  "dct:title": {
+    "@value": "Example",
+    "@type": "xsd:string"
+  },
+  "dct:description": {
+    "@value": "Example",
+    "@type": "xsd:string"
+  },
+  "dcat:startDate": {
+    "@value": "2024-07-17T12:51:32",
+    "@type": "xsd:dateTime"
+  },
+  "dcat:endDate": {
+    "@value": "2024-07-18T12:51:34",
+    "@type": "xsd:dateTime"
+  },
+  "dcat:keyword": {
+    "@value": "Example",
+    "@type": "xsd:string"
+  }
+}
+```
 Exported TTL:
 ```
 @prefix xsd: <http://www.w3.org/2001/XMLSchema#>.

implementation/src/app/core/dynamic-form/components/dynamic-form-input/dynamic-form-input.component.ts

@@ -28,8 +28,10 @@ export class DynamicFormInputComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if (this.input.datatype !== undefined && this.input.datatype.value === 'boolean') {
+    if (this.input.datatype !== undefined && this.input.datatype.value === 'boolean' && this.input.value === undefined) {
       this.form.get(this.input.id).setValue(false);
+    } else if (this.input.datatype !== undefined && this.input.datatype.value === 'boolean' && this.input.value === 'true') {
+      this.form.get(this.input.id).setValue(true);
     }
   }
 

implementation/src/app/core/dynamic-form/services/api.service.ts

@@ -36,6 +36,14 @@ export class ApiService {
     return this.httpClient.post(`${apiUrl}/convertFile`, data);
   }
 
+  uploadShaclAndJson(file: File, jsonFile: File): Observable<any> {
+    const apiUrl = Utils.controlUrl(environment.apiUrl);
+    const data = new FormData();
+    data.append('file', file);
+    data.append('jsonFile', jsonFile);
+    return this.httpClient.post(`${apiUrl}/convertAndPrefillFile`, data);
+  }
+
   getFiles(): Observable<any> {
     const apiUrl = Utils.controlUrl(environment.apiUrl);
     return this.httpClient.get(`${apiUrl}/getAvailableShapes`);

implementation/src/app/core/dynamic-form/services/form-field.service.ts

@@ -16,18 +16,26 @@ export class FormfieldControlService {
 
   }
 
-  readShaclFile(data: any): ShaclFile {
+  readJsonFile(data: any): Map<string, string> {
+    const resultMap: Map<string, string> = new Map();
+    Object.entries(data).forEach(([key, value]) => {
+      resultMap.set(key, String(value));
+    });
+    return resultMap; 
+  }
+
+  readShaclFile(data: any, values: Map<string, string> = undefined): ShaclFile {
     // Create a shacl file object
     const file: ShaclFile = new ShaclFile();
     if (data === undefined) {
       data = this.apiService.getFieldsFromFile();
     }
-    file.shapes = this.getShapes(data.shapes);
     file.prefixes = this.getPrefixes(data.prefixList);
+    file.shapes = this.getShapes(data.shapes, file.prefixes, values);
     return file;
   }
 
-  getShapes(shapes: any): Shape[] {
+  getShapes(shapes: any, prefixesList: Prefix[] = undefined, values: Map<string, string> = undefined): Shape[] {
     // Create an array (FormFieldsGroups) for all shapes
     const formFieldsShapes: Shape[] = [];
     Array.prototype.forEach.call(shapes, shapesGroup => {
@@ -72,6 +80,18 @@ export class FormfieldControlService {
           // Add the datatype
           formField.datatype = this.getDataType(formField);
 
+          // Add values, if URI matches one of the elements of the provided map
+          if (values !== undefined && prefixesList !== undefined) {
+            const prefixMap: Map<string, string> = new Map();
+            prefixesList.forEach(pref => {
+              prefixMap.set(pref.alias, pref.url);
+            });
+            const fieldURI: string = prefixMap.get(formField.prefix) + formField.key;
+            if (values.has(fieldURI)) {
+              formField.value = values.get(fieldURI).split("^^")[0];
+            }
+          }
+          
           formFields.push(formField);
         });
         formFieldShape.fields = formFields.sort((a, b) => a.order - b.order);
@@ -157,14 +177,16 @@ export class FormfieldControlService {
   toGroup(inputs: FormField[] = [], group: any = {}) {
     inputs?.forEach(input => {
       const validator = this.validationService.getValidatorFn(input);
+      const valueToPrefill = (input.datatype.value && input.value) ? this.getValueBasedOnDatatype(input.datatype.value, input.value) : input.value;
+      
       if (input.componentType === 'dynamicExpanded' && !input.selfLoop) {
         let nestedForm: any;
         nestedForm = this.toGroup(input.childrenFields, nestedForm);
         const nestedFormGroup = new FormGroup(nestedForm, validator);
         group[input.id] = nestedFormGroup;
       } else {
-        group[input.id] = validator.length > 0 ? new FormControl(input.value || null, validator)
-          : new FormControl(input.value || null);
+        group[input.id] = validator.length > 0 ? new FormControl(valueToPrefill || null, validator)
+          : new FormControl(valueToPrefill || null);
         if (input.componentType === 'dynamicFormArray') {
           group[input.id] = new FormArray([group[input.id]]);
         }
@@ -232,6 +254,30 @@ export class FormfieldControlService {
     return controlType;
   }
 
+  getValueBasedOnDatatype(dataType: string, value: string) {
+    if (dataType !== undefined) {
+      switch (dataType) {
+        case 'string':
+        case 'anyURI':
+          return value;
+        case 'boolean':
+          return value === 'true';
+        case 'integer':
+        case 'float':
+        case 'decimal':
+          return Number(value);
+        case 'dateTime':
+        case 'date':
+        case 'dateTimeStamp':
+          return new Date(value);
+        default:
+          console.log('Unknown Datatype, no prefill possible', dataType);
+          return value;
+      }
+    }
+    return value;
+  }
+
   getDataType(field: FormField): any {
     let datatype = field.datatype;
     // Add default datatype when datatype is undefinded

implementation/src/app/core/file-upload/component/file-upload.component.html

 <form (ngSubmit)="onSubmit()" [formGroup]="form">
   <div class="wrapper">
     <div class="file-upload">
+      <p>Upload your shape-file here:</p>
       <input
-        (change)="onFileChange($event)"
+        (change)="onFileChange($event, 'fileSource')"
         accept=".ttl"
         class="form-control"
         formControlName="file"
         id="file"
         type="file">
+        <p>Upload your optional json-file to prefill your shape-file here:</p>
+        <input
+        (change)="onFileChange($event, 'fileSourceJson')"
+        accept=".json"
+        class="form-control"
+        formControlName="fileJson"
+        id="fileJson"
+        type="file">
       <button [disabled]="form.invalid" class="upload-button" color="primary" mat-raised-button>Upload</button>
     </div>
     <mat-error *ngIf="f.fileSource.errors?.fileExtension">{{'file-upload.typeError'|translate}}</mat-error>

implementation/src/app/core/file-upload/component/file-upload.component.ts

@@ -22,10 +22,12 @@ export class FileUploadComponent implements OnInit {
 
   @Input() closeModal: (id: string) => void;
   file: File | null = null;
-  allowedExtensions = ['ttl'];
+  fileJson: File | null = null;
+  allowedExtensions = ['ttl', 'json'];
   form: FormGroup;
   requestError: boolean;
-  shaclFile: ShaclFile;
+  shaclFileContent: ShaclFile;
+  jsonFileContent: Map<string, string>;
   filteredShapes: Shape[];
   private subscription: Subscription | undefined;
   
@@ -35,10 +37,11 @@ export class FileUploadComponent implements OnInit {
     private router: Router,
     private formfieldService: FormfieldControlService 
   ) {
-
     this.form = this.formBuilder.group({
       file: new FormControl('', [Validators.required, FileValidator.fileExtensions(this.allowedExtensions)]),
-      fileSource: new FormControl('', [Validators.required, FileValidator.fileExtensions(this.allowedExtensions)])
+      fileSource: new FormControl('', [Validators.required, FileValidator.fileExtensions(this.allowedExtensions)]),
+      fileJson: new FormControl('', [FileValidator.fileExtensions(this.allowedExtensions)]),
+      fileSourceJson: new FormControl('', [FileValidator.fileExtensions(this.allowedExtensions)])
     });
   }
 
@@ -49,32 +52,57 @@ export class FileUploadComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  onFileChange(event): void {
-
+  onFileChange(event, fileSourceKey: string): void {
     if (event.target.files.length > 0) {
       const file = event.target.files[0];
       this.form.patchValue({
-        fileSource: file
+        [fileSourceKey]: file
       });
     }
   }
 
   onSubmit(): void {
-    this.subscription = this.apiService.upload(this.form.get('fileSource').value).subscribe(
-      res => {
-        console.log(res);
-        this.shaclFile = this.formfieldService.readShaclFile(res);
-        console.log(this.shaclFile);
-        this.filteredShapes = this.formfieldService.updateFilteredShapes(this.shaclFile);
-        if (this.filteredShapes.length > 1) {
-          this.router.navigate(['/select-shape'], {state: {file: this.shaclFile}});
-        } else {
-          this.updateSelectedShape();
-          this.router.navigate(['/form'], {state: {file: this.shaclFile}});
+    if (this.form.get('fileSourceJson').value === "") {
+      this.subscription = this.apiService.upload(this.form.get('fileSource').value).subscribe(
+        res => {
+          console.log(res);
+          this.shaclFileContent = this.formfieldService.readShaclFile(res);
+          console.log(this.shaclFileContent);
+          this.filteredShapes = this.formfieldService.updateFilteredShapes(this.shaclFileContent);
+          if (this.filteredShapes.length > 1) {
+            this.router.navigate(['/select-shape'], {state: {file: this.shaclFileContent}});
+          } else {
+            this.updateSelectedShape();
+            this.router.navigate(['/form'], {state: {file: this.shaclFileContent}});
+          }
+        },
+        err => this.requestError = true
+      );
+    } else {
+      this.subscription = this.apiService.uploadShaclAndJson(this.form.get('fileSource').value, this.form.get('fileSourceJson').value).subscribe(
+        res => {
+          console.log("res.shaclModel: ", res.shaclModel);
+          console.log("res.matchedSubjects: ", res.matchedSubjects);
+          
+          this.jsonFileContent = this.formfieldService.readJsonFile(res.matchedSubjects);
+          this.shaclFileContent = this.formfieldService.readShaclFile(res.shaclModel, this.jsonFileContent);
+
+          console.log("shaclFile: ", this.shaclFileContent);
+          console.log("jsonFile: ", this.jsonFileContent);
+          
+          this.filteredShapes = this.formfieldService.updateFilteredShapes(this.shaclFileContent);
+          if (this.filteredShapes.length > 1) {
+            this.router.navigate(['/select-shape'], {state: {file: this.shaclFileContent}});
+          } else {
+            this.updateSelectedShape();
+            this.router.navigate(['/form'], {state: {file: this.shaclFileContent}}); 
+          }
+        },
+        err => {
+          this.requestError = true;
         }
-      },
-      err => this.requestError = true
-    );
+      );
+    }
     //this.modal.close('upload-modal');    
     //console.log("Call closing statement here");
    this.notify.emit(true);
@@ -83,7 +111,7 @@ export class FileUploadComponent implements OnInit {
   updateSelectedShape(): void {
     const shape = this.filteredShapes[0];
     if (shape !== undefined) {
-      this.shaclFile.shapes.find(x => x.name === shape.name).selected = true;
+      this.shaclFileContent.shapes.find(x => x.name === shape.name).selected = true;
     }
   }
 }