Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/profile/flight/EditFlightPage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
-import {onMounted, ref, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import {useRoute} from "vue-router";
 import {useFlightsStore} from "stores/Flights";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
@@ -14,8 +14,8 @@ import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
 import {useCopilotsStore} from "stores/Copilots";
 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/PhotosEditorList.vue";
+import {usePhotosStore} from "stores/Photos";
+import PhotosEditorList 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";
@@ -67,7 +67,6 @@ const handleFlightEdit = (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)
@@ -101,6 +100,12 @@ const deletePhoto = (id) => {
   });
 }
 
+const setTitlePhoto = (photo) => {
+  useFlightsStore().update(flight.value.id, {titlePhotoId: photo.id}).then(f => {
+    $q.notify(successObject("Úvodní fotografie úspěšně nastavena"));
+  });
+}
+
 const rotatePhotos = ({photos, direction}) => {
   const promises = [];
   for (const photo of photos) {
@@ -123,11 +128,15 @@ const rotatePhotos = ({photos, direction}) => {
   });
 }
 
-const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
-  const idx = _findPhotoIndex(data.id);
-  flight.value.photos[idx] = data;
-  usePointsOfInterestStore().fetch();
-});
+const updateSinglePhoto = (id, formData) => {
+  formData.copilots = formData.copilots.map(c => ({id: c.id, name: c.name}));
+
+  return 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;
@@ -170,13 +179,14 @@ const handleBatchPhotoEdit = async (flightId, data) => {
 
   const promises = [];
   for (const id of photoIds) {
-    const updateData = {};
+    const updateData = {
+      isAircraft: data.isAircraft,
+      copilots: data.copilots.map(c => ({id: c.id, name: c.name}))
+    };
     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));
   }
 
@@ -191,7 +201,6 @@ const handleBatchPhotoEdit = async (flightId, data) => {
     if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
   });
 }
-
 </script>
 
 <template>
@@ -203,11 +212,11 @@ const handleBatchPhotoEdit = async (flightId, data) => {
     <q-tab-panels v-model="formStep">
       <q-tab-panel name="basic">
         <FlightFormBasic
-            @save="handleFlightEdit"
-            :flight="flight"
-            :locations="pointsOfInterest"
-            :airports="airports"
-            :aircrafts="aircrafts"
+          @save="handleFlightEdit"
+          :flight="flight"
+          :locations="pointsOfInterest"
+          :airports="airports"
+          :aircrafts="aircrafts"
         />
       </q-tab-panel>
 
@@ -217,43 +226,50 @@ const handleBatchPhotoEdit = async (flightId, data) => {
 
       <q-tab-panel name="track">
         <FlightFormTrack
-            v-if="pointsOfInterest"
-            :flight="flight"
-            :locations="pointsOfInterest"
-            :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"
+        <PhotosEditorList
+          :title-photo="flight.titlePhoto"
+          :photos="flight.photos"
+          :show-actions="true"
+          @edit="openPhotoEdit"
+          @batch-edit="openBatchPhotoForm"
+          @batch-rotate="rotatePhotos"
+          @delete="deletePhoto"
+          @set-title-photo="setTitlePhoto"
         />
 
         <!-- Dialogs for photo edit -->
         <PhotoFormDialog
-            v-model="openEdit"
-            :locations="pointsOfInterest"
-            :photo="editPhoto"
-            @save="handlePhotoUpdate(flightId, $event)"
+          v-model="openEdit"
+          :copilots="flight.copilots"
+          :aircraft="flight.aircraft"
+          :locations="pointsOfInterest"
+          :photo="editPhoto"
+          @save="handlePhotoUpdate(flightId, $event)"
         />
 
         <BatchPhotoFormDialog
-            v-model="openBatchEdit"
-            :locations="pointsOfInterest"
-            :photos="editBatchPhotos"
-            @save="handleBatchPhotoEdit(flightId, $event)"
-            @delete="deletePhoto"
+          v-model="openBatchEdit"
+          :locations="pointsOfInterest"
+          :photos="editBatchPhotos"
+          :copilots="flight.copilots"
+          :aircraft="flight.aircraft"
+          @save="handleBatchPhotoEdit(flightId, $event)"
+          @delete="deletePhoto"
         />
       </q-tab-panel>
 

src/pages/profile/flight/FlightDetailPage.vue

@@ -13,13 +13,15 @@ import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {flight.value
+onMounted(() => {
   useFlightsStore().fetchDetail(flightId).then(f => {
     const flightNameFormatted = flightName(f);
     useAppStore().setPageTitle(flightNameFormatted);
@@ -40,7 +42,6 @@ const handleDeleteAndRedirect = () => {
     });
 }
 
-
 const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
@@ -67,19 +68,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 <template>
   <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>
-    </q-img>
+  <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
 
-    <q-card-actions class="q-my-md">
+    <template #actions>
       <div class="col-grow">
         <q-btn
           @click="togglePublicVisibility"
           :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
+          :disable="!loggedUser?.publicUsername"
           flat
           :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />
@@ -93,53 +89,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
         />
       </div>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
+    </template>
 
-    <q-card-section>
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
-      </div>
-      <FlightBasicInfo
-        :flight="flight"
-        :copilot-detail-route="{name: 'copilotDetail'}"
-      />
+    <template #content>
+      <q-card-section>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+        </div>
+        <FlightBasicInfo
+          :flight="flight"
+          :aircraft-detail-route="{name: 'aircraftDetail'}"
+          :copilot-detail-route="{name: 'copilotDetail'}"
+        />
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
-      </div>
-      <article class="q-my-lg" v-html="flight.description"/>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+        </div>
+        <article class="q-my-lg" v-html="flight.description"/>
 
-      <q-separator/>
+        <q-separator/>
 
-      <div class="text-right">
-        <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'}}"
-      >
-        U tohoto letu nemáš nahrané žádné fotografie.
-      </BasicInfoBanner>
-      <PhotoGallery
-        v-else
-        :photos="flight.photos"
-      />
+        <div class="text-right">
+          <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'}}"
+        >
+          U tohoto letu nemáš nahrané žádné fotografie.
+        </BasicInfoBanner>
+        <PhotoGallery
+          v-else
+          :photos="flight.photos"
+        />
 
-      <q-separator/>
+        <q-separator/>
+
+        <div class="text-right">
+          <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'}}"
+        >
+          Nemáš nastavenou žádnou trasu.
+        </BasicInfoBanner>
+        <FlightTrackMap
+          v-else
+          :flight="flight"
+          :photos="flight.photos"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
 
-      <div class="text-right">
-        <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'}}"
-      >
-        Nemáš nastavenou žádnou trasu.
-      </BasicInfoBanner>
-      <FlightTrackMap
-        v-else
-        :flight="flight"
-      />
-    </q-card-section>
-  </q-card>
 </template>

src/pages/profile/flight/FlightsPage.vue

@@ -32,7 +32,7 @@ const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights"/>
+  <FlightsList v-else :items="flights" :public="false" />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/flight/PhotoEditorPage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted, ref, watch} from "vue";
-import {usePhotosStore} from "stores/Photo";
+import {usePhotosStore} from "stores/Photos";
 import {useAppStore} from "stores/App";
 import {flightName} from "src/composables/flight";
 import VuePictureCropper from 'vue-picture-cropper';