Slugy, webp, hromada refaktoringu

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -16,6 +16,9 @@ import {successObject} from "src/composables/dialog";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import PublishButton from "components/inputs/PublishButton.vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 
 const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const poiId = parseInt(useRoute().params.id);
@@ -30,23 +33,19 @@ usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
   ])
 });
 
-useFlightsStore().fetch({pointOfInterestId: poiId});
-
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetch,
+  filters: {pointOfInterestId: poiId},
+  appendItems
+});
+loadNextFlightsPage(false);
+const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
-const {isQueryRunning: areFlightsLoading, flights} = storeToRefs(useFlightsStore());
 
 const $q = useQuasar();
-const togglePublicVisibility = () => toggleVisibility({
-  $q, store: usePointsOfInterestStore(), object: pointOfInterest.value
+const togglePublicVisibility = (data) => toggleVisibility({
+  $q, store: usePointsOfInterestStore(), object: pointOfInterest.value, urlSlug: data.urlSlug
 });
-
-const $router = useRouter();
-const copyLinkToClipboard = () => {
-  const url = $router.resolve({name: "publicPOIDetail", params: {id: pointOfInterest.value.id}});
-  copyToClipboard(window.location.origin + url.href).then(() => {
-    $q.notify(successObject("Odkaz zkopírován"))
-  });
-};
 </script>
 
 <template>
@@ -57,18 +56,15 @@ const copyLinkToClipboard = () => {
     <ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name">
       <template #actions v-if="pointOfInterest.createdById === loggedUser.id">
         <div class="col-grow">
-          <q-btn
-              @click="togglePublicVisibility"
-              :icon="pointOfInterest.isPublic ? 'visibility_off' : 'visibility'"
-              flat
-              :label="pointOfInterest.isPublic ? 'Skrýt' : 'Zveřejnit'"
+          <PublishButton
+            url-prefix="/mista/"
+            :is-public="pointOfInterest.isPublic"
+            :require-url-slug="pointOfInterest.urlSlug === ''"
+            @change-visibility="togglePublicVisibility"
           />
-          <q-btn
-              icon="link"
-              @click="copyLinkToClipboard()"
-              flat
-              v-if="pointOfInterest.isPublic"
-              label="Získat odkaz"
+          <CopyLinkButton
+            v-if="pointOfInterest.isPublic"
+            :route="{name: 'publicPOIDetail', params: {slug: pointOfInterest.urlSlug}}"
           />
         </div>
       </template>
@@ -77,28 +73,28 @@ const copyLinkToClipboard = () => {
         <q-card-section>
 
           <ContentCardEditButton
-              :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'info'}}"
-              label="Upravit informace"
+            :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'info'}}"
+            label="Upravit informace"
           />
           <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
           <EmbeddedMap
-              v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
-              :gps-latitude="pointOfInterest.gpsLatitude"
-              :gps-longitude="pointOfInterest.gpsLongitude"
-              :zoom="13"
+            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+            :gps-latitude="pointOfInterest.gpsLatitude"
+            :gps-longitude="pointOfInterest.gpsLongitude"
+            :zoom="13"
           />
           <BasicInfoBanner v-else>
             Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
           </BasicInfoBanner>
 
           <ContentCardEditButton
-              :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'photo'}}"
-              label="Úvodní fotografie"
+            :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'photo'}}"
+            label="Úvodní fotografie"
           />
           <PhotoGallery
-              :photos="pointOfInterest.photos"
-              v-if="pointOfInterest.photos.length > 0"
+            :photos="pointOfInterest.photos"
+            v-if="pointOfInterest.photos.length > 0"
           />
           <BasicInfoBanner v-else>
             Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
@@ -107,11 +103,15 @@ const copyLinkToClipboard = () => {
 
           <h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
 
-          <FlightsListSkeleton v-if="areFlightsLoading && !flights.length" />
+          <FlightsListSkeleton v-if="areFlightsLoading && !flights.length"/>
           <FlightsList
-              :items="flights"
-              :public="false"
-              v-else-if="flights.length > 0"
+            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)"
           />
           <BasicInfoBanner v-else>
             Na tomto místě jsi zatím nebyl/a.