Aircraft CRUD

src/components/FormWrapper.vue

@@ -27,8 +27,7 @@ const props = defineProps({
 
 const emits = defineEmits(["save"]);
 const saveForm = () => {
-  const formDataCopy = JSON.parse(JSON.stringify(props.modelValue));
-  emits("save", formDataCopy);
+  emits("save", props.modelValue);
 
   if (props.resetAfterSubmit) {
     console.error("Not implemented")
@@ -38,9 +37,6 @@ const saveForm = () => {
 
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
-
-    {{ modelValue }}
-
     <slot/>
 
     <q-btn type="submit" color="primary" :icon="props.saveButton.icon" :loading="props.isRequestPending">

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>