Merge pull request #8231 from owncloud/spaces-management-details-action

Spaces management details action

changelog/unreleased/enhancement-spaces-list-in-admin-settings

@@ -10,4 +10,5 @@ https://github.com/owncloud/web/pull/8199
 https://github.com/owncloud/web/pull/8224
 https://github.com/owncloud/web/pull/8228
 https://github.com/owncloud/web/pull/8229
+https://github.com/owncloud/web/pull/8231
 https://github.com/owncloud/web/issues/8219

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -13,7 +13,7 @@
                 :aria-label="toggleSidebarButtonLabel"
                 appearance="raw"
                 class="oc-my-s oc-p-xs"
-                @click.stop="$emit('toggleSideBar')"
+                @click.stop="toggleSideBar"
               >
                 <oc-icon name="side-bar-right" :fill-type="toggleSidebarButtonIconFillType" />
               </oc-button>
@@ -30,7 +30,7 @@
         :loading="false"
         :open="sideBarOpen"
         @selectPanel="selectPanel"
-        @close="$emit('closeSideBar')"
+        @close="closeSideBar"
       >
       </side-bar>
     </template>
@@ -41,7 +41,8 @@
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import SideBar from 'web-pkg/src/components/sideBar/SideBar.vue'
 import { defineComponent } from 'vue'
