.eslintignore

+**/*.js
\ No newline at end of file

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   ],
   parserOptions: {
     ecmaVersion: 2020,
+    project: "./tsconfig.json"
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

package.json

 {
   "name": "@coscine/form-generator",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.common.js",
   "browser": "dist/index.umd.min.js",
@@ -22,7 +22,7 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.31.0",
+    "@coscine/api-client": "^1.3.0",
     "@coscine/app-util": "^1.9.0",
     "bootstrap-vue": "^2.20.1",
     "rdf-ext": "^1.3.4",
@@ -43,7 +43,6 @@
     "@semantic-release/gitlab": "^6.0.5",
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@types/jquery": "^3.5.2",
     "@types/node": "^14.14.20",
     "@types/rdf-js": "^4.0.0",
     "@types/rdf-validate-shacl": "^0.2.4",
@@ -63,7 +62,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^2.2.1",
     "semantic-release": "^17.3.1",
-    "typescript": "^4.1.3",
+    "typescript": "~4.4.3",
     "vue-template-compiler": "^2.6.14"
   },
   "repository": {
@@ -71,5 +70,5 @@
     "url": "https://git.rwth-aachen.de/coscine/frontend/libraries/form-generator.git"
   },
   "license": "MIT",
-  "packageManager": "yarn@3.1.0"
+  "packageManager": "yarn@3.1.1"
 }

src/FormGenerator.vue

@@ -3,11 +3,8 @@
     <div v-for="(formElement, index) in sortedSHACLDefinition" :key="index">
       <WrapperInput
         :componentDefinition="fieldDefinition(formElement)"
-        :idForFixedValues="fixedValueIds[index]"
         :formFieldInformation="formElement"
         :formData="formData"
-        :resourceId="resourceId"
-        :projectId="projectId"
         :fixedValueMode="fixedValueMode"
         :fixedValues="fixedValues"
         :disabledMode="disabledMode"
@@ -27,7 +24,6 @@
 import Vue from 'vue';
 
 import VueI18n from 'vue-i18n';
-import BootstrapVue from 'bootstrap-vue';
 import Vuelidate from 'vuelidate';
 
 import { Quad } from 'rdf-js';
@@ -37,7 +33,6 @@ import WrapperInput from './components/WrapperInput.vue';
 import LinkedDataHandler from './base/LinkedDataHandler';
 
 Vue.use(VueI18n);
-Vue.use(BootstrapVue);
 Vue.use(Vuelidate);
 
 const i18n = new VueI18n({
@@ -68,14 +63,6 @@ export default LinkedDataHandler.extend({
       default: () => ({}),
       type: Object,
     },
-    projectId: {
-      default: '00000000-0000-0000-0000-000000000000',
-      type: String,
-    },
-    resourceId: {
-      default: '00000000-0000-0000-0000-000000000000',
-      type: String,
-    },
     fixedValueMode: {
       default: false,
       type: Boolean,
@@ -101,7 +88,6 @@ export default LinkedDataHandler.extend({
     return {
       properties: [] as Array<Quad>,
       quads: [] as Array<Quad>,
-      fixedValueIds: [] as any[],
       sortedSHACLDefinition: [] as any[],
       errorMessages: {} as any,
       timeouts: {} as any,
@@ -215,13 +201,11 @@ export default LinkedDataHandler.extend({
       }
     },
     setSHACLDefinition(unmappedSubjects: any) {
-      this.fixedValueIds = [];
       this.sortedSHACLDefinition = [];
       let keys = Object.keys(unmappedSubjects).sort(
         (a, b) => parseInt(a, 10) - parseInt(b, 10)
       );
       for (let i = 0; i < keys.length; i++) {
-        this.fixedValueIds.push(unmappedSubjects[keys[i]][0].subject.value);
         this.sortedSHACLDefinition.push(unmappedSubjects[keys[i]]);
         const nodeName = FieldReader.getNodeName(unmappedSubjects[keys[i]]);
         const minCount = FieldReader.getMinCount(unmappedSubjects[keys[i]], 1);
@@ -286,6 +270,9 @@ export default LinkedDataHandler.extend({
         if (this.checkField(formElement, 'http://www.w3.org/ns/shacl#class')) {
           return 'InputCombobox';
         }
+        if (this.checkField(formElement, 'http://www.w3.org/ns/shacl#in')) {
+          return 'InputTextField';
+        }
       }
       return null;
     },

src/base/LinkedDataHandler.ts

@@ -4,7 +4,8 @@ import factory from 'rdf-ext';
 import SHACLValidator from 'rdf-validate-shacl';
 import rdfParser from 'rdf-parse';
 import { Readable } from 'stream';
-import { Quad } from 'rdf-js';
+import { DataFactory, DatasetCore, DatasetCoreFactory, Quad } from 'rdf-js';
+import ValidationReport from 'rdf-validate-shacl/src/validation-report';
 
 export default Vue.extend({
   data() {
@@ -17,7 +18,12 @@ export default Vue.extend({
       formData: any,
       quads: Array<Quad>,
       applicationProfileId: string
-    ) {
+    ): Promise<
+      ValidationReport<
+        DataFactory<Quad, Quad> &
+          DatasetCoreFactory<Quad, Quad, DatasetCore<Quad, Quad>>
+      >
+    > {
       // RDF/JSON => JSON-LD since the loadDataset function doesn't support RDF/JSON
       const combinedDataObject = [];
       const dataObject = this.processDataObject(formData, applicationProfileId);

src/components/InputBooleanCombobox.vue

@@ -111,8 +111,6 @@ export default Vue.extend({
     disabledMode: Boolean,
     checkField: Function,
     updateFixedValues: Function,
-    resourceId: String,
-    projectId: String,
     languageCode: String,
     v: Object,
     entryKey: Number,

src/components/InputCombobox.vue

@@ -23,8 +23,9 @@ import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
 Vue.component('multiselect', Multiselect);
 
-import { MetadataApi } from '@coscine/api-connection';
+import { MetadataApi } from '@coscine/api-client';
 import FieldReader from '@/util/FieldReader';
+import { Label } from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
 
 Vue.use(VueI18n);
 
@@ -61,34 +62,7 @@ export default Vue.extend({
     }
   },
   mounted() {
-    if (
-      typeof window.coscine !== 'undefined' &&
-      typeof window.coscine.authorization !== 'undefined' &&
-      typeof window.coscine.authorization.bearer !== 'undefined'
-    ) {
-      MetadataApi.getClassInstances(
-        this.projectId,
-        this.class,
-        (response: any) => {
-          if (
-            Array.isArray(response.data[this.languageCode]) &&
-            response.data[this.languageCode].length === 0
-          ) {
-            if (
-              Array.isArray(response.data.en) &&
-              response.data.en.length !== 0
-            ) {
-              this.selectableOptions = response.data.en;
-            } else {
-              this.selectableOptions = response.data.de;
-            }
-          } else {
-            this.selectableOptions = response.data[this.languageCode];
-          }
-          this.loadData();
-        }
-      );
-    }
+    this.retrieveLabels();
     if (this.fixedValueMode) {
       this.updateFixedValues(this.entryKey);
     }
@@ -96,8 +70,8 @@ export default Vue.extend({
   data() {
     return {
       class: '',
-      selectableOptions: [] as Record<string, unknown>[],
-      selectedOptions: [] as Record<string, unknown>[],
+      selectableOptions: [] as Label[],
+      selectedOptions: [] as Label[],
       maxNumberOfSelectedObjects: 10000,
     };
   },
@@ -140,6 +114,27 @@ export default Vue.extend({
       }
       this.$emit('triggerValidation');
     },
+    async retrieveLabels() {
+      try {
+        const response = await MetadataApi.metadataGetClassInstances(
+          this.class
+        );
+        if (this.languageCode === 'en' && response.data.en) {
+          this.selectableOptions = response.data.en;
+        } else if (this.languageCode === 'de' && response.data.de) {
+          this.selectableOptions = response.data.de;
+        } else if (response.data.en && response.data.en.length) {
+          this.selectableOptions = response.data.en;
+        } else if (response.data.de && response.data.de.length) {
+          this.selectableOptions = response.data.de;
+        } else {
+          this.selectableOptions = [];
+        }
+        this.loadData();
+      } catch {
+        // Method not available
+      }
+    },
   },
   props: {
     cssId: String,
@@ -153,8 +148,6 @@ export default Vue.extend({
     disabledMode: Boolean,
     checkField: Function,
     updateFixedValues: Function,
-    resourceId: String,
-    projectId: String,
     languageCode: String,
     v: Object,
     entryKey: Number,

src/components/InputDatePicker.vue

@@ -17,10 +17,15 @@
 <script lang="ts">
 import Vue from 'vue';
 
+import { BFormDatepicker } from 'bootstrap-vue';
+
 import FieldReader from '@/util/FieldReader';
 
 export default Vue.extend({
   name: 'InputDatePicker',
+  components: {
+    BFormDatepicker,
+  },
   beforeMount() {
     // take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
     this.replacePlaceholder();

src/components/InputTextArea.vue

@@ -12,11 +12,16 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import { UserApi } from '@coscine/api-connection';
+import { BFormTextarea } from 'bootstrap-vue';
+
+import { UserApi } from '@coscine/api-client';
 import FieldReader from '@/util/FieldReader';
 
 export default Vue.extend({
   name: 'InputTextArea',
+  components: {
+    BFormTextarea,
+  },
   beforeMount() {
     // take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
     this.replacePlaceholder();
@@ -80,27 +85,26 @@ export default Vue.extend({
       if (!this.fixedValueMode) {
         if (this.checkDataField(this.formData, this.nodeName, this.entryKey)) {
           if (this.formData[this.nodeName][this.entryKey]['value'] === '{ME}') {
-            if (
-              typeof window.coscine !== 'undefined' &&
-              typeof window.coscine.authorization !== 'undefined' &&
-              typeof window.coscine.authorization.bearer !== 'undefined'
-            ) {
-              UserApi.getUser((response: any) => {
-                this.$set(
-                  this.formData[this.nodeName][this.entryKey],
-                  'value',
-                  response.data.displayName
-                );
-                this.textValue =
-                  this.formData[this.nodeName][this.entryKey]['value'];
-                this.$forceUpdate();
-                this.$emit('triggerValidation');
-              });
-            }
+            this.retrieveUser();
           }
         }
       }
     },
+    async retrieveUser() {
+      try {
+        const response = await UserApi.userGetUser();
+        this.$set(
+          this.formData[this.nodeName][this.entryKey],
+          'value',
+          response.data.displayName
+        );
+        this.textValue = this.formData[this.nodeName][this.entryKey]['value'];
+        this.$forceUpdate();
+        this.$emit('triggerValidation');
+      } catch {
+        // No user exists
+      }
+    },
   },
 });
 </script>

src/components/InputTextField.vue

@@ -12,11 +12,16 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import { UserApi } from '@coscine/api-connection';
+import { BFormInput } from 'bootstrap-vue';
+
+import { UserApi } from '@coscine/api-client';
 import FieldReader from '@/util/FieldReader';
 
 export default Vue.extend({
   name: 'InputTextField',
+  components: {
+    BFormInput,
+  },
   beforeMount() {
     // take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
     this.replacePlaceholder();
@@ -85,27 +90,26 @@ export default Vue.extend({
       if (!this.fixedValueMode) {
         if (this.checkDataField(this.formData, this.nodeName, this.entryKey)) {
           if (this.formData[this.nodeName][this.entryKey]['value'] === '{ME}') {
-            if (
-              typeof window.coscine !== 'undefined' &&
-              typeof window.coscine.authorization !== 'undefined' &&
-              typeof window.coscine.authorization.bearer !== 'undefined'
-            ) {
-              UserApi.getUser((response: any) => {
-                this.$set(
-                  this.formData[this.nodeName][this.entryKey],
-                  'value',
-                  response.data.displayName
-                );
-                this.textValue =
-                  this.formData[this.nodeName][this.entryKey]['value'];
-                this.$forceUpdate();
-                this.$emit('triggerValidation');
-              });
-            }
+            this.retrieveUser();
           }
         }
       }
     },
+    async retrieveUser() {
+      try {
+        const response = await UserApi.userGetUser();
+        this.$set(
+          this.formData[this.nodeName][this.entryKey],
+          'value',
+          response.data.displayName
+        );
+        this.textValue = this.formData[this.nodeName][this.entryKey]['value'];
+        this.$forceUpdate();
+        this.$emit('triggerValidation');
+      } catch {
+        // No user exists
+      }
+    },
   },
 });
 </script>

src/components/WrapperInput.vue

@@ -29,8 +29,6 @@
           :nodeName="nodeName"
           :formFieldInformation="formFieldInformation"
           :formData="formData"
-          :resourceId="resourceId"
-          :projectId="projectId"
           :fixedValueMode="fixedValueMode"
           :fixedValues="fixedValues"
           :disabledMode="disabledMode"
@@ -105,6 +103,14 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue';
 import Visible from 'vue-material-design-icons/Eye.vue';
 import Invisible from 'vue-material-design-icons/EyeOff.vue';
 
+import {
+  BButton,
+  BButtonGroup,
+  BButtonToolbar,
+  BFormInvalidFeedback,
+  BFormGroup,
+} from 'bootstrap-vue';
+
 import InputCombobox from './InputCombobox.vue';
 import InputTextField from './InputTextField.vue';
 import InputTextArea from './InputTextArea.vue';
@@ -129,6 +135,11 @@ export default Vue.extend({
   i18n,
   name: 'WrapperInput',
   components: {
+    BButton,
+    BButtonGroup,
+    BButtonToolbar,
+    BFormInvalidFeedback,
+    BFormGroup,
     LockIcon,
     LockOpenIcon,
     MinusIcon,
@@ -143,7 +154,7 @@ export default Vue.extend({
   },
   beforeMount() {
     i18n.locale = this.languageLocale;
-    
+
     this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
     this.label = FieldReader.getLocalizedField(
       this.formFieldInformation,
@@ -187,23 +198,10 @@ export default Vue.extend({
       }
     }
 
-    // if a fixed value was sent with the application profile take this
-    if (
-      this.checkField(
-        this.formFieldInformation,
-        'https://purl.org/coscine/fixedValue'
-      )
-    ) {
-      const fixedValues = this.extractInitializingValues(
-        'https://purl.org/coscine/fixedValue'
-      );
-      this.$set(this.formData, this.nodeName, fixedValues);
-      this.locked = true;
-    }
     // if a fixed value was given directly take that
     if (
       this.checkDataField(
-        this.fixedValues[this.idForFixedValues],
+        this.fixedValues[this.nodeName],
         'https://purl.org/coscine/fixedValue',
         0
       )
@@ -211,36 +209,21 @@ export default Vue.extend({
       this.$set(
         this.formData,
         this.nodeName,
-        this.fixedValues[this.idForFixedValues][
-          'https://purl.org/coscine/fixedValue'
-        ]
+        this.fixedValues[this.nodeName]['https://purl.org/coscine/fixedValue']
       );
       this.locked = true;
     }
 
-    if (
-      this.checkField(
-        this.formFieldInformation,
-        'https://purl.org/coscine/invisible'
-      )
-    ) {
-      this.invisible =
-        FieldReader.getObject(
-          this.formFieldInformation,
-          'https://purl.org/coscine/invisible'
-        ).value === '1';
-    }
     if (
       this.checkDataField(
-        this.fixedValues[this.idForFixedValues],
+        this.fixedValues[this.nodeName],
         'https://purl.org/coscine/invisible',
         0
       )
     ) {
       this.invisible =
-        this.fixedValues[this.idForFixedValues][
-          'https://purl.org/coscine/invisible'
-        ][0].value === '1';
+        this.fixedValues[this.nodeName]['https://purl.org/coscine/invisible'][0]
+          .value === '1';
     }
 
     if (!this.formDataExists(0)) {
@@ -256,22 +239,10 @@ export default Vue.extend({
         );
         this.$set(this.formData, this.nodeName, defaultValues);
       }
-      // take the default value from the alt provided values of the ap
-      if (
-        this.checkField(
-          this.formFieldInformation,
-          'https://purl.org/coscine/defaultValue'
-        )
-      ) {
-        const defaultValues = this.extractInitializingValues(
-          'https://purl.org/coscine/defaultValue'
-        );
-        this.$set(this.formData, this.nodeName, defaultValues);
-      }
       // take the default value from the provided values
       if (
         this.checkDataField(
-          this.fixedValues[this.idForFixedValues],
+          this.fixedValues[this.nodeName],
           'https://purl.org/coscine/defaultValue',
           0
         )
@@ -279,7 +250,7 @@ export default Vue.extend({
         this.$set(
           this.formData,
           this.nodeName,
-          this.fixedValues[this.idForFixedValues][
+          this.fixedValues[this.nodeName][
             'https://purl.org/coscine/defaultValue'
           ]
         );
@@ -333,14 +304,11 @@ export default Vue.extend({
   props: {
     formFieldInformation: Array,
     formData: Object,
-    resourceId: String,
     fixedValues: Object,
     fixedValueMode: Boolean,
-    projectId: String,
     disabledMode: Boolean,
     componentDefinition: String,
     languageLocale: String,
-    idForFixedValues: String,
     errorMessages: Object,
     v: Object,
   },
@@ -427,16 +395,16 @@ export default Vue.extend({
     removeEmptyEntry(entryKey: number) {
       if (
         this.checkFixedField(
-          this.fixedValues[this.idForFixedValues],
+          this.fixedValues[this.nodeName],
           'https://purl.org/coscine/fixedValue',
           entryKey
         ) &&
-        this.fixedValues[this.idForFixedValues][
-          'https://purl.org/coscine/fixedValue'
-        ][entryKey]['value'] === ''
+        this.fixedValues[this.nodeName]['https://purl.org/coscine/fixedValue'][
+          entryKey
+        ]['value'] === ''
       ) {
         this.$delete(
-          this.fixedValues[this.idForFixedValues][
+          this.fixedValues[this.nodeName][
             'https://purl.org/coscine/fixedValue'
           ],
           entryKey
@@ -445,16 +413,16 @@ export default Vue.extend({
       }
       if (
         this.checkFixedField(
-          this.fixedValues[this.idForFixedValues],
+          this.fixedValues[this.nodeName],
           'https://purl.org/coscine/defaultValue',
           entryKey
         ) &&
-        this.fixedValues[this.idForFixedValues][
+        this.fixedValues[this.nodeName][
           'https://purl.org/coscine/defaultValue'
         ][entryKey]['value'] === ''
       ) {
         this.$delete(
-          this.fixedValues[this.idForFixedValues][
+          this.fixedValues[this.nodeName][
             'https://purl.org/coscine/defaultValue'
           ],
           entryKey
@@ -480,7 +448,7 @@ export default Vue.extend({
     },
     setFixedValues(entryKey: number) {
       if (this.locked) {
-        this.$set(this.fixedValues, this.idForFixedValues, {
+        this.$set(this.fixedValues, this.nodeName, {
           'https://purl.org/coscine/invisible': [
             {
               value: this.invisible ? '1' : '0',
@@ -490,7 +458,7 @@ export default Vue.extend({
           'https://purl.org/coscine/fixedValue': this.extractForFixedValues(),
         });
       } else {
-        this.$set(this.fixedValues, this.idForFixedValues, {
+        this.$set(this.fixedValues, this.nodeName, {
           'https://purl.org/coscine/invisible': [
             {
               value: this.invisible ? '1' : '0',
@@ -508,8 +476,8 @@ export default Vue.extend({
     updateFixedValues(entryKey: number) {
       if (this.fixedValueMode) {
         if (
-          this.fixedValues[this.idForFixedValues] !== undefined &&
-          this.fixedValues[this.idForFixedValues][
+          this.fixedValues[this.nodeName] !== undefined &&
+          this.fixedValues[this.nodeName][
             'https://purl.org/coscine/fixedValue'
           ] !== undefined
         ) {

src/coscine.d.ts

@@ -18,6 +18,4 @@ declare interface Window {
 
 declare const _spPageContextInfo: unknown;
 
-interface FormFieldInformation extends Array<any> {
-  idForFixedValues: any;
-}
+type FormFieldInformation = Array<any>;