From 36b0178b970c8ceebf3d5e1af8958effb0b2abeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 25 Sep 2023 06:25:53 +0200
Subject: [PATCH] Pridani od/do k eventum, fix datetime pickeru pro vyber pouze
 data, pridano URL k otevrene fotce

---
 src/components/event/EventDetailSkeleton.vue  | 14 ++++++--
 src/components/event/EventForm.vue            |  8 +++++
 src/components/flights/FlightEditSkeleton.vue | 12 +++++--
 src/components/inputs/DatetimePicker.vue      | 32 +++++++++++--------
 src/components/photos/PhotoCarousel.vue       | 15 +++++++--
 src/components/photos/PhotoDetail.vue         | 17 ++++++++++
 src/graphql/fragments/event.js                |  2 ++
 src/pages/profile/event/EventDetailPage.vue   | 19 ++++++++++-
 src/pages/profile/flight/EditFlightPage.vue   | 15 ++++++---
 9 files changed, 106 insertions(+), 28 deletions(-)

diff --git a/src/components/event/EventDetailSkeleton.vue b/src/components/event/EventDetailSkeleton.vue
index 2d3855b..abc52d5 100644
--- a/src/components/event/EventDetailSkeleton.vue
+++ b/src/components/event/EventDetailSkeleton.vue
@@ -1,9 +1,17 @@
 <script setup>
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
 </script>
 
 <template>
-  <q-card class="flight-detail-card">
-    <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
-  </q-card>
+
+  <q-list bordered separator class="q-my-lg">
+    <ListItemSkeleton/>
+    <ListItemSkeleton/>
+  </q-list>
+
+  <BasicTextSkeleton :lines="3" :paragraphs="2"/>
+
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
 </template>
