Skip to content
Snippets Groups Projects
Select Git revision
1 result Searching

ITANetAudioStreamingPortaudioClientTest.cpp

Blame
  • 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>