Aircraft CRUD

src/components/aircrafts/AircraftDetailSkeleton.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <q-skeleton></q-skeleton>
+</template>

src/components/aircrafts/AircraftForm.vue

@@ -12,6 +12,7 @@ const formData = reactive({
   model: "",
   manufacturer: "",
   description: "",
+  photo: null,
   organizationId: null
 });
 
@@ -38,6 +39,7 @@ onMounted(() => {
     <q-input type="text" v-model="formData.model" label="Model"/>
     <q-input type="text" v-model="formData.manufacturer" label="Výrobce"/>
     <q-input type="textarea" v-model="formData.description" label="Popis" />
+    <q-file v-model="formData.photo" label="Avatar" />
 
   </FormWrapper>
 </template>

src/components/aircrafts/AircraftsList.vue

@@ -9,9 +9,14 @@ const props = defineProps({
 </script>
 
 <template>
-  <h4>letadla</h4>
   <q-list bordered separator>
     <q-item clickable v-ripple v-for="plane of props.items" :key="plane">
+        <q-item-section avatar>
+          <q-avatar v-if="plane.photoUrl">
+            <img :src="plane.photoUrl">
+          </q-avatar>
+          <q-avatar icon="airplane" v-else></q-avatar>
+        </q-item-section>
       <q-item-section>
         <router-link :to="{name: 'aircraftDetail', params: {id: plane.id }}">
           {{ plane.name }}

src/components/aircrafts/AircraftsListSkeleton.vue

@@ -0,0 +1,16 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
+      <q-item-section avatar>
+        <q-skeleton type="QAvatar"></q-skeleton>
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(10,25)+'%'"></q-skeleton>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>