Ne uplne otestovany prepis storu

2023-11-19 00:44:01 +01:00
parent e65491e00b
commit f9d70a5d57
76 changed files with 1445 additions and 1463 deletions
@@ -19,23 +19,21 @@ import PhotosList from "components/photos/PhotosEditorList.vue";
 import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
-import {fetchFlight, flight, loading} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
 import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
 import {useAppStore} from "stores/App";
-import {editBatchPhotos, handleBatchPhotoEdit, openBatchEdit, openBatchPhotoForm} from "src/composables/photos/batchEdit";
-import {editPhoto, handlePhotoUpdate, openEdit, openPhotoEdit} from "src/composables/photos/simpleEdit";
-import {fetchEvents, events} from "src/composables/objects/event";
+import {useEventsStore} from "stores/Events";

 const $q = useQuasar();
 const $route = useRoute();
 const flightId = parseInt($route.params.id);

-const aircrafts = storeToRefs(useAircraftsStore()).items;
-const locations = storeToRefs(usePointsOfInterestStore()).items;
-const airports = storeToRefs(useAirportsStore()).items;
-const copilots = storeToRefs(useCopilotsStore()).items;
-
+const {aircrafts} = storeToRefs(useAircraftsStore());
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {airports} = storeToRefs(useAirportsStore());
+const {copilots} = storeToRefs(useCopilotsStore());
+const {events} = storeToRefs(useEventsStore());
+const {flight, isQueryRunning, isMutationRunning} = storeToRefs(useFlightsStore());

 const formStep = ref("basic");
 watch(() => $route.params.step, (val) => formStep.value = val);
