Sprint/2021 12

src/components/InputBooleanCombobox.vue

@@ -5,11 +5,13 @@
     v-model="selectedOption"
     label="name"
     track-by="name"
-    :placeholder="$t('multiselectPlaceholder')"
+    :placeholder="$t('selectPlaceholder')"
     :required="required"
     :disabled="disabledMode || locked"
     @input="input"
-    @change="input"
+    select-label=""
+    selected-label=""
+    deselect-label=""
   />
 </template>
 
@@ -17,15 +19,17 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 
+import FieldReader from '@/util/FieldReader';
 import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
-import FieldReader from '@/util/FieldReader';
+Vue.component('multiselect', Multiselect);
 
 Vue.use(VueI18n);
 
 const i18n = new VueI18n({
   locale: 'en',
-  messages: (window.coscine && coscine.i18n) ? coscine.i18n['form-generator'] : {},
+  messages:
+    window.coscine && coscine.i18n ? coscine.i18n['form-generator'] : {},
   silentFallbackWarn: true,
 });
 
@@ -35,45 +39,52 @@ export default Vue.extend({
   beforeMount() {
     i18n.locale = this.languageCode;
     // set the datatype
-    this.$set(this.formData[this.nodeName][0], 'type', 'literal');
+    this.$set(this.formData[this.nodeName][this.entryKey], 'type', 'literal');
     this.$set(
-      this.formData[this.nodeName][0],
+      this.formData[this.nodeName][this.entryKey],
       'datatype',
       'http://www.w3.org/2001/XMLSchema#boolean'
     );
 
     if (this.fixedValueMode) {
-      this.updateFixedValues();
+      this.updateFixedValues(this.entryKey);
     }
   },
   mounted() {
-    if (this.languageCode === "en") {
-      this.selectableOptions = [{value: "true", name: "Yes"}, {value: "false", name: "No"}];
+    if (this.languageCode === 'en') {
+      this.selectableOptions = [
+        { value: 'true', name: 'Yes' },
+        { value: 'false', name: 'No' },
+      ];
     } else {
-      this.selectableOptions = [{value: "true", name: "Ja"}, {value: "false", name: "Nein"}];
-    }   
-    this.loadData();   
+      this.selectableOptions = [
+        { value: 'true', name: 'Ja' },
+        { value: 'false', name: 'Nein' },
+      ];
+    }
+    this.loadData();
 
     if (this.fixedValueMode) {
-      this.updateFixedValues();
+      this.updateFixedValues(this.entryKey);
     }
   },
   data() {
     return {
       selectableOptions: [] as object[],
-      selectedOption: [] as object[]
+      selectedOption: {} as object,
     };
   },
-  methods: {    
+  methods: {
     input() {
       FieldReader.setField(
         this.formData,
         this.v,
         this.nodeName,
         this.selectedOption !== null ? (this.selectedOption as any).value : '',
-        this.$set
+        this.$set,
+        this.entryKey
       );
-      this.updateFixedValues();
+      this.updateFixedValues(this.entryKey);
     },
     loadData() {
       const selectedData = this.formData[this.nodeName];
@@ -83,9 +94,6 @@ export default Vue.extend({
             return obj.value === (field as any).value;
           }
         );
-        if (selectedElement[0] !== undefined) {
-          this.selectedOption.push(selectedElement[0]);
-        }
       }
     },
   },
@@ -105,53 +113,15 @@ export default Vue.extend({
     projectId: String,
     languageCode: String,
     v: Object,
+    entryKey: Number,
   },
-  components: {
-    Multiselect,
-  },
+  components: {},
 });
 </script>
 
 <style>
-.multiselect {
-  height: auto;
-}
-.multiselect__input {
-  border: 0px !important;
-  height: calc(1.4em + 0.75rem + 2px);
-}
-.multiselect__tags {
-  border-radius: 0px;
-}
-.multiselect__tag {
-  background-color: #00549f !important;
-}
-.multiselect__option--highlight {
-  background-color: #00549f !important;
-  background: #00549f !important;
-}
-.multiselect__option--selected.multiselect__option--highlight {
-  background-color: #a70619 !important;
-}
-.multiselect__tag-icon:focus,
-.multiselect__tag-icon:hover {
-  background-color: #a70619 !important;
-}
-.invalid-tooltip {
-  position: absolute;
-  top: 100%;
-  z-index: 5;
-  display: none;
-  max-width: 100%;
-  padding: 0.25rem 0.5rem;
-  margin-top: 0.1rem;
-  font-size: 0.76563rem;
-  line-height: 1.4;
-  color: #fff;
-  background-color: rgba(204, 7, 30, 0.9);
-  border-radius: 0;
-}
 </style>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>
+<style scoped>
+</style>