fix: make certificates table sortable

package.json

@@ -29,7 +29,7 @@
     "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/vue-components": "^1.5.1",
+    "@nethesis/vue-components": "^1.6.0",
     "@types/lodash-es": "^4.17.12",
     "@vuepic/vue-datepicker": "^7.2.2",
     "@vueuse/core": "^10.5.0",

public/i18n/en/translation.json

@@ -2296,5 +2296,12 @@
     "report_issue_step_1": "{copyTheCommand} that failed",
     "report_issue_step_2": "Paste the command on the {product} shell and execute it",
     "report_issue_step_3": "Report the issue, ensuring to provide both the command and its corresponding output"
+  },
+  "sort": {
+    "sort": "Sort",
+    "sort_by": "Sort by",
+    "direction": "Direction",
+    "ascending": "Ascending",
+    "descending": "Descending"
   }
 }

src/components/standalone/certificates/CertificatesTable.vue

@@ -17,7 +17,9 @@ import {
   NePaginator,
   useItemPagination,
   NeButton,
-  NeTooltip
+  NeTooltip,
+  useSort,
+  NeSortDropdown
 } from '@nethesis/vue-components'
 import type { Certificate } from '@/views/standalone/system/CertificatesView.vue'
 import { ref } from 'vue'
@@ -28,8 +30,31 @@ const props = defineProps<{
   certificates: Certificate[]
 }>()
 
+const sortKey = ref('name')
+const sortDescending = ref(false)
+
+const sortFunctions = {
+  // custom sorting function for domains attribute
+  domains: (a: Certificate, b: Certificate) => {
+    if (a.type === 'acme' && b.type === 'acme') {
+      if (a.requested_domains?.length && b.requested_domains?.length) {
+        return a.requested_domains[0].localeCompare(b.requested_domains[0])
+      } else {
+        return 0
+      }
+    } else if (a.type === 'self-signed' && b.type === 'self-signed') {
+      return a.domain.localeCompare(b.domain)
+    } else if (a.type === 'self-signed') {
+      return -1
+    } else {
+      return 1
+    }
+  }
+}
+const { sortedItems } = useSort(props.certificates, sortKey, sortDescending, sortFunctions)
+
 const pageSize = ref(10)
-const { currentPage, paginatedItems } = useItemPagination(() => props.certificates, {
+const { currentPage, paginatedItems } = useItemPagination(() => sortedItems.value, {
   itemsPerPage: pageSize
 })
 
@@ -98,24 +123,60 @@ function getDropdownItems(item: Certificate) {
       : [])
   ]
 }
+
+const onSort = (payload: any) => {
+  sortKey.value = payload.key
+  sortDescending.value = payload.descending
+}
 </script>
 
 <template>
-  <NeTable :ariaLabel="t('standalone.certificates.title')" cardBreakpoint="lg" class="z-10">
+  <NeSortDropdown
+    v-model:sortKey="sortKey"
+    v-model:sortDescending="sortDescending"
+    :label="t('sort.sort')"
+    :options="[
+      { id: 'name', label: t('standalone.certificates.name') },
+      { id: 'domains', label: t('standalone.certificates.domains') },
+      { id: 'type', label: t('standalone.certificates.type') },
+      { id: 'expiration', label: t('standalone.certificates.expire') }
+    ]"
+    :openMenuAriaLabel="t('ne_dropdown.open_menu')"
+    :sortByLabel="t('sort.sort_by')"
+    :sortDirectionLabel="t('sort.direction')"
+    :ascendingLabel="t('sort.ascending')"
+    :descendingLabel="t('sort.descending')"
+    class="lg:hidden"
+  />
+  <NeTable
+    :sortKey="sortKey"
+    :sortDescending="sortDescending"
+    :ariaLabel="t('standalone.certificates.title')"
+    cardBreakpoint="lg"
+    class="z-10"
+  >
     <NeTableHead>
