Merge pull request #72 from directus/event-emitter

Add event emitter, refresh files browse on upload

app/package-lock.json

@@ -15596,6 +15596,11 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",

app/package.json

@@ -58,6 +58,7 @@
     "marked": "^1.1.1",
     "micromustache": "^7.1.0",
     "mime-types": "^2.1.27",
+    "mitt": "^2.1.0",
     "mousetrap": "^1.6.5",
     "nanoid": "^3.1.10",
     "pinia": "^0.0.7",

app/src/events.ts

@@ -0,0 +1,6 @@
+import mitt from 'mitt';
+
+const emitter = mitt();
+
+export default emitter;
+export enum Events { upload = 'upload' }

app/src/layouts/cards/components/card.vue

@@ -137,7 +137,7 @@ export default defineComponent({
 			if (props.selectMode === true) {
 				toggleSelection();
 			} else {
-				router.push(props.to);
+				router.push(props.to, () => {});
 			}
 		}
 	},

app/src/modules/files/routes/browse/browse.vue

@@ -103,7 +103,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, PropType } from '@vue/composition-api';
+import { defineComponent, computed, ref, PropType, onMounted, onUnmounted } from '@vue/composition-api';
 import FilesNavigation from '../../components/navigation/';
 import { i18n } from '@/lang';
 import api from '@/api';
@@ -115,6 +115,7 @@ import AddFolder from '../../components/add-folder';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
 import FolderPicker from '../../components/folder-picker';
+import emitter, { Events } from '@/events';
 
 type Item = {
 	[field: string]: any;
@@ -192,6 +193,9 @@ export default defineComponent({
 
 		const { moveToDialogActive, moveToFolder, moving, selectedFolder } = useMovetoFolder();
 
+		onMounted(() => emitter.on(Events.upload, refresh));
+		onUnmounted(() => emitter.off(Events.upload, refresh));
+
 		return {
 			batchDelete,
 			batchLink,

app/src/views/private/private-view.vue

@@ -69,6 +69,7 @@ import uploadFiles from '@/utils/upload-files';
 import i18n from '@/lang';
 import useEventListener from '@/composables/use-event-listener';
 import useAppStore from '@/stores/app';
+import emitter, { Events } from '@/events';
 
 export default defineComponent({
 	components: {
@@ -235,6 +236,8 @@ export default defineComponent({
 					});
 				});
 
+				emitter.emit(Events.upload);
+
 				notificationsStore.remove(fileUploadNotificationID);
 			}
 		}