desktop toolbar refactoring

public/mix-manifest.json

@@ -42,7 +42,7 @@
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~b068369d.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~b068369d.js?id=d10326c5b0801dff59a4",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/settings-subscription~chunks/shared~ab58556a.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/settings-subscription~chunks/shared~ab58556a.js?id=7c0aae7820c3dcd29575",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/shared/single-f~f04cfcbc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/shared/single-f~f04cfcbc.js?id=c39ed6403a2c3c124338",
-    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/team-folders~ch~ba7d6097.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/team-folders~ch~ba7d6097.js?id=302af22be3f5fe7aaf4d",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/team-folders~ch~ba7d6097.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/team-folders~ch~ba7d6097.js?id=aaf09d7a6d6085fbe629",
     "/chunks/files~chunks/shared/files~chunks/team-folders.js": "/chunks/files~chunks/shared/files~chunks/team-folders.js?id=ed4e72b9cb1946e582c8",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea",
     "/chunks/homepage.js": "/chunks/homepage.js?id=db15518895b65833f7ec",
@@ -59,7 +59,7 @@
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48",
     "/chunks/plans.js": "/chunks/plans.js?id=e93cd9c42177eadc8825",
     "/chunks/platform.js": "/chunks/platform.js?id=39e4ea880516add24c59",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=6000d49dae81f57df3d0",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e42c52a6ef90161fe16d",
     "/chunks/profile.js": "/chunks/profile.js?id=658aa03af778cc2cc100",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e8597a21a38c153e3c88",
@@ -148,5 +148,34 @@
     "/chunks/platform.add54d9080a4c72facb3.hot-update.js": "/chunks/platform.add54d9080a4c72facb3.hot-update.js",
     "/chunks/platform.b270ed5302710d2d9b4d.hot-update.js": "/chunks/platform.b270ed5302710d2d9b4d.hot-update.js",
     "/chunks/platform.a3857edeaf0f1b1262f2.hot-update.js": "/chunks/platform.a3857edeaf0f1b1262f2.hot-update.js",
