fix(folders): empty content and unknown folder render

Signed-off-by: skjnldsv <[email protected]>
nextcloud · Aug 8, 2024 · 5d0c00a · 5d0c00a
1 parent 898e111
commit 5d0c00a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/src/store/folders.js b/src/store/folders.js
@@ -20,6 +20,10 @@ const mutations = {
 	 * @param {Array} data.files list of files
 	 */
 	updateFolders(state, { fileid, files }) {
+		if (!state.folders[fileid]) {
+			Vue.set(state.folders, fileid, [])
+		}
+
 		if (files.length > 0) {
 			// sort by last modified
 			const list = files
@@ -69,6 +73,7 @@ const mutations = {
 
 const getters = {
 	folders: state => state.folders,
+	paths: state => state.paths,
 	folder: state => fileid => state.folders[fileid],
 	folderId: state => path => state.paths[path],
 }

diff --git a/src/views/Folders.vue b/src/views/Folders.vue
@@ -5,14 +5,16 @@
 
 <template>
 	<!-- Errors handlers-->
-	<NcEmptyContent v-if="error === 404" illustration-name="folder">
-		{{ t('photos', 'This folder does not exist') }}
+	<NcEmptyContent v-if="error === 404" :name="t('photos', 'This folder does not exist')">
+		<template #icon>
+			<FolderIcon />
+		</template>
 	</NcEmptyContent>
-	<NcEmptyContent v-else-if="error">
-		{{ t('photos', 'An error occurred') }}
-	</NcEmptyContent>
-	<NcEmptyContent v-else-if="initializing" icon="icon-loading">
-		{{ t('photos', 'Loading folders …') }}
+	<NcEmptyContent v-else-if="error" :name="t('photos', 'An error occurred')" />
+	<NcEmptyContent v-else-if="initializing" :name="t('photos', 'Loading folders …')">
+		<template #icon>
+			<NcLoadingIcon />
+		</template>
 	</NcEmptyContent>
 
 	<!-- Folder content -->
@@ -21,7 +23,7 @@
 			:class="{'photos-navigation--uploading': uploader.queue?.length > 0}"
 			:loading="loading"
 			:path="path"
-			:title="folder.basename.toString()"
+			:title="folder?.basename?.toString?.() || rootTitle"
 			:root-title="rootTitle"
 			@refresh="onRefresh">
 			<UploadPicker :accept="allowedMimes"
@@ -31,8 +33,10 @@
 		</HeaderNavigation>
 
 		<!-- Empty folder, should only happen via direct link -->
-		<NcEmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
-			{{ t('photos', 'No photos in here') }}
+		<NcEmptyContent v-if="isEmpty" key="emptycontent" :name="t('photos', 'No photos in here')">
+			<template #icon>
+				<FolderIcon />
+			</template>
 		</NcEmptyContent>
 
 		<div v-else
@@ -50,10 +54,11 @@
 </template>
 
 <script>
+import { Folder as NcFolder, davParsePermissions } from '@nextcloud/files'
 import { mapGetters } from 'vuex'
+import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { Upload, UploadPicker, getUploader } from '@nextcloud/upload'
-import { Folder as NcFolder, davParsePermissions } from '@nextcloud/files'
-import { NcEmptyContent } from '@nextcloud/vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import VirtualGrid from 'vue-virtual-grid'
 
 import FileLegacy from '../components/FileLegacy.vue'
@@ -71,10 +76,12 @@ import getFileInfo from '../services/FileInfo.js'
 export default {
 	name: 'Folders',
 	components: {
-		VirtualGrid,
+		FolderIcon,
 		HeaderNavigation,
 		NcEmptyContent,
+		NcLoadingIcon,
 		UploadPicker,
+		VirtualGrid,
 	},
 	mixins: [
 		AbortControllerMixin,
@@ -126,14 +133,18 @@ export default {
 			return this.files[this.folderId]
 		},
 		folderAsFolder() {
+			if (!this.folder) {
+				return null
+			}
+
 			return new NcFolder({
 				...this.folder,
 				source: decodeURI(this.folder.source),
 				permissions: davParsePermissions(this.folder.permissions),
 			})
 		},
 		folderContent() {
-			return this.folders[this.folderId]
+			return this.folders[this.folderId] || []
 		},
 		fileList() {
 			const list = this.folderContent