Admin panel members list (#8224)

* Implement basic Members list * Make Members in own panel * Fix sidebar panel select, run linter * Add PR link to changelog * Remove empty style Co-authored-by: Jannik Stehle <[email protected]>
owncloud · Jan 12, 2023 · 697a6fa · 697a6fa
1 parent 8bf41b9
commit 697a6fa
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 8 deletions.
diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -6,4 +6,5 @@ https://github.com/owncloud/web/pull/8178
 https://github.com/owncloud/web/pull/8195
 https://github.com/owncloud/web/pull/8192
 https://github.com/owncloud/web/pull/8199
+https://github.com/owncloud/web/pull/8224
 https://github.com/owncloud/web/issues/8219
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -29,7 +29,7 @@
         :available-panels="sideBarAvailablePanels"
         :loading="false"
         :open="sideBarOpen"
-        @selectPanel="(panel) => $emit('selectPanel', panel)"
+        @selectPanel="selectPanel"
         @close="$emit('closeSideBar')"
       >
       </side-bar>
@@ -70,6 +70,17 @@ export default defineComponent({
       type: String
     }
   },
+  setup(props, { emit }) {
+    const selectPanel = (panel) => {
+      emit('selectPanel', panel)
+    }
+    return {
+      selectPanel,
+      ...useAppDefaults({
+        applicationId: 'admin-settings'
+      })
+    }
+  },
   computed: {
     toggleSidebarButtonLabel() {
       return this.sideBarOpen
@@ -79,13 +90,6 @@ export default defineComponent({
     toggleSidebarButtonIconFillType() {
       return this.sideBarOpen ? 'fill' : 'line'
     }
-  },
-  setup() {
-    return {
-      ...useAppDefaults({
-        applicationId: 'admin-settings'
-      })
-    }
   }
 })
 </script>

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="oc-ml-s">
+    <div v-if="spaceResource.spaceRoles.manager.length" class="oc-mb-m">
+      <h4 v-translate>Managers</h4>
+      <div
+        v-for="(manager, index) in [...spaceResource.spaceRoles.manager].sort((a, b) =>
+          a.displayName.localeCompare(b.displayName)
+        )"
+        :key="index"
+        class="oc-flex oc-flex-middle oc-mb-s"
+      >
+        <oc-avatar
+          v-if="manager.kind === 'user'"
+          :user-name="manager.displayName"
+          :width="36"
+          class="oc-mr-s"
+        /><oc-avatar-item
+          v-else
+          :width="36"
+          icon-size="medium"
+          :icon="groupIcon"
+          name="group"
+          class="oc-mr-s"
+        />
+        {{ manager.displayName }}
+      </div>
+    </div>
+    <div v-if="spaceResource.spaceRoles.editor.length" class="oc-mb-m">
+      <h4 v-translate>Editors</h4>
+      <div
+        v-for="(editor, index) in [...spaceResource.spaceRoles.editor].sort((a, b) =>
+          a.displayName.localeCompare(b.displayName)
+        )"
+        :key="index"
+        class="oc-flex oc-flex-middle oc-mb-s"
+      >
+        <oc-avatar
+          v-if="editor.kind === 'user'"
+          :user-name="editor.displayName"
+          :width="36"
+          class="oc-mr-s"
+        />
+        <oc-avatar-item
+          v-else
+          :width="36"
+          icon-size="medium"
+          :icon="groupIcon"
+          name="group"
+          class="oc-mr-s"
+        />
+        {{ editor.displayName }}
+      </div>
+    </div>
+    <div v-if="spaceResource.spaceRoles.viewer.length" class="oc-mb-m">
+      <h4 v-translate>Viewers</h4>
+      <div
+        v-for="(viewer, index) in [...spaceResource.spaceRoles.viewer].sort((a, b) =>
+          a.displayName.localeCompare(b.displayName)
+        )"
+        :key="index"
+        class="oc-flex oc-flex-middle oc-mb-s"
+      >
+        <oc-avatar
+          v-if="viewer.kind === 'user'"
+          :user-name="viewer.displayName"
+          :width="36"
+          class="oc-mr-s"
+        />
+        <oc-avatar-item
+          v-else
+          :width="36"
+          icon-size="medium"
+          :icon="groupIcon"
+          name="group"
+          class="oc-mr-s"
+        />
+        {{ viewer.displayName }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { SpaceResource } from 'web-client/src'
+import { ShareTypes } from 'web-client/src/helpers/share'
+
+export default defineComponent({
+  name: 'MembersPanel',
+  props: {
+    spaceResource: {
+      type: Object as PropType<SpaceResource>,
+      required: true
+    }
+  },
+  setup() {
+    const groupIcon = computed(() => {
+      return ShareTypes.group.icon
+    })
+    return {
+      groupIcon
+    }
+  }
+})
+</script>
+
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -9,6 +9,7 @@
       :side-bar-open="sideBarOpen"
       @closeSideBar="closeSideBar"
       @toggleSideBar="toggleSideBar"
+      @selectPanel="selectPanel"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -64,6 +65,7 @@ import SpacesList from '../components/Spaces/SpacesList.vue'
 import SpaceDetails from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue'
 import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue'
 import SpaceNoSelection from 'web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue'
+import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -84,6 +86,7 @@ export default defineComponent({
     const listHeaderPosition = ref(0)
     const selectedSpaces = ref([])
     const sideBarOpen = ref(false)
+    const selectedPanel = ref(undefined)
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -157,11 +160,25 @@ export default defineComponent({
           component: SpaceDetailsMultiple,
           default: true,
           enabled: unref(selectedSpaces).length > 1
+        },
+        {
+          app: 'SpaceMembers',
+          icon: 'group',
+          title: $gettext('Space members'),
+          component: MembersPanel,
+          default: false,
+          enabled: unref(selectedSpaces).length === 1,
+          componentAttrs: {
+            spaceResource: unref(selectedSpaces)[0]
+          }
         }
       ]
     })
 
     const sideBarActivePanel = computed(() => {
+      if (unref(selectedPanel)) {
+        return unref(selectedPanel)
+      }
       return unref(sideBarAvailablePanels).find((e) => e.enabled).app
     })
 
@@ -171,6 +188,9 @@ export default defineComponent({
     const toggleSideBar = () => {
       sideBarOpen.value = !unref(sideBarOpen)
     }
+    const selectPanel = (panel) => {
+      selectedPanel.value = panel
+    }
 
     onMounted(async () => {
       await loadResourcesTask.perform()
@@ -199,6 +219,7 @@ export default defineComponent({
       closeSideBar,
       toggleSideBar,
       template,
+      selectPanel,
       toggleSelectAllSpaces,
       toggleSelectSpace,
       unselectAllSpaces