-    "/chunks/platform.3f5a03ca3df53bb04c5e.hot-update.js": "/chunks/platform.3f5a03ca3df53bb04c5e.hot-update.js"
+    "/chunks/platform.3f5a03ca3df53bb04c5e.hot-update.js": "/chunks/platform.3f5a03ca3df53bb04c5e.hot-update.js",
+    "/chunks/platform~chunks/shared.6d119b5a149bc3747ee9.hot-update.js": "/chunks/platform~chunks/shared.6d119b5a149bc3747ee9.hot-update.js",
+    "/chunks/platform~chunks/shared.1ad86cf3c13e081ccdf8.hot-update.js": "/chunks/platform~chunks/shared.1ad86cf3c13e081ccdf8.hot-update.js",
+    "/chunks/platform~chunks/shared.b199fddf3bcfd90a0fdb.hot-update.js": "/chunks/platform~chunks/shared.b199fddf3bcfd90a0fdb.hot-update.js",
+    "/chunks/platform~chunks/shared.6f429a0d945f557101d0.hot-update.js": "/chunks/platform~chunks/shared.6f429a0d945f557101d0.hot-update.js",
+    "/chunks/platform~chunks/shared.0ea477cbce4dd8b7be4c.hot-update.js": "/chunks/platform~chunks/shared.0ea477cbce4dd8b7be4c.hot-update.js",
+    "/chunks/platform~chunks/shared.cad45666cc9622969c7b.hot-update.js": "/chunks/platform~chunks/shared.cad45666cc9622969c7b.hot-update.js",
+    "/chunks/platform~chunks/shared.b137a969c816a1cad43d.hot-update.js": "/chunks/platform~chunks/shared.b137a969c816a1cad43d.hot-update.js",
+    "/js/main.337645602dfb303b5063.hot-update.js": "/js/main.337645602dfb303b5063.hot-update.js",
+    "/js/main.dbdb47fa3380d10ad1a7.hot-update.js": "/js/main.dbdb47fa3380d10ad1a7.hot-update.js",
+    "/js/main.f6be8818c22693269d52.hot-update.js": "/js/main.f6be8818c22693269d52.hot-update.js",
+    "/js/main.7d623b5fe30476007b92.hot-update.js": "/js/main.7d623b5fe30476007b92.hot-update.js",
+    "/js/main.12bd42d566ffa588b472.hot-update.js": "/js/main.12bd42d566ffa588b472.hot-update.js",
+    "/js/main.829b50a121226055e51b.hot-update.js": "/js/main.829b50a121226055e51b.hot-update.js",
+    "/chunks/platform~chunks/shared.9ada3852f380d9f74ce7.hot-update.js": "/chunks/platform~chunks/shared.9ada3852f380d9f74ce7.hot-update.js",
+    "/chunks/platform~chunks/shared.6a8291ebfd5839386a21.hot-update.js": "/chunks/platform~chunks/shared.6a8291ebfd5839386a21.hot-update.js",
+    "/chunks/platform~chunks/shared.b852c4a2397c404e234b.hot-update.js": "/chunks/platform~chunks/shared.b852c4a2397c404e234b.hot-update.js",
+    "/chunks/platform~chunks/shared.d6dfe8601ef247a82b22.hot-update.js": "/chunks/platform~chunks/shared.d6dfe8601ef247a82b22.hot-update.js",
+    "/chunks/platform~chunks/shared.de344c16232a4d60ee09.hot-update.js": "/chunks/platform~chunks/shared.de344c16232a4d60ee09.hot-update.js",
+    "/js/main.4a5b9ca68db27bdd7b34.hot-update.js": "/js/main.4a5b9ca68db27bdd7b34.hot-update.js",
+    "/chunks/platform~chunks/shared.32dfa8217e888b50e7eb.hot-update.js": "/chunks/platform~chunks/shared.32dfa8217e888b50e7eb.hot-update.js",
+    "/chunks/platform~chunks/shared.6ec281ab19e81571ab46.hot-update.js": "/chunks/platform~chunks/shared.6ec281ab19e81571ab46.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/team-folders~ch~ba7d6097.4a4114d15d030c03b668.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/files~chunks/team-folders~ch~ba7d6097.4a4114d15d030c03b668.hot-update.js",
+    "/chunks/platform~chunks/shared.e1c61f7a21fbdae0976f.hot-update.js": "/chunks/platform~chunks/shared.e1c61f7a21fbdae0976f.hot-update.js",
+    "/chunks/platform~chunks/shared.d4162d8629b712b01643.hot-update.js": "/chunks/platform~chunks/shared.d4162d8629b712b01643.hot-update.js",
+    "/chunks/platform~chunks/shared.43b8244da6ddfacbf6f3.hot-update.js": "/chunks/platform~chunks/shared.43b8244da6ddfacbf6f3.hot-update.js",
+    "/chunks/platform~chunks/shared.94508bf87547a5a69886.hot-update.js": "/chunks/platform~chunks/shared.94508bf87547a5a69886.hot-update.js",
+    "/chunks/platform~chunks/shared.0cac4a4efb13804f00f3.hot-update.js": "/chunks/platform~chunks/shared.0cac4a4efb13804f00f3.hot-update.js",
+    "/chunks/platform~chunks/shared.1cc958b33c5c1dc8fca4.hot-update.js": "/chunks/platform~chunks/shared.1cc958b33c5c1dc8fca4.hot-update.js",
+    "/chunks/platform~chunks/shared.adfde9155da98c78507d.hot-update.js": "/chunks/platform~chunks/shared.adfde9155da98c78507d.hot-update.js"
 }

resources/js/components/FilesView/DesktopToolbar.vue

@@ -2,13 +2,13 @@
     <div id="desktop-toolbar">
         <div class="toolbar-wrapper">
 			<div @click="goBack" class="location">
-				<chevron-left-icon :class="{'is-active': isLoadedFolder }" class="icon-back" size="17" />
+				<chevron-left-icon :class="{'is-active': isNotHomepage }" class="icon-back" size="17" />
 
 				<span class="location-title">
-					{{ directoryName }}
+					{{ $getCurrentLocationName() }}
 				</span>
 
