Upravy UI, refaktoring, davkove upravy a mazani fotek

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -4,29 +4,26 @@ import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {confirmObject, successObject} from "src/composables/dialog";
+import {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";
 import FlightsList from "components/flights/FlightsList.vue";
-import {copilot} from "src/composables/objects/copilot";
-import {flight} from "src/composables/objects/flight";
+import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
+
+const $q = useQuasar();
+const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
   fetchAircraft(aircraftId);
 })
 
-const $q = useQuasar();
-const confirmDelete = (id) => {
-  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
-    .onOk(() => {
-      useAircraftsStore().delete(id).then(() => {
-        useRouter().push({name: "aircrafts"});
-        $q.notify(successObject("Letadlo uspesne odstraneno"));
-      });
-    })
-};
+const deleteAircraft = (id) => {
+  useAircraftsStore().delete(id).then(() => {
+    $router.push({name: "aircrafts"});
+    $q.notify(successObject("Letadlo úspěšně odstraněno"));
+  });
+}
 
 watch(aircraft, (newVal) => {
   useAppStore().setPageTitle(newVal.callSign);
@@ -35,57 +32,20 @@ watch(aircraft, (newVal) => {
     {label: newVal.callSign}
   ])
 });
-
 </script>
 
 <template>
   <AircraftDetailSkeleton v-if="loading || !aircraft"/>
   <template v-else>
-
-    <q-card class="q-mx-md q-my-md flight-detail-card">
-      <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl" />
-
-       <q-card-actions class="q-my-md">
-      <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="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
-
-      <q-card-section>
-        <q-list>
-          <q-item v-if="aircraft.manufacturer">
-            Výrobce: {{ aircraft.manufacturer }}
-          </q-item>
-          <q-item v-if="aircraft.model">
-            Model: {{ aircraft.model }}
-          </q-item>
-        </q-list>
-      </q-card-section>
-
-<!--      <q-card-actions align="right">-->
-<!--        <q-btn :to='{name: "aircraftEdit", params: {id: aircraft.id}}' icon="edit" text-color="primary" rounded flat/>-->
-<!--        <q-btn @click="confirmDelete(aircraft.id)" icon="delete" text-color="red" rounded flat/>-->
-<!--      </q-card-actions>-->
-    </q-card>
+    <AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
 
     <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-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>
-
-<!--    <FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>-->
   </template>
 
 

src/pages/profile/aircraft/AircraftsPage.vue

@@ -4,6 +4,7 @@ import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 onMounted(() => {
   fetchAircrafts();
@@ -13,17 +14,13 @@ onMounted(() => {
 <template>
   <BasicListSkeleton v-if="loading"/>
 
-  <div class="q-pa-md q-gutter-sm" v-else-if="!loading && aircrafts.length === 0">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
-      </template>
-      Aktuálně nemáš přidané žádné letadlo.
-      <template v-slot:action>
-        <q-btn flat color="white" :to="{name: 'addAircraft'}" label="Vytvořit letadlo"/>
-      </template>
-    </q-banner>
-  </div>
+  <BasicInfoBanner
+    v-if="!loading && aircrafts.length === 0"
+    :route-add="{name: 'addAircraft'}"
+    label-add="Vytvořit letadlo"
+  >
+    Aktuálně nemáš přidané žádné letadlo.
+  </BasicInfoBanner>
 
   <AircraftsList
     v-else

src/pages/profile/aircraft/EditAircraftPage.vue

@@ -3,26 +3,21 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {onMounted, ref} from "vue";
+import {onMounted} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
-import {aircraft, fetchAircraft, loading} from "src/composables/objects/aircraft";
+import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
 import {useAppStore} from "stores/App";
-import {copilot} from "src/composables/objects/copilot";
 
 
-const isRequestPending = ref(false);
 const $router = useRouter();
 const $q = useQuasar();
 const aircraftId = parseInt(useRoute().params.id);
 
 const handleSave = (formData) => {
-  isRequestPending.value = true;
   useAircraftsStore().update(aircraftId, formData).then(() => {
     $q.notify(successObject("Letadlo úspěšně upraveno"));
-    $router.push({name: "aircrafts"});
-  }).finally(() => {
-    isRequestPending.value = false;
+    $router.push({name: "aircraftDetail", params: {id: aircraftId}});
   })
 }
 

src/pages/profile/aircraft/NewAircraftsPage.vue

@@ -6,21 +6,17 @@ import {useQuasar} from "quasar";
 import {ref} from "vue";
 import {useAppStore} from "stores/App";
 import {successObject} from "src/composables/dialog";
+import {isRequestPending} from "src/composables/objects/aircraft";
 
 const $q = useQuasar();
 const router = useRouter();
 
-let isRequestPending = ref(false);
 const handleSave = (formData) => {
-  isRequestPending.value = true;
   useAircraftsStore().create(formData).then(() => {
     $q.notify(successObject("Letadlo úspěšně vytvořeno"));
     router.push({name: "aircrafts"});
-  }).finally(() => {
-    isRequestPending.value = false;
-  })
-}
-
+  });
+};
 
 useAppStore().setPageTitle("Nové letadlo");
 useAppStore().setBreadcrumbs([