composables, mazani letu, skeletony

src/pages/profile/details/AircraftDetailPage.vue

@@ -1,50 +1,47 @@
 <script setup>
-import {computed, onMounted, reactive, ref} from "vue";
+import {onMounted, watch} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {confirmObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
+import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
+import FAB from "components/FAB.vue";
+import {useAppStore} from "stores/App";
 
-const aircraftStore = useAircraftsStore();
-const route = useRoute();
-const router = useRouter();
-
-const aircraftId = computed(() => parseInt(route.params.id));
-const loading = ref(false);
-let aircraft = reactive({});
+const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
-  loading.value = true;
-  aircraftStore.fetchDetail(aircraftId.value)
-    .then(respAircraft => aircraft = respAircraft)
-    .finally(() => {
-      loading.value = false;
-    });
+  fetchAircraft(aircraftId);
 })
 
 const $q = useQuasar();
 const confirmDelete = (id) => {
   $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
     .onOk(() => {
-      aircraftStore.delete(id).then(() => {
-        router.push({name: "aircrafts"});
-        $q.notify({message: "Letadlo uspesne odstraneno", position: "top", color: "positive"});
+      useAircraftsStore().delete(id).then(() => {
+        useRouter().push({name: "aircrafts"});
+        $q.notify(successObject("Letadlo uspesne odstraneno"));
       });
     })
 };
+
+watch(aircraft, (newVal) => {
+  useAppStore().setPageTitle(newVal.callSign);
+  useAppStore().setBreadcrumbs([
+    {label: "Letadla", to: {name: "aircrafts"}},
+    {label: newVal.callSign}
+  ])
+});
+
 </script>
 
 <template>
-  <AircraftDetailSkeleton v-if="loading && aircraft"/>
+  <AircraftDetailSkeleton v-if="loading || !aircraft"/>
   <template v-else>
-    <q-breadcrumbs>
-      <q-breadcrumbs-el :to="{name: 'aircrafts'}">Letadla</q-breadcrumbs-el>
-      <q-breadcrumbs-el>{{ aircraft.callSign }}</q-breadcrumbs-el>
-    </q-breadcrumbs>
 
     <h1>{{ aircraft.callSign }}</h1>
 
-    {{ aircraft.photoUrl }}
+    <q-img :src="aircraft.photoUrl"/>
 
     <q-list>
       <q-item>
@@ -56,7 +53,6 @@ const confirmDelete = (id) => {
       </q-item>
 
     </q-list>
-    <q-btn :to='{name: "aircraftEdit", params: {id: aircraft.id}}'>Edit {{ aircraft.id }}</q-btn>
     <q-btn @click="confirmDelete(aircraft.id)">Delete</q-btn>
 
     <!--    <h2>Limits</h2>-->
@@ -67,6 +63,8 @@ const confirmDelete = (id) => {
     <!--    Padova rychlost bez klapek:-->
     <!--    Padova rychlost s klapkami (plne vysunute):-->
 
+
+    <FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>
   </template>