-				<span v-show="isLoadedFolder" @click.stop="folderActions" class="location-more group" id="folder-actions">
+				<span v-show="currentFolder" @click.stop="folderActions" class="location-more group" id="folder-actions">
 					<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
 				</span>
 			</div>
@@ -26,18 +26,18 @@
 						<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :action="$t('actions.create')" />
 						<PopoverItem name="desktop-create" side="left">
 							<OptionGroup>
-								<OptionUpload :class="{'is-inactive': canUploadInView || !hasCapacity }" :title="$t('actions.upload')" />
+								<OptionUpload :class="{'is-inactive': canUploadInView || isTeamFolderHomepage }" :title="$t('actions.upload')" />
 							</OptionGroup>
 							<OptionGroup>
 								<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
-								<Option @click.stop.native="$createFolder" :class="{'is-inactive': canCreateFolderInView }" :title="$t('actions.create_folder')" icon="folder-plus" />
+								<Option @click.stop.native="$createFolder" :class="{'is-inactive': canCreateFolderInView || isTeamFolderHomepage }" :title="$t('actions.create_folder')" icon="folder-plus" />
 							</OptionGroup>
 						</PopoverItem>
 					</PopoverWrapper>
 				</ToolbarGroup>
 
 				<!--Share Controls-->
-				<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && ! $isMobile() && !$isThisRoute($route, ['Public'])">
+				<ToolbarGroup v-if="! $isMobile() && ! $isThisRoute($route, ['Public'])">
 
 					<!--Team Folder Icon-->
 					<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders'])">
@@ -69,7 +69,7 @@
 							<FileSortingOptions />
 						</PopoverItem>
 					</PopoverWrapper>
-                    <ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :class="{'active': isVisibleSidebar }" :action="$t('actions.info_panel')" source="info" />
+                    <ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :action="$t('actions.info_panel')" source="info" />
 				</ToolbarGroup>
 			</ToolbarWrapper>
         </div>
@@ -93,9 +93,8 @@
 	import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
 	import SearchBar from '/resources/js/components/FilesView/SearchBar'
 	import Option from '/resources/js/components/FilesView/Option'
-	import {mapGetters} from 'vuex'
 	import {events} from '/resources/js/bus'
