Slugy, webp, hromada refaktoringu

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -1,30 +1,30 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {copyToClipboard, useMeta, useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
-import AircraftDetailCard from "components/aircrafts/AircraftInfo.vue";
 import {storeToRefs} from "pinia";
 import {useAircraftsStore} from "stores/Aircrafts";
-import {computed, watch} from "vue";
+import {watch} from "vue";
 import {metaData} from "src/composables/meta";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
-import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
 import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
 import {useLoggedUserStore} from "stores/LoggedUser";
 import {useFlightsStore} from "stores/Flights";
 import {toggleVisibility} from "src/composables/form/formHandling";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
-
-const $q = useQuasar();
-const $router = useRouter();
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
+import PublishButton from "components/inputs/PublishButton.vue";
 
 const aircraftId = parseInt(useRoute().params.id);
+
 useAircraftsStore().fetchDetail(aircraftId);
-const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 watch(() => aircraft.value, (newVal) => {
   if (!newVal) return;
@@ -37,31 +37,31 @@ watch(() => aircraft.value, (newVal) => {
   ])
 });
 
+const $q = useQuasar();
+const $router = useRouter();
 const deleteAircraft = (id) => {
   $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
-      .onOk(() => {
-        useAircraftsStore().destroy(id).then(() => {
-          $router.push({name: "aircrafts"});
-          $q.notify(successObject("Letadlo úspěšně odstraněno"));
-        });
+    .onOk(() => {
+      useAircraftsStore().destroy(id).then(() => {
+        $router.push({name: "aircrafts"});
+        $q.notify(successObject("Letadlo úspěšně odstraněno"));
       });
+    });
 };
 
 const togglePublicVisibility = () => toggleVisibility({
-  $q,
-  store: useAircraftsStore(),
-  object: aircraft.value
+  $q, store: useAircraftsStore(), object: aircraft.value
 });
 
-const copyLinkToClipboard = () => {
-  const url = $router.resolve({
-    name: "publicAircraftDetail",
-    params: {id: aircraftId}
-  });
-  copyToClipboard(window.location.origin + url.href).then(() => {
-    $q.notify(successObject("Odkaz zkopírován"))
-  });
-};
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetch,
+  filters: {aircraftId: aircraftId},
+  appendItems
+});
+const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
+loadNextFlightsPage(false);
+
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 </script>
 
 <template>
@@ -71,18 +71,15 @@ const copyLinkToClipboard = () => {
     <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
       <template #actions v-if="aircraft.createdById === loggedUser?.id">
         <div class="col-grow">
-          <q-btn
-              @click="togglePublicVisibility"
-              :icon="aircraft.isPublic ? 'visibility_off' : 'visibility'"
-              flat
-              :label="aircraft.isPublic ? 'Skrýt' : 'Zveřejnit'"
+          <PublishButton
+            url-prefix="/letadla"
+            :is-public="aircraft.isPublic"
+            :require-url-slug="false"
+            @change-visibility="togglePublicVisibility"
           />
-          <q-btn
-              icon="link"
-              @click="copyLinkToClipboard()"
-              flat
-              v-if="aircraft.isPublic"
-              label="Získat odkaz"
+          <CopyLinkButton
+            v-if="aircraft.isPublic"
+            :route="{name: 'publicAircraftDetail', params: {callsign: aircraft.callSign}}"
           />
         </div>
         <q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
@@ -91,21 +88,31 @@ const copyLinkToClipboard = () => {
         <q-card-section>
 
           <ContentCardEditButton
-              :to='{name: "aircraftEdit", params: {id: aircraft.id, step: "info"}}'
-              label="Upravit informace"
+            :to='{name: "aircraftEdit", params: {id: aircraft.id, step: "info"}}'
+            label="Upravit informace"
           />
           <AircraftInfo :aircraft="aircraft"/>
 
           <ContentCardEditButton
-              :to='{name: "aircraftEdit", params: {id: aircraft.id, step: "photo"}}'
-              label="Titulní fotografie"
+            :to='{name: "aircraftEdit", params: {id: aircraft.id, step: "photo"}}'
+            label="Titulní fotografie"
           />
           <PhotoGallery :photos="aircraft.photos"/>
+
           <h3>Lety</h3>
-          <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
+          <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
+          <BasicInfoBanner v-if="flights.length === 0">
             Zatím žádné lety.
-          </q-banner>
-          <FlightsList :items="aircraft.flights" :public="false" v-else/>
+          </BasicInfoBanner>
+          <FlightsList
+            v-else-if="flights.length > 0"
+            :public="false"
+            :items="flights"
+            :total-items-count="totalItemsCount"
+            :is-query-running="areFlightsLoading"
+            :items-per-page="paginationLimit"
+            @load-more="loadNextFlightsPage(true)"
+          />
         </q-card-section>
       </template>
     </ContentCard>