Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -1,28 +1,33 @@
 <script setup>
-import {onMounted, watch} from "vue";
-import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {successObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
-import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
+import AircraftDetailCard from "components/aircrafts/AircraftInfo.vue";
 import {storeToRefs} from "pinia";
+import {useAircraftsStore} from "stores/Aircrafts";
+import {computed, watch} from "vue";
+import {metaData} from "src/composables/meta";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";
+import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
+import {useUserStore} from "stores/User";
 
 const $q = useQuasar();
 const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
-onMounted(() => {
-  useAircraftsStore().fetchDetail(aircraftId);
-})
-
+useAircraftsStore().fetchDetail(aircraftId);
+const loggedUser = storeToRefs(useUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 watch(() => aircraft.value, (newVal) => {
   if (!newVal) return;
 
   useAppStore().setPageTitle(newVal.callSign);
+  useMeta(() => metaData({title: newVal.callSign}));
   useAppStore().setBreadcrumbs([
     {label: "Letadla", to: {name: "aircrafts"}},
     {label: newVal.callSign}
@@ -30,29 +35,47 @@ watch(() => aircraft.value, (newVal) => {
 });
 
 const deleteAircraft = (id) => {
-  useAircraftsStore().destroy(id).then(() => {
-    $router.push({name: "aircrafts"});
-    $q.notify(successObject("Letadlo úspěšně odstraněno"));
-  });
-}
+  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
+    .onOk(() => {
+      useAircraftsStore().destroy(id).then(() => {
+        $router.push({name: "aircrafts"});
+        $q.notify(successObject("Letadlo úspěšně odstraněno"));
+      });
+    });
+};
 </script>
 
 <template>
   <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
 
   <template v-else>
-    <AircraftDetailCard
-      :aircraft="aircraft"
-      @delete="deleteAircraft"
-    />
+    <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
+      <template #actions v-if="aircraft.createdById === loggedUser?.id">
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+        <q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
+      </template>
+      <template #content>
+        <q-card-section>
+          <AircraftInfo :aircraft="aircraft"/>
+
+          <PhotoGallery :photos="aircraft.photos"/>
+          <h3>Lety</h3>
+          <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
+            Zatím žádné lety.
+          </q-banner>
+          <FlightsList :items="aircraft.flights" :public="false" v-else/>
+        </q-card-section>
+      </template>
+    </ContentCard>
 
-    <q-card class="flight-detail-card" flat>
-      <h3>Lety</h3>
-      <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
-        Zatím žádné lety.
-      </q-banner>
-      <FlightsList :items="aircraft.flights" v-else/>
-    </q-card>
   </template>