Refaktoring

src/components/flights/PhotoCarousel.vue

@@ -1,58 +0,0 @@
-<script setup>
-import PhotoDetail from "components/photos/PhotoDetail.vue";
-import { ref, watch} from "vue";
-
-const props = defineProps({
-  photos: {
-    type: Array,
-    required: true
-  },
-  coverPhotoUrl: {
-    type: String,
-    required: false
-  },
-  defaultTitle: {
-    type: String,
-    required: false
-  }
-})
-
-const displayedPhoto = ref(null);
-const openPhotoDetail = ref(false);
-const photoData = ref(null);
-const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos}
-}
-
-watch(() => props.photos, (newVal) => {
-  if (newVal.length === 0) return;
-  displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
-}, {immediate: true});
-</script>
-
-<template>
-  <q-carousel
-    v-if="photos.length > 0"
-    animated
-    v-model="displayedPhoto"
-    arrows
-    swipeable
-    height="auto"
-    infinite
-    v-bind="$attrs"
-  >
-    <q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
-      <q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: photos})"/>
-    </q-carousel-slide>
-  </q-carousel>
-
-  <PhotoDetail
-    v-if="photoData"
-    v-model="openPhotoDetail"
-    :default-title="defaultTitle"
-    :photo="photoData.photo"
-    :photos="photoData.allPhotos"
-    :opened-index="photoData.idx"
-  />
-</template>

src/components/flights/form/FlightFormBasic.vue

@@ -24,6 +24,11 @@ const props = defineProps({
   isRequestPending,
 });
 
+const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;
+
+const airports = computed(() => props.airports.map(a => ({id: a.id, name: airportName(a)})));
+const aircrafts = computed(() => props.aircrafts.map(a => ({id: a.id, name: a.callSign})));
+
 const formData = reactive({
   aircraft: null,
   takeoffAirport: null,
@@ -43,19 +48,15 @@ const rules = {
   landingDatetime: [isRequired],
   landingAirport: [isRequired],
 };
+
 watch(() => props.flight, (newVal) => {
   if (newVal) {
     setDefaultData(formData, newVal);
     formData.aircraft = {id: newVal.aircraft.id, name: newVal.aircraft.callSign};
-    formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: newVal.takeoffAirport.name}
-    formData.landingAirport = {id: newVal.landingAirport.id, name: newVal.landingAirport.name}
+    formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: airportName(newVal.takeoffAirport)}
+    formData.landingAirport = {id: newVal.landingAirport.id, name: airportName(newVal.landingAirport)}
   }
 }, {immediate: true});
-
-const aircrafts = computed(() => {
-  return props.aircrafts.map(a => ({id: a.id, name: a.callSign}));
-});
-
 watch(() => formData.takeoffDatetime, () => {
   if (!formData.landingDatetime) {
     formData.landingDatetime = structuredClone(formData.takeoffDatetime);
@@ -73,7 +74,7 @@ watch(() => formData.takeoffAirport, () => {
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
     <div class="row">
       <div class="col">
-        <q-card class="q-mx-md q-my-md">
+        <q-card class="q-my-sm">
           <q-card-section>
             <div class="text-h6">Vyber letadlo</div>
           </q-card-section>
@@ -92,7 +93,7 @@ watch(() => formData.takeoffAirport, () => {
     </div>
     <div class="row">
       <div class="col col-12 col-md-6">
-        <q-card class="q-mx-md q-my-md">
+        <q-card class="q-mr-md-sm q-my-sm">
           <q-card-section>
             <div class="text-h6">Vzlet</div>
           </q-card-section>
@@ -110,7 +111,6 @@ watch(() => formData.takeoffAirport, () => {
               v-model="formData.takeoffAirport"
               label="Letiště vzletu"
               v-bind="commonProps"
-              :enable-new-values="false"
             />
           </q-card-section>
         </q-card>
@@ -118,7 +118,7 @@ watch(() => formData.takeoffAirport, () => {
 
       <div class="col col-12 col-md-6">
 
-        <q-card class="q-mx-md  q-my-md">
+        <q-card class="q-ml-md-sm q-my-sm">
           <q-card-section>
             <div class="text-h6">Přistání</div>
           </q-card-section>
@@ -137,7 +137,6 @@ watch(() => formData.takeoffAirport, () => {
               label="Letiště přistání"
               v-bind="commonProps"
               :rules="rules.landingAirport"
-              :enable-new-values="false"
             />
           </q-card-section>
         </q-card>