Combobox, POI

src/components/flights/form/FlightFormTrack.vue

@@ -0,0 +1,68 @@
+<script setup>
+import FormWrapper from "components/FormWrapper.vue";
+import {onMounted, reactive, ref} from "vue";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+  },
+  locations: {
+    type: Array,
+    required: true
+  },
+  flight: {
+    type: Object,
+    required: false
+  }
+});
+
+const formData = reactive({
+  track: []
+});
+const removeTrackItem = (index) => {
+  formData.track.splice(index, 1);
+}
+
+const poi = ref(null);
+const addTrackItem = (item) => {
+  formData.track.push(item);
+  poi.value = null;
+}
+
+onMounted(() => {
+  for (const i in props.flight.track) {
+    const poiInfo = props.flight.track[i].pointOfInterest;
+    formData.track.push({
+      id: poiInfo.id,
+      name: poiInfo.name
+    });
+  }
+});
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+
+    {{ flight.track }}
+
+    <q-list>
+      <q-item>{{ flight.takeoffAirport.name }}</q-item>
+
+      <q-item v-for="(item, index) in formData.track" :key="item">
+        {{ index + 1 }}. {{ item.name }}
+
+        <q-btn @click="removeTrackItem(index)" icon="delete" text-color="red"/>
+      </q-item>
+
+      <q-item>{{ flight.landingAirport.name }}</q-item>
+
+    </q-list>
+
+    <ComboboxInput v-model="poi" :options="locations" clearable label="Location">
+      <template #after>
+        <q-btn @click="addTrackItem(poi)" v-if="poi" rounded>+</q-btn>
+      </template>
+    </ComboboxInput>
+  </FormWrapper>
+</template>