Drobne upravy ve vizualu, oprava comboboxu, funkcni prakticky cela editace letu

src/components/flights/form/FlightFormTrack.vue

@@ -1,6 +1,6 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
@@ -29,6 +29,11 @@ const addTrackItem = (item) => {
   formData.track.push(item);
   poi.value = null;
 }
+watch(poi, (newVal) => {
+  if (newVal?.name) {
+    addTrackItem(newVal);
+  }
+});
 
 onMounted(() => {
   for (const i in props.flight.track) {
@@ -43,26 +48,56 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData">
+    <ComboboxInput
+      outlined
+      standout
+      class="q-my-lg"
+      v-model="poi"
+      :key="formData.track.length"
+      :options="locations"
+      @select="addTrackItem"
+      clearable
+      label="Otočný bod"
+    />
 
-    {{ 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-list bordered>
+      <q-item-label header>Trasa</q-item-label>
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar color="primary" text-color="white" icon="flight_takeoff"/>
+        </q-item-section>
+        <q-item-section>
+          {{ flight.takeoffAirport.name }}
+        </q-item-section>
       </q-item>
 
-      <q-item>{{ flight.landingAirport.name }}</q-item>
+      <q-item v-for="(item, index) in formData.track" :key="item">
+        <q-item-section avatar>
+          <q-avatar size="32px" color="secondary" text-color="white">{{ index + 1 }}.</q-avatar>
+        </q-item-section>
+        <q-item-section>
+          <span>
+            {{ item.name }}
 
+            <q-badge color="green" v-if="!item.id">
+              <q-icon name="add"/>
+            </q-badge>
+          </span>
+
+        </q-item-section>
+        <q-item-section top side>
+          <q-btn @click="removeTrackItem(index)" flat dense round icon="delete" text-color="red"/>
+        </q-item-section>
+      </q-item>
+
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar color="primary" text-color="white" icon="flight_land"/>
+        </q-item-section>
+        <q-item-section>
+          {{ flight.landingAirport.name }}
+        </q-item-section>
+      </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>