Slugy, webp, hromada refaktoringu

src/pages/profile/copilot/CopilotDetailPage.vue

@@ -8,57 +8,96 @@ import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {useMeta, useQuasar} from "quasar";
+import {useLoggedUserStore} from "stores/LoggedUser";
+import PublishButton from "components/inputs/PublishButton.vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
+import {toggleVisibility} from "src/composables/form/formHandling";
+import {metaData} from "src/composables/meta";
 
 const copilotId = parseInt(useRoute().params.id);
-onMounted(() => {
-  useCopilotsStore().fetchDetail(copilotId).then(() => {
-    useAppStore().setPageTitle(copilot.value.name);
-    useAppStore().setBreadcrumbs([
-      {to: {name: "copilots"}, label: "Kopiloti"},
-      {label: copilot.value.name}
-    ])
-  });
+useCopilotsStore().fetchDetail(copilotId).then(() => {
+  useAppStore().setPageTitle(copilot.value.name);
+  useAppStore().setBreadcrumbs([
+    {to: {name: "copilots"}, label: "Kopiloti"},
+    {label: copilot.value.name}
+  ])
 });
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetch,
+  filters: {copilotId: copilotId},
+  appendItems
+});
+loadNextFlightsPage(false);
+const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
 const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
+
+const $q = useQuasar();
+const togglePublicVisibility = (data) => toggleVisibility({
+  $q, store: useCopilotsStore(), object: copilot.value, urlSlug: data.urlSlug
+});
 </script>
 
 <template>
   <CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
 
-  <template v-else>
+  <ContentCard :title-photo="copilot.titlePhoto" :title="copilot.name" v-else>
+    <template #actions>
+      <div class="col-grow">
+        <q-btn
+          flat
+          :to="{name: 'copilotEdit', params: {id: copilotId}}"
+          icon="edit"
+          text-color="primary"
+          label="Upravit"
+        />
 
-    <ContentCard :title-photo="copilot.titlePhoto" :title="copilot.name">
-      <template #actions>
-        <div class="col-grow">
-          <q-btn
-            flat
-            :to="{name: 'copilotEdit', params: {id: copilotId}}"
-            icon="edit"
-            text-color="primary"
-            label="Upravit"
-          />
-        </div>
-      </template>
-      <template #content>
-        <q-card-section>
-          <PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
-          <q-banner v-else class="bg-light-blue text-white">
-            Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
-            fotografie se zobrazí v galerii.
-          </q-banner>
+        <PublishButton
+          :url-prefix="`/${loggedUser?.publicUsername}/a/`"
+          :is-public="copilot.isPublic"
+          :require-url-slug="copilot.urlSlug === ''"
+          @change-visibility="togglePublicVisibility"
+        />
+        <CopyLinkButton
+          v-if="copilot.isPublic"
+          :route="{
+            name: 'publicCopilotDetail', params: {
+              username: loggedUser.publicUsername,
+              copilotSlug: copilot.urlSlug
+            }}"
+        />
+      </div>
+    </template>
+    <template #content>
+      <q-card-section>
+        <PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
+        <q-banner v-else class="bg-light-blue text-white">
+          Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
+          fotografie se zobrazí v galerii.
+        </q-banner>
 
-          <h3>Společné lety</h3>
+        <h3>Společné lety</h3>
 
-          <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
-            Zatím tu nemáš uložené žádné společné lety.
-          </q-banner>
-
-          <FlightsList :items="copilot.flights" :public="false" v-else/>
-        </q-card-section>
-      </template>
-
-    </ContentCard>
-
-  </template>
+        <FlightsListSkeleton v-if="areFlightsLoading && !flights.length"/>
+        <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-banner v-if="flights.length === 0" class="bg-light-blue text-white">
+          Zatím tu nemáš uložené žádné společné lety.
+        </q-banner>
+      </q-card-section>
+    </template>
+  </ContentCard>
 </template>