Slugy, webp, hromada refaktoringu

src/pages/profile/flight/FlightDetailPage.vue

@@ -1,11 +1,11 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {computed, onMounted, ref, watch} from "vue";
+import {watch} from "vue";
 import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkeleton.vue";
 import {flightName} from "src/composables/flight";
 import {useAppStore} from "stores/App";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
-import {copyToClipboard, useQuasar} from "quasar";
+import {useQuasar} from "quasar";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
@@ -13,13 +13,12 @@ import {useLoggedUserStore} from "stores/LoggedUser";
 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";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
 import {toggleVisibility} from "src/composables/form/formHandling";
+import PublishButton from "components/inputs/PublishButton.vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 
-const $q = useQuasar();
-const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
@@ -35,76 +34,67 @@ watch(() => flight.value, (f) => {
   ]);
 });
 
+const $q = useQuasar();
+const $router = useRouter();
 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 = () => toggleVisibility({
+const togglePublicVisibility = (data) => toggleVisibility({
   $q,
   store: useFlightsStore(),
-  object: flight.value
+  object: flight.value,
+  urlSlug: data.isPublic ? data.urlSlug : undefined
 });
-
-const copyLinkToClipboard = () => {
-  const loggedUser = useLoggedUserStore().user;
-  const url = $router.resolve({
-    name: "publicFlightDetail",
-    params: {id: flightId, username: loggedUser.publicUsername}
-  });
-  copyToClipboard(window.location.origin + url.href).then(() => {
-    $q.notify(successObject("Odkaz zkopírován"))
-  });
-};
 </script>
 
 <template>
   <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
   <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
-
     <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'"
-        />
-
-        <q-btn
-            icon="link"
-            @click="copyLinkToClipboard()"
-            flat
+      <template v-if="loggedUser.publicUsername">
+        <div class="col-grow">
+          <PublishButton
+            :url-prefix="`/${loggedUser.publicUsername}/`"
+            :is-public="flight.isPublic"
+            :require-url-slug="!flight.urlSlug"
+            @change-visibility="togglePublicVisibility"
+          />
+          <CopyLinkButton
+            :route='{
+            name: "publicFlightDetail",
+            params: {flightSlug: flight.urlSlug, username: loggedUser.publicUsername}
+          }'
             v-if="flight.isPublic"
-            label="Získat odkaz"
-        />
-      </div>
+          />
+        </div>
+      </template>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
     </template>
 
     <template #content>
       <q-card-section>
         <ContentCardEditButton
-            :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}"
-            label="Upravit informace"
+          :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}"
+          label="Upravit informace"
         />
         <FlightBasicInfo
-            :flight="flight"
-            :poi-detail-route="{name: 'poiDetail'}"
-            :aircraft-detail-route="{name: 'aircraftDetail'}"
-            :copilot-detail-route="{name: 'copilotDetail'}"
+          :flight="flight"
+          :poi-detail-route="{name: 'poiDetail'}"
+          :aircraft-detail-route="{name: 'aircraftDetail'}"
+          :copilot-detail-route="{name: 'copilotDetail'}"
         />
 
         <ContentCardEditButton
-            :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}"
-            label="Upravit text"
+          :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>
@@ -112,36 +102,36 @@ const copyLinkToClipboard = () => {
         <q-separator/>
 
         <ContentCardEditButton
-            :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
-            label="Upravit fotografie"
+          :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/>
 
         <ContentCardEditButton
-            :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
-            label="Upravit trasu"
+          :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>