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

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