(SKY-40) Integrate endpoints for displaying and deleting aircraft

skyroster-frontend/src/stores/aircraft.js

@@ -1,19 +1,45 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-import { initialAircraft, AIRCRAFT_TYPES, BASES, AVAILABILITY_STATUSES } from '../data/mockData'
+import {computed, ref} from 'vue'
+import {defineStore} from 'pinia'
+import apiClient from '../api/axios'
+import {AIRCRAFT_TYPES, AVAILABILITY_STATUSES, BASES} from '../data/mockData'
+
+async function getAircraftList() {
+  const res = await apiClient.get('/aircraft', {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+
+  return res.data;
+}
 
 export const useAircraftStore = defineStore('aircraft', () => {
-  const aircraft = ref([...initialAircraft])
+  const aircraft = ref([]);
   const aircraftTypeOptions = AIRCRAFT_TYPES
   const baseOptions = BASES
   const availabilityOptions = AVAILABILITY_STATUSES
 
   const aircraftCount = computed(() => aircraft.value.length)
-  
-  const availableAircraft = computed(() => 
+
+  const availableAircraft = computed(() =>
     aircraft.value.filter(a => a.dostepnosc === 'dostepny')
   )
 
+  async function fetchAircraftList() {
+    try {
+      const response = await getAircraftList();
+
+      aircraft.value = response.map(aircraft => ({
+        id: aircraft.id,
+        rejestracja: aircraft.registrationNumber,
+        typ: aircraft.aircraftType.icaoCode,
+        baza: aircraft.operationalBase.icaoCode
+      }));
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   function generateId() {
     const maxId = aircraft.value.reduce((max, a) => {
       const num = parseInt(a.id.replace('A', ''))
@@ -40,13 +66,43 @@ export const useAircraftStore = defineStore('aircraft', () => {
     return null
   }
 
-  function deleteAircraft(id) {
-    const index = aircraft.value.findIndex(a => a.id === id)
-    if (index !== -1) {
-      aircraft.value.splice(index, 1)
-      return true
+  async function deleteAircraft(id) {
+    try {
+      const res = await apiClient.delete(
+        `/aircraft/${id}`,
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      if (res.status >= 200 && res.status < 300) {
+        const index = aircraft.value.findIndex(a => a.id === id);
+
+        if (index !== -1) {
+          aircraft.value.splice(index, 1);
+        }
+
+        return {
+          success: true
+        };
+      }
+    } catch (error) {
+      console.error(error);
+
+      return {
+        success: false,
+        message:
+          error.response?.data?.message ||
+          'Failed to delete aircraft'
+      };
     }
-    return false
+
+    return {
+      success: false,
+      message: 'Unexpected error occurred'
+    };
   }
 
   function getAircraftById(id) {
@@ -74,6 +130,7 @@ export const useAircraftStore = defineStore('aircraft', () => {
     deleteAircraft,
     getAircraftById,
     getAircraftDisplay,
-    getAvailabilityInfo
+    getAvailabilityInfo,
+    fetchAircraftList
   }
 })

skyroster-frontend/src/views/AircraftView.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { ref } from 'vue'
-import { useAircraftStore } from '../stores/aircraft'
-import { useToast } from 'primevue/usetoast'
-import { useConfirm } from 'primevue/useconfirm'
+import {onMounted, ref} from 'vue'
+import {useAircraftStore} from '../stores/aircraft'
+import {useToast} from 'primevue/usetoast'
+import {useConfirm} from 'primevue/useconfirm'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import Button from 'primevue/button'
 import Toast from 'primevue/toast'
 import ConfirmDialog from 'primevue/confirmdialog'
-import Tag from 'primevue/tag'
+// import Tag from 'primevue/tag'
 import AircraftDialog from '../components/aircraft/AircraftDialog.vue'
 
 const aircraftStore = useAircraftStore()
@@ -19,6 +19,10 @@ const dialogVisible = ref(false)
 const selectedAircraft = ref(null)
 const isEditMode = ref(false)
 
+onMounted(async () => {
+  await aircraftStore.fetchAircraftList();
+});
+
 function getTypeLabel(typeCode) {
   const type = aircraftStore.aircraftTypeOptions.find(t => t.value === typeCode)
   return type ? type.label : typeCode
@@ -29,15 +33,15 @@ function getBaseLabel(baseCode) {
   return base ? base.label : baseCode
 }
 
-function getAvailabilitySeverity(status) {
+/*function getAvailabilitySeverity(status) {
   const info = aircraftStore.getAvailabilityInfo(status)
   return info ? info.severity : 'secondary'
 }
 
 function getAvailabilityLabel(status) {
   const info = aircraftStore.getAvailabilityInfo(status)
   return info ? info.label : status
-}
+}*/
 
 function openAddDialog() {
   selectedAircraft.value = null
@@ -68,11 +72,27 @@ function confirmDelete(aircraft) {
     icon: 'pi pi-exclamation-triangle',
     acceptLabel: 'Tak, usuń',
     rejectLabel: 'Anuluj',
-    accept: () => {
-      aircraftStore.deleteAircraft(aircraft.id)
-      toast.add({ severity: 'success', summary: 'Sukces', detail: 'Samolot został usunięty', life: 3000 })
+
+    accept: async () => {
+      const result = await aircraftStore.deleteAircraft(aircraft.id);
+
+      if (result.success) {
+        toast.add({
+          severity: 'success',
+          summary: 'Sukces',
+          detail: 'Samolot został usunięty',
+          life: 3000
+        });
+      } else {
+        toast.add({
+          severity: 'error',
+          summary: 'Błąd',
+          detail: result.message,
+          life: 5000
+        });
+      }
     }
-  })
+  });
 }
 </script>
 
@@ -106,11 +126,11 @@ function confirmDelete(aircraft) {
           {{ getBaseLabel(data.baza) }}
         </template>
       </Column>
-      <Column field="dostepnosc" header="Dostępność" sortable>
+<!--      <Column field="dostepnosc" header="Dostępność" sortable>
         <template #body="{ data }">
           <Tag :value="getAvailabilityLabel(data.dostepnosc)" :severity="getAvailabilitySeverity(data.dostepnosc)" />
         </template>
-      </Column>
+      </Column>-->
       <Column header="Akcje" :exportable="false" style="min-width: 8rem">
         <template #body="{ data }">
           <div class="action-buttons">

skyroster-frontend/src/views/SchedulerView.vue

@@ -25,8 +25,8 @@ const selectedFlight = ref(null)
 
 const flightForm = ref(getEmptyForm())
 
-onMounted(() => {
-  flightsStore.loadPlanningSchedules()
+onMounted(async () => {
+  await Promise.all([aircraftStore.fetchAircraftList(), flightsStore.loadPlanningSchedules()]);
 })
 
 const baseOptions = BASES.map(b => ({