InputBooleanCombobox.vue

<template>
  <MultiSelect
    v-model="selectedOption"
    :options="selectableOptions"
    label="name"
    track-by="name"
    :placeholder="t('selectPlaceholder')"
    :required="required"
    :disabled="disabledMode || locked"
    select-label=""
    selected-label=""
    deselect-label=""
    @update:model-value="updateMetadataValue"
  />
</template>

<script lang="ts">
import i18n from '@/plugins/i18n';

import MultiSelect from '@/plugins/vue-multiselect';
import type { NamedNode, Quad_Object } from '@rdfjs/types';
import factory from 'rdf-ext';
import prefixes from '@zazuko/prefixes/prefixes';
import type { Label } from '@/types/labels';

export default defineComponent({
  name: 'InputBooleanCombobox',
  components: {
    MultiSelect,
  },
  props: {
    locked: {
      default: false,
      type: Boolean,
    },
    required: {
      default: false,
      type: Boolean,
    },
    languageCode: {
      default: 'en',
      type: String,
    },
    entry: {
      required: true,
      type: Object as PropType<Quad_Object>,
    },
    dataType: {
      default: () => factory.namedNode(prefixes.xsd + 'boolean'),
      type: Object as PropType<NamedNode<string>>,
    },
    disabledMode: {
      default: false,
      type: Boolean,
    },
  },
  setup() {
    return { locale: i18n.global.locale, t: i18n.global.t };
  },
  data() {
    return {
      object: factory.literal('', this.dataType),
    };
  },
  computed: {
    selectableOptions(): Label[] {
      if (this.languageCode === 'de') {
        if (this.object.value === 'true' || this.object.value === 'false') {
          return [
            { value: 'true', name: 'Ja' },
            { value: 'false', name: 'Nein' },
          ];
        }
        return [
          { value: '1', name: 'Ja' },
          { value: '0', name: 'Nein' },
        ];
      }
      // English
      else {
        if (this.object.value === 'true' || this.object.value === 'false') {
          return [
            { value: 'true', name: 'Yes' },
            { value: 'false', name: 'No' },
          ];
        }
        return [
          { value: '1', name: 'Yes' },
          { value: '0', name: 'No' },
        ];
      }
    },
    selectedOption(): Label | undefined {
      if (this.object.value !== '') {
        const foundOption = this.selectableOptions.find(
          (option) => option.value === this.object.value,
        );
        return {
          name: foundOption?.name,
          value: this.object.value,
        };
      }
      return undefined;
    },
  },
  watch: {
    entry() {
      this.loadData();
    },
  },
  beforeMount() {
    if (this.languageCode === 'en' || this.languageCode === 'de') {
      this.locale = this.languageCode;
    } else {
      this.locale = 'en';
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      if (this.object.value !== this.entry.value) {
        this.object.value = this.entry.value;
      }
    },
    updateMetadataValue(label: Label | null) {
      if (label?.value) {
        this.object.value = label.value;
      } else {
        this.object.value = '';
      }
      this.$emit('update:metadata-value', this.object);
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>