Update: Code Refactoring

coscine/issues#795

src/components/InputCombobox.vue

 <template>
-  <div class="InputComboxbox">
-    <b-form-group
-      v-bind:class="{
-      mandatory: (checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#minCount') &&
-      this.formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1),
-      invisible: (!fixedValueMode && checkField(this.formFieldInformation,'https://purl.org/coscine/invisible') &&
-      this.formFieldInformation['https://purl.org/coscine/invisible'][0]['value'] === '1') }"
-      :label-for="cssid"
-      label-cols-sm="3"
-      label-align-sm="right"
-      :label="label"
-      label-class="application-profile-label"
-    >
-      <b-row>
-        <b-col>
-        <multiselect
-          v-if="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#maxCount') && formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value'] === 1"
-          :id="cssid"
-          :options="selectableOptions"
-          v-model="selectedOptions"
-          :multiple="false"
-          :hide-selected="true"
-          label="name"
-          track-by="name"
-          :placeholder="$t('multiselectPlaceholder')"
-          :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1"
-          :disabled="disabledMode || locked"
-          @input="input"
-          @change="input"
-        ></multiselect>
-        <multiselect
-          v-else
-          :id="cssId"
-          :options="selectableOptions"
-          v-model="selectedOptions"
-          :multiple="true"
-          :hide-selected="true"
-          label="name"
-          track-by="name"
-          :placeholder="$t('multiselectPlaceholder')"
-          :max="this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'] !== undefined && this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0] !== undefined  && formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value'] !== undefined ? parseInt(formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value']) : maxNumberOfSelectedObjects"
-          :disabled="disabledMode || locked"
-          :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1"
-          @input="input"
-          @change="input"
-        ></multiselect>
-        </b-col>
-        <b-col v-if="fixedValueMode" class="lock-colum col-sm-2">
-          <b-button-group>
-            <b-button :disabled="disabledMode || !checkField(formData,nodeName) || (checkField(formData,nodeName) && formData[nodeName][0]['value'] ==='') || (this.isMandatoryField() && this.invisible)" class="lockButton" variant="outline-secondary" @click.prevent="changeLockable()">
-              <LockIcon v-if="locked"/>
-              <LockOpenIcon v-else />
-            </b-button>
-            <b-button v-b-tooltip.hover.bottom="$t('invisibilityInfo')" :disabled="disabledMode || !fieldCanBeInvisible()" class="visibilityButton" variant="outline-secondary" @click.prevent="changeVisibility()">
-              <Invisible v-if="invisible"/>
-              <Visible v-else />
-            </b-button>
-          </b-button-group>
-        </b-col>
-      </b-row>
-    </b-form-group>
-  </div>
+  <multiselect
+    :id="cssId"
+    :options="selectableOptions"
+    v-model="selectedOptions"
+    :multiple="!noMaxMode"
+    label="name"
+    track-by="name"
+    :placeholder="$t('multiselectPlaceholder')"
+    :max="getMax()"
+    :required="required"
+    :disabled="disabledMode || locked"
+    @input="input"
+    @change="input"
+  />
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 
-import LockIcon from 'vue-material-design-icons/Lock.vue';
-import LockOpenIcon from 'vue-material-design-icons/LockOpen.vue';
-import Visible from 'vue-material-design-icons/Eye.vue';
-import Invisible from 'vue-material-design-icons/EyeOff.vue';
-
 import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
 
-import { LanguageUtil } from '@coscine/app-util';
-
 import { MetadataApi, defaultOnCatch } from '@coscine/api-connection';
 