-import { useAppDefaults } from 'web-pkg'
+import { eventBus, useAppDefaults } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   components: {
@@ -70,11 +71,19 @@ export default defineComponent({
       type: String
     }
   },
-  setup(props, { emit }) {
+  setup() {
+    const closeSideBar = () => {
+      eventBus.publish(SideBarEventTopics.close)
+    }
+    const toggleSideBar = () => {
+      eventBus.publish(SideBarEventTopics.toggle)
+    }
     const selectPanel = (panel) => {
-      emit('selectPanel', panel)
+      eventBus.publish(SideBarEventTopics.setActivePanel, panel)
     }
     return {
+      closeSideBar,
+      toggleSideBar,
       selectPanel,
       ...useAppDefaults({
         applicationId: 'admin-settings'

packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue

@@ -17,6 +17,7 @@ import EditDescription from 'web-pkg/src/mixins/spaces/editDescription'
 import EditQuota from 'web-pkg/src/mixins/spaces/editQuota'
 import Rename from 'web-pkg/src/mixins/spaces/rename'
 import Restore from 'web-pkg/src/mixins/spaces/restore'
+import ShowDetails from '../../mixins/showDetails'
 import { computed, defineComponent, getCurrentInstance, PropType, unref } from 'vue'
 import { Resource } from 'web-client'
 import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
@@ -25,15 +26,13 @@ import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
 export default defineComponent({
   name: 'ContextActions',
   components: { ContextActionMenu, QuotaModal },
-  mixins: [Delete, Disable, EditDescription, EditQuota, Rename, Restore],
-
+  mixins: [Delete, Disable, EditDescription, EditQuota, Rename, Restore, ShowDetails],
   props: {
     items: {
       type: Array as PropType<Resource[]>,
       required: true
     }
   },
-
   setup(props) {
     const instance = getCurrentInstance().proxy
 
@@ -51,6 +50,10 @@ export default defineComponent({
         ...instance.$_delete_items
       ].filter((item) => item.isEnabled(unref(filterParams)))
     )
+    const menuItemsSidebar = computed(() =>
+      [...instance.$_showDetails_items].filter((item) => item.isEnabled(unref(filterParams)))
+    )
+
     const menuSections = computed(() => {
       const sections = []
 
@@ -66,7 +69,12 @@ export default defineComponent({
           items: unref(menuItemsSecondaryActions)
         })
       }
-
+      if (unref(menuItemsSidebar).length) {
+        sections.push({
+          name: 'sidebar',
+          items: unref(menuItemsSidebar)
+        })
+      }
       return sections
     })
 
@@ -78,7 +86,6 @@ export default defineComponent({
     const spaceQuotaUpdated = (quota) => {
       instance.$data.$_editQuota_selectedSpace.spaceQuota = quota
     }
-
     return {
       menuSections,
       quotaModalSelectedSpace,

packages/web-app-admin-settings/src/mixins/showDetails.ts

@@ -0,0 +1,27 @@
+import { eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+
+export default {
+  computed: {
+    $_showDetails_items() {
+      return [
+        {
+          name: 'show-details',
+          icon: 'information',
+          label: () => this.$gettext('Details'),
+          handler: this.$_showDetails_trigger,
+          isEnabled: ({ resources }) => {
+            return resources.length > 0
+          },
+          componentType: 'button',
+          class: 'oc-admin-settings-show-details-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    $_showDetails_trigger() {
+      eventBus.publish(SideBarEventTopics.open)
+    }
+  }
+}

packages/web-app-admin-settings/src/views/Groups.vue

@@ -7,9 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @selectPanel="selectPanel"
-      @closeSideBar="closeSideBar"
-      @toggleSideBar="toggleSideBar"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -89,6 +86,7 @@ import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   components: {
@@ -111,6 +109,7 @@ export default defineComponent({
     })
 
     return {
+      ...useSideBar(),
       groups,
       loadResourcesTask,
       graphClient
@@ -121,9 +120,7 @@ export default defineComponent({
       listHeaderPosition: 0,
       selectedGroups: [],
       createGroupModalOpen: false,
-      deleteGroupModalOpen: false,
-      sideBarOpen: false,
-      sideBarActivePanel: 'DetailsPanel'
+      deleteGroupModalOpen: false
     }
   },
   computed: {
@@ -168,15 +165,7 @@ export default defineComponent({
            * Editing groups is currently not supported by backend
            */
         }
-      ]
-    }
-  },
-
-  watch: {
-    selectedGroups() {
-      if (!this.selectedGroups.length || this.selectedGroups.length > 1) {
-        this.sideBarActivePanel = 'DetailsPanel'
-      }
+      ].filter((p) => p.enabled)
     }
   },
 
@@ -224,15 +213,6 @@ export default defineComponent({
     toggleDeleteGroupModal() {
       this.deleteGroupModalOpen = !this.deleteGroupModalOpen
     },
-    selectPanel(panel) {
-      this.sideBarActivePanel = panel || 'DetailsPanel'
-    },
-    toggleSideBar() {
-      this.sideBarOpen = !this.sideBarOpen
-    },
-    closeSideBar() {
-      this.sideBarOpen = false
-    },
     showPanel({ group, panel }) {
       this.selectedGroups = [group]
       this.sideBarActivePanel = panel

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -7,9 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @closeSideBar="closeSideBar"
-      @toggleSideBar="toggleSideBar"
-      @selectPanel="selectPanel"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -71,6 +68,7 @@ import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Spaces/Details/
 import SpaceNoSelection from 'web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue'
 import ContextActions from '../components/Spaces/ContextActions.vue'
 import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -91,8 +89,6 @@ export default defineComponent({
     const template = ref(null)
     const listHeaderPosition = ref(0)
     const selectedSpaces = ref([])
-    const sideBarOpen = ref(false)
-    const selectedPanel = ref(undefined)
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -178,27 +174,9 @@ export default defineComponent({
             spaceResource: unref(selectedSpaces)[0]
           }
         }
-      ]
+      ].filter((p) => p.enabled)
     })
 
-    const sideBarActivePanel = computed(() => {
-      if (unref(selectedPanel)) {
-        return unref(selectedPanel)
-      }
-      return unref(sideBarAvailablePanels).find((e) => e.enabled).app
-    })
-
-    const closeSideBar = () => {
-      sideBarOpen.value = false
-      selectedPanel.value = false
-    }
-    const toggleSideBar = () => {
-      sideBarOpen.value = !unref(sideBarOpen)
-    }
-    const selectPanel = (panel) => {
-      selectedPanel.value = panel
-    }
-
     onMounted(async () => {
       await loadResourcesTask.perform()
       loadResourcesEventToken.value = eventBus.subscribe('app.admin-settings.list.load', () => {
@@ -214,20 +192,16 @@ export default defineComponent({
     })
 
     return {
+      ...useSideBar(),
       spaces,
       loadResourcesTask,
       graphClient,
       accessToken,
       breadcrumbs,
       listHeaderPosition,
       selectedSpaces,
-      sideBarOpen,
       sideBarAvailablePanels,
-      sideBarActivePanel,
-      closeSideBar,
-      toggleSideBar,
       template,
-      selectPanel,
       toggleSelectAllSpaces,
       toggleSelectSpace,
       unselectAllSpaces

packages/web-app-admin-settings/src/views/Users.vue

@@ -7,9 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @selectPanel="selectPanel"
-      @closeSideBar="closeSideBar"
-      @toggleSideBar="toggleSideBar"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -95,6 +92,7 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useLoadTasks } from '../composables/loadTasks/useLoadTasks'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   name: 'UsersView',
@@ -159,6 +157,7 @@ export default defineComponent({
     })
 
     return {
+      ...useSideBar(),
       addRoleAssignment,
       users,
       roles,
@@ -174,9 +173,7 @@ export default defineComponent({
       listHeaderPosition: 0,
       selectedUsers: [],
       createUserModalOpen: false,
-      deleteUserModalOpen: false,
-      sideBarOpen: false,
-      sideBarActivePanel: 'DetailsPanel'
+      deleteUserModalOpen: false
     }
   },
   computed: {
@@ -233,15 +230,7 @@ export default defineComponent({
           componentAttrs: { user: this.selectedUsers[0], groups: this.groups },
           componentListeners: { confirm: this.editUserGroupAssignments }
         }
-      ]
-    }
-  },
-
-  watch: {
-    selectedUsers() {
-      if (!this.selectedUsers.length || this.selectedUsers.length > 1) {
-        this.sideBarActivePanel = 'DetailsPanel'
-      }
+      ].filter((p) => p.enabled)
     }
   },
 
@@ -292,15 +281,6 @@ export default defineComponent({
     toggleDeleteUserModal() {
       this.deleteUserModalOpen = !this.deleteUserModalOpen
     },
-    selectPanel(panel) {
-      this.sideBarActivePanel = panel || 'DetailsPanel'
-    },
-    toggleSideBar() {
-      this.sideBarOpen = !this.sideBarOpen
-    },
-    closeSideBar() {
-      this.sideBarOpen = false
-    },
     async showPanel({ user, panel }) {
       await this.loadAdditionalUserDataTask.perform(this, user)
       this.selectedUsers = [user]