Merge pull request #6663 from owncloud/sidebar_refactor

[full-ci] Fix #6658: split SideBar into separate view and business logic components
owncloud · Mar 30, 2022 · 5ae9e3f · 5ae9e3f
2 parents 62a4ef8 + 47d0594
commit 5ae9e3f
Show file tree

Hide file tree

Showing 24 changed files with 631 additions and 410 deletions.
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -9,30 +9,37 @@
       <router-view id="files-view" />
     </div>
     <side-bar
-      v-if="!sidebarClosed"
+      v-if="showSidebar"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
       class="oc-width-1-1 oc-width-1-3@m oc-width-1-4@xl"
+      :sidebar-active-panel="sidebarActivePanel"
       @beforeDestroy="focusSideBar"
       @mounted="focusSideBar"
       @fileChanged="focusSideBar"
+      @selectPanel="setActiveSidebarPanel"
+      @close="closeSidebar"
     />
   </main>
 </template>
-<script>
+<script lang="ts">
 import Mixins from './mixins'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   components: {
     SideBar
   },
   mixins: [Mixins],
   computed: {
-    ...mapGetters('Files', ['dropzone']),
-    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
+    ...mapGetters('Files', ['dropzone', 'inProgress']),
+    ...mapState('Files/sidebar', {
+      sidebarClosed: 'closed',
+      sidebarActivePanel: 'activePanel'
+    }),
 
     showSidebar() {
       return !this.sidebarClosed
@@ -56,7 +63,10 @@ export default {
 
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
-    ...mapActions('Files/sidebar', { closeSidebar: 'close' }),
+    ...mapActions('Files/sidebar', {
+      closeSidebar: 'close',
+      setActiveSidebarPanel: 'setActivePanel'
+    }),
     ...mapActions(['showMessage']),
 
     focusSideBar(component, event) {
@@ -71,7 +81,7 @@ export default {
       this.dragOver(hasfileInEvent)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue b/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
@@ -10,17 +10,15 @@
   </oc-list>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 import ActionMenuItem from '../../ActionMenuItem.vue'
 
 import FileActions from '../../../mixins/fileActions'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   name: 'FileActions',
-  title: ($gettext) => {
-    return $gettext('Actions')
-  },
   components: { ActionMenuItem },
   mixins: [FileActions],
   computed: {
@@ -34,7 +32,7 @@ export default {
       return this.$_fileActions_getAllAvailableActions(this.resources)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 import ActionMenuItem from '../../ActionMenuItem.vue'
 import Rename from '../../../mixins/spaces/actions/rename'
@@ -42,12 +42,10 @@ import EditQuota from '../../../mixins/spaces/actions/editQuota'
 import QuotaModal from '../../Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue'
 import { thumbnailService } from '../../../services'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   name: 'SpaceActions',
-  title: ($gettext) => {
-    return $gettext('Actions')
-  },
   components: { ActionMenuItem, QuotaModal, ReadmeContentModal },
   mixins: [
     Rename,
@@ -96,7 +94,7 @@ export default {
       this.$_editQuota_closeModal()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -83,8 +83,8 @@
     <p v-else data-testid="noContentText" v-text="noContentText" />
   </div>
 </template>
-<script>
-import { computed, ref } from '@vue/composition-api'
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api'
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
@@ -97,7 +97,7 @@ import { ShareTypes } from '../../../helpers/share'
 import { useRoute, useRouter } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
 
-export default {
+export default defineComponent({
   name: 'FileDetails',
   mixins: [Mixins, MixinResources],
 
@@ -125,10 +125,6 @@ export default {
     }
   },
 
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
-
   data: () => ({
     loading: false,
     sharedByName: '',
@@ -355,7 +351,7 @@ export default {
       this.loading = false
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 .details-table {

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -24,17 +24,15 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapGetters } from 'vuex'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   name: 'FileDetailsMultiple',
   mixins: [Mixins, MixinResources],
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
   computed: {
     ...mapGetters('Files', ['selectedFiles']),
     selectedFilesCount() {
@@ -79,7 +77,7 @@ export default {
       return this.$gettext('Overview of the information about the selected files')
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 .files-preview {

diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -86,8 +86,8 @@
     </div>
   </div>
 </template>
-<script>
-import { ref } from '@vue/composition-api'
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api'
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
@@ -98,14 +98,11 @@ import SpaceQuota from '../../SpaceQuota.vue'
 import { loadPreview } from '../../../helpers/resource'
 import { ImageDimension } from '../../../constants'
 
-export default {
+export default defineComponent({
   name: 'SpaceDetails',
   components: { SpaceQuota },
   mixins: [Mixins, MixinResources],
   inject: ['displayedItem'],
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
   setup() {
     const spaceImage = ref('')
 
@@ -230,7 +227,7 @@ export default {
       this.setSidebarPanel('links-item')
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 .oc-space-details-sidebar {

diff --git a/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue
@@ -53,7 +53,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { DateTime } from 'luxon'
 import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
 import mixins from '../../../mixins'
@@ -67,21 +67,19 @@ import { ShareTypes } from '../../../helpers/share'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import { dirname } from 'path'
+import { defineComponent } from '@vue/composition-api'
 
 const VIEW_SHOW = 'showLinks'
 const VIEW_EDIT = 'editPublicLink'
 
-export default {
+export default defineComponent({
   name: 'FileLinks',
   components: {
     LinkEdit,
     ListItem,
     PrivateLinkItem
   },
   mixins: [mixins],
-  title: ($gettext) => {
-    return $gettext('Links')
-  },
   provide() {
     return {
       changeView: (view) => (this.$data.currentView = view)
@@ -260,5 +258,5 @@ export default {
       this.currentView = VIEW_EDIT
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/SideBar/NoSelection.vue b/packages/web-app-files/src/components/SideBar/NoSelection.vue
@@ -4,20 +4,18 @@
     <p data-testid="selectedFilesText" v-text="selectedFilesString" />
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
 import Mixins from '../../mixins'
 import MixinResources from '../../mixins/resources'
 
-export default {
+export default defineComponent({
   name: 'NoSelection',
   mixins: [Mixins, MixinResources],
-  title: ($gettext) => {
-    return $gettext('Details')
-  },
   computed: {
     selectedFilesString() {
       return this.$gettext('Select a file or folder to view details.')
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -61,7 +61,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { watch, computed } from '@vue/composition-api'
 import { useStore, useDebouncedRef } from 'web-pkg/src/composables'
@@ -134,9 +134,6 @@ export default {
 
     return { sharesLoading, loadSpaceTask, loadSpaceMembersTask }
   },
-  title: ($gettext) => {
-    return $gettext('People')
-  },
   data() {
     return {
       currentShare: null,

diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
@@ -31,11 +31,9 @@ import InviteCollaboratorForm from './InviteCollaborator/InviteCollaboratorForm.
 import { ShareTypes, spaceRoleManager } from '../../../helpers/share'
 import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
 import { useTask } from 'vue-concurrency'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
-  title: ($gettext) => {
-    return $gettext('Members')
-  },
+export default defineComponent({
   name: 'SpaceShares',
   components: {
     CollaboratorListItem,
@@ -139,7 +137,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 
 <style>