composables, mazani letu, skeletony

src/components/flights/FlightsList.vue

@@ -3,6 +3,7 @@ import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUt
 import {computed} from "vue";
 import {useQuasar} from "quasar";
 import {useFlightsStore} from "stores/Flights";
+import {flightName} from "../../composables/objects/flight";
 
 const props = defineProps({
   items: {
@@ -11,31 +12,14 @@ const props = defineProps({
   }
 });
 
-
-const $q = useQuasar();
-const deleteFlight = (flightId) => {
-  $q.dialog({
-    title: 'Potvrzení',
-    message: 'Opravdu chceš smazat tento let?',
-    cancel: true,
-    persistent: true
-  }).onOk(() => {
-    useFlightsStore().deleteItem(flightId);
-  })
-}
-
 const totalFlightTime = computed(() => {
   return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
 })
 
-const flightName = (item) => {
-  if (item.name) {
-    return item.name;
-  } else {
-    return `${item.takeoffAirport.name} - ${item.landingAirport.name}`
-  }
+const emit = defineEmits(["delete"]);
+const deleteFlight = (flightId) => {
+  emit("delete", flightId);
 }
-
 </script>
 
 <template>
@@ -70,7 +54,6 @@ const flightName = (item) => {
         <q-separator/>
 
         <q-card-actions align="right">
-          <q-btn flat icon="visibility"></q-btn>
           <q-btn flat icon="edit" :to="{name: 'flightEdit', params:{id: flight.id}}"></q-btn>
           <q-btn flat icon="delete" color="red" @click="deleteFlight(flight.id)"></q-btn>
         </q-card-actions>