toggle favourites refactor

resources/js/components/Others/TreeMenu.vue

@@ -1,12 +1,11 @@
 <template>
     <div
         :class="{
-            'pointer-events-none opacity-50': (disabledById && disabledById.data.id === nodes.id) || !disableId,
+            'pointer-events-none opacity-50': (disabledById && disabledById.data.id === nodes.id) || !disableId || (isRootDepth && !nodes.folders.length),
             'mb-2.5': isRootDepth,
         }"
     >
         <div
-            :class="{ 'is-disabled-item': false }"
             :style="indent"
             class="relative relative flex cursor-pointer select-none items-center whitespace-nowrap py-2 px-1.5 transition-all duration-150"
         >
@@ -53,7 +52,7 @@
             <b
                 @click="getFolder"
                 class="ml-3 inline-block overflow-x-hidden text-ellipsis whitespace-nowrap text-xs font-bold transition-all duration-150"
-                :class="{ 'text-theme': isSelectedItem }"
+                :class="{'text-theme': isSelectedItem }"
             >
                 {{ nodes.name }}
             </b>

resources/js/helpers/itemHelpers.js

@@ -15,6 +15,25 @@ const itemHelpers = {
             store.dispatch('shareCancel')
         }
 
+        Vue.prototype.$toggleFavourites = function (entry) {
+            let favourites = store.getters.user.data.relationships.favourites.data
+
+            // Check if folder is in favourites and then add/remove from favourites
+            if (favourites && !favourites.find((el) => el.data.id === entry.data.id)) {
+                // Add to favourite folder that is not selected
+                if (!store.getters.clipboard.includes(entry)) {
+                    this.$store.dispatch('addToFavourites', entry)
+                }
+
+                // Add to favourites all selected folders
+                if (store.getters.clipboard.includes(entry)) {
+                    this.$store.dispatch('addToFavourites', null)
+                }
+            } else {
+                this.$store.dispatch('removeFromFavourites', entry)
+            }
+        }
+
         Vue.prototype.$renameFileOrFolder = function (entry) {
             events.$emit('popup:open', { name: 'rename-item', item: entry })
         }
@@ -23,6 +42,17 @@ const itemHelpers = {
             events.$emit('popup:open', { name: 'move', item: [entry] })
         }
 
