.gitpod.yml

@@ -9,16 +9,18 @@ tasks:
     init: |
       yarn install
       yarn build
-      yarn link
       gp sync-done bundle
     command: yarn dev
   - name: frontend
     before: cd  ../frontend
     init: |
       gp sync-await bundle
-      yarn link "@coscine/form-generator"
+      yarn link ../form-generator
       yarn install
     command: yarn dev
 vscode:
   extensions:
-    - lukashass.volar
+    - arcanis.vscode-zipfs
+    - dbaeumer.vscode-eslint
+    - esbenp.prettier-vscode
+    - vue.volar

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "arcanis.vscode-zipfs",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "vue.volar"
   ]
 }

README.md

@@ -6,6 +6,8 @@ This repository contains the [SHACL](https://www.w3.org/TR/shacl/) form-generato
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://git.rwth-aachen.de/coscine/frontend/libraries/form-generator)
 
+(For a specific branch, build such a URL: `https://gitpod.io/#https://git.rwth-aachen.de/coscine/frontend/libraries/form-generator/tree/{branch}`)
+
 ## Project setup
 ```
 yarn install

package.json

 {
   "name": "@coscine/form-generator",
-  "version": "3.0.12",
+  "version": "3.1.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "browser": "dist/index.js",
@@ -34,6 +34,7 @@
     "rdf-parse": "^1.8.0",
     "rdf-validate-shacl": "^0.4.4",
     "stream-browserify": "^3.0.0",
+    "uuid": "^9.0.0",
     "vue-demi": "^0.13.11",
     "vue-i18n": "^8.22.2",
     "vue-material-design-icons": "^5.1.2",
@@ -60,6 +61,7 @@
     "@types/rdf-ext": "^1.3.11",
     "@types/rdf-js": "^4.0.1",
     "@types/rdf-validate-shacl": "^0.4.0",
+    "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
     "@vitejs/plugin-vue2": "^1.1.2",
@@ -98,5 +100,5 @@
     "url": "https://git.rwth-aachen.de/coscine/frontend/libraries/form-generator.git"
   },
   "license": "MIT",
-  "packageManager": "yarn@3.3.0"
+  "packageManager": "yarn@3.3.1"
 }

src/FormGenerator.spec.ts

@@ -8,6 +8,7 @@ import Multiselect from '@/plugins/deprecated/Multiselect.vue';
 import FormGenerator from '@/FormGenerator.vue';
 
 import { listApplicationProfile } from '@/data/example/applicationProfile';
+import { listFixedValues } from '@/data/example/fixedValues';
 import { listMetadata } from '@/data/example/metadata';
 
 function sleep(ms: number) {
@@ -20,15 +21,87 @@ const localVue = createLocalVue();
 describe('FormGenerator.vue', () => {
   localVue.component('MultiSelect', Multiselect);
 
+  const defaultDisplayName = 'Tester Testington';
+
   /* Checks for correct functionality of lists */
-  test('list', async () => {
+  test('listWithoutMetadata', async () => {
     const wrapper = mount(FormGenerator, {
       propsData: {
+        fixedValues: listFixedValues,
+        selectedShape: 'https://aims-projekt.de/ap/person/',
+        shapes: listApplicationProfile,
+        shapesMimeType: 'text/turtle',
+        userReceiver: () => {
+          return {
+            displayName: defaultDisplayName,
+          };
+        },
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    // Wait for 1 second until everything is set up
+    await sleep(1000);
+
+    expect(wrapper.emitted('isValid')).toBeTruthy();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    expect(wrapper.emitted('isValid')!.length).toBe(1);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    expect(wrapper.emitted('isValid')![0][0].conforms).toBeFalsy();
+
+    const allTextFields = wrapper.findAllComponents({ name: 'InputTextField' });
+    expect(allTextFields.length).toBe(5);
+
+    // Default value has been set
+    const defaultUserField = allTextFields.wrappers.filter(
+      (entry) => entry.vm?.$data?.object?.value === defaultDisplayName
+    );
+    expect(defaultUserField.length).toBe(1);
+
+    // Fixed value has been set
+    const fixedUserField = allTextFields.wrappers.filter(
+      (entry) => entry.vm?.$data?.object?.value === 'NichtMustermann'
+    );
+    expect(fixedUserField.length).toBe(1);
+
+    const email = allTextFields.wrappers.find(
+      (component) =>
+        component.vm.$props?.nodeName === 'http://xmlns.com/foaf/0.1/mbox'
+    );
+
+    if (email) {
+      const textInput = email.find('input[type="text"]');
+      await textInput.setValue('example@example.com');
+    }
+
+    await wrapper.vm.$nextTick();
+
+    // Wait for 1 second until validation has been done
+    await sleep(1000);
+
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      wrapper.emitted('isValid')![wrapper.emitted('isValid')!.length - 1][0]
+        .conforms
+    ).toBeTruthy();
+  });
+
+  /* Checks for correct functionality of lists */
+  test('listWithMetadata', async () => {
+    const wrapper = mount(FormGenerator, {
+      propsData: {
+        fixedValues: listFixedValues,
         formData: listMetadata,
         formDataMimeType: 'text/turtle',
         selectedShape: 'https://aims-projekt.de/ap/person/',
         shapes: listApplicationProfile,
         shapesMimeType: 'text/turtle',
+        userReceiver: () => {
+          return {
+            displayName: defaultDisplayName,
+          };
+        },
       },
     });
 
@@ -43,7 +116,24 @@ describe('FormGenerator.vue', () => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     expect(wrapper.emitted('isValid')![0][0].conforms).toBeTruthy();
 
-    expect(wrapper.find('.InputList .multiselect__single').exists()).toBe(true);
+    const allTextFields = wrapper.findAllComponents({ name: 'InputTextField' });
+    expect(allTextFields.length).toBe(5);
+
+    // Default value has been set
+    const defaultUserField = allTextFields.wrappers.filter(
+      (entry) => entry.vm?.$data?.object?.value === 'Max'
+    );
+    expect(defaultUserField.length).toBe(1);
+
+    // Fixed value has been set
+    const fixedUserField = allTextFields.wrappers.filter(
+      (entry) => entry.vm?.$data?.object?.value === 'Mustermann'
+    );
+    expect(fixedUserField.length).toBe(1);
+
+    expect(
+      wrapper.find('.InputList .multiselect__single').exists()
+    ).toBeTruthy();
     expect(wrapper.get('.InputList .multiselect__single').text()).toBe(
       'Banana'
     );

src/components/InputTextField.vue

@@ -61,6 +61,10 @@ export default defineComponent({
       default: false,
       type: Boolean,
     },
+    nodeName: {
+      default: '',
+      type: String,
+    },
     disabledMode: {
       default: false,
       type: Boolean,

src/components/WrapperInput.vue

@@ -10,11 +10,31 @@
       }"
       label-cols-sm="3"
       label-align-sm="right"
-      :label="label"
       :label-class="
         'application-profile-label' + (required ? ' mandatory' : '')
       "
     >
+      <!-- Label Template -->
+      <template #label>
+        <!-- Label -->
+        <span>{{ label }}</span>
+
+        <div v-if="description" class="d-inline ml-1">
+          <!-- Information Circle Icon -->
+          <b-icon :id="labelFor" icon="info-circle" />
+
+          <!-- Popover -->
+          <b-popover
+            over
+            :target="labelFor"
+            triggers="hover focus"
+            placement="bottom"
+          >
+            {{ description }}
+          </b-popover>
+        </div>
+      </template>
+
       <b-button-toolbar v-for="(entry, entryIndex) in values" :key="entryIndex">
         <component
           :is="componentDefinition"
@@ -34,6 +54,7 @@
           :attached-metadata="attachedMetadata[entryIndex]"
           :dataset="dataset"
           :node-import="nodeImport"
+          :node-name="nodeName"
           :class-receiver="classReceiver"
           :user-receiver="userReceiver"
           @input="inputValue(entryIndex, $event)"
@@ -122,6 +143,8 @@ import {
   BFormGroup,
 } from 'bootstrap-vue';
 
+import { v4 as uuidv4 } from 'uuid';
+
 import InputCombobox from './InputCombobox.vue';
 import InputTextField from './InputTextField.vue';
 import InputDatePicker from './InputDatePicker.vue';
@@ -229,8 +252,9 @@ export default defineComponent({
   },
   data() {
     return {
-      locked: false,
       invisible: false,
+      labelFor: uuidv4(),
+      locked: false,
       values: [] as Quad_Object[],
     };
   },
@@ -321,6 +345,18 @@ export default defineComponent({
       }
       return undefined;
     },
+    description(): string | undefined {
+      const descriptions = getObject(
+        this.property,
+        factory.namedNode(prefixes.sh + 'description'),
+        this.dataset,
+        this.languageLocale
+      );
+      for (const description of descriptions) {
+        return description.object.value;
+      }
+      return undefined;
+    },
     fieldCanBeInvisible(): boolean {
       return (
         (this.required &&
@@ -484,8 +520,8 @@ export default defineComponent({
       this.initFixedValues();
     },
     metadata() {
-      this.initMetadata();
       this.setValuesFromMetadataValues();
+      this.fillMetadata();
     },
   },
   beforeMount() {
@@ -508,10 +544,20 @@ export default defineComponent({
       }
       this.setFixedValues(this.values);
     },
+    fillMetadata() {
+      // Set values if they don't exist
+      if (!this.values.length) {
+        const numberOfNewFields = this.isNode ? 0 : 1;
+        // Setting more than one will not work since a dataset does not support multiple triples
+        // which are the same ?s ?p ?o
+        this.insertNewFields(numberOfNewFields);
+      }
+    },
     initDefaultValues() {
       if (
-        !this.values.length ||
-        this.values.every((entry) => entry.value === '')
+        (!this.values.length ||
+          this.values.every((entry) => entry.value === '')) &&
+        !this.locked
       ) {
         const fixedValueObject = this.fixedValues[this.nodeName];
         const datasetMatches = this.dataset.match(
@@ -561,13 +607,7 @@ export default defineComponent({
     },
     initMetadata() {
       this.values = [...this.metadataValues];
-      // Set values if they don't exist
-      if (!this.values.length) {
-        const numberOfNewFields = this.isNode ? 0 : 1;
-        // Setting more than one will not work since a dataset does not support multiple triples
-        // which are the same ?s ?p ?o
-        this.insertNewFields(numberOfNewFields);
-      }
+      this.fillMetadata();
     },
     input(values: Quad_Object[], fixedValueTransfer = true) {
       this.$emit('input', this.nodeName, values);
@@ -638,16 +678,49 @@ export default defineComponent({
       this.inputFixedValues(currentFixedValueObject);
     },
     setValuesFromMetadataValues() {
-      this.values = this.values.filter((entry) =>
+      // What values will be kept from this.values
+      const keptValues = this.values.map((entry) =>
         this.metadataValues.some(
           (metadataEntry) => entry.value === metadataEntry.value
         )
+          ? entry
+          : false
       );
+      // What values are new in this.metadataValues
       const newValues = this.metadataValues.filter(
         (metadataEntry) =>
-          !this.values.some((entry) => entry.value === metadataEntry.value)
+          !keptValues.some(
+            (entry) => entry !== false && entry.value === metadataEntry.value
+          )
       );
-      this.values = [...this.values, ...newValues];
+
+      let currentAddKey = 0;
+      const removeKeys: number[] = [];
+      // Update every value which is not kept with a new value
+      for (let i = 0; i < this.values.length; i++) {
+        if (keptValues[i] === false) {
+          if (currentAddKey < newValues.length) {
+            this.values[i] = newValues[currentAddKey];
+            currentAddKey++;
+          } else {
+            removeKeys.push(i);
+          }
+        }
+      }
+      // Add values which have not been added
+      for (let i = currentAddKey; i < newValues.length; i++) {
+        this.values.push(newValues[i]);
+      }
+
+      // Create a list with every to keep and new value
+      const setNewValues: Quad_Object[] = [];
+      for (let i = 0; i < this.values.length; i++) {
+        if (!removeKeys.includes(i)) {
+          setNewValues.push(this.values[i]);
+        }
+      }
+
+      this.values = setNewValues;
     },
     triggerValidation() {
       this.$emit('triggerValidation');

src/data/example/applicationProfile.ts

@@ -19,12 +19,14 @@ export const listApplicationProfile = `@prefix dcterms: <http://purl.org/dc/term
 		sh:datatype xsd:string ;
 		sh:minCount 1 ;
 		sh:name "First Name"@en, "Vorname"@de ;
+		sh:defaultValue "{ME}" ;
 		sh:order 1 ;
 		sh:path foaf:firstName ;
 	], [
 		sh:datatype xsd:string ;
 		sh:minCount 1 ;
 		sh:name "Last Name"@en, "Nachname"@de ;
+		sh:defaultValue "{ME}" ;
 		sh:order 2 ;
 		sh:path foaf:lastName ;
 	], [

src/data/example/fixedValues.ts

+export const listFixedValues = {
+  'http://example.org/fruits': {
+    'https://purl.org/coscine/defaultValue': [
+      {
+        value: 'Orange',
+        type: 'literal',
+      },
+    ],
+    'https://purl.org/coscine/invisible': [
+      {
+        value: '0',
+        type: 'literal',
+      },
+    ],
+  },
+  'http://xmlns.com/foaf/0.1/firstName': {
+    'https://purl.org/coscine/defaultValue': [
+      {
+        value: '{ME}',
+        type: 'literal',
+      },
+    ],
+    'https://purl.org/coscine/invisible': [
+      {
+        value: '0',
+        type: 'literal',
+      },
+    ],
+  },
+  'http://xmlns.com/foaf/0.1/lastName': {
+    'https://purl.org/coscine/fixedValue': [
+      {
+        value: 'NichtMustermann',
+        type: 'literal',
+      },
+    ],
+    'https://purl.org/coscine/invisible': [
+      {
+        value: '0',
+        type: 'literal',
+      },
+    ],
+  },
+};

yarn.lock

@@ -342,6 +342,7 @@ __metadata:
     "@types/rdf-ext": ^1.3.11
     "@types/rdf-js": ^4.0.1
     "@types/rdf-validate-shacl": ^0.4.0
+    "@types/uuid": ^9.0.0
     "@typescript-eslint/eslint-plugin": ^5.38.0
     "@typescript-eslint/parser": ^5.38.0
     "@vitejs/plugin-vue2": ^1.1.2
@@ -374,6 +375,7 @@ __metadata:
     semantic-release: ^19.0.5
     stream-browserify: ^3.0.0
     typescript: ^4.8.3
+    uuid: ^9.0.0
     vite: ^3.2.4
     vitest: ^0.25.3
     vue: ^2.7.10
@@ -1547,6 +1549,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@types/uuid@npm:9.0.0"
+  checksum: 59ae56d9547c8758588659da2a2b4c97cce79c2aae1798c892bb29452ef08e87859dea2ec3a66bfa88d0d2153147520be2b1893be920f9f0bc9c53a3207ea6aa
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^5.0.0, @typescript-eslint/eslint-plugin@npm:^5.38.0":
   version: 5.43.0
   resolution: "@typescript-eslint/eslint-plugin@npm:5.43.0"
@@ -9720,6 +9729,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uuid@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "uuid@npm:9.0.0"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 8dd2c83c43ddc7e1c71e36b60aea40030a6505139af6bee0f382ebcd1a56f6cd3028f7f06ffb07f8cf6ced320b76aea275284b224b002b289f89fe89c389b028
+  languageName: node
+  linkType: hard
+
 "v8-to-istanbul@npm:^9.0.0":
   version: 9.0.1
   resolution: "v8-to-istanbul@npm:9.0.1"