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>