Editace fotek v modalu, lepsi datetime picker

src/pages/profile/details/AircraftDetailPage.vue

@@ -4,6 +4,7 @@ import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
+import {confirmObject} from "src/composables/dialog";
 
 const aircraftStore = useAircraftsStore();
 const route = useRoute();
@@ -17,23 +18,19 @@ onMounted(() => {
   aircraftStore.fetchDetail(aircraftId.value)
     .then(respAircraft => aircraft = respAircraft)
     .finally(() => {
-    loading.value = false;
-  });
+      loading.value = false;
+    });
 })
 
 const $q = useQuasar();
 const confirmDelete = (id) => {
-  $q.dialog({
-    title: 'Potvrzení',
-    message: 'Opravdu chceš smazat toto letadlo?',
-    cancel: true,
-    persistent: true
-  }).onOk(() => {
-    aircraftStore.delete(id).then(() => {
-      router.push({name: "aircrafts"});
-      $q.notify({message: "Letadlo uspesne odstraneno", position: "top", color: "positive"});
-    });
-  })
+  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
+    .onOk(() => {
+      aircraftStore.delete(id).then(() => {
+        router.push({name: "aircrafts"});
+        $q.notify({message: "Letadlo uspesne odstraneno", position: "top", color: "positive"});
+      });
+    })
 };
 </script>
 

src/pages/profile/forms/EditAircraftPage.vue

@@ -27,7 +27,6 @@ let loadedAircraft = ref(null);
 onMounted(() => {
   useAircraftsStore().fetchDetail(aircraftId).then((data) => {
     loadedAircraft.value = data;
-
   }).catch(err => {
     console.error(err);
   })
@@ -40,6 +39,10 @@ onMounted(() => {
   <template v-if="loadedAircraft">
     <h1>Editace letadla {{ loadedAircraft.callSign }}</h1>
 
-    <AircraftForm @save="handleSave" :default-values="loadedAircraft" :is-request-pending="isRequestPending"/>
+    <AircraftForm
+      @save="handleSave"
+      :default-values="loadedAircraft"
+      :is-request-pending="isRequestPending"
+    />
   </template>
 </template>

src/pages/profile/forms/FlightEditPage.vue

@@ -15,6 +15,9 @@ import {useSecondPilotsStore} from "stores/SecondPilots";
 import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
 import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
 import {usePhotosStore} from "stores/Photo";
+import PhotosList from "components/photos/PhotosList.vue";
+import {confirmObject, successObject} from "src/composables/dialog";
+import PhotoForm from "components/flights/PhotoForm.vue";
 
 useMeta({title: "Editace letu"});
 
@@ -54,27 +57,49 @@ onMounted(() => {
 
 const handleFlightEdit = (data) => {
   useFlightsStore().update(flightId, data).then(() => {
-    $q.notify({message: "Uspesne upraveno", position: "top", color: "positive"});
-
+    $q.notify(successObject("Úspěšně upraveno"));
     fetchFlight(flightId);
   })
 }
 
 const handlePhotosUpload = (data) => {
-
-  console.log(data);
-
   const promises = [];
   for (const photo of data.photos) {
     promises.push(usePhotosStore().upload(flightId, {photo}));
   }
 
   Promise.all(promises).then(() => {
-     $q.notify({message: "Uspesne nahrano", position: "top", color: "positive"});
-
-      fetchFlight(flightId);
+    $q.notify(successObject("Úspěšně nahráno"));
+    fetchFlight(flightId);
   });
 }
+
+const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
+const confirmPhotoDelete = (id) => {
+  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
+    .onOk(() => {
+      usePhotosStore().delete(id).then((data) => {
+        flight.value.photos.splice(_findPhotoIndex(data.id), 1);
+      });
+    });
+}
+
+const handlePhotoUpdate = (formData) => {
+  const photoId = formData.id;
+  delete formData.id;
+
+  usePhotosStore().update(photoId, formData).then((data) => {
+    const idx = _findPhotoIndex(data.id);
+    flight.value.photos[idx] = data;
+  })
+}
+
+const openEdit = ref(false);
+const editPhoto = ref(null);
+const openPhotoEdit = (photo) => {
+  openEdit.value = true;
+  editPhoto.value = photo;
+}
 </script>
 
 <template>
@@ -105,6 +130,13 @@ const handlePhotosUpload = (data) => {
       </q-tab-panel>
 
       <q-tab-panel name="photos">
+        <PhotosList
+          :photos="flight.photos"
+          @edit="openPhotoEdit"
+          @delete="confirmPhotoDelete"
+        />
+        <PhotoForm v-model="openEdit" :photo="editPhoto" @save="handlePhotoUpdate"/>
+
         <FlightFormPhotos
           :flight="flight"
           @save="handlePhotosUpload"