Zdockerovani, sjednoceni marginu, drobnejsi upravy

src/components/BasicListSkeleton.vue

@@ -1,10 +1,24 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  itemsCountMin: {
+    type: Number,
+    required:false,
+    default: 2
+  },
+  itemsCountMax: {
+    type: Number,
+    required:false,
+    default: 5
+  }
+})
+
 </script>
 
 <template>
   <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
+    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
       <q-item-section avatar>
         <q-skeleton type="QAvatar" />
       </q-item-section>

src/components/FormWrapper.vue

@@ -42,22 +42,23 @@ const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
   <q-form @submit.prevent="saveForm" ref="form">
     <slot name="default"/>
 
-    <slot name="saveButton" />
+    <div class="text-right">
+      <q-btn
+        color="primary"
+        type="submit"
+        size="lg"
+        :class="{'q-my-lg': true, 'q-mx-lg': true, 'btn--fullwidth': fullwidthBtn}"
+        v-if="saveButton"
+        :icon="props.saveButton.icon"
+        :loading="props.isRequestPending"
+      >
+        {{ props.saveButton.label }}
 
-    <q-btn
-      color="primary"
-      type="submit"
-      :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
-      v-if="saveButton"
-      :icon="props.saveButton.icon"
-      :loading="props.isRequestPending"
-    >
-      {{ props.saveButton.label }}
-
-      <template v-slot:loading>
-        Loading...
-      </template>
-    </q-btn>
+        <template v-slot:loading>
+          Loading...
+        </template>
+      </q-btn>
+    </div>
   </q-form>
 </template>
 

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/copilots/CopilotListSkeleton.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>

src/components/flights/FlightsList.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-list bordered separator class="q-mx-md q-my-md">
+  <q-list bordered separator>
     <q-item
       v-for="flight of items" :key="flight"
       ripple

src/components/poi/POIListSkeleton.vue

@@ -1,7 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <em>POI list skeleton</em>
-</template>