-import FieldReader from '../util/FieldReader';
-
-import locales from '../locale/locales';
-import VueI18n from 'vue-i18n';
-Vue.use(VueI18n);
-
-const i18n = new VueI18n({
-  locale: 'en', // set locale
-  messages: locales, // set locale messages
-  silentFallbackWarn: true,
-});
-
 export default Vue.extend({
-  i18n,
   name: 'InputCombobox',
   beforeMount() {
-    i18n.locale = LanguageUtil.getLanguage();
-
-    this.label = FieldReader.getLocalizedField(
-      this.formFieldInformation,
-      this.languageCode,
-    );
-    this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
-    this.cssId = this.nodeName.substr(this.nodeName.lastIndexOf('\/') + 1);
-    if (this.cssId.indexOf('#') !== -1) {
-      this.cssId = this.cssId.substr(this.cssId.indexOf('#') + 1);
-    }
-
-    // if a fixed value was sent with the application profile take this
-    if (this.checkField(this.formFieldInformation,'https://purl.org/coscine/fixedValue')) {
-      this.$set(this.formData,this.nodeName, [{'value': this.formFieldInformation['https://purl.org/coscine/fixedValue'][0].value}]);
-      this.locked = true;
-    }
-    // if a fixed values was given directly take that
-    if (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue')) {
-      this.$set(this.formData,this.nodeName, [{'value': this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'][0].value}]);
-      this.locked = true;
-    }
-
-    if (this.checkField(this.formFieldInformation['idForFixedValues'],'https://purl.org/coscine/invisible')) {
-      this.invisible = this.formFieldInformation['https://purl.org/coscine/invisible'][0].value === '1';
-    }
-    if (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/invisible')) {
-      this.invisible = this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/invisible'][0].value === '1';
-    }
-
-    if (!this.checkField(this.formData,this.nodeName)){
-      // if formdata is still emty take the default value from the ap
-      if (this.checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#defaultValue')) {
-        this.$set(this.formData,this.nodeName, [{'value': this.formFieldInformation['http://www.w3.org/ns/shacl#defaultValue'][0].value}]);
-      }
-      // take the default value from the alt provided values of the ap
-      if (this.checkField(this.formFieldInformation,'https://purl.org/coscine/defaultValue')) {
-        this.$set(this.formData,this.nodeName, [{'value': this.formFieldInformation['https://purl.org/coscine/defaultValue'][0].value}]);
-      }
-      // take the default value from the provided values
-      if (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue')) {
-        this.$set(this.formData,this.nodeName, [{'value': this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/defaultValue'][0].value}]);
-      }
-    }
-    // if formdata is still empty intialize it with an empty value
-    if (!this.checkField(this.formData,this.nodeName)){
-      this.$set(this.formData,this.nodeName, [{'value': ''}]);
-    }
-
-    // take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
-    this.replacePlaceholder();
+    this.noMaxMode =
+      this.checkField(
+        this.formFieldInformation,
+        'http://www.w3.org/ns/shacl#maxCount'
+      ) &&
+      parseInt(this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0][
+        'value'
+      ]) === 1;
 
     // set the datatype
-    this.$set(this.formData[this.nodeName][0],'type', 'uri');
+    this.$set(this.formData[this.nodeName][0], 'type', 'uri');
 
     if (this.fixedValueMode) {
       this.updateFixedValues();
@@ -155,51 +44,69 @@ export default Vue.extend({
   },
   mounted() {
     MetadataApi.getVocabulary(
-        this.projectId,
-        this.formFieldInformation['http://www.w3.org/ns/shacl#class'][0].value,
-        (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;
-            }
+      this.projectId,
+      this.formFieldInformation['http://www.w3.org/ns/shacl#class'][0].value,
+      (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[this.languageCode];
+            this.selectableOptions = response.data.de;
           }
-          this.loadData();
-        },
-        defaultOnCatch,
-      );
-      if (this.fixedValueMode) {
-        this.updateFixedValues();
-      }
+        } else {
+          this.selectableOptions = response.data[this.languageCode];
+        }
+        this.loadData();
+      },
+      defaultOnCatch
+    );
+    if (this.fixedValueMode) {
+      this.updateFixedValues();
+    }
   },
   data() {
     return {
-      label: 'Label:',
-      nodeName: '',
-      cssId: 'cssId',
+      noMaxMode: true,
       selectableOptions: [] as object[],
       selectedOptions: [] as object[],
-      languageCode: LanguageUtil.getLanguage(),
-      listLanguageCode: LanguageUtil.getLanguage(),
       maxNumberOfSelectedObjects: 10000,
-      locked: false,
-      invisible: false,
     };
   },
   methods: {
-    replacePlaceholder(){
+    getMax() {
+      if (!this.noMaxMode) {
+        return this.formFieldInformation[
+          'http://www.w3.org/ns/shacl#maxCount'
+        ] !== undefined &&
+          this.formFieldInformation[
+            'http://www.w3.org/ns/shacl#maxCount'
+          ][0] !== undefined &&
+          this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0][
+            'value'
+          ] !== undefined
+          ? parseInt(
+              this.formFieldInformation[
+                'http://www.w3.org/ns/shacl#maxCount'
+              ][0]['value']
+            )
+          : this.maxNumberOfSelectedObjects;
+      }
+      return false;
     },
     input() {
       const array = [];
       if (Array.isArray(this.selectedOptions)) {
         for (const field of this.selectedOptions) {
-          array.push({value: (field as any).value , type: 'uri'});
+          array.push({ value: (field as any).value, type: 'uri' });
         }
       } else {
-        array.push({value: (this.selectedOptions as any).value , type: 'uri'});
+        array.push({ value: (this.selectedOptions as any).value, type: 'uri' });
       }
       this.$set(this.formData, this.nodeName, array);
       this.updateFixedValues();
@@ -207,81 +114,36 @@ export default Vue.extend({
     loadData() {
       const selectedData = this.formData[this.nodeName];
       for (const field of selectedData) {
-        const selectedElement = (this.selectableOptions as any).filter((obj: any) => {
-          return obj.value === (field as any).value;
-        });
+        const selectedElement = (this.selectableOptions as any).filter(
+          (obj: any) => {
+            return obj.value === (field as any).value;
+          }
+        );
         if (selectedElement[0] !== undefined) {
           this.selectedOptions.push(selectedElement[0]);
         }
       }
     },
-    checkField(data:any,nodename:string,property: string = 'value'){
-      return FieldReader.isValueAssignedToKey(data,nodename,property);
-    },
-    removeEmptyEntry(){
-      if ((this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'][0]['value'] === '') ||
-        this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/defaultValue'][0]['value'] === '') {
-        this.$delete(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue');
-        this.$delete(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue');
-        this.locked = false;
-      }
-    },
-    updateFixedValues(){
-      if (this.fixedValueMode) {
-        if(this.fixedValues[this.formFieldInformation['idForFixedValues']] !== undefined && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'] !== undefined){
-          this.locked = true;
-        } else {
-          this.locked = false;
-        }
-        this.setFixedValues();
-      }
-    },
-    changeLockable() {
-      this.locked = !this.locked;
-      this.setFixedValues();
-    },
-    isMandatoryField(){
-      return this.checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#minCount') &&
-      this.formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1;
-    },
-    fieldCanBeInvisible(){
-      return (this.isMandatoryField() &&
-      this.checkField(this.formData,this.nodeName) &&
-      this.formData[this.nodeName][0]['value'] !== '' && this.locked) ||
-      !this.isMandatoryField();
-    },
-    changeVisibility() {
-      if(!this.invisible && this.fieldCanBeInvisible()){
-        this.invisible = true;
-      } else {
-        this.invisible = false;
-      }
-      this.setFixedValues();
-    },
-    setFixedValues() {
-      if(this.locked){
-        this.$set(this.fixedValues, this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/invisible': [{'value': this.invisible ? '1' : '0', 'type': 'literal'}], 'https://purl.org/coscine/fixedValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
-      }else{
-        this.$set(this.fixedValues, this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/invisible': [{'value': this.invisible ? '1' : '0', 'type': 'literal'}], 'https://purl.org/coscine/defaultValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
-      }
-      this.removeEmptyEntry();
-    },
   },
   props: {
+    cssId: String,
+    invisible: Boolean,
+    locked: Boolean,
+    required: Boolean,
+    nodeName: String,
     formFieldInformation: Object,
     formData: Object,
-    resourceId: String,
     fixedValues: Object,
     fixedValueMode: Boolean,
-    projectId: String,
     disabledMode: Boolean,
+    checkField: Function,
+    updateFixedValues: Function,
+    resourceId: String,
+    projectId: String,
+    languageCode: String,
   },
   components: {
     Multiselect,
-    LockIcon,
-    LockOpenIcon,
-    Visible,
-    Invisible,
   },
 });
 </script>
@@ -328,5 +190,4 @@ export default Vue.extend({
 </style>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>
+<style scoped></style>