-	import {last} from 'lodash'
+	import {mapGetters} from 'vuex'
 
 	export default {
 		name: 'DesktopToolbar',
@@ -119,69 +118,46 @@
 		computed: {
 			...mapGetters([
 				'currentTeamFolder',
-				'isVisibleSidebar',
-				'FilePreviewType',
 				'currentFolder',
 				'sharedDetail',
 				'clipboard',
 			]),
 			teamFolder() {
-				return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
+				return this.currentTeamFolder
+					? this.currentTeamFolder
+					: this.clipboard[0]
 			},
-			isLoadedFolder() {
+			isNotHomepage() {
 				if (this.$isThisRoute(this.$route, ['Public'])) {
 					return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
 				}
 
 				return this.$route.params.id
 			},
-			hasCapacity() {
-				// Check if storage limitation is set
-				if (!this.$store.getters.config.storageLimit) return true
-
-				// Check if user is loaded
-				if (!this.$store.getters.user) return true
-
-				// Check if user has storage
-				return this.$store.getters.user.data.attributes.storage.used <= 100
-			},
-			directoryName() {
-				if (this.currentFolder) {
-					return this.currentFolder.data.attributes.name
-				} else {
-					return {
-						'RecentUploads': this.$t('Recent'),
-						'MySharedItems': this.$t('Shared'),
-						'Trash': this.$t('Trash'),
-						'Public': this.$t('Files'),
-						'Files': this.$t('Files'),
-						'TeamFolders': this.$t('Team Folders'),
-					}[this.$route.name]
-				}
-			},
-			preview() {
-				return this.FilePreviewType === 'list'
-					? 'th'
-					: 'th-list'
+			isTeamFolderHomepage() {
+				return this.$isThisRoute(this.$route, ['TeamFolders'])
+					&& ! this.$route.params.id
 			},
 			canCreateFolderInView() {
-				return ! this.$isThisRoute(this.$route, ['Files', 'Public'])
+				return ! this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders'])
+			},
+			canShowConvertToTeamFolder() {
+				return this.$isThisRoute(this.$route, ['Files', 'MySharedItems'])
+			},
+			canUploadInView() {
+				return ! this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders'])
 			},
 			canDeleteInView() {
 				let routes = [
+					'TeamFolders',
 					'RecentUploads',
 					'MySharedItems',
 					'Trash',
 					'Public',
 					'Files',
 				]
-				return !this.$isThisRoute(this.$route, routes) || this.clipboard.length === 0
-			},
-			canShowConvertToTeamFolder() {
-				return this.$isThisRoute(this.$route, ['Files', 'MySharedItems'])
-			},
-			canUploadInView() {
-				return ! this.$isThisRoute(this.$route, ['Files', 'Public'])
+				return !this.$isThisRoute(this.$route, routes)
+					|| this.clipboard.length === 0
 			},
 			canMoveInView() {
 				let routes = [
@@ -189,8 +165,10 @@
 					'MySharedItems',
 					'Public',
 					'Files',
+					'TeamFolders',
 				]
-				return ! this.$isThisRoute(this.$route, routes) || this.clipboard.length === 0
+				return ! this.$isThisRoute(this.$route, routes)
+					|| this.clipboard.length === 0
 			},
 			canShareInView() {
 				let routes = [
@@ -200,31 +178,27 @@
 					'Public',
 					'Files',
 				]
-				return ! this.$isThisRoute(this.$route, routes) || this.clipboard.length > 1 || this.clipboard.length === 0
+				return ! this.$isThisRoute(this.$route, routes)
+					|| this.clipboard.length > 1
+					|| this.clipboard.length === 0
 			},
 			canCreateTeamFolderInView() {
 				let routes = [
 					'MySharedItems',
 					'Files',
 				]
-				return this.$isThisRoute(this.$route, routes) && this.clipboard.length === 1 && this.clipboard[0].data.type === 'folder'
-			}
-		},
-		data() {
-			return {
-				members: [
-					'/temp/avatar-01.png',
-					'/temp/avatar-02.png',
-					'/temp/avatar-03.png',
-				],
+
+				return this.$isThisRoute(this.$route, routes)
+					&& this.clipboard.length === 1
+					&& this.clipboard[0].data.type === 'folder'
 			}
 		},
 		methods: {
 			goBack() {
-				if (this.isLoadedFolder) this.$router.back()
+				if (this.isNotHomepage) this.$router.back()
 			},
 			showTeamFolderMenu() {
-				if (this.currentTeamFolder || this.clipboard[0])
+				if (this.teamFolder)
 					events.$emit('popover:open', 'team-folder')
 			},
 			showCreateMenu() {

resources/js/components/FilesView/MobileToolbar.vue

@@ -7,7 +7,7 @@
 
 			<!--Folder Title-->
 			<div class="directory-name">
-				{{ directoryName }}
+				{{ $getCurrentLocationName() }}
 			</div>
         </div>
 
@@ -41,19 +41,6 @@
                 'FilePreviewType',
                 'currentFolder',
             ]),
-			directoryName() {
-				if (this.currentFolder) {
-					return this.currentFolder.data.attributes.name
-				} else {
-					return {
-						'RecentUploads': this.$t('Recent'),
-						'MySharedItems': this.$t('Shared'),
-						'Trash': this.$t('Trash'),
-						'Public': this.$t('Files'),
-						'Files': this.$t('Files'),
-					}[this.$route.name]
-				}
-			},
 			isLoadedFolder() {
 				return this.$route.params.id
 			},

resources/js/components/Teams/Components/TeamFolderPreview.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="team-folder-preview">
 		<div class="info">
-			<b class="title">The Team Project</b>
+			<b class="title">{{ teamFolder.data.attributes.name }}</b>
 			<span class="subtitle">Last update a week ago</span>
 			<TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
 		</div>

resources/js/helpers/functionHelpers.js

@@ -201,6 +201,21 @@ const FunctionHelpers = {
             anchor.click()
         }
 
+        Vue.prototype.$getCurrentLocationName = function () {
+            if (store.getters.currentFolder) {
+                return store.getters.currentFolder.data.attributes.name
+            } else {
+                return {
+                    'RecentUploads': this.$t('Recent'),
+                    'MySharedItems': this.$t('Shared'),
+                    'Trash': this.$t('Trash'),
+                    'Public': this.$t('Files'),
+                    'Files': this.$t('Files'),
+                    'TeamFolders': this.$t('Team Folders'),
+                }[this.$route.name]
+            }
+        }
+
         Vue.prototype.$goToFileView = function (id) {
 
             let locations = {

resources/js/store/modules/fileBrowser.js

@@ -170,7 +170,7 @@ const mutations = {
     },
     INCREASE_FOLDER_ITEM(state, id) {
         state.entries.map(el => {
-            if (el.data.id && el.data.id === id) el.items++
+            if (el.data.id && el.data.id === id) el.data.attributes.items++
         })
     },
     REMOVE_ITEM_FROM_CLIPBOARD(state, item) {

resources/js/store/modules/fileFunctions.js

@@ -73,7 +73,7 @@ const actions = {
             .then(() => {
                 itemsToMove.forEach(item => {
                     commit('REMOVE_ITEM', item.id)
-                    commit('INCREASE_FOLDER_ITEM', to_item.id)
+                    commit('INCREASE_FOLDER_ITEM', to_item.data.id)
 
                     if (item.type === 'folder')
                         dispatch('getAppData')

src/App/Console/Commands/SetupDevEnvironment.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace App\Console\Commands;
 
 use App\Users\Models\User;
@@ -37,7 +38,8 @@ class SetupDevEnvironment extends Command
         private SeedDefaultSettingsAction $seedDefaultSettings,
         private SeedDefaultLanguageAction $seedDefaultLanguage,
         private SeedDefaultPagesAction $seedDefaultPages,
-    ) {
+    )
+    {
         parent::__construct();
         $this->setUpFaker();
     }
@@ -729,6 +731,20 @@ class SetupDevEnvironment extends Command
                 'name'        => 'Company Project',
             ]);
 
+        Folder::factory()
+            ->create([
+                'user_id'   => $user->id,
+                'parent_id' => $companyProjectFolder->id,
+                'name'      => 'Presentation Materials',
+            ]);
+
+        Folder::factory()
+            ->create([
+                'user_id'   => $user->id,
+                'parent_id' => $companyProjectFolder->id,
+                'name'      => 'Team Gallery',
+            ]);
+
         $financeDocumentsFolder = Folder::factory()
             ->create([
                 'user_id'     => $user->id,
@@ -742,34 +758,34 @@ class SetupDevEnvironment extends Command
 
         collect([$members[0]->id, $members[1]->id])
             ->each(
-                fn ($id) => DB::table('team_folder_members')
-            ->insert([
-                'folder_id'  => $companyProjectFolder->id,
-                'user_id'    => $id,
-                'permission' => 'can-edit',
-            ])
+                fn($id) => DB::table('team_folder_members')
+                    ->insert([
+                        'folder_id'  => $companyProjectFolder->id,
+                        'user_id'    => $id,
+                        'permission' => 'can-edit',
+                    ])
             );
 
         collect([$members[2]->id, $members[3]->id])
             ->each(
-                fn ($id) => DB::table('team_folder_members')
-            ->insert([
-                'folder_id'  => $financeDocumentsFolder->id,
-                'user_id'    => $id,
-                'permission' => 'can-edit',
-            ])
+                fn($id) => DB::table('team_folder_members')
+                    ->insert([
+                        'folder_id'  => $financeDocumentsFolder->id,
+                        'user_id'    => $id,
+                        'permission' => 'can-edit',
+                    ])
             );
 
         // Create invitations
         collect([$members[4], $members[5]])
             ->each(
-                fn ($user) => TeamFolderInvitation::factory()
-            ->create([
-                'email'      => $user->email,
-                'folder_id'  => $companyProjectFolder->id,
-                'status'     => 'pending',
-                'permission' => 'can-edit',
-            ])
+                fn($user) => TeamFolderInvitation::factory()
+                    ->create([
+                        'email'      => $user->email,
+                        'folder_id'  => $companyProjectFolder->id,
+                        'status'     => 'pending',
+                        'permission' => 'can-edit',
+                    ])
             );
     }