Pridani od/do k eventum, fix datetime pickeru pro vyber pouze data, pridano URL k otevrene fotce

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>

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}">