@@ -47,12 +45,10 @@ onMounted(() => {
  usePointsOfInterestStore().fetch();
  useAirportsStore().fetch();
  useCopilotsStore().fetch();
+  useEventsStore().fetch();

-  fetchEvents();
-
-  fetchFlight(flightId).then(() => {
-    const flightNameFormatted = flightName(flight.value);
-
+  useFlightsStore().fetchDetail(flightId).then((f) => {
+    const flightNameFormatted = flightName(f);
    useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
    useAppStore().setBreadcrumbs([
      {to: {name: "myFlights"}, label: "Moje lety"},
@@ -65,13 +61,13 @@ onMounted(() => {
 const handleFlightEdit = (data) => {
  useFlightsStore().update(flightId, data).then((data) => {
    $q.notify(successObject("Úspěšně upraveno"));
-    flight.value = data;
  })
 }

 const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
 const uploadInProgress = ref(false);

+
 const handlePhotosUpload = (data) => {
  // todo udelat batch napr. po 5 requestech
  // TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -100,7 +96,7 @@ const handlePhotosUpload = (data) => {

 const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
 const deletePhoto = (id) => {
-  usePhotosStore().delete(id).then((data) => {
+  usePhotosStore().destroy(id).then((data) => {
    flight.value.photos.splice(_findPhotoIndex(data.id), 1);
  });
 }
@@ -108,47 +104,110 @@ const deletePhoto = (id) => {
 const rotatePhotos = ({photos, direction}) => {
  const promises = [];
  for (const photo of photos) {
-    promises.push(usePhotosStore().changeOrientation(photo.id, direction));
+    promises.push(usePhotosStore().changeOrientation(photo.id, direction).then(data => {
+      const idx = _findPhotoIndex(data.id);
+      data.thumbnailUrl += "?t=" + (new Date()).getTime();
+      flight.value.photos[idx] = data;
+    }));
  }

  let success = 0;
  Promise.allSettled(promises).then(result => {
-    for (const updatedPhoto of result) {
-      const {status, value} = updatedPhoto;
-      if (status === 'fulfilled') success++;
-
-      const idx =_findPhotoIndex(value.id);
-      value.thumbnailUrl += "?t=" + (new Date()).getTime();
-      flight.value.photos[idx] = value;
+    for (const item of result) {
+      if (item.status === 'fulfilled') success++;
    }
-
    const error = result.length - success;

-    if (success > 0) {
-      $q.notify(successObject("Otočeno " + success + " fotografií"));
-    }
-
-    if (error > 0) {
-      $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
-    }
+    if (success > 0) $q.notify(successObject("Otočeno " + success + " fotografií"));
+    if (error > 0) $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
  });
 }
+
+const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
+  const idx = _findPhotoIndex(data.id);
+  flight.value.photos[idx] = data;
+  usePointsOfInterestStore().fetch();
+});
+
+const handlePhotoUpdate = (flightId, formData) => {
+  const photoId = formData.id;
+  delete formData.id;
+
+  return updateSinglePhoto(photoId, formData);
+};
+
+const openEdit = ref(false);
+const editPhoto = ref(null);
+
+const openPhotoEdit = (photo) => {
+  openEdit.value = true;
+  editPhoto.value = photo;
+};
+
+
+// batch edit
+
+const openBatchEdit = ref(false);
+const editBatchPhotos = ref([]);
+const openBatchPhotoForm = (photos) => {
+  openBatchEdit.value = true;
+  editBatchPhotos.value = photos;
+}
+
+const handleBatchPhotoEdit = async (flightId, data) => {
+  const photoIds = data.photoIds;
+  delete data.photoIds;
+  delete data.id;
+
+  if (data.pointOfInterest && !data.pointOfInterest.id) {
+    const poiData = {
+      ...data.pointOfInterest,
+      isPublic: false,
+      description: "",
+    }
+    await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
+  }
+
+  const promises = [];
+  for (const id of photoIds) {
+    const updateData = {};
+    if (data.name !== '') updateData.name = data.name;
+    if (data.description !== '') updateData.description = data.description;
+    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
+
+    if (Object.keys(updateData).length === 0) continue;
+
+    promises.push(updateSinglePhoto(id, data));
+  }
+
+  let success = 0;
+  Promise.allSettled(promises).then(result => {
+    for (const item of result) {
+      if (item.status === 'fulfilled') success++;
+    }
+    const error = result.length - success;
+
+    if (success > 0) $q.notify(successObject("Upraveno " + success + " fotografií"));
+    if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
+  });
+}
+
 </script>

 <template>
  <FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>

-  <FlightEditSkeleton :step="formStep" v-if="loading"/>
+  <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>

  <template v-else>
    <q-tab-panels v-model="formStep">
      <q-tab-panel name="basic">
        <FlightFormBasic
-          @save="handleFlightEdit"
-          :flight="flight"
-          :locations="locations"
-          :airports="airports"
-          :aircrafts="aircrafts"
+            @save="handleFlightEdit"
+            :flight="flight"
+            :locations="pointsOfInterest"
+            :airports="airports"
+            :aircrafts="aircrafts"
        />
      </q-tab-panel>

@@ -158,43 +217,43 @@ const rotatePhotos = ({photos, direction}) => {

      <q-tab-panel name="track">
        <FlightFormTrack
-          v-if="locations"
-          :flight="flight"
-          :locations="locations"
-          :airports="airports"
-          @save="handleFlightEdit"
+            v-if="pointsOfInterest"
+            :flight="flight"
+            :locations="pointsOfInterest"
+            :airports="airports"
+            @save="handleFlightEdit"
        />
      </q-tab-panel>

      <q-tab-panel name="photos">
        <FlightFormPhotos
-          :flight="flight"
-          :is-request-pending="isRequestPending || uploadInProgress"
-          @save="handlePhotosUpload"
+            :flight="flight"
+            :is-request-pending="isRequestPending || uploadInProgress"
+            @save="handlePhotosUpload"
        />

        <PhotosList
-          :photos="flight.photos"
-          @edit="openPhotoEdit"
-          @batch-edit="openBatchPhotoForm"
-          @batch-rotate="rotatePhotos"
-          @delete="deletePhoto"
+            :photos="flight.photos"
+            @edit="openPhotoEdit"
+            @batch-edit="openBatchPhotoForm"
+            @batch-rotate="rotatePhotos"
+            @delete="deletePhoto"
        />

        <!-- Dialogs for photo edit -->
        <PhotoFormDialog
-          v-model="openEdit"
-          :locations="locations"
-          :photo="editPhoto"
-          @save="handlePhotoUpdate(flightId, $event)"
+            v-model="openEdit"
+            :locations="pointsOfInterest"
+            :photo="editPhoto"
+            @save="handlePhotoUpdate(flightId, $event)"
        />

        <BatchPhotoFormDialog
-          v-model="openBatchEdit"
-          :locations="locations"
-          :photos="editBatchPhotos"
-          @save="handleBatchPhotoEdit(flightId, $event)"
-          @delete="deletePhoto"
+            v-model="openBatchEdit"
+            :locations="pointsOfInterest"
+            :photos="editBatchPhotos"
+            @save="handleBatchPhotoEdit(flightId, $event)"
+            @delete="deletePhoto"
        />
      </q-tab-panel>

@@ -2,11 +2,11 @@
 import {useRoute, useRouter} from "vue-router";
 import {computed, onMounted, ref, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
+import {flightName} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {copyToClipboard, useQuasar} from "quasar";
-import {successObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
@@ -19,37 +19,35 @@ const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;

-onMounted(() => {
-  fetchFlight(flightId);
+onMounted(() => {flight.value
+  useFlightsStore().fetchDetail(flightId).then(f => {
+    const flightNameFormatted = flightName(f);
+    useAppStore().setPageTitle(flightNameFormatted);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "myFlights"}, label: "Moje lety"},
+      {label: flightNameFormatted}
+    ]);
+  })
 })

-watch(flight, (newVal) => {
-  const flightNameFormatted = flightName(newVal);
-  useAppStore().setPageTitle(flightNameFormatted);
-  useAppStore().setBreadcrumbs([
-    {to: {name: "myFlights"}, label: "Moje lety"},
-    {label: flightNameFormatted}
-  ]);
-});
-
 const handleDeleteAndRedirect = () => {
-  const flightId = flight.value.id;
-
-  handleDeleteFlight($q, flightId, (flight) => {
-    $router.push({name: "myFlights"});
-    $q.notify(successObject(`Úspěšně smazáno`));
-  })
+  $q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
+    .onOk(() => {
+      useFlightsStore().destroy(flightId).then(() => {
+        $router.push({name: "myFlights"});
+        $q.notify(successObject(`Úspěšně smazáno`));
+      });
+    });
 }


 const togglePublicVisibility = () => {
  const newVisibility = !flight.value.isPublic;
  useFlightsStore()
-      .update(flightId, {isPublic: newVisibility})
-      .then((updatedFlight) => {
-        flight.value = updatedFlight;
-        $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
-      });
+    .update(flightId, {isPublic: newVisibility})
+    .then(() => {
+      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+    });
 };

 const copyLinkToClipboard = () => {
@@ -62,43 +60,36 @@ const copyLinkToClipboard = () => {
    $q.notify(successObject("Odkaz zkopírován"))
  });
 };
+
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 </script>

-
 <template>
-  <FlightDetailSkeleton v-if="loading || !flight"/>
+  <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>

  <q-card class="flight-detail-card" v-else>
    <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-       <div class="absolute-bottom custom-caption">
-          <div class="text-h5"> {{ flightName(flight) }} </div>
-        </div>
+      <div class="absolute-bottom custom-caption">
+        <div class="text-h5"> {{ flightName(flight) }}</div>
+      </div>
    </q-img>

    <q-card-actions class="q-my-md">
      <div class="col-grow">
-<!--        <q-btn-->
-<!--            flat-->
-<!--            :to="{name: 'flightEdit', params:{id: flight.id}}"-->
-<!--            icon="edit"-->
-<!--            text-color="primary"-->
-<!--            label="Upravit"-->
-<!--        />-->
-
        <q-btn
-            @click="togglePublicVisibility"
-            :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-            :disable="!loggedUser.publicUsername"
-            flat
-            :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
+          @click="togglePublicVisibility"
+          :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+          :disable="!loggedUser.publicUsername"
+          flat
+          :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
        />

        <q-btn
-            icon="link"
-            @click="copyLinkToClipboard()"
-            flat
-            v-if="flight.isPublic"
-            label="Získat odkaz"
+          icon="link"
+          @click="copyLinkToClipboard()"
+          flat
+          v-if="flight.isPublic"
+          label="Získat odkaz"
        />
      </div>
      <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
@@ -124,30 +115,30 @@ const copyLinkToClipboard = () => {
        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
      </div>
      <BasicInfoBanner
-          v-if="flight.photos.length === 0"
-          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+        v-if="flight.photos.length === 0"
+        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
      >
        U tohoto letu nemáš nahrané žádné fotografie.
      </BasicInfoBanner>
      <PhotoGallery
-          v-else
-          :photos="flight.photos"
+        v-else
+        :photos="flight.photos"
      />

      <q-separator/>

      <div class="text-right">
-        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
      </div>
      <BasicInfoBanner
-          v-if="flight.track.length === 0 && !flight.gpxTrack"
-          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+        v-if="flight.track.length === 0 && !flight.gpxTrack"
+        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
      >
        Nemáš nastavenou žádnou trasu.
      </BasicInfoBanner>
      <FlightTrackMap
-          v-else
-          :flight="flight"
+        v-else
+        :flight="flight"
      />
    </q-card-section>
  </q-card>
@@ -4,30 +4,33 @@ import {useQuasar} from "quasar";
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FAB from "components/FAB.vue";
-import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";

 const $q = useQuasar();

 useAppStore().setPageTitle("Moje lety")
 onMounted(() => {
-  fetchFlights();
+  useFlightsStore().fetch();
 })
+
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>

 <template>
-  <FlightsListSkeleton v-if="loading"/>
+  <FlightsListSkeleton v-if="isQueryRunning"/>

  <BasicInfoBanner
-    v-else-if="!loading && flights.length === 0"
+    v-else-if="!isQueryRunning && flights.length === 0"
    :route-add="{name: 'addFlight'}"
    label-add="Přidat let"
  >
    Nemáš zaznamenaný žádný let.
  </BasicInfoBanner>

-  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
+  <FlightsList v-else :items="flights"/>

  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
@@ -1,28 +1,21 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 import {useAirportsStore} from "stores/Airports";
+import {useAppStore} from "stores/App";
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
-import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";

-const loading = ref(true);
 onMounted(() => {
-  const promises = [
-    useAircraftsStore().fetch(),
-    usePointsOfInterestStore().fetch(),
-    useFlightsStore().fetch(),
-    useAirportsStore().fetch(),
-  ];
-
-  loading.value = true;
-  Promise.all(promises).finally(() => loading.value = false);
+  useAircraftsStore().fetch()
+  usePointsOfInterestStore().fetch()
+  useFlightsStore().fetch()
+  useAirportsStore().fetch()

  useAppStore().setPageTitle("Nový let");
  useAppStore().setBreadcrumbs([
@@ -31,9 +24,14 @@ onMounted(() => {
  ]);
 });

-const aircrafts = storeToRefs(useAircraftsStore()).items;
-const locations = storeToRefs(usePointsOfInterestStore()).items;
-const airports = storeToRefs(useAirportsStore()).items;
+const {isMutationRunning} = storeToRefs(useFlightsStore());
+const {aircrafts} = storeToRefs(useAircraftsStore());
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {airports} = storeToRefs(useAirportsStore());
+
+const loading = computed(() => [
+  useAircraftsStore().isQueryRunning, usePointsOfInterestStore().isQueryRunning, useAirportsStore().isQueryRunning
+].some(i => i.value))

 const router = useRouter();
 const handleSave = (formData) => {
@@ -49,11 +47,11 @@ const handleSave = (formData) => {
  <FlightEditSkeleton step="basic" v-if="loading"/>
  <template v-else>
    <FlightFormBasic
-      @save="handleSave"
-      :is-request-pending="isRequestPending"
-      :aircrafts="aircrafts"
-      :airports="airports"
-      :locations="locations"
+        @save="handleSave"
+        :is-request-pending="isMutationRunning"
+        :aircrafts="aircrafts"
+        :airports="airports"
+        :locations="pointsOfInterest"
    />
  </template>
 </template>
@@ -7,11 +7,13 @@ import {flightName} from "src/composables/objects/flight";
 import VuePictureCropper from 'vue-picture-cropper';
 import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
 import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
-import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
-import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
+import {aspectRatioOptions, croppedArea, cropperReady, photoAspectRatio, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
 import {debounce, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import {storeToRefs} from "pinia";
+import FormSubmitButton from "components/FormSubmitButton.vue";
+import FormWrapper from "components/FormWrapper.vue";

 const $route = useRoute();
 const $q = useQuasar();
@@ -43,24 +45,24 @@ watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
 const savePhotoAdjustment = (photoId) => {
  const adjustmentInput = {...adjustment.value};

-  if (croppedArea.value.left !== null) {
+  if (croppedArea.value && croppedArea.value.left !== null) {
    adjustmentInput.crop = {...croppedArea.value}
  }

  usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
    noCacheTimestamp.value = (new Date()).getTime();
-    photo.value = data;
-
    $q.notify(successObject("Fotka úspěšně upravena"));
  });
 };

 onMounted(() => {
-  fetchPhoto(photoId).then(() => {
-    const flightNameFormatted = flightName(photo.value.flight);
+  usePhotosStore().fetchDetail(photoId).then((p) => {
+    const flightNameFormatted = flightName(p.flight);

-    if (photo.value.adjustment) {
-      const photoAdjustment = photo.value.adjustment;
+    photoAspectRatio.value = p.width / p.height;
+
+    if (p.adjustment) {
+      const photoAdjustment = p.adjustment;
      const src = photoAdjustment || defaultAdjustments;
      for (const i in defaultAdjustments) {
        adjustment.value[i] = src[i];
@@ -77,33 +79,35 @@ onMounted(() => {
    }
    useAppStore().setBreadcrumbs([
      {to: {name: "myFlights"}, label: "Moje lety"},
-      {to: {name: "flightDetail", params: {id: photo.value.flightId}}, label: flightNameFormatted},
-      {to: {name: "flightEdit", params: {id: photo.value.flightId, step: 'photos'}}, label: "Fotografie"},
+      {to: {name: "flightDetail", params: {id: p.flightId}}, label: flightNameFormatted},
+      {to: {name: "flightEdit", params: {id: p.flightId, step: 'photos'}}, label: "Fotografie"},
      {label: "Foto editor"}
    ]);
  })

  useAppStore().setPageTitle("Foto editor");
 });
+
+const {isQueryRunning, isMutationRunning, photo} = storeToRefs(usePhotosStore());
 </script>

 <template>
  <q-resize-observer @resize="onResize" :debounce="100"/>

-  <PhotoEditorSkeleton v-if="loading" />
+  <PhotoEditorSkeleton v-if="isQueryRunning"/>

-  <template v-if="!loading">
+  <template v-if="!isQueryRunning">
    <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
      <VuePictureCropper
-        v-if="editorTab === 'crop'"
-        :img="uncroppedAdjusted"
-        :boxStyle="{
+          v-if="editorTab === 'crop'"
+          :img="uncroppedAdjusted"
+          :boxStyle="{
            width: '100%',
            height: '100%',
            backgroundColor: '#f8f8f8',
            margin: 'auto',
          }"
-        :options="{
+          :options="{
          viewMode: 1,
          autoCropArea: 1,
          dragMode: 'none',
@@ -111,8 +115,8 @@ onMounted(() => {
          draggable: false,
          rotatable: false,
        }"
-        @cropend="setCropData"
-        @ready="cropperReady"
+          @cropend="setCropData"
+          @ready="cropperReady"
      />

      <div class="overflow-hidden relative-position" v-else-if="editorTab === 'rotate'">
@@ -123,29 +127,29 @@ onMounted(() => {
      <div class="overflow-hidden" v-else>
        <q-img fit="contain" :src="croppedAdjusted" v-show="!compare"/>
        <q-splitter
-          v-show="compare"
-          v-model="splitter"
-          :limits="[0, 100]"
-          :style="{
+            v-show="compare"
+            v-model="splitter"
+            :limits="[0, 100]"
+            :style="{
              height: Math.round(splitterWidth / photoAspectRatio) + 'px',
              width: splitterWidth.value + 'px'
            }"
-          before-class="overflow-hidden"
-          after-class="overflow-hidden">
+            before-class="overflow-hidden"
+            after-class="overflow-hidden">
          <template #before>
            <img
-              :width="splitterWidth"
-              class="absolute-top-left"
-              :src="croppedUnadjusted"
-              alt="before"
+                :width="splitterWidth"
+                class="absolute-top-left"
+                :src="croppedUnadjusted"
+                alt="before"
            />
          </template>
          <template #after>
            <img
-              :width="splitterWidth"
-              class="absolute-top-right"
-              :src="croppedAdjusted"
-              alt="after"
+                :width="splitterWidth"
+                class="absolute-top-right"
+                :src="croppedAdjusted"
+                alt="after"
            />
          </template>
        </q-splitter>
@@ -167,121 +171,120 @@ onMounted(() => {
        </q-tabs>
        <q-separator/>

-        <q-tab-panels v-model="editorTab" animated>
-          <q-tab-panel name="colors">
-            <q-list>
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="contrast"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.contrast"
-                    :min="0.5"
-                    :max="1.5"
-                    :step="0.01"
-                    label-always
-                    @dblclick="adjustment.contrast=1"
-                    :label="true"
-                  />
-                </q-item-section>
-              </q-item>

-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="brightness_6"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.brightness"
-                    :min="0.5"
-                    :max="1.5"
-                    :step="0.01"
-                    :label="true"
-                    label-always
-                    @dblclick="adjustment.brightness = 1"
-                  />
-                </q-item-section>
-              </q-item>
-
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="palette"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.saturation"
-                    :min="0"
-                    :max="2"
-                    :step="0.05"
-                    :label="true"
-                    label-always
-                    @dblclick="adjustment.saturation = 1"
-                  />
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-tab-panel>
-          <q-tab-panel name="details">
-            <q-list>
-              <q-item>
-                <q-item-section avatar>
-                  <q-icon name="deblur"/>
-                </q-item-section>
-                <q-item-section>
-                  <q-slider
-                    v-model="adjustment.sharpness"
-                    :min="-3"
-                    :max="8"
-                    :step="1"
-                    :label="true"
-                    label-always
-                    snap
-                    @dblclick="adjustment.sharpness=1"
-                  />
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-tab-panel>
-          <q-tab-panel name="rotate">
-            <q-list>
-              <q-item>
-                <q-item-section avatar>
-                  <q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
-                </q-item-section>
-                <q-item-section>
+        <FormWrapper :is-request-pending="isMutationRunning" @save="savePhotoAdjustment(photoId)">
+          <q-tab-panels v-model="editorTab" animated>
+            <q-tab-panel name="colors">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="contrast"/>
+                  </q-item-section>
+                  <q-item-section>
                    <q-slider
-                      v-model="adjustment.rotate"
-                      :min="-45"
-                      :max="45"
-                      :step="0.1"
-                      :label="true"
-                      label-always
-                      @dblclick="adjustment.rotate=0"
+                        v-model="adjustment.contrast"
+                        :min="0.5"
+                        :max="1.5"
+                        :step="0.01"
+                        label-always
+                        @dblclick="adjustment.contrast=1"
+                        :label="true"
                    />
-                </q-item-section>
-                <q-item-section avatar>
-                  <q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-tab-panel>
-          <q-tab-panel name="crop">
-            <q-btn-toggle
-              no-caps
-              spread
-              v-model="selectedAspectRatio"
-              toggle-color="primary"
-              :options="aspectRatioOptions"
-              class="q-ma-lg"
-            />
-          </q-tab-panel>
-        </q-tab-panels>
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="brightness_6"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.brightness"
+                        :min="0.5"
+                        :max="1.5"
+                        :step="0.01"
+                        :label="true"
+                        label-always
+                        @dblclick="adjustment.brightness = 1"
+                    />
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="palette"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.saturation"
+                        :min="0"
+                        :max="2"
+                        :step="0.05"
+                        :label="true"
+                        label-always
+                        @dblclick="adjustment.saturation = 1"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-tab-panel>
+            <q-tab-panel name="details">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="deblur"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.sharpness"
+                        :min="-3"
+                        :max="8"
+                        :step="1"
+                        :label="true"
+                        label-always
+                        snap
+                        @dblclick="adjustment.sharpness=1"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-tab-panel>
+            <q-tab-panel name="rotate">
+              <q-list>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-slider
+                        v-model="adjustment.rotate"
+                        :min="-45"
+                        :max="45"
+                        :step="0.1"
+                        :label="true"
+                        label-always
+                        @dblclick="adjustment.rotate=0"
+                    />
+                  </q-item-section>
+                  <q-item-section avatar>
+                    <q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-tab-panel>
+            <q-tab-panel name="crop">
+              <q-btn-toggle
+                  no-caps
+                  spread
+                  v-model="selectedAspectRatio"
+                  toggle-color="primary"
+                  :options="aspectRatioOptions"
+                  class="q-ma-lg"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+        </FormWrapper>
      </q-card-section>
-      <q-card-actions>
-        <q-space/>
-        <q-btn color="primary" icon="save" @click="savePhotoAdjustment(photoId)">Uložit</q-btn>
-      </q-card-actions>
    </q-card>
  </template>
 </template>