Skip to content
Snippets Groups Projects
Select Git revision
  • 97908ca3be6e4e3ea2192bb49b04f9e21b38344b
  • master default protected
  • Issue/2960-infiniteLoop
  • Issue/2960-fixValidationForAP
  • dev protected
  • Issue/2920-fixRemovingValues
  • Hotfix/2957-styleAndUpgrade
  • Hotfix/2955-storingFail
  • Issue/2943-uiFeedback
  • Issue/2551-enhanceSymbolDescriptionsInApplicationProfile
  • Issue/2598-vue3
  • Issue/2804-templateUI
  • Issue/2805-ignoreTemplatingValues
  • Issue/2851-fixBooleanInFormGenerator
  • Issue/2759-showMissingField
  • Issue/2703-vocabularyList
  • Issue/2729-fixSlowLoadingOfInstances
  • Issue/2525-fixedFixValues
  • Hotfix/2681-validationErrors
  • testing
  • Issue/2408-hasValue
  • v4.0.5
  • v4.0.4
  • v4.0.3
  • v4.0.2
  • v4.0.1
  • v4.0.0
  • v3.6.3
  • v3.6.2
  • v3.6.1
  • v3.6.0
  • v3.5.7
  • v3.5.6
  • v3.5.5
  • v3.5.4
  • v3.5.3
  • v3.5.2
  • v3.5.1
  • v3.5.0
  • v3.4.0
  • v3.3.0
41 results

InputBooleanCombobox.vue

  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    InputBooleanCombobox.vue 3.23 KiB
    <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>