Sprava eventu

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>