composables, mazani letu, skeletony

src/pages/profile/lists/AircraftsPage.vue

@@ -1,28 +1,19 @@
 <script setup>
-import {useAircraftsStore} from "stores/Aircrafts";
-import {onMounted, ref} from "vue";
-import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import AddFAB from "components/FAB.vue";
 import AircraftsListSkeleton from "components/aircrafts/AircraftsListSkeleton.vue";
+import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
+import FAB from "components/FAB.vue";
 
-const aircraftStore = useAircraftsStore();
-const aircrafts = storeToRefs(aircraftStore).items;
-
-let loading = ref(false);
 onMounted(() => {
-  loading.value = true
-  aircraftStore.fetch().finally(() => {
-    loading.value = false
-  });
+ fetchAircrafts();
 })
 </script>
 
 <template>
-  <h4>Letadla</h4>
-
   <AircraftsListSkeleton v-if="loading" />
-  <AircraftsList :items="aircrafts" v-if="!loading"/>
 
-  <AddFAB mode="add" :router-link="{name: 'addAircraft'}"/>
+  <AircraftsList :items="aircrafts" v-else />
+
+  <FAB mode="add" :router-link="{name: 'addAircraft'}"/>
 </template>

src/pages/profile/lists/FlightsPage.vue

@@ -1,23 +1,17 @@
 <script setup>
-import {onMounted, ref} from "vue";
-import {useFlightsStore} from "stores/Flights";
-import {useMeta} from "quasar";
+import {onMounted} from "vue";
+import {useQuasar} from "quasar";
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
-import {storeToRefs} from "pinia";
-import AddFAB from "components/FAB.vue";
+import FAB from "components/FAB.vue";
+import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
+import {useAppStore} from "stores/App";
 
-useMeta({title: "Moje lety"});
+const $q = useQuasar();
 
-const flightsStore = useFlightsStore();
-const flights = storeToRefs(flightsStore).items;
-
-const loading = ref(false);
+useAppStore().setPageTitle("Moje lety")
 onMounted(() => {
-  loading.value = true;
-  flightsStore.fetch().finally(() => {
-    loading.value = false;
-  });
+  fetchFlights();
 })
 </script>
 
@@ -36,8 +30,7 @@ onMounted(() => {
     </q-banner>
   </div>
 
-  <FlightsList :items="flights" v-else/>
+  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
 
-
-  <AddFAB mode="add" :router-link="{name: 'addFlight'}"/>
+  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/lists/PointsOfInterestPage.vue

@@ -1,31 +1,22 @@
 <script setup>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {computed, onMounted, ref} from "vue";
-import {storeToRefs} from "pinia";
-
-const poiStore = usePointsOfInterestStore();
+import {onMounted} from "vue";
+import POIListSkeleton from "components/poi/POIListSkeleton.vue";
+import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
+import {useAppStore} from "stores/App";
+import POIList from "components/poi/POIList.vue";
+import FAB from "components/FAB.vue";
 
 onMounted(() => {
-  poiStore.fetch();
-})
+  fetchPOIList();
+});
 
-const pointsOfInterest = computed(() => poiStore.groupByTypes);
-const availableTypes = computed(() => Object.keys(pointsOfInterest.value));
+useAppStore().setPageTitle("Zajímavá místa")
 </script>
 
 <template>
-  {{ pointsOfInterest }}
-  <div v-for="type of availableTypes" :key="type">
-    <h2>{{ poiStore.pointTypeName(type) }}</h2>
+  <POIListSkeleton v-if="loading"/>
 
-    <q-list bordered separator>
-      <q-item clickable v-ripple v-for="poi of pointsOfInterest[type]" :key="poi">
-        <q-item-section>
-          <router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
-            {{ poi.name }}
-          </router-link>
-        </q-item-section>
-      </q-item>
-    </q-list>
-  </div>
+  <POIList v-else :items="pointsOfInterest"/>
+
+  <FAB :router-link="{name: 'addPOI'}" mode="add" />
 </template>

src/pages/profile/lists/SecondPilotPage.vue

@@ -1,29 +1,20 @@
 <script setup>
-import {storeToRefs} from "pinia";
-import {useCopilotsStore} from "stores/Copilots";
 import {onMounted} from "vue";
-
-const pilotsStore = useCopilotsStore();
+import CopilotListSkeleton from "components/copilots/CopilotListSkeleton.vue";
+import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
+import CopilotsList from "components/copilots/CopilotsList.vue";
+import FAB from "components/FAB.vue";
 
 onMounted(() => {
-  pilotsStore.fetch();
+  fetchCopilots();
 })
-
-const secondPilots = storeToRefs(pilotsStore).items;
-
 </script>
 
 <template>
-<q-list bordered separator>
-      <q-item clickable v-ripple v-for="pilot of secondPilots" :key="pilot">
-        <q-item-label>
-          <router-link :to="{name: 'pilotDetail', params: {id: pilot.id }}">
-          {{ pilot.name }}
-            </router-link>
-        </q-item-label>
-        <q-item-section>
-          section
-        </q-item-section>
-      </q-item>
-    </q-list>
+  <CopilotListSkeleton v-if="loading" />
+
+  <CopilotsList :items="copilots" />
+
+  <FAB :router-link="{name: 'addCopilot'}" mode="add" />
+
 </template>