+        Vue.prototype.$createFolderByPopup = function () {
+            // Show alert message when create folder is disabled
+            if (store.getters.user && !store.getters.user.data.meta.restrictions.canCreateFolder) {
+                Vue.prototype.$temporarilyDisabledFolderCreate()
+
+                return
+            }
+
+            events.$emit('popup:open', { name: 'create-folder' })
+        }
+
         Vue.prototype.$createFolder = function () {
             // Show alert message when create folder is disabled
             if (store.getters.user && !store.getters.user.data.meta.restrictions.canCreateFolder) {

resources/js/views/FileView/Files.vue

@@ -3,7 +3,7 @@
         <MobileContextMenu>
             <OptionGroup v-if="item && isFolder">
                 <Option
-                    @click.native="addToFavourites"
+                    @click.native="$toggleFavourites(item)"
                     :title="
                         isInFavourites
                             ? $t('context_menu.remove_from_favourites')
@@ -39,7 +39,6 @@
         <MobileCreateMenu>
             <OptionGroup :title="$t('Upload')">
                 <OptionUpload
-                    :class="{ 'is-inactive': !hasCapacity }"
                     :title="$t('actions.upload')"
                     type="file"
                     :is-hover-disabled="true"
@@ -54,7 +53,7 @@
                     :is-hover-disabled="true"
                 />
                 <Option
-                    @click.stop.native="createFolder"
+                    @click.stop.native="$createFolderByPopup"
                     :title="$t('actions.create_folder')"
                     icon="folder-plus"
                     :is-hover-disabled="true"
@@ -103,7 +102,7 @@
             <template v-slot:single-select v-if="item">
                 <OptionGroup v-if="isFolder">
                     <Option
-                        @click.native="addToFavourites"
+                        @click.native="$toggleFavourites(item)"
                         :title="
                             isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
@@ -155,7 +154,7 @@
             <template v-slot:multiple-select v-if="item">
                 <OptionGroup v-if="!hasFile">
                     <Option
-                        @click.native="addToFavourites"
+                        @click.native="$toggleFavourites(item)"
                         :title="
                             isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
@@ -250,52 +249,21 @@ export default {
     },
     computed: {
         ...mapGetters(['fastPreview', 'clipboard', 'config', 'user']),
-        hasCapacity() {
-            // Check if storage limitation is set
-            if (!this.config.storageLimit) return true
-
-            // Check if user has storage
-            return this.user && this.user.data.attributes.storage.used <= 100
-        },
         isFolder() {
             return this.item && this.item.data.type === 'folder'
         },
         isInFavourites() {
-            return this.favourites.find((el) => el.id === this.item.data.id)
+            return this.user.data.relationships.favourites.data.find((el) => el.data.id === this.item.data.id)
         },
         hasFile() {
             return this.clipboard.find((item) => item.data.type !== 'folder')
         },
-        favourites() {
-            return this.user.data.relationships.favourites.data
-        },
     },
     data() {
         return {
             item: undefined,
         }
     },
-    methods: {
-        addToFavourites() {
-            // Check if folder is in favourites and then add/remove from favourites
-            if (this.favourites && !this.favourites.find((el) => el.id === this.item.data.id)) {
-                // Add to favourite folder that is not selected
-                if (!this.clipboard.includes(this.item)) {
-                    this.$store.dispatch('addToFavourites', this.item)
-                }
-
-                // Add to favourites all selected folders
-                if (this.clipboard.includes(this.item)) {
-                    this.$store.dispatch('addToFavourites', null)
-                }
-            } else {
-                this.$store.dispatch('removeFromFavourites', this.item)
-            }
-        },
-        createFolder() {
-            events.$emit('popup:open', { name: 'create-folder' })
-        },
-    },
     created() {
         this.$store.dispatch('getFolder', this.$route.params.id)
 

resources/js/views/FileView/MySharedItems.vue

@@ -4,7 +4,7 @@
             <template v-slot:single-select v-if="item">
                 <OptionGroup v-if="isFolder">
                     <Option
-                        @click.native="addToFavourites"
+                        @click.native="$toggleFavourites(item)"
                         :title="
                             isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
@@ -43,7 +43,7 @@
             <template v-slot:multiple-select v-if="item">
                 <OptionGroup v-if="!hasFile">
                     <Option
-                        @click.native="addToFavourites"
+                        @click.native="$toggleFavourites(item)"
                         :title="
                             isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
@@ -65,7 +65,7 @@
         <MobileContextMenu>
             <OptionGroup v-if="isFolder">
                 <Option
-                    @click.native="addToFavourites"
+                    @click.native="$toggleFavourites(item)"
                     :title="
                         isInFavourites
                             ? $t('context_menu.remove_from_favourites')
@@ -163,38 +163,17 @@ export default {
             return this.item && this.item.type === 'folder'
         },
         isInFavourites() {
-            return this.favourites.find((el) => el.id === this.item.id)
+            return this.user.data.relationships.favourites.data.find((el) => el.id === this.item.id)
         },
         hasFile() {
             return this.clipboard.find((item) => item.type !== 'folder')
         },
-        favourites() {
-            return this.user.data.relationships.favourites.data.attributes.folders
-        },
     },
     data() {
         return {
             item: undefined,
         }
     },
-    methods: {
-        addToFavourites() {
-            // Check if folder is in favourites and then add/remove from favourites
-            if (this.favourites && !this.favourites.find((el) => el.id === this.item.data.id)) {
-                // Add to favourite folder that is not selected
-                if (!this.clipboard.includes(this.item)) {
-                    this.$store.dispatch('addToFavourites', this.item)
-                }
-
-                // Add to favourites all selected folders
-                if (this.clipboard.includes(this.item)) {
-                    this.$store.dispatch('addToFavourites', null)
-                }
-            } else {
-                this.$store.dispatch('removeFromFavourites', this.item)
-            }
-        },
-    },
     created() {
         this.$store.dispatch('getMySharedItems')
 

resources/js/views/FileView/TeamFolders.vue

@@ -3,7 +3,7 @@
         <MobileContextMenu>
             <OptionGroup v-if="item && isFolder">
                 <Option
-                    @click.native="addToFavourites"
+                    @click.native="$toggleFavourites(item)"
                     :title="
                         isInFavourites
                             ? $t('context_menu.remove_from_favourites')
@@ -50,7 +50,7 @@
                     :is-hover-disabled="true"
                 />
                 <Option
-                    @click.stop.native="createFolder"
+                    @click.stop.native="$createFolderByPopup"
                     :title="$t('actions.create_folder')"
                     icon="folder-plus"
                     :is-hover-disabled="true"
@@ -107,7 +107,7 @@
             <template v-slot:single-select v-if="item">
                 <OptionGroup v-if="isFolder">
                     <Option
-                        @click.native="addToFavourites"
+                        @click.native="$toggleFavourites(item)"
                         :title="
                             isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
@@ -153,7 +153,7 @@
             <template v-slot:multiple-select v-if="item">
                 <OptionGroup v-if="!hasFile">
                     <Option
-                        @click.native="addToFavourites"
+                        @click.native="$toggleFavourites(item)"
                         :title="
                             isInFavourites
                                 ? $t('context_menu.remove_from_favourites')
@@ -276,41 +276,17 @@ export default {
             return this.item && this.item.data.type === 'folder'
         },
         isInFavourites() {
-            return this.favourites.find((el) => el.id === this.item.id)
+            return this.user.data.relationships.favourites.data.find((el) => el.id === this.item.id)
         },
         hasFile() {
             return this.clipboard.find((item) => item.type !== 'folder')
         },
-        favourites() {
-            return this.user.data.relationships.favourites.data
-        },
     },
     data() {
         return {
             item: undefined,
         }
     },
-    methods: {
-        addToFavourites() {
-            // Check if folder is in favourites and then add/remove from favourites
-            if (this.favourites && !this.favourites.find((el) => el.id === this.item.data.id)) {
-                // Add to favourite folder that is not selected
-                if (!this.clipboard.includes(this.item)) {
-                    this.$store.dispatch('addToFavourites', this.item)
-                }
-
-                // Add to favourites all selected folders
-                if (this.clipboard.includes(this.item)) {
-                    this.$store.dispatch('addToFavourites', null)
-                }
-            } else {
-                this.$store.dispatch('removeFromFavourites', this.item)
-            }
-        },
-        createFolder() {
-            events.$emit('popup:open', { name: 'create-folder' })
-        },
-    },
     mounted() {
         this.$store.dispatch('getTeamFolder', this.$route.params.id)