feat(admin-settings): enable name sorting for extension overview

packages/web-app-admin-settings/src/components/Extensions/ExtensionsList.vue

@@ -14,11 +14,14 @@
   <oc-table
     v-else
     :data-testid="'extensions-table'"
+    :sort-by="sortBy"
+    :sort-dir="sortDir"
     :fields="fields"
-    :data="filteredExtensions"
+    :data="items"
     :hover="true"
     :sticky="true"
     class="extensions-table"
+    @sort="handleSort"
   >
     <template #name="{ item }">
       <div class="flex items-center gap-2">
@@ -52,7 +55,8 @@
 
 <script setup lang="ts">
 import { NoContentMessage } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { SortDir } from '@opencloud-eu/design-system/helpers'
+import { computed, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 interface ExtensionInfo {
@@ -68,6 +72,8 @@ const { extensions, filterTerm = '' } = defineProps<{
 }>()
 
 const { $gettext } = useGettext()
+const sortBy = ref<keyof ExtensionInfo>('name')
+const sortDir = ref<SortDir>(SortDir.Asc)
 
 const filteredExtensions = computed(() => {
   const term = unref(filterTerm).toLowerCase()
@@ -81,11 +87,25 @@ const filteredExtensions = computed(() => {
   })
 })
 
+const items = computed(() => {
+  return [...unref(filteredExtensions)].sort((a, b) => {
+    const c = (a[unref(sortBy)] || '').toString()
+    const d = (b[unref(sortBy)] || '').toString()
+    return unref(sortDir) === SortDir.Desc ? d.localeCompare(c) : c.localeCompare(d)
+  })
+})
+
+function handleSort(event: { sortBy: string; sortDir: SortDir }) {
+  sortBy.value = event.sortBy as keyof ExtensionInfo
+  sortDir.value = event.sortDir
+}
+
 const fields = computed(() => [
   {
     name: 'name',
     title: $gettext('Name'),
     type: 'slot',
+    sortable: true,
     thClass: 'pl-4',
     tdClass: 'pl-4',
     width: 'expand' as const

packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts

@@ -1,4 +1,5 @@
 import ExtensionsList from '../../../../src/components/Extensions/ExtensionsList.vue'
+import { SortDir } from '@opencloud-eu/design-system/helpers'
 import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
 
 const extensions = [
@@ -29,15 +30,35 @@ describe('ExtensionsList', () => {
     expect(wrapper.find('no-content-message-stub').exists()).toBeTruthy()
     expect(wrapper.find('oc-table-stub').exists()).toBeFalsy()
   })
+
+  it('sorts by name ascending and descending', () => {
+    const { wrapper } = getWrapper({
+      extensions: [
+        { name: 'Zulu', version: '1.0.0', loaded: true },
+        { name: 'Alpha', version: '2.0.0', loaded: true }
+      ]
+    })
+
+    ;(wrapper.vm as any).handleSort({ sortBy: 'name', sortDir: SortDir.Asc })
+    expect((wrapper.vm as any).items.map((item: { name: string }) => item.name)).toEqual([
+      'Alpha',
+      'Zulu'
+    ])
+    ;(wrapper.vm as any).handleSort({ sortBy: 'name', sortDir: SortDir.Desc })
+    expect((wrapper.vm as any).items.map((item: { name: string }) => item.name)).toEqual([
+      'Zulu',
+      'Alpha'
+    ])
+  })
 })
 
-function getWrapper({
+const getWrapper = ({
   extensions: extensionData = extensions,
   filterTerm = ''
 }: {
   extensions?: { name: string; version?: string; loaded: boolean }[]
   filterTerm?: string
-} = {}) {
+} = {}) => {
   return {
     wrapper: mount(ExtensionsList, {
       props: {