Sprava eventu

src/components/AvatarsGroup.vue

@@ -0,0 +1,28 @@
+<script setup>
+const props = defineProps({
+  avatars: {
+    type: Array,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div style="height: 80px">
+    <q-avatar
+      v-for="(avatar, idx) in avatars"
+      :key="idx"
+      class="overlapping"
+      :style="`left: ${(idx+1) * 20}px`"
+    >
+      <img :src="avatar"/>
+      <!--            <q-icon name="flight" v-else />-->
+    </q-avatar>
+  </div>
+</template>
+
+
+<style lang="sass" scoped>
+.overlapping
+  position: absolute
+</style>

src/components/copilots/CopilotDetailSkeleton.vue

@@ -3,7 +3,6 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 </script>
 
 <template>
-  <q-card class="flight-detail-card">
+  <q-skeleton type="rect" class="q-my-lg" style="width: 200px; height: 40px" />
     <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
-  </q-card>
 </template>

src/components/copilots/CopilotEditSkeleton.vue

@@ -1,5 +1,5 @@
 <script setup></script>
 
 <template>
-  <em>Copilot skeleton</em>
+  <q-skeleton type="QInput" />
 </template>

src/components/event/EventDetailSkeleton.vue

@@ -0,0 +1,9 @@
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+</script>
+
+<template>
+  <q-card class="flight-detail-card">
+    <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
+  </q-card>
+</template>

src/components/event/EventEditSkeleton.vue

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

src/components/event/EventForm.vue

@@ -0,0 +1,48 @@
+<script setup>
+
+import {onMounted, reactive} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+import {isRequestPending} from "src/composables/form/props";
+import {isRequired} from "src/composables/form/rules";
+import RichTextEditor from "components/inputs/RichTextEditor.vue";
+
+const props = defineProps({
+  event: {
+    type: Object
+  },
+  isRequestPending
+})
+
+const formData = reactive({
+  name: null,
+  isPublic: false,
+  description: "",
+});
+
+const rules = {
+  name: [isRequired]
+}
+
+onMounted(() => {
+  if (props.event) {
+    setDefaultData(formData, props.event);
+  }
+})
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
+    <q-input
+      v-bind="commonProps"
+      label="Jméno"
+      :rules="rules.name"
+      v-model="formData.name"
+    />
+    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+
+  </FormWrapper>
+</template>

src/components/event/EventsList.vue

@@ -0,0 +1,32 @@
+<script setup>
+
+import AvatarsGroup from "components/AvatarsGroup.vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f => f.coverPhoto.thumbnailUrl);
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item clickable v-ripple v-for="event of items" :key="event" :to="{name: 'eventDetail', params: {id: event.id }}">
+      <q-item-section>
+        <q-item-label>
+
+          <q-avatar icon="event" color="primary" text-color="white" v-if="event.flights.length === 0"/>
+          <AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
+
+          {{ event.name }}
+        </q-item-label>
+        <q-item-label lines="4" caption>
+          <article v-html="event.description"/>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>

src/components/flights/FlightEditSkeleton.vue

@@ -1,5 +1,6 @@
 <script setup>
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {randomInt} from "src/composables/random";
 
 const props = defineProps({
   step: {
@@ -10,27 +11,61 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-card class="" v-if="step !== 'photos'">
-    <q-card-section>
-      <q-skeleton type="QInput" class="q-my-sm" v-for="i in 3" :key="i"/>
-    </q-card-section>
+  <template v-if="step === 'basic'">
+    <div class="row">
+      <div class="col">
+        <q-card class="q-my-sm">
+          <q-card-section>
+            <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col col-12 col-md-6" v-for="i in 2" :key="i">
+        <q-card class="q-mr-md-sm q-my-sm">
+          <q-card-section>
+            <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </template>
+
+  <q-card v-else-if="step === 'copilot'">
+    <q-card class="q-mr-md-sm q-my-sm">
+      <q-card-section>
+        <q-skeleton type="QInput" class="q-my-sm"/>
+      </q-card-section>
+    </q-card>
   </q-card>
 
-  <template v-if="step === 'photos'">
+  <template v-else-if="step === 'track'">
     <q-card>
       <q-card-section>
-
-        <q-skeleton type="QInput" class="q-my-sm"/>
-
+        <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
       </q-card-section>
-
     </q-card>
 
+    <BasicListSkeleton :items-count-min="2" :items-count-max="6"/>
+  </template>
+
+  <template v-else-if="step === 'photos'">
+    <q-card class="q-my-lg">
+      <q-card-section>
+        <q-skeleton type="QInput" class="q-my-sm"/>
+      </q-card-section>
+    </q-card>
 
     <q-card v-for="i in randomInt(3, 10)" :key="i">
       <q-skeleton type="rect"/>
     </q-card>
   </template>
 
+  <div v-else-if="step === 'notes'">
+    <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+    <q-skeleton type="rect" width="100%" height="500px"/>
+  </div>
 
 </template>

src/components/flights/form/FlightFormNotes.vue

@@ -1,35 +1,45 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {isRequestPending} from "src/composables/objects/flight";
 
 const props = defineProps({
   flight: {
     type: Object,
     required: false
   },
+  events: {
+    type: Array,
+    required: false,
+  }
 });
 
-const formData = ref({
+const formData = reactive({
   name: "",
+  event: null,
   description: ""
 })
 
-const isMounted = ref(false);
-onMounted(() => {
-  if (props.flight)
-    setDefaultData(formData.value, props.flight);
+watch(() => props.flight, (newVal) => {
+  if (newVal) {
+    setDefaultData(formData, newVal);
 
-  isMounted.value = true;
-})
+    if (newVal.event) {
+      formData.event = {id: newVal.event.id, name: newVal.event.name};
+    }
+  }
+}, {immediate: true});
 
 </script>
 
 <template>
-  <FormWrapper v-model="formData" v-if="isMounted">
-    <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps" />
-    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..." />
+  <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
+    <ComboboxInput :options="events" v-if="events" v-model="formData.event" label="Událost" v-bind="commonProps"/>
+    <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
+    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
   </FormWrapper>
 </template>

src/components/inputs/ComboboxInput.vue

@@ -110,5 +110,9 @@ const filterFn = (val, update, abort) => {
         </q-item-section>
       </q-item>
     </template>
+
+    <template #append>
+      <slot name="append" />
+    </template>
   </q-select>
 </template>