Select Git revision
ITANetAudioStreamingPortaudioClientTest.cpp
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>