-      <NeTableHeadCell>{{ t('standalone.certificates.name') }}</NeTableHeadCell>
-      <NeTableHeadCell>{{ t('standalone.certificates.domains') }}</NeTableHeadCell>
-      <NeTableHeadCell>{{ t('standalone.certificates.type') }}</NeTableHeadCell>
-      <NeTableHeadCell>{{ t('standalone.certificates.expire') }}</NeTableHeadCell>
+      <NeTableHeadCell sortable columnKey="name" @sort="onSort">{{
+        t('standalone.certificates.name')
+      }}</NeTableHeadCell>
+      <NeTableHeadCell sortable columnKey="domains" @sort="onSort">{{
+        t('standalone.certificates.domains')
+      }}</NeTableHeadCell>
+      <NeTableHeadCell sortable columnKey="type" @sort="onSort">{{
+        t('standalone.certificates.type')
+      }}</NeTableHeadCell>
+      <NeTableHeadCell sortable columnKey="expiration" @sort="onSort">{{
+        t('standalone.certificates.expire')
+      }}</NeTableHeadCell>
       <NeTableHeadCell>
         <!-- no header for actions -->
       </NeTableHeadCell>
     </NeTableHead>
     <NeTableBody>
       <NeTableRow v-for="(item, index) in paginatedItems" :key="index">
         <NeTableCell :data-label="t('standalone.certificates.name')">
-          <div class="flex flex-row items-center">
-            <div class="mr-6">
+          <div class="flex flex-row items-center gap-6">
+            <div class="flex flex-col gap-1">
               <p>{{ item.name }}</p>
               <NeButton
                 :disabled="!item.details"
@@ -145,19 +206,21 @@ function getDropdownItems(item: Certificate) {
         <NeTableCell :data-label="t('standalone.certificates.domains')">
           <p v-if="item.type != 'acme'">{{ item.domain ? item.domain : '-' }}</p>
           <template v-else>
-            <p>{{ item.requested_domains!.slice(0, 2).join(', ') }}</p>
-            <NeTooltip interactive placement="bottom" v-if="item.requested_domains!.length > 2">
-              <template #trigger>
-                <NeButton size="sm" kind="tertiary" class="-mx-2">{{
-                  t('standalone.certificates.plus_n_others', {
-                    n: item.requested_domains!.length - 2
-                  })
-                }}</NeButton>
-              </template>
-              <template #content>
-                <p>{{ item.requested_domains!.slice(2).join(', ') }}</p>
-              </template>
-            </NeTooltip>
+            <div class="flex flex-col gap-1">
+              <p>{{ item.requested_domains!.slice(0, 2).join(', ') }}</p>
+              <NeTooltip interactive placement="bottom" v-if="item.requested_domains!.length > 2">
+                <template #trigger>
+                  <NeButton size="sm" kind="tertiary" class="-mx-2">{{
+                    t('standalone.certificates.plus_n_others', {
+                      n: item.requested_domains!.length - 2
+                    })
+                  }}</NeButton>
+                </template>
+                <template #content>
+                  <p>{{ item.requested_domains!.slice(2).join(', ') }}</p>
+                </template>
+              </NeTooltip>
+            </div>
           </template>
         </NeTableCell>
         <NeTableCell :data-label="t('standalone.certificates.type')">
@@ -196,7 +259,7 @@ function getDropdownItems(item: Certificate) {
           </div>
         </NeTableCell>
         <NeTableCell :data-label="t('common.actions')">
-          <div class="align-center flex justify-end">
+          <div class="-ml-4 flex items-center lg:ml-0 lg:justify-end">
             <NeDropdown
               v-if="!item.default"
               :items="getDropdownItems(item)"
@@ -209,7 +272,7 @@ function getDropdownItems(item: Certificate) {
     <template #paginator>
       <NePaginator
         :current-page="currentPage"
-        :total-rows="props.certificates.length"
+        :total-rows="sortedItems.length"
         :page-size="pageSize"
         :nav-pagination-label="t('ne_table.pagination')"
         :next-label="t('ne_table.go_to_next_page')"

tailwind.config.js

@@ -38,6 +38,11 @@ export default {
       }
     }
   },
+  variants: {
+    extend: {
+      textColor: ['group-hover']
+    }
+  },
   plugins: [require('@tailwindcss/forms')],
   darkMode: 'class'
 }