diff --git a/src/components/event/EventForm.vue b/src/components/event/EventForm.vue
index 53facff..3535df5 100644
--- a/src/components/event/EventForm.vue
+++ b/src/components/event/EventForm.vue
@@ -7,6 +7,8 @@ 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";
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
+import {FORMAT_DATE, FORMAT_DATETIME_LONG} from "src/composables/datetimeUtils";
 
 const props = defineProps({
   event: {
@@ -19,6 +21,8 @@ const formData = reactive({
   name: null,
   isPublic: false,
   description: "",
+  dateFrom: null,
+  dateTo: null,
 });
 
 const rules = {
@@ -41,6 +45,10 @@ onMounted(() => {
       :rules="rules.name"
       v-model="formData.name"
     />
+
+    <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateFrom" label="Od" />
+    <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateTo" label="Do" />
+
     <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
     <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
 
diff --git a/src/components/flights/FlightEditSkeleton.vue b/src/components/flights/FlightEditSkeleton.vue
index 4ccb57e..9c0cfcc 100644
--- a/src/components/flights/FlightEditSkeleton.vue
+++ b/src/components/flights/FlightEditSkeleton.vue
@@ -58,9 +58,15 @@ const props = defineProps({
       </q-card-section>
     </q-card>
 
-    <q-card v-for="i in randomInt(3, 10)" :key="i">
-      <q-skeleton type="rect"/>
-    </q-card>
+    <div class="row">
+      <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
+        <q-card class="q-ma-md">
+          <q-skeleton height="300px" type="rect"/>
+        </q-card>
+      </div>
+    </div>
+
+
   </template>
 
   <div v-else-if="step === 'notes'">
diff --git a/src/components/inputs/DatetimePicker.vue b/src/components/inputs/DatetimePicker.vue
index ba049ed..2b42e9c 100644
--- a/src/components/inputs/DatetimePicker.vue
+++ b/src/components/inputs/DatetimePicker.vue
@@ -26,12 +26,10 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue']);
 
 const dateModel = ref("");
-const timeModel = ref("");
+const timeModel = ref("00:00:00");
 const tab = ref("date");
 
 let originalTime, originalDate;
-
-
 const popupProxy = ref(null);
 
 const publicModel = computed(() => {
@@ -42,19 +40,20 @@ const publicModel = computed(() => {
   return formatDatetime(dateObject, props.mask);
 });
 
-const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
-
-watch(() => dateModel.value, (newVal, oldVal) => {
-  tab.value = "time";
-});
-
 const model = computed(() => {
-  if (dateModel.value === '' || timeModel.value === '') return null;
-  return dateModel.value + "T" + timeModel.value
+  if (dateModel.value === '') return null;
+  let modelVal = dateModel.value;
+  if (showTimePicker.value) {
+    modelVal += "T" + timeModel.value;
+  } else {
+    modelVal += "T00:00:00"
+  }
+
+  return modelVal
 });
+
 const emitModelUpdate = () => {
   if (dateModel.value === '' || timeModel.value === '') {
-    // console.log(dateModel.value, timeModel.value);
     return;
   }
 
@@ -65,6 +64,12 @@ const emitModelUpdate = () => {
     popupProxy.value.hide();
 }
 
+const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
+
+watch(() => dateModel.value, (newVal, oldVal) => {
+  if (showTimePicker.value)
+    tab.value = "time";
+});
 const containsAnyOf = (needles, haystack) => {
   for (const i in needles) {
     if (haystack.includes(needles[i])) return true;
@@ -123,7 +128,6 @@ watch(() => props.modelValue, (newVal) => {
     emitModelUpdate();
   }
 }, {immediate: true});
-
 </script>
 
 <template>
@@ -134,7 +138,7 @@ watch(() => props.modelValue, (newVal) => {
 
     <template #default>
       <q-popup-proxy ref="popupProxy" @hide="emitModelUpdate" @show="setOriginalValues">
-        <div class="proxy-wrapper relative-position" style="min-height: 500px">
+        <div class="proxy-wrapper relative-position" :style="`min-height: ${showTimePicker ? '500' : '300'}px`">
 
           <q-tabs v-model="tab" v-if="showTimePicker" class="bg-primary text-white">
             <q-tab name="date" icon="event" :label="dateModel ? formatDatetime(dateModel, 'D. M.', FORMAT_DATE_ISO) : 'datum'"/>
diff --git a/src/components/photos/PhotoCarousel.vue b/src/components/photos/PhotoCarousel.vue
index 45264c6..30e5775 100644
--- a/src/components/photos/PhotoCarousel.vue
+++ b/src/components/photos/PhotoCarousel.vue
@@ -1,6 +1,7 @@
 <script setup>
 import PhotoDetail from "components/photos/PhotoDetail.vue";
-import { ref, watch} from "vue";
+import {onMounted, ref, watch} from "vue";
+import {useRoute, useRouter} from "vue-router";
 
 const props = defineProps({
   photos: {
@@ -26,13 +27,23 @@ const openPhotoDetail = ref(false);
 const photoData = ref(null);
 const openDetail = ({photo, idx, allPhotos}) => {
   openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos}
+  photoData.value = {photo, idx, allPhotos};
 }
 
 watch(() => props.photos, (newVal) => {
   if (newVal.length === 0) return;
   displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
 }, {immediate: true});
+
+const $route = useRoute();
+onMounted(() => {
+  const photoId = parseInt($route.query.photo);
+  const idx = props.photos.findIndex(p => p.id === photoId);
+  if (idx >= 0) {
+    const photo = props.photos[idx];
+    openDetail({photo, allPhotos: props.photos, idx});
+  }
+});
 </script>
 
 <template>
diff --git a/src/components/photos/PhotoDetail.vue b/src/components/photos/PhotoDetail.vue
index c1c1ae1..d1e3547 100644
--- a/src/components/photos/PhotoDetail.vue
+++ b/src/components/photos/PhotoDetail.vue
@@ -4,6 +4,7 @@ import {computed, ref, watch} from "vue";
 import {formatDatetime} from "src/composables/datetimeUtils";
 import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
 import {useQuasar} from "quasar";
+import {useRouter} from "vue-router";
 
 const props = defineProps({
   photos: {
@@ -27,6 +28,8 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
+const $router = useRouter();
+
 const imageFullscreen = ref(false);
 const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.sm);
 
@@ -68,6 +71,15 @@ const openDetail = (idx) => {
   scrollToPhoto();
 };
 
+watch(() => displayedPhotoIndex.value, (newVal) => {
+  const photo = props.photos[newVal];
+  $router.replace({query: {photo: photo.id}});
+}, {immediate: true});
+
+const removePhotoFromQueries = () => {
+  $router.replace({query: {photo: undefined}});
+}
+
 const showExtra = ref(false);
 const scrollArea = ref(null);
 const infoWrapper = ref(null);
@@ -92,6 +104,8 @@ const showExtraInfo = () => {
     v-model="isDetailOpened"
     full-width
     :maximized="isMaximized"
+    no-route-dismiss
+    @hide="removePhotoFromQueries"
   >
     <q-card>
       <q-scroll-area ref="scrollArea" style="height: 95vh">
@@ -105,6 +119,9 @@ const showExtraInfo = () => {
             </div>
           </div>
         </q-card-section>
+        <div class="fixed-top-right q-mt-md q-mr-md z-max" v-else>
+          <q-btn round size="sm" icon="close" @click="isDetailOpened = false"/>
+        </div>
 
         <q-card-section :class="{'q-pa-none': isMaximized}">
           <div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
diff --git a/src/graphql/fragments/event.js b/src/graphql/fragments/event.js
index 36c9c49..9562cd0 100644
--- a/src/graphql/fragments/event.js
+++ b/src/graphql/fragments/event.js
@@ -15,5 +15,7 @@ fragment eventFullInfo on Event {
   name
   description
   isPublic
+  dateFrom
+  dateTo
 }
 `;
diff --git a/src/pages/profile/event/EventDetailPage.vue b/src/pages/profile/event/EventDetailPage.vue
index 554af50..d28934c 100644
--- a/src/pages/profile/event/EventDetailPage.vue
+++ b/src/pages/profile/event/EventDetailPage.vue
@@ -6,6 +6,8 @@ import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+import {FORMAT_DATE, FORMAT_DATETIME_LONG, formatDatetime} from "../../../composables/datetimeUtils";
 
 const eventId = parseInt(useRoute().params.id);
 onMounted(() => {
@@ -23,7 +25,22 @@ onMounted(() => {
   <EventDetailSkeleton v-if="loading || !event"/>
 
   <template v-else>
-    <article v-html="event.description" />
+
+    <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
+      <q-item>
+        <q-item-section>
+          Od: {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
+        </q-item-section>
+      </q-item>
+
+      <q-item>
+        <q-item-section>
+          Do: {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <article v-html="event.description"/>
 
     <h3>Lety</h3>
 
diff --git a/src/pages/profile/flight/EditFlightPage.vue b/src/pages/profile/flight/EditFlightPage.vue
index a76b3f3..7b9925e 100644
--- a/src/pages/profile/flight/EditFlightPage.vue
+++ b/src/pages/profile/flight/EditFlightPage.vue
@@ -16,7 +16,7 @@ import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
 import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
 import {usePhotosStore} from "stores/Photo";
 import PhotosList from "components/photos/PhotosList.vue";
-import {successObject, warningObject} from "src/composables/dialog";
+import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
 import {fetchFlight, flight, loading} from "src/composables/objects/flight";
@@ -118,8 +118,15 @@ const rotatePhotos = ({photos, angle}) => {
       flight.value.photos[idx] = value;
     }
 
-    if (success > 0)
-      $q.notify(successObject("Otočeno " + success + " fotek"));
+    const error = result.length - success;
+
+    if (success > 0) {
+      $q.notify(successObject("Otočeno " + success + " fotografií"));
+    }
+
+    if (error > 0) {
+      $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
+    }
   });
 }
 </script>
@@ -190,7 +197,5 @@ const rotatePhotos = ({photos, angle}) => {
         <FlightFormNotes @save="handleFlightEdit" :events="events" :flight="flight"/>
       </q-tab-panel>
     </q-tab-panels>
-
-
   </template>
 </template>