Product/815 cleanup application profiles

coscine/issues#815

src/components/InputBooleanCombobox.vue

+<template>
+  <multiselect
+    :id="cssId"
+    :options="selectableOptions"
+    v-model="selectedOption"
+    label="name"
+    track-by="name"
+    :placeholder="$t('multiselectPlaceholder')"
+    :required="required"
+    :disabled="disabledMode || locked"
+    @input="input"
+    @change="input"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import Multiselect from 'vue-multiselect';
+import 'vue-multiselect/dist/vue-multiselect.min.css';
+
+export default Vue.extend({
+  name: 'InputBooleanCombobox',
+  beforeMount() {
+    // set the datatype
+    this.$set(this.formData[this.nodeName][0], 'type', 'literal');
+    this.$set(
+      this.formData[this.nodeName][0],
+      'datatype',
+      'http://www.w3.org/2001/XMLSchema#boolean'
+    );
+
+    if (this.fixedValueMode) {
+      this.updateFixedValues();
+    }
+  },
+  mounted() {
+    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();   
+
+    if (this.fixedValueMode) {
+      this.updateFixedValues();
+    }
+  },
+  data() {
+    return {
+      selectableOptions: [] as object[],
+      selectedOption: [] as object[]
+    };
+  },
+  methods: {    
+    input() {
+      if (this.selectedOption !== null) {
+        this.$set(this.formData[this.nodeName][0], 'value', (this.selectedOption as any).value);        
+      } else {
+        this.$set(this.formData[this.nodeName][0], 'value', '');
+      }
+      this.updateFixedValues();
+    },
+    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;
+          }
+        );
+        if (selectedElement[0] !== undefined) {
+          this.selectedOption.push(selectedElement[0]);
+        }
+      }
+    },
+  },
+  props: {
+    cssId: String,
+    invisible: Boolean,
+    locked: Boolean,
+    required: Boolean,
+    nodeName: String,
+    formFieldInformation: Object,
+    formData: Object,
+    fixedValues: Object,
+    fixedValueMode: Boolean,
+    disabledMode: Boolean,
+    checkField: Function,
+    updateFixedValues: Function,
+    resourceId: String,
+    projectId: String,
+    languageCode: String,
+  },
+  components: {
+    Multiselect,
+  },
+});
+</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>