Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/profile/copilot/CopilotDetailPage.vue

@@ -1,12 +1,15 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
 
 const copilotId = parseInt(useRoute().params.id);
 onMounted(() => {
@@ -20,20 +23,51 @@ onMounted(() => {
 });
 
 const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
+
+const copilotTitlePhoto = computed(() => {
+  if (!copilot.value || copilot.value.photos.length === 0) return null;
+
+  return copilot.value.photos[0];
+});
+
 </script>
 
 <template>
   <CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
 
   <template v-else>
-    <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>
+    <ContentCard :title-photo="copilotTitlePhoto" :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>
 
-    <FlightsList :items="copilot.flights" v-else/>
+          <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>
 
-    <FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
   </template>
 </template>