browsing through upload request

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -141,7 +141,7 @@ export default {
                     this.currentIndex = index
                 }
             })
-        }, 100),
+        }, 50),
         getFilesForView() {
             let requestedFile = this.clipboard[0]
 

resources/js/components/FilesView/ItemGrid.vue

@@ -65,7 +65,7 @@
                     <img
                         class="h-full w-full rounded-lg object-cover shadow-lg"
                         :src="entry.data.attributes.thumbnail.sm"
-                        :alt="entry.data.attributes.name"
+						alt=""
                         loading="lazy"
                     />
                 </div>

resources/js/components/FilesView/ItemList.vue

@@ -44,7 +44,7 @@
                 v-if="isImage && entry.data.attributes.thumbnail"
                 class="ml-0.5 h-12 w-12 rounded object-cover"
                 :src="entry.data.attributes.thumbnail.xs"
-                :alt="entry.data.attributes.name"
+				alt=""
                 loading="lazy"
             />
         </div>

resources/js/helpers/functionHelpers.js

@@ -326,6 +326,7 @@ const FunctionHelpers = {
 
         Vue.prototype.$getDataByLocation = function () {
             let routes = {
+                RequestUpload: ['getUploadRequestFolder', router.currentRoute.params.id || undefined ],
                 Public: ['getSharedFolder', router.currentRoute.params.id || undefined],
                 Files: ['getFolder', router.currentRoute.params.id || undefined],
                 RecentUploads: ['getRecentUploads'],
@@ -424,10 +425,8 @@ const FunctionHelpers = {
 
         Vue.prototype.$goToFileView = function (id) {
             let locations = {
-                Public: {
-                    name: 'Public',
-                    params: { token: this.$route.params.token, id: id },
-                },
+                RequestUpload: {name: 'RequestUpload', params: { token: this.$route.params.token, id: id }},
+                Public: {name: 'Public', params: { token: this.$route.params.token, id: id }},
                 TeamFolders: { name: 'TeamFolders', params: { id: id } },
                 SharedWithMe: { name: 'SharedWithMe', params: { id: id } },
                 MySharedItems: { name: 'Files', params: { id: id } },

resources/js/store/modules/fileFunctions.js

@@ -313,7 +313,7 @@ const actions = {
             commit('REMOVE_ITEM', data.data.id)
 
             // Remove item from sidebar
-            if (getters.permission === 'master') {
+            if (! ['Public', 'RequestUpload'].includes(router.currentRoute.name)) {
                 if (data.data.type === 'folder') commit('REMOVE_ITEM_FROM_FAVOURITES', data)
             }
         })

resources/js/store/modules/uploadRequest.js

@@ -1,6 +1,5 @@
 import router from '../../router'
 import { events } from '../../bus'
-import i18n from '../../i18n'
 import axios from 'axios'
 import Vue from 'vue'
 
@@ -9,19 +8,51 @@ const defaultState = {
 }
 
 const actions = {
+    getUploadRequestFolder: ({ commit, getters }, id) => {
+        commit('LOADING_STATE', { loading: true, data: [] })
+
+        return new Promise((resolve, reject) => {
+            axios
+                .get(`/api/upload-request/${router.currentRoute.params.token}/browse/${id}${getters.sorting.URI}`)
+                .then((response) => {
+                    let folders = response.data.folders.data
+                    let files = response.data.files.data
+
+                    commit('LOADING_STATE', {
+                        loading: false,
+                        data: folders.concat(files),
+                    })
+                    commit('SET_CURRENT_FOLDER', response.data.root)
+
+                    events.$emit('scrollTop')
+
+                    resolve(response)
+                })
+                .catch((error) => {
+                    Vue.prototype.$isSomethingWrong()
+
+                    reject(error)
+                })
+        })
+    },
     getUploadRequestDetail: ({ commit }) => {
-        axios.get(`/api/upload-request/${router.currentRoute.params.token}`)
-            .then((response) => {
+        return new Promise((resolve, reject) => {
+            axios.get(`/api/upload-request/${router.currentRoute.params.token}`)
+                .then((response) => {
+                    resolve(response)
 
-                commit('LOADING_STATE', { loading: false, data: [] })
+                    // Stop loading spinner
+                    if (response.data.data.attributes.status === 'active')
+                        commit('LOADING_STATE', { loading: false, data: [] })
 
-                commit('SET_UPLOAD_REQUEST', response.data)
+                    commit('SET_UPLOAD_REQUEST', response.data)
 
-                // Set current folder if exist
-                if (response.data.data.relationships.folder) {
-                    commit('SET_CURRENT_FOLDER', response.data.data.relationships.folder)
-                }
-            })
+                    // Set current folder if exist
+                    if (! router.currentRoute.params.id) {
+                        commit('SET_CURRENT_FOLDER', response.data.data.relationships.folder)
+                    }
+                })
+        })
     },
     closeUploadRequest: ({ commit }) => {
         axios

resources/js/views/FileView/UploadRequestFiles.vue

@@ -40,7 +40,7 @@
 			/>
         </MobileMultiSelectToolbar>
 
-        <ContextMenu v-if="entries.length">
+        <ContextMenu v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling'">
             <template v-slot:empty-select>
                 <OptionGroup>
                     <OptionUpload :title="$t('actions.upload')" type="file" />
@@ -81,7 +81,7 @@
             </template>
         </ContextMenu>
 
-        <FileActionsMobile v-if="entries.length">
+        <FileActionsMobile v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling'">
 			<!--I am Done-->
 			<button @click="uploadingDone" class="flex shrink-0 items-center mr-2 rounded-xl bg-theme-200 py-1 px-1 pr-3">
 				<MemberAvatar
@@ -109,27 +109,42 @@
         </FileActionsMobile>
 
         <EmptyFilePage v-if="uploadRequest">
-            <div class="relative mx-auto mb-8 w-24 text-center">
-                <VueFolderIcon class="inline-block w-28" />
-                <MemberAvatar
-					v-if="uploadRequest.data.attributes.status !== 'expired'"
-					:member="uploadRequest.data.relationships.user"
-					class="absolute -bottom-2.5 -right-2"
-					:is-border="true"
-					:size="32"
-				/>
-            </div>
 
-            <h1 class="title">
-                {{ emptyPageTitle }}
-            </h1>
-            <p class="description max-w-[420px]">
-                {{ emptyPageDescription }}
-            </p>
+			<div v-if="uploadRequest.data.attributes.status === 'filling'">
+				<h1 class="title">
+					{{ $t('empty_page.title') }}
+				</h1>
+				<p class="description">
+					{{ $t('empty_page.description') }}
+				</p>
+				<ButtonUpload button-style="theme">
+					{{ $t('empty_page.call_to_action') }}
+				</ButtonUpload>
+			</div>
 
-            <ButtonUpload v-if="uploadRequest.data.attributes.status === 'active'" button-style="theme">
-                {{ $t('empty_page.call_to_action') }}
-            </ButtonUpload>
+			<div v-if="['active', 'filled', 'expired'].includes(uploadRequest.data.attributes.status)">
+				<div class="relative mx-auto mb-8 w-24 text-center">
+					<VueFolderIcon class="inline-block w-28" />
+					<MemberAvatar
+						v-if="uploadRequest.data.attributes.status !== 'expired'"
+						:member="uploadRequest.data.relationships.user"
+						class="absolute -bottom-2.5 -right-2"
+						:is-border="true"
+						:size="32"
+					/>
+				</div>
+
+				<h1 class="title">
+					{{ emptyPageTitle }}
+				</h1>
+				<p class="description max-w-[420px] mx-auto">
+					{{ emptyPageDescription }}
+				</p>
+
+				<ButtonUpload v-if="uploadRequest.data.attributes.status === 'active'" button-style="theme">
+					{{ $t('empty_page.call_to_action') }}
+				</ButtonUpload>
+			</div>
         </EmptyFilePage>
 
         <FileBrowser />
@@ -175,7 +190,7 @@ export default {
 		Option,
 	},
 	computed: {
-		...mapGetters(['fastPreview', 'clipboard', 'config', 'user', 'entries', 'uploadRequest']),
+		...mapGetters(['fastPreview', 'clipboard', 'config', 'user', 'uploadRequest']),
 		isFolder() {
 			return this.item && this.item.data.type === 'folder'
 		},
@@ -215,12 +230,20 @@ export default {
 			events.$emit('popup:open', {name: 'create-folder'})
 		},
 	},
-	created() {
+	mounted() {
 		events.$on('context-menu:show', (event, item) => (this.item = item))
 		events.$on('context-menu:current-folder', (folder) => (this.item = folder))
 		events.$on('mobile-context-menu:show', (item) => (this.item = item))
 
-		this.$store.dispatch('getUploadRequestDetail')
+		// Load folder from id in router
+		if (this.$route.params.id) {
+			this.$store.dispatch('getUploadRequestFolder', this.$route.params.id)
+		}
+
+		// Load root folder for upload request
+		if (! this.$route.params.id && this.uploadRequest && this.uploadRequest.data.attributes.status === 'filling') {
+			this.$store.dispatch('getUploadRequestFolder')
+		}
 	},
 }
 </script>

resources/js/views/UploadRequest.vue

@@ -22,8 +22,8 @@
             @contextmenu.prevent.capture="contextMenu($event, undefined)"
             class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5"
         >
-            <DesktopUploadRequestToolbar v-if="entries.length" />
-            <MobileUploadRequestToolBar v-if="entries.length" />
+            <DesktopUploadRequestToolbar v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling'" />
+            <MobileUploadRequestToolBar v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling'" />
 
             <!--Google Adsense banner-->
             <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
@@ -32,7 +32,7 @@
             <div class="flex space-x-3 lg:overflow-hidden">
                 <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
 
-                <InfoSidebarUploadRequest v-if="entries.length && isVisibleSidebar" />
+                <InfoSidebarUploadRequest v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling' && isVisibleSidebar" />
             </div>
         </div>
     </div>
@@ -73,7 +73,7 @@ export default {
         DragUI,
     },
     computed: {
-        ...mapGetters(['isVisibleSidebar', 'config', 'entries']),
+        ...mapGetters(['isVisibleSidebar', 'config', 'uploadRequest']),
     },
     data() {
         return {
@@ -94,6 +94,13 @@ export default {
 			if (data.operation === 'close-upload-request')
 				this.$store.dispatch('closeUploadRequest')
 		})
-    },
+
+		this.$store.dispatch('getUploadRequestDetail')
+			.then((response) => {
+				if (! this.$route.params.id && response.data.data.attributes.status === 'filling') {
+					this.$store.dispatch('getUploadRequestFolder')
+				}
+			})
+	},
 }
 </script>