Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/profile/flight/FlightDetailPage.vue

@@ -13,13 +13,15 @@ import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {flight.value
+onMounted(() => {
   useFlightsStore().fetchDetail(flightId).then(f => {
     const flightNameFormatted = flightName(f);
     useAppStore().setPageTitle(flightNameFormatted);
@@ -40,7 +42,6 @@ const handleDeleteAndRedirect = () => {
     });
 }
 
-
 const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
@@ -67,19 +68,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 <template>
   <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
-  <q-card class="flight-detail-card" v-else>
-    <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-      <div class="absolute-bottom custom-caption">
-        <div class="text-h5"> {{ flightName(flight) }}</div>
-      </div>
-    </q-img>
+  <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
 
-    <q-card-actions class="q-my-md">
+    <template #actions>
       <div class="col-grow">
         <q-btn
           @click="togglePublicVisibility"
           :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
+          :disable="!loggedUser?.publicUsername"
           flat
           :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />
@@ -93,53 +89,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
         />
       </div>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
+    </template>
 
-    <q-card-section>
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
-      </div>
-      <FlightBasicInfo
-        :flight="flight"
-        :copilot-detail-route="{name: 'copilotDetail'}"
-      />
+    <template #content>
+      <q-card-section>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+        </div>
+        <FlightBasicInfo
+          :flight="flight"
+          :aircraft-detail-route="{name: 'aircraftDetail'}"
+          :copilot-detail-route="{name: 'copilotDetail'}"
+        />
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
-      </div>
-      <article class="q-my-lg" v-html="flight.description"/>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+        </div>
+        <article class="q-my-lg" v-html="flight.description"/>
 
-      <q-separator/>
+        <q-separator/>
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
-      </div>
-      <BasicInfoBanner
-        v-if="flight.photos.length === 0"
-        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
-      >
-        U tohoto letu nemáš nahrané žádné fotografie.
-      </BasicInfoBanner>
-      <PhotoGallery
-        v-else
-        :photos="flight.photos"
-      />
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
+        </div>
+        <BasicInfoBanner
+          v-if="flight.photos.length === 0"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+        >
+          U tohoto letu nemáš nahrané žádné fotografie.
+        </BasicInfoBanner>
+        <PhotoGallery
+          v-else
+          :photos="flight.photos"
+        />
 
-      <q-separator/>
+        <q-separator/>
+
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+        </div>
+        <BasicInfoBanner
+          v-if="flight.track.length === 0 && !flight.gpxTrack"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+        >
+          Nemáš nastavenou žádnou trasu.
+        </BasicInfoBanner>
+        <FlightTrackMap
+          v-else
+          :flight="flight"
+          :photos="flight.photos"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
 
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
-      </div>
-      <BasicInfoBanner
-        v-if="flight.track.length === 0 && !flight.gpxTrack"
-        :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
-      >
-        Nemáš nastavenou žádnou trasu.
-      </BasicInfoBanner>
-      <FlightTrackMap
-        v-else
-        :flight="flight"
-      />
-    </q-card-section>
-  </q-card>
 </template>