Merge pull request #12785 from owncloud/chore/OCISDEV-104/refctor-web-admin-views-groups-to-use-script-setup

mzner · web-flow · commit a7409b9ccf85 · 2025-07-03T09:38:22.000+02:00
chore(web-app-admin-settings): [OCISDEV-104] refactor admin-web-views-groups to use script setup
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -54,7 +54,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import AppTemplate from '../components/AppTemplate.vue'
 import ContextActions from '../components/Groups/ContextActions.vue'
 import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
@@ -72,135 +72,106 @@ import {
   useSideBar
 } from '@ownclouders/web-pkg'
 import { Group } from '@ownclouders/web-client/graph/generated'
-import { computed, defineComponent, ref, unref, onBeforeUnmount, onMounted } from 'vue'
+import { computed, provide, ref, unref, onBeforeUnmount, onMounted } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import { call } from '@ownclouders/web-client'
 
-export default defineComponent({
-  components: {
-    AppLoadingSpinner,
-    AppTemplate,
-    GroupsList,
-    NoContentMessage,
-    ContextActions
-  },
-  provide() {
-    return {
-      group: computed(() => this.selectedGroups[0])
-    }
-  },
-  setup() {
-    const template = ref()
-    const groupSettingsStore = useGroupSettingsStore()
-    const { selectedGroups, groups } = storeToRefs(groupSettingsStore)
-    const clientService = useClientService()
-    const { $gettext } = useGettext()
-
-    const { actions: createGroupActions } = useGroupActionsCreateGroup()
-    const createGroupAction = computed(() => unref(createGroupActions)[0])
+const template = ref()
+const groupSettingsStore = useGroupSettingsStore()
+const { selectedGroups, groups } = storeToRefs(groupSettingsStore)
+const clientService = useClientService()
+const { $gettext } = useGettext()
+const { sideBarActivePanel, isSideBarOpen } = useSideBar()
 
-    const loadResourcesTask = useTask(function* (signal) {
-      const loadedGroups = yield* call(
-        clientService.graphAuthenticated.groups.listGroups(
-          {
-            orderBy: ['displayName'],
-            expand: ['members']
-          },
-          { signal }
-        )
-      )
-      groupSettingsStore.setGroups(loadedGroups || [])
-    }).restartable()
+provide('group', selectedGroups[0])
 
-    const { actions: deleteActions } = useGroupActionsDelete()
-    const batchActions = computed(() => {
-      return [...unref(deleteActions)].filter((item) =>
-        item.isVisible({ resources: unref(selectedGroups) })
-      )
-    })
-
-    const isLoading = computed(() => {
-      return loadResourcesTask.isRunning || !loadResourcesTask.last
-    })
-
-    const sideBarPanelContext = computed<SideBarPanelContext<unknown, unknown, Group>>(() => {
-      return {
-        parent: null,
-        items: unref(selectedGroups)
-      }
-    })
+const { actions: createGroupActions } = useGroupActionsCreateGroup()
+const createGroupAction = computed(() => unref(createGroupActions)[0])
 
-    const sideBarAvailablePanels = [
-      {
-        name: 'DetailsPanel',
-        icon: 'group-2',
-        title: () => $gettext('Details'),
-        component: DetailsPanel,
-        componentAttrs: () => ({ groups: unref(selectedGroups) }),
-        isRoot: () => true,
-        isVisible: () => true
-      },
+const loadResourcesTask = useTask(function* (signal) {
+  const loadedGroups = yield* call(
+    clientService.graphAuthenticated.groups.listGroups(
       {
-        name: 'EditPanel',
-        icon: 'pencil',
-        title: () => $gettext('Edit group'),
-        component: EditPanel,
-        componentAttrs: ({ items }) => {
-          return {
-            group: items.length === 1 ? items[0] : null
-          }
-        },
-        isVisible: ({ items }) => {
-          return items.length === 1 && !items[0].groupTypes?.includes('ReadOnly')
-        }
+        orderBy: ['displayName'],
+        expand: ['members']
       },
-      {
-        name: 'GroupMembers',
-        icon: 'group',
-        title: () => $gettext('Members'),
-        component: MembersPanel,
-        isVisible: ({ items }) => items.length === 1
-      }
-    ] satisfies SideBarPanel<unknown, unknown, Group>[]
+      { signal }
+    )
+  )
+  groupSettingsStore.setGroups(loadedGroups || [])
+}).restartable()
+
+const { actions: deleteActions } = useGroupActionsDelete()
+const batchActions = computed(() => {
+  return [...unref(deleteActions)].filter((item) =>
+    item.isVisible({ resources: unref(selectedGroups) })
+  )
+})
 
-    onMounted(async () => {
-      await loadResourcesTask.perform()
-    })
+const isLoading = computed(() => {
+  return loadResourcesTask.isRunning || !loadResourcesTask.last
+})
 
-    onBeforeUnmount(() => {
-      groupSettingsStore.reset()
-    })
+const sideBarPanelContext = computed<SideBarPanelContext<unknown, unknown, Group>>(() => {
+  return {
+    parent: null,
+    items: unref(selectedGroups)
+  }
+})
 
-    return {
-      ...useSideBar(),
-      groups,
-      selectedGroups,
-      template,
-      loadResourcesTask,
-      clientService,
-      batchActions,
-      sideBarAvailablePanels,
-      sideBarPanelContext,
-      createGroupAction,
-      groupSettingsStore,
-      isLoading
-    }
+const sideBarAvailablePanels = [
+  {
+    name: 'DetailsPanel',
+    icon: 'group-2',
+    title: () => $gettext('Details'),
+    component: DetailsPanel,
+    componentAttrs: () => ({ groups: unref(selectedGroups) }),
+    isRoot: () => true,
+    isVisible: () => true
   },
-  computed: {
-    breadcrumbs() {
-      return [
-        { text: this.$gettext('Administration Settings'), to: { path: '/admin-settings' } },
-        {
-          text: this.$gettext('Groups'),
-          onClick: () => {
-            this.groupSettingsStore.setSelectedGroups([])
-            this.loadResourcesTask.perform()
-          }
-        }
-      ]
+  {
+    name: 'EditPanel',
+    icon: 'pencil',
+    title: () => $gettext('Edit group'),
+    component: EditPanel,
+    componentAttrs: ({ items }) => {
+      return {
+        group: items.length === 1 ? items[0] : null
+      }
+    },
+    isVisible: ({ items }) => {
+      return items.length === 1 && !items[0].groupTypes?.includes('ReadOnly')
     }
+  },
+  {
+    name: 'GroupMembers',
+    icon: 'group',
+    title: () => $gettext('Members'),
+    component: MembersPanel,
+    isVisible: ({ items }) => items.length === 1
   }
+] satisfies SideBarPanel<unknown, unknown, Group>[]
+
+onMounted(async () => {
+  await loadResourcesTask.perform()
+})
+
+onBeforeUnmount(() => {
+  groupSettingsStore.reset()
+})
+
+const breadcrumbs = computed(() => {
+  return [
+    { text: $gettext('Administration Settings'), to: { path: '/admin-settings' } },
+    {
+      text: $gettext('Groups'),
+      onClick: () => {
+        groupSettingsStore.setSelectedGroups([])
+        loadResourcesTask.perform()
+      }
+    }
+  ]
 })
 </script>
diff --git a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
@@ -23,23 +23,23 @@ describe('Groups view', () => {
       it('should be available when one group is selected', () => {
         const { wrapper } = getWrapper()
         expect(
-          wrapper.vm.sideBarAvailablePanels
+          (wrapper.vm as any).sideBarAvailablePanels
             .find(({ name }) => name === 'EditPanel')
             .isVisible({ items: [{ id: '1' }] })
         ).toBeTruthy()
       })
       it('should not be available when multiple groups are selected', () => {
         const { wrapper } = getWrapper()
         expect(
-          wrapper.vm.sideBarAvailablePanels
+          (wrapper.vm as any).sideBarAvailablePanels
             .find(({ name }) => name === 'EditPanel')
             .isVisible({ items: [{ id: '1' }, { id: '2' }] })
         ).toBeFalsy()
       })
       it('should not be available when one read-only group is selected', () => {
         const { wrapper } = getWrapper()
         expect(
-          wrapper.vm.sideBarAvailablePanels
+          (wrapper.vm as any).sideBarAvailablePanels
             .find(({ name }) => name === 'EditPanel')
             .isVisible({ items: [{ id: '1', groupTypes: ['ReadOnly'] }] })
         ).toBeFalsy()
@@ -49,7 +49,7 @@ describe('Groups view', () => {
       it('should contain DetailsPanel when no group is selected', () => {
         const { wrapper } = getWrapper()
         expect(
-          wrapper.vm.sideBarAvailablePanels
+          (wrapper.vm as any).sideBarAvailablePanels
             .find(({ name }) => name === 'DetailsPanel')
             .isVisible({ items: [] })
         ).toBeTruthy()
@@ -60,18 +60,18 @@ describe('Groups view', () => {
   describe('batch actions', () => {
     it('do not display when no group selected', async () => {
       const { wrapper } = getWrapper()
-      await wrapper.vm.loadResourcesTask.last
+      await (wrapper.vm as any).loadResourcesTask.last
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeFalsy()
     })
     it('display when one group selected', async () => {
       const { wrapper } = getWrapper({ selectedGroups: [{ id: '1' }] })
-      await wrapper.vm.loadResourcesTask.last
+      await (wrapper.vm as any).loadResourcesTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
     })
     it('display when more than one groups selected', async () => {
       const { wrapper } = getWrapper({ selectedGroups: [{ id: '1' }, { id: '2' }] })
-      await wrapper.vm.loadResourcesTask.last
+      await (wrapper.vm as any).loadResourcesTask.last
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
     })
