Make condensed viewMode configurable in appBar && limit it to Generic…

…Space+Favorties view
owncloud · Dec 16, 2022 · a509251 · a509251
1 parent df75ba7
commit a509251
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 46 deletions.
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -28,7 +28,7 @@
         </oc-breadcrumb>
         <shares-navigation v-if="hasSharesNavigation" />
         <div v-if="hasViewOptions || hasSidebarToggle" class="oc-flex">
-          <view-options v-if="hasViewOptions" />
+          <view-options v-if="hasViewOptions" :view-modes="viewModes" />
           <sidebar-toggle v-if="hasSidebarToggle" :side-bar-open="sideBarOpen" />
         </div>
       </div>
@@ -52,21 +52,22 @@
 </template>
 
 <script lang="ts">
-import { mapGetters, mapState, mapMutations } from 'vuex'
 import last from 'lodash-es/last'
+import { defineComponent, PropType } from 'vue'
+import { mapGetters, mapState, mapMutations } from 'vuex'
+import { Resource } from 'web-client'
+import { SpaceResource } from 'web-client/src/helpers'
 
+import { ViewModeConstants } from '../../composables'
+import { BreadcrumbItem } from '../../helpers/breadcrumbs'
 import MixinFileActions from '../../mixins/fileActions'
+import { isLocationTrashActive } from '../../router'
 
 import BatchActions from './SelectedResources/BatchActions.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'
 import ViewOptions from './ViewOptions.vue'
