Zdockerovani, sjednoceni marginu, drobnejsi upravy

src/components/aircrafts/AircraftForm.vue

@@ -4,12 +4,14 @@ import {onMounted, reactive} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import {defaultValues, isRequestPending} from "src/composables/form/props";
-import {isRequired} from "src/composables/form/rules";
+import {isRequired, maxLength, minLength} from "src/composables/form/rules";
+import {commonProps} from "src/composables/inputs";
 
 const formData = reactive({
   id: null,
   callSign: "",
   model: "",
+  seats: null,
   manufacturer: "",
   description: "",
   photo: null,
@@ -23,8 +25,13 @@ const props = defineProps({
 
 const rules = {
   callSign: [
-    v => isRequired(v)
+    isRequired,
+    minLength(4),
+    maxLength(8)
   ],
+  seats: [
+    isNumber
+  ]
 };
 
 onMounted(() => {
@@ -35,14 +42,49 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
-    <q-input type="text" :rules="rules.callSign" v-model="formData.callSign" label="Volací značka"/>
-    <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-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl"/>
 
+    <q-input
+      type="text"
+      :rules="rules.callSign"
+      v-model="formData.callSign"
+      label="Volací značka"
+      v-bind="commonProps"
+    />
 
-    {{ props.defaultValues.photoUrl }}
-    <q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl" />
-    <q-file v-model="formData.photo" label="Fotografie" />
+    <q-input
+      type="text"
+      v-model="formData.manufacturer"
+      label="Výrobce"
+      v-bind="commonProps"
+    />
+    <q-input
+      type="text"
+      v-model="formData.model"
+      label="Model"
+      v-bind="commonProps"
+    />
+
+    <q-input
+      type="number"
+      v-model="formData.seats"
+      label="Počet míst"
+      min="1"
+      :rules="rules.seats"
+      v-bind="commonProps"
+    />
+
+    <q-input
+      type="textarea"
+      v-model="formData.description"
+      label="Popis"
+      v-bind="commonProps"
+    />
+
+    <q-file v-model="formData.photo" label="Fotografie" v-bind="commonProps">
+      <template #prepend>
+        <q-icon name="upload"/>
+      </template>
+    </q-file>
   </FormWrapper>
 </template>

src/components/aircrafts/AircraftsListSkeleton.vue

@@ -1,16 +0,0 @@
-<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-item-section>
-      <q-item-section>
-        <q-skeleton :width="randomInt(10,25)+'%'" />
-      </q-item-section>
-    </q-item>
-  </q-list>
-</template>