modal: use fragment

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/modal/AddToAlbumModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="normal" v-if="show">
+  <Modal ref="modal" @close="cleanup" size="normal" v-if="show">
     <template #title>
       {{ t('memories', 'Add to album') }}
     </template>
@@ -27,6 +27,7 @@ import { IAlbum, IPhoto } from '../../types';
 const NcProgressBar = () => import('@nextcloud/vue/dist/Components/NcProgressBar');
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 import AlbumPicker from './AlbumPicker.vue';
 
 export default defineComponent({
@@ -37,10 +38,11 @@ export default defineComponent({
     AlbumPicker,
   },
 
+  mixins: [ModalMixin],
+
   emits: [],
 
   data: () => ({
-    show: false,
     photos: [] as IPhoto[],
     opsDone: 0,
     opsTotal: 0,
@@ -60,11 +62,11 @@ export default defineComponent({
   methods: {
     open(photos: IPhoto[]) {
       this.photos = photos;
-      this.show = true;
       this.opsTotal = 0;
+      this.show = true;
     },
 
-    close() {
+    cleanup() {
       this.show = false;
       this.photos = [];
       this.opsTotal = 0;

src/components/modal/AlbumCreateModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="normal" v-if="show">
+  <Modal ref="modal" @close="cleanup" size="normal" v-if="show">
     <template #title>
       <template v-if="!album">
         {{ t('memories', 'Create new album') }}
@@ -22,6 +22,7 @@ import { showError } from '@nextcloud/dialogs';
 import * as dav from '../../services/dav';
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 import AlbumForm from './AlbumForm.vue';
 
 export default defineComponent({
@@ -31,10 +32,11 @@ export default defineComponent({
     AlbumForm,
   },
 
+  mixins: [ModalMixin],
+
   emits: [],
 
   data: () => ({
-    show: false,
     album: null as any,
   }),
 
@@ -59,7 +61,7 @@ export default defineComponent({
       this.show = true;
     },
 
-    close() {
+    cleanup() {
       this.show = false;
     },
 

src/components/modal/AlbumDeleteModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" v-if="show">
+  <Modal ref="modal" @close="cleanup" v-if="show">
     <template #title>
       {{ owned ? t('memories', 'Remove Album') : t('memories', 'Leave Album') }}
     </template>
@@ -27,6 +27,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton';
 const NcTextField = () => import('@nextcloud/vue/dist/Components/NcTextField');
 import { showError } from '@nextcloud/dialogs';
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 
 import * as utils from '../../services/utils';
 import * as dav from '../../services/dav';
@@ -40,11 +41,9 @@ export default defineComponent({
     Modal,
   },
 
-  emits: [],
+  mixins: [ModalMixin],
 
-  data: () => ({
-    show: false,
-  }),
+  emits: [],
 
   computed: {
     user() {
@@ -61,14 +60,14 @@ export default defineComponent({
   },
 
   methods: {
-    close() {
-      this.show = false;
-    },
-
     open() {
       this.show = true;
     },
 
+    cleanup() {
+      this.show = false;
+    },
+
     async save() {
       try {
         await client.deleteFile(dav.getAlbumPath(this.user, this.name));

src/components/modal/AlbumShareModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" v-if="show">
+  <Modal ref="modal" @close="cleanup" v-if="show">
     <template #title>
       {{ t('memories', 'Share Album') }}
     </template>
@@ -34,11 +34,12 @@ import { defineComponent } from 'vue';
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton';
 
-import * as dav from '../../services/dav';
-
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 import AlbumCollaborators from './AlbumCollaborators.vue';
 
+import * as dav from '../../services/dav';
+
 export default defineComponent({
   name: 'AlbumShareModal',
   components: {
@@ -47,21 +48,17 @@ export default defineComponent({
     AlbumCollaborators,
   },
 
+  mixins: [ModalMixin],
+
   emits: [],
 
   data: () => ({
     album: null as any,
-    show: false,
     loadingAddCollaborators: false,
     collaborators: [] as any[],
   }),
 
   methods: {
-    close() {
-      this.show = false;
-      this.album = null;
-    },
-
     async open() {
       this.show = true;
       this.loadingAddCollaborators = true;
@@ -70,6 +67,11 @@ export default defineComponent({
       this.loadingAddCollaborators = false;
     },
 
+    cleanup() {
+      this.show = false;
+      this.album = null;
+    },
+
     async handleSetCollaborators(collaborators: any[]) {
       try {
         this.loadingAddCollaborators = true;

src/components/modal/EditMetadataModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal v-if="show" @close="close">
+  <Modal ref="modal" @close="cleanup" v-if="show">
     <template #title>
       {{ t('memories', 'Edit metadata') }}
     </template>
@@ -51,11 +51,13 @@
 import { defineComponent } from 'vue';
 import { IExif, IImageInfo, IPhoto } from '../../types';
 
-import UserConfig from '../../mixins/UserConfig';
 import NcButton from '@nextcloud/vue/dist/Components/NcButton';
 const NcTextField = () => import('@nextcloud/vue/dist/Components/NcTextField');
 const NcProgressBar = () => import('@nextcloud/vue/dist/Components/NcProgressBar');
+
 import Modal from './Modal.vue';
+import UserConfig from '../../mixins/UserConfig';
+import ModalMixin from './ModalMixin';
 
 import EditDate from './EditDate.vue';
 import EditTags from './EditTags.vue';
@@ -82,12 +84,11 @@ export default defineComponent({
     EditLocation,
   },
 
-  mixins: [UserConfig],
+  mixins: [UserConfig, ModalMixin],
 
   data: () => ({
     photos: null as IPhoto[] | null,
     sections: [] as number[],
-    show: false,
     processing: false,
     progress: 0,
     state: 0,
@@ -152,9 +153,9 @@ export default defineComponent({
       this.processing = false;
     },
 
-    close() {
-      this.photos = null;
+    cleanup() {
       this.show = false;
+      this.photos = null;
       this.processing = false;
     },
 

src/components/modal/FaceDeleteModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" v-if="show">
+  <Modal ref="modal" @close="cleanup" v-if="show">
     <template #title>
       {{ t('memories', 'Remove person') }}
     </template>
@@ -23,6 +23,7 @@ const NcTextField = () => import('@nextcloud/vue/dist/Components/NcTextField');
 import { showError } from '@nextcloud/dialogs';
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 
 import * as utils from '../../services/utils';
 import * as dav from '../../services/dav';
@@ -35,11 +36,9 @@ export default defineComponent({
     Modal,
   },
 
-  emits: [],
+  mixins: [ModalMixin],
 
-  data: () => ({
-    show: false,
-  }),
+  emits: [],
 
   computed: {
     name() {
@@ -52,10 +51,6 @@ export default defineComponent({
   },
 
   methods: {
-    close() {
-      this.show = false;
-    },
-
     open() {
       if (this.user !== utils.uid) {
         showError(this.t('memories', 'Only user "{user}" can delete this person', { user: this.user }));
@@ -65,6 +60,10 @@ export default defineComponent({
       this.show = true;
     },
 
+    cleanup() {
+      this.show = false;
+    },
+
     async save() {
       try {
         if (this.routeIsRecognize) {

src/components/modal/FaceEditModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" v-if="show">
+  <Modal ref="modal" @close="cleanup" v-if="show">
     <template #title>
       {{ t('memories', 'Rename person') }}
     </template>
@@ -33,6 +33,7 @@ const NcTextField = () => import('@nextcloud/vue/dist/Components/NcTextField');
 import { showError } from '@nextcloud/dialogs';
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 
 import * as utils from '../../services/utils';
 import * as dav from '../../services/dav';
@@ -45,11 +46,12 @@ export default defineComponent({
     Modal,
   },
 
+  mixins: [ModalMixin],
+
   emits: [],
 
   data: () => ({
-    show: false,
-    input: '',
+    input: String(),
   }),
 
   computed: {
@@ -67,10 +69,6 @@ export default defineComponent({
   },
 
   methods: {
-    close() {
-      this.show = false;
-    },
-
     open() {
       if (this.user !== utils.uid) {
         showError(this.t('memories', 'Only user "{user}" can update this person', { user: this.user }));
@@ -81,6 +79,10 @@ export default defineComponent({
       this.show = true;
     },
 
+    cleanup() {
+      this.show = false;
+    },
+
     async save() {
       if (!this.canSave) return;
 

src/components/modal/FaceMergeModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="large" v-if="show">
+  <Modal ref="modal" @close="cleanup" size="large" v-if="show">
     <template #title>
       {{ t('memories', 'Merge {name} with person', { name: $route.params.name }) }}
     </template>
@@ -33,6 +33,8 @@ import Cluster from '../frame/Cluster.vue';
 import FaceList from './FaceList.vue';
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
+
 import client from '../../services/dav/client';
 import * as dav from '../../services/dav';
 import * as utils from '../../services/utils';
@@ -48,19 +50,16 @@ export default defineComponent({
     FaceList,
   },
 
+  mixins: [ModalMixin],
+
   emits: [],
 
   data: () => ({
     processing: 0,
     processingTotal: 0,
-    show: false,
   }),
 
   methods: {
-    close() {
-      this.show = false;
-    },
-
     open() {
       const user = this.$route.params.user || '';
       if (this.$route.params.user !== utils.uid) {
@@ -74,6 +73,10 @@ export default defineComponent({
       this.show = true;
     },
 
+    cleanup() {
+      this.show = false;
+    },
+
     async clickFace(face: IFace) {
       const user = this.$route.params.user || '';
       const name = this.$route.params.name || '';

src/components/modal/FaceMoveModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="large" v-if="show">
+  <Modal ref="modal" @close="cleanup" size="large" v-if="show">
     <template #title>
       {{ t('memories', 'Move selected photos to person') }}
     </template>
@@ -28,6 +28,8 @@ import Cluster from '../frame/Cluster.vue';
 import FaceList from './FaceList.vue';
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
+
 import * as dav from '../../services/dav';
 import * as utils from '../../services/utils';
 
@@ -41,10 +43,11 @@ export default defineComponent({
     FaceList,
   },
 
+  mixins: [ModalMixin],
+
   emits: [],
 
   data: () => ({
-    show: false,
     photos: [] as IPhoto[],
   }),
 
@@ -75,9 +78,9 @@ export default defineComponent({
       this.photos = photos;
     },
 
-    close() {
-      this.photos = [];
+    cleanup() {
       this.show = false;
+      this.photos = [];
     },
 
     moved(photos: IPhoto[]) {

src/components/modal/Modal.vue

@@ -1,11 +1,12 @@
 <template>
   <NcModal
     class="memories-modal"
+    ref="modal"
     :size="size"
     :outTransition="true"
     :style="{ width: isSidebarShown ? `calc(100% - ${sidebarWidth}px)` : null }"
     :additionalTrapElements="trapElements"
-    @close="close"
+    @close="cleanup"
   >
     <div class="container" @keydown.stop="0">
       <div class="head">
@@ -83,6 +84,10 @@ export default defineComponent({
 
   methods: {
     close() {
+      (<any>this.$refs.modal).close();
+    },
+
+    cleanup() {
       this.$emit('close');
     },
 

src/components/modal/ModalMixin.ts

@@ -0,0 +1,33 @@
+import { defineComponent } from 'vue';
+
+import * as utils from '../../services/utils';
+
+export default defineComponent({
+  name: 'ModalMixin',
+
+  data: () => ({
+    show: false,
+  }),
+
+  mounted() {
+    utils.bus.on('memories:fragment:pop:modal', this.close);
+  },
+
+  beforeDestroy() {
+    utils.bus.off('memories:fragment:pop:modal', this.close);
+  },
+
+  watch: {
+    show(value: boolean, from: boolean) {
+      utils.fragment.if(value, utils.fragment.types.modal);
+    },
+  },
+
+  methods: {
+    close() {
+      if (this.show) {
+        (<any>this.$refs.modal)?.close?.();
+      }
+    },
+  },
+});

src/components/modal/MoveToFolderModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="normal" v-if="processing">
+  <Modal ref="modal" @close="cleanup" size="normal" v-if="processing">
     <template #title>
       {{ t('memories', 'Move to folder') }}
     </template>
@@ -23,8 +23,9 @@ import type { IPhoto } from '../../types';
 
 const NcProgressBar = () => import('@nextcloud/vue/dist/Components/NcProgressBar');
 
-import UserConfig from '../../mixins/UserConfig';
 import Modal from './Modal.vue';
+import UserConfig from '../../mixins/UserConfig';
+import ModalMixin from './ModalMixin';
 
 export default defineComponent({
   name: 'MoveToFolderModal',
@@ -33,7 +34,7 @@ export default defineComponent({
     Modal,
   },
 
-  mixins: [UserConfig],
+  mixins: [UserConfig, ModalMixin],
 
   data: () => ({
     photos: [] as IPhoto[],
@@ -51,13 +52,12 @@ export default defineComponent({
       this.photosDone = 0;
       this.processing = false;
       this.photos = photos;
-
       this.chooseFolderPath();
     },
 
-    close() {
-      this.photos = [];
+    cleanup() {
       this.processing = false;
+      this.photos = [];
     },
 
     async chooseFolderPath() {

src/components/modal/MultiPathSelectionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" v-if="show" size="small">
+  <Modal ref="modal" @close="cleanup" v-if="show" size="small">
     <template #title>
       {{ title }}
     </template>
@@ -31,14 +31,15 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import Modal from './Modal.vue';
-
 import * as utils from '../../services/utils';
 
 import NcActions from '@nextcloud/vue/dist/Components/NcActions';
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton';
 import NcButton from '@nextcloud/vue/dist/Components/NcButton';
 
+import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
+
 import CloseIcon from 'vue-material-design-icons/Close.vue';
 
 export default defineComponent({
@@ -51,6 +52,8 @@ export default defineComponent({
     CloseIcon,
   },
 
+  mixins: [ModalMixin],
+
   props: {
     title: {
       type: String,
@@ -63,23 +66,22 @@ export default defineComponent({
   },
 
   data: () => ({
-    show: false,
     paths: [] as string[],
   }),
 
   methods: {
-    close(list: string[]) {
-      this.show = false;
-      this.$emit('close', list);
-    },
-
     open(paths: string[]) {
       this.paths = paths;
       this.show = true;
     },
 
+    cleanup() {
+      this.show = false;
+      this.$emit('close', this.paths);
+    },
+
     save() {
-      this.close(this.paths);
+      this.close();
     },
 
     async add() {

src/components/modal/NodeShareModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="normal" v-if="show" :sidebar="!isRoot && !isMobile ? filename : null">
+  <Modal ref="modal" @close="cleanup" size="normal" v-if="show" :sidebar="!isRoot && !isMobile ? filename : null">
     <template #title>
       {{ t('memories', 'Link Sharing') }}
     </template>
@@ -70,6 +70,7 @@ const NcListItem = () => import('@nextcloud/vue/dist/Components/NcListItem');
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton';
 
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 
 import { API } from '../../services/API';
 import * as utils from '../../services/utils';
@@ -100,12 +101,11 @@ export default defineComponent({
     LinkIcon,
   },
 
-  mixins: [UserConfig],
+  mixins: [UserConfig, ModalMixin],
 
   emits: [],
 
   data: () => ({
-    show: false,
     filename: '',
     loading: false,
     shares: [] as IShare[],
@@ -158,7 +158,7 @@ export default defineComponent({
       }
     },
 
-    close() {
+    cleanup() {
       this.show = false;
     },
 

src/components/modal/ShareModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @close="close" size="normal" v-if="photo">
+  <Modal ref="modal" @close="cleanup" size="normal" v-if="show">
     <template #title>
       {{ t('memories', 'Share File') }}
     </template>
@@ -78,7 +78,9 @@ import { showError } from '@nextcloud/dialogs';
 import axios from '@nextcloud/axios';
 
 const NcListItem = () => import('@nextcloud/vue/dist/Components/NcListItem');
+
 import Modal from './Modal.vue';
+import ModalMixin from './ModalMixin';
 import UserConfig from '../../mixins/UserConfig';
 
 import { IPhoto } from '../../types';
@@ -105,7 +107,7 @@ export default defineComponent({
     FileIcon,
   },
 
-  mixins: [UserConfig],
+  mixins: [UserConfig, ModalMixin],
 
   data: () => {
     return {
@@ -145,9 +147,11 @@ export default defineComponent({
     open(photo: IPhoto) {
       this.photo = photo;
       this.loading = 0;
+      this.show = true;
     },
 
-    close() {
+    cleanup() {
+      this.show = false;
       this.photo = null;
     },
 

src/services/utils/fragment.ts

@@ -5,6 +5,7 @@ import { bus } from './event-bus';
 enum FragmentType {
   viewer = 'v',
   selection = 's',
+  modal = 'm',
 }
 
 /** Names of fragments */
@@ -110,10 +111,10 @@ export const fragment = {
       return;
     }
 
-    // If the fragment is already in the list,
-    // we can't touch it. This should never happen.
+    // If the fragment is already in the list, we can't touch it.
     if (list.find((f) => f.type === frag.type)) {
-      console.error('[BUG] Fragment already in route', frag.type);
+      console.debug('Fragment already in route', frag.type);
+      return;
     }
 
     // Add fragment to route