Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -2,8 +2,8 @@
 import {useCopilotsStore} from "stores/Copilots";
 
 export default {
-  preFetch({currentRoute}) {
-    return useCopilotsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
@@ -13,6 +13,14 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {usePhotosStore} from "stores/Photos";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import ContentCard from "components/ContentCard.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
 const props = defineProps({
   pilot: {
@@ -22,25 +30,47 @@ const props = defineProps({
 });
 
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 
-useAppStore().setPageTitle(`${pilot.name} + ${copilot.value.name}`);
+useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
 useAppStore().setBreadcrumbs([
   {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-  {label: props.pilot.name}
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {label: copilot.value.name}
 ]);
 
+useMeta(() => metaData({
+  title: copilot.value.name,
+  keywords: ["kopilot", "výlet", "fotogalerie", copilot.value.name, "létání", "fotografie"],
+  description: `Společné polétání: ${props.pilot.name} + ${copilot.value.name}.`,
+  image: copilot.value.titleImage?.url
+}));
+
+useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 </script>
 
 <template>
-  <BasicListSkeleton v-if="isQueryRunning || !copilot" class="q-mb-md"/>
 
-  <template v-else>
-    <h3>Společné lety</h3>
-    <FlightsList
-      :items="copilot.flights"
-      :route-detail="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}"
-      class="q-mb-md"
-    />
-  </template>
+  <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
+    <template #content>
+      <q-card-section>
+
+        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallery :photos="photos" v-else/>
+
+        <h3>Společné lety</h3>
+        <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
+        <FlightsList
+          v-else
+          :items="flights"
+          :public="true"
+          class="q-mb-md"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
+
+
 </template>