Bugfixing, dotazeni uprav s uvodni fotkou

src/pages/profile/flight/FlightDetailPage.vue

@@ -15,41 +15,40 @@ 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";
+import ContentCardEditButton from "components/ContentCardEditButton.vue";
+import {toggleVisibility} from "src/composables/form/formHandling";
 
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {
-  useFlightsStore().fetchDetail(flightId).then(f => {
-    const flightNameFormatted = flightName(f);
-    useAppStore().setPageTitle(flightNameFormatted);
-    useAppStore().setBreadcrumbs([
-      {to: {name: "myFlights"}, label: "Moje lety"},
-      {label: flightNameFormatted}
-    ]);
-  })
-})
+useFlightsStore().fetchDetail(flightId).then(f => {
+  if (!f) return;
+
+  const flightNameFormatted = flightName(f);
+  useAppStore().setPageTitle(flightNameFormatted);
+  useAppStore().setBreadcrumbs([
+    {to: {name: "myFlights"}, label: "Moje lety"},
+    {label: flightNameFormatted}
+  ]);
+});
 
 const handleDeleteAndRedirect = () => {
   $q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
-    .onOk(() => {
-      useFlightsStore().destroy(flightId).then(() => {
-        $router.push({name: "myFlights"});
-        $q.notify(successObject(`Úspěšně smazáno`));
+      .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(() => {
-      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
-    });
-};
+const togglePublicVisibility = () => toggleVisibility({
+  $q,
+  store: useFlightsStore(),
+  object: flight.value
+});
 
 const copyLinkToClipboard = () => {
   const loggedUser = useUserStore().user;
@@ -73,19 +72,19 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
     <template #actions>
       <div class="col-grow">
         <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"/>
@@ -93,54 +92,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
     <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>
+        <ContentCardEditButton
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}"
+            label="Upravit informace"
+        />
         <FlightBasicInfo
-          :flight="flight"
-          :aircraft-detail-route="{name: 'aircraftDetail'}"
-          :copilot-detail-route="{name: 'copilotDetail'}"
+            :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>
+        <ContentCardEditButton
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}"
+            label="Upravit text"
+        />
         <article class="q-my-lg" v-html="flight.description"/>
+        <BasicInfoBanner v-if="flight.description === ''">Popiš, jaký byl let.</BasicInfoBanner>
 
         <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>
+        <ContentCardEditButton
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+            label="Upravit fotografie"
+        />
         <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 flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
-        </div>
+        <ContentCardEditButton
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+            label="Upravit trasu"
+        />
         <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"
-          :photos="flight.photos"
+            v-else
+            :flight="flight"
+            :photos="flight.photos"
         />
       </q-card-section>
     </template>
   </ContentCard>
-
 </template>