-import { defineComponent, PropType } from 'vue'
-import { Resource } from 'web-client'
-import { BreadcrumbItem } from '../../helpers/breadcrumbs'
-import { SpaceResource } from 'web-client/src/helpers'
-import { isLocationTrashActive } from 'web-app-files/src/router'
 
 export default defineComponent({
   components: {
@@ -86,6 +87,10 @@ export default defineComponent({
       type: Array as PropType<Resource[]>,
       default: () => []
     },
+    displayViewModeSwitch: {
+      type: Boolean,
+      default: false
+    },
     hasBulkActions: { type: Boolean, default: false },
     hasSharesNavigation: { type: Boolean, default: false },
     hasSidebarToggle: { type: Boolean, default: true },
@@ -132,6 +137,12 @@ export default defineComponent({
         this.selectedFiles.length
       )
       return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
+    },
+    viewModes() {
+      if (!this.displayViewModeSwitch) {
+        return []
+      }
+      return [ViewModeConstants.condensedTable, ViewModeConstants.default]
     }
   },
   mounted() {

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -1,17 +1,19 @@
 <template>
   <div class="oc-flex oc-flex-middle">
-    <div data-testid="viewmode-switch-buttons" class="oc-button-group oc-visible@s oc-mr-s">
-      <oc-button
-        :appearance="viewModeCurrent === ViewModeConstants.condensedTable ? 'filled' : 'outline'"
-        @click="setViewMode(ViewModeConstants.condensedTable)"
-      >
-        <oc-icon name="menu-line-condensed" fill-type="none" size="small" />
-      </oc-button>
+    <div
+      v-if="viewModes.length"
+      data-testid="viewmode-switch-buttons"
+      class="oc-button-group oc-visible@s oc-mr-s"
+    >
       <oc-button
-        :appearance="viewModeCurrent === ViewModeConstants.default ? 'filled' : 'outline'"
-        @click="setViewMode(ViewModeConstants.default)"
+        v-for="viewMode in viewModes"
+        :key="viewMode.name"
+        v-oc-tooltip="viewMode.label"
+        :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
+        :label="viewMode.label"
+        @click="setViewMode(viewMode)"
       >
-        <oc-icon name="menu-line" fill-type="none" size="small" />
+        <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />
       </oc-button>
     </div>
     <oc-button
@@ -62,20 +64,28 @@
 </template>
 
 <script lang="ts">
+import { PropType } from 'vue'
 import { mapMutations, mapState } from 'vuex'
 import { useRouteQueryPersisted } from 'web-pkg/src/composables'
+import { ViewMode } from 'web-pkg/src/ui/types'
 import { PaginationConstants, ViewModeConstants } from '../../composables'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
+  props: {
+    viewModes: {
+      type: Array as PropType<ViewMode[]>,
+      default: () => []
+    }
+  },
   setup() {
     const perPageQuery = useRouteQueryPersisted({
       name: PaginationConstants.perPageQueryName,
       defaultValue: PaginationConstants.perPageDefault
     })
     const viewModeQuery = useRouteQueryPersisted({
       name: ViewModeConstants.queryName,
-      defaultValue: ViewModeConstants.default
+      defaultValue: ViewModeConstants.default.name
     })
 
     return {
@@ -113,7 +123,7 @@ export default defineComponent({
   methods: {
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
     setViewMode(mode) {
-      this.viewModeCurrent = mode
+      this.viewModeCurrent = mode.name
     }
   }
 })

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -2,7 +2,7 @@
   <oc-table
     :class="[
       hoverableQuickActions && 'hoverable-quick-actions',
-      { condensed: viewMode === ViewModeConstants.condensedTable }
+      { condensed: viewMode === ViewModeConstants.condensedTable.name }
     ]"
     :data="resources"
     :fields="fields"
@@ -326,7 +326,7 @@ export default defineComponent({
     },
     viewMode: {
       type: String,
-      default: ViewModeConstants.default
+      default: ViewModeConstants.default.name
     },
     /**
      * Enable hover effect

diff --git a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
@@ -68,7 +68,7 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
     fields
   })
 
-  const currentViewModeQuery = useRouteQuery('view-mode', ViewModeConstants.default)
+  const currentViewModeQuery = useRouteQuery('view-mode', ViewModeConstants.default.name)
   const currentViewMode = computed((): string => queryItemAsString(currentViewModeQuery.value))
   const viewMode = useViewMode(currentViewMode)
 

diff --git a/packages/web-app-files/src/composables/viewMode/constants.ts b/packages/web-app-files/src/composables/viewMode/constants.ts
@@ -1,5 +1,22 @@
+import { $gettext } from 'web-app-files/src/router/utils'
+import { ViewMode } from 'web-pkg/src/ui/types'
+
 export abstract class ViewModeConstants {
-  static readonly default: string = 'resource-table'
+  static readonly default: ViewMode = {
+    name: 'resource-table',
+    label: $gettext('Switch to default table view'),
+    icon: {
+      name: 'menu-line',
+      fillType: 'none'
+    }
+  }
+  static readonly condensedTable: ViewMode = {
+    name: 'resource-table-condensed',
+    label: $gettext('Switch to condensed table view'),
+    icon: {
+      name: 'menu-line-condensed',
+      fillType: 'none'
+    }
+  }
   static readonly queryName: string = 'view-mode'
-  static readonly condensedTable: string = 'resource-table-condensed'
 }
diff --git a/packages/web-app-files/src/composables/viewMode/useViewMode.ts b/packages/web-app-files/src/composables/viewMode/useViewMode.ts
@@ -9,7 +9,7 @@ export function useViewMode<T>(options: ComputedRef<string>): ComputedRef<string
 
   const viewModeQuery = useRouteQueryPersisted({
     name: ViewModeConstants.queryName,
-    defaultValue: ViewModeConstants.default
+    defaultValue: ViewModeConstants.default.name
   })
   return computed(() => queryItemAsString(unref(viewModeQuery)))
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <files-view-wrapper>
-      <app-bar :side-bar-open="sideBarOpen" />
+      <app-bar :display-view-mode-switch="true" :side-bar-open="sideBarOpen" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
         <no-content-message

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -3,9 +3,10 @@
     <keyboard-actions :paginated-resources="paginatedResources" :space="space" />
     <files-view-wrapper>
       <app-bar
-        :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
         :breadcrumbs-context-actions-items="[currentFolder]"
+        :display-view-mode-switch="true"
+        :has-bulk-actions="true"
         :show-actions-on-selection="true"
         :side-bar-open="sideBarOpen"
         :space="space"

diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
@@ -93,6 +93,14 @@ describe('AppBar component', () => {
         )
         expect(wrapper.html()).toMatchSnapshot()
       })
+      it('passes viewModes array to ViewOptions if displayViewModeSwitch props is enabled', () => {
+        const { wrapper } = getShallowWrapper(
+          [],
+          {},
+          { displayViewModeSwitch: true, hasViewOptions: true }
+        )
+        expect(wrapper).toMatchSnapshot()
+      })
     })
     it('if given, with content in the actions slot', () => {
       const { wrapper } = getShallowWrapper([], { actions: actionSlot })
@@ -110,6 +118,7 @@ function getShallowWrapper(
   slots = {},
   props: { [key: string]: any } = {
     breadcrumbs: [],
+    displayViewModeSwitch: false,
     hasBulkActions: false,
     hasSharesNavigation: false,
     hasSidebarToggle: true,

diff --git a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
@@ -8,6 +8,7 @@ import {
   defaultStoreMockOptions,
   defaultComponentMocks
 } from 'web-test-helpers'
+import { ViewModeConstants } from 'web-app-files/src/composables'
 
 jest.mock('web-pkg/src/composables/router')
 const selectors = {
@@ -33,9 +34,28 @@ describe('ViewOptions component', () => {
     wrapper.find(selectors.fileExtensionsSwitch).vm.$emit('change', false)
     expect(storeOptions.modules.Files.mutations.SET_FILE_EXTENSIONS_VISIBILITY).toHaveBeenCalled()
   })
+  it('initially does not show a viewmode switcher', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find('[data-testid="viewmode-switch-buttons"]').exists()).toBeFalsy()
+  })
+  it('shows a viewmode switcher if more than one viewModes are passed', () => {
+    const { wrapper } = getWrapper(
+      {},
+      {
+        viewModes: [ViewModeConstants.condensedTable, ViewModeConstants.default]
+      }
+    )
+    const viewModeSwitchButtons = wrapper.find('[data-testid="viewmode-switch-buttons"]')
+    expect(viewModeSwitchButtons).toMatchSnapshot()
+  })
 })
 
-function getWrapper({ perPage = '100' } = {}) {
+function getWrapper(
+  { perPage = '100' } = {},
+  props: { [key: string]: any } = {
+    viewModes: []
+  }
+) {
   jest.mocked(useRouteQueryPersisted).mockImplementation(() => ref(perPage))
 
   const storeOptions = { ...defaultStoreMockOptions }
@@ -45,6 +65,7 @@ function getWrapper({ perPage = '100' } = {}) {
     storeOptions,
     mocks,
     wrapper: shallowMount(ViewOptions, {
+      props: { ...props },
       global: {
         mocks,
         plugins: [...defaultPlugins(), store]

diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`AppBar component renders breadcrumbs if given, by default without bread
       <oc-breadcrumb-stub items="[object Object],[object Object]" variation="default" contextmenupadding="small" id="files-breadcrumb" data-testid="files-breadcrumbs" class="oc-flex oc-flex-middle"></oc-breadcrumb-stub>
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -31,7 +31,7 @@ exports[`AppBar component renders breadcrumbs if given, with breadcrumbsContextA
       <oc-breadcrumb-stub items="[object Object],[object Object],[object Object]" variation="default" contextmenupadding="small" id="files-breadcrumb" data-testid="files-breadcrumbs" class="oc-flex oc-flex-middle"></oc-breadcrumb-stub>
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -53,7 +53,7 @@ exports[`AppBar component renders breadcrumbs if given, with content in the cont
       <oc-breadcrumb-stub items="[object Object],[object Object],[object Object]" variation="default" contextmenupadding="small" id="files-breadcrumb" data-testid="files-breadcrumbs" class="oc-flex oc-flex-middle"></oc-breadcrumb-stub>
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -75,7 +75,7 @@ exports[`AppBar component renders bulkActions if enabled 1`] = `
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -98,7 +98,7 @@ exports[`AppBar component renders bulkActions not if 1 file selected 1`] = `
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -121,7 +121,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -143,7 +143,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -165,7 +165,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -188,7 +188,7 @@ exports[`AppBar component renders sharesNavigation if enabled 1`] = `
       <!---->
       <shares-navigation-stub></shares-navigation-stub>
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>
@@ -251,7 +251,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle only viewoptions
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub></view-options-stub>
+        <view-options-stub viewmodes=""></view-options-stub>
         <!---->
       </div>
     </div>
@@ -263,3 +263,25 @@ exports[`AppBar component renders viewoptions and sidebartoggle only viewoptions
   </div>
 </div>
 `;
+
+exports[`AppBar component renders viewoptions and sidebartoggle passes viewModes array to ViewOptions if displayViewModeSwitch props is enabled 1`] = `
+<div id="files-app-bar" class="">
+  <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
+  <div class="files-topbar oc-py-s">
+    <h1 class="oc-invisible-sr">ExampleTitle</h1>
+    <div class="oc-flex oc-flex-right">
+      <!---->
+      <!---->
+      <div class="oc-flex">
+        <view-options-stub viewmodes="[object Object],[object Object]"></view-options-stub>
+        <sidebar-toggle-stub></sidebar-toggle-stub>
+      </div>
+    </div>
+    <div class="files-app-bar-actions oc-mt-xs">
+      <div class="oc-flex-1 oc-flex oc-flex-start">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;