Aircraft CRUD

src/pages/profile/details/AircraftDetailPage.vue

@@ -2,8 +2,8 @@
 import {computed, onMounted, reactive, ref} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
-import {storeToRefs} from "pinia";
 import {useQuasar} from "quasar";
+import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
 
 const aircraftStore = useAircraftsStore();
 const route = useRoute();
@@ -38,7 +38,7 @@ const confirmDelete = (id) => {
 </script>
 
 <template>
-  <q-skeleton v-if="loading && aircraft"/>
+  <AircraftDetailSkeleton v-if="loading && aircraft"/>
   <template v-else>
     <q-breadcrumbs>
       <q-breadcrumbs-el :to="{name: 'aircrafts'}">Letadla</q-breadcrumbs-el>
@@ -47,6 +47,8 @@ const confirmDelete = (id) => {
 
     <h1>{{ aircraft.name }}</h1>
 
+    {{ aircraft.photoUrl }}
+
     <q-list>
       <q-item>
         Výrobce: {{ aircraft.manufacturer }}

src/pages/profile/forms/EditAircraftPage.vue

@@ -26,22 +26,20 @@ const handleSave = (formData) => {
 let loadedAircraft = ref(null);
 onMounted(() => {
   useAircraftsStore().fetchDetail(aircraftId).then((data) => {
-    console.log("data ", data);
     loadedAircraft.value = data;
 
-  } ).catch(err => {
+  }).catch(err => {
     console.error(err);
   })
 });
 </script>
 
 <template>
-  <q-skeleton v-if="!loadedAircraft" />
+  <q-skeleton v-if="!loadedAircraft"/>
+
   <template v-if="loadedAircraft">
-  <h1>Editace letadla {{ loadedAircraft.name}}</h1>
+    <h1>Editace letadla {{ loadedAircraft.name }}</h1>
 
-  loaded aircraft: {{ loadedAircraft }}
-
-  <AircraftForm @save="handleSave" :default-values="loadedAircraft" :is-request-pending="isRequestPending"/>
-    </template>
+    <AircraftForm @save="handleSave" :default-values="loadedAircraft" :is-request-pending="isRequestPending"/>
+  </template>
 </template>

src/pages/profile/forms/NewAircraftsPage.vue

@@ -10,6 +10,9 @@ const $q = useQuasar();
 const router = useRouter();
 const handleSave = (formData) => {
   isRequestPending.value = true;
+
+  console.log("handlesave", formData);
+
   useAircraftsStore().create(formData).then(() => {
     $q.notify({message: "Letadlo úspěšně vytvořeno", position: "top", color: "positive"});
 
@@ -21,7 +24,5 @@ const handleSave = (formData) => {
 </script>
 
 <template>
-<!--  <h1>Nové letadlo</h1>-->
-
   <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
 </template>

src/pages/profile/lists/AircraftsPage.vue

@@ -1,40 +1,28 @@
 <script setup>
 import {useAircraftsStore} from "stores/Aircrafts";
-import {computed, onMounted, ref} from "vue";
+import {onMounted, ref} from "vue";
 import {storeToRefs} from "pinia";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import AddFAB from "components/AddFAB.vue";
+import AircraftsListSkeleton from "components/aircrafts/AircraftsListSkeleton.vue";
 
 const aircraftStore = useAircraftsStore();
 const aircrafts = storeToRefs(aircraftStore).items;
-const aircraftsComputed = computed(() => aircraftStore.items);
-
-const refetch = () => {
-  loading.value = true
-  aircraftStore.fetch().then(data => console.log("data", data)).finally(() => {
-    console.log("after fetch");
-    loading.value = false
-  });
-}
 
 let loading = ref(false);
 onMounted(() => {
-  refetch();
+  loading.value = true
+  aircraftStore.fetch().finally(() => {
+    loading.value = false
+  });
 })
 </script>
 
 <template>
-  <q-skeleton v-if="loading">Loading (sem pridat skeleton)</q-skeleton>
+  <h4>Letadla</h4>
 
+  <AircraftsListSkeleton v-if="loading" />
   <AircraftsList :items="aircrafts" v-if="!loading"/>
 
-  <q-btn @click="refetch()">Fetch</q-btn>
-
-  {{ aircrafts }}
-  <br>
-  {{ aircraftsComputed }}
-  <br>
-  {{ aircraftStore.items }}
-
   <AddFAB :router-link="{name: 'addAircraft'}"/>
 </template>