61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script setup>
|
|
import {onMounted, reactive, ref, watch} from "vue";
|
|
import FormWrapper from "components/FormWrapper.vue";
|
|
import ComboboxInput from "components/inputs/ComboboxInput.vue";
|
|
import {commonProps} from "src/composables/inputs";
|
|
|
|
const props = defineProps({
|
|
flight: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
copilots: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const formData = reactive({
|
|
copilots: [],
|
|
})
|
|
|
|
const solo = ref(false);
|
|
watch(() => solo.value, (newVal) => {
|
|
if (!newVal) {
|
|
formData.copilots = [];
|
|
}
|
|
});
|
|
|
|
|
|
watch(() => props.flight, (newVal) => {
|
|
if (newVal) {
|
|
formData.copilots = newVal.copilots.map(copilot => ({id: copilot.id, name: copilot.name}));
|
|
solo.value = formData.copilots.length === 0;
|
|
}
|
|
}, {deep: true, immediate: true});
|
|
</script>
|
|
|
|
<template>
|
|
<FormWrapper v-model="formData">
|
|
<q-btn-toggle
|
|
spread
|
|
no-caps
|
|
v-model="solo"
|
|
toggle-color="primary"
|
|
:options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"
|
|
/>
|
|
|
|
<div v-if="!solo">
|
|
<ComboboxInput
|
|
v-for="i in flight.aircraft.seats - 1"
|
|
:key="i"
|
|
v-bind="commonProps"
|
|
:options="copilots"
|
|
v-model="formData.copilots[i-1]"
|
|
:clearable="true"
|
|
:label="i === 1 ? 'Kopilot' : 'Pasažér'"
|
|
/>
|
|
</div>
|
|
</FormWrapper>
|
|
</template>
|