Nahled pred uploadem

src/components/flights/form/FlightFormPhotos.vue

@@ -2,6 +2,7 @@
 import FormWrapper from "components/FormWrapper.vue";
 import {reactive} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {roundWithPrecision} from "../../../composables/utils";
 
 const props = defineProps({
     flight: {
@@ -17,6 +18,10 @@ const props = defineProps({
 const formData = reactive({
   photos: []
 });
+
+const inlinePreview = (photo) => {
+  return URL.createObjectURL(photo);
+}
 </script>
 
 <template>
@@ -26,6 +31,18 @@ const formData = reactive({
       align: "left"
     }'>
 
+    <div class="flex flex-center">
+      <div v-for="photo in formData.photos" :key="photo.name" style="width: 70px" class="q-ma-sm">
+        <q-img
+          :src="inlinePreview(photo)"
+          fit="fill"
+        >
+          <div class="absolute-top absolute-bottom text-center" v-if="isRequestPending">
+            <q-spinner/>
+          </div>
+        </q-img>
+      </div>
+    </div>
     <q-file
       class="q-my-lg"
       outlined

src/pages/profile/flight/EditFlightPage.vue

@@ -63,10 +63,9 @@ onMounted(() => {
 });
 
 const handleFlightEdit = (data) => {
-  useFlightsStore().update(flightId, data).then(() => {
+  useFlightsStore().update(flightId, data).then((data) => {
     $q.notify(successObject("Úspěšně upraveno"));
-    fetchFlight(flightId);  // je tu potreba ten refetch? Ve storu se upravuje, mozna by stacilo jen getterem upravit
-    // hodnotu `flight`
+    flight.value = data;
   })
 }
 
@@ -77,7 +76,10 @@ const handlePhotosUpload = (data) => {
   const promises = [];
   uploadInProgress.value = true;
   for (const photo of data.photos) {
-    promises.push(usePhotosStore().upload(flightId, {photo}));
+    promises.push(usePhotosStore().upload(flightId, {photo}).then((data) => {
+      flight.value.photos.push(data);
+      photo._uploaded = true;
+    }));
   }
 
   Promise.allSettled(promises).then((values) => {
@@ -90,7 +92,7 @@ const handlePhotosUpload = (data) => {
     if (failed.length > 0)
       $q.notify(warningObject(`Nepovedlo se nahrát ${failed.length} fotek. Zde jsou důvody: ${failed.map(f => f.reason)}`));
 
-    fetchFlight(flightId);
+    data.photos = [];
   }).finally(() => uploadInProgress.value = false);
 }