From 432157b1b41ee822ed3f4a31281b51b04dbb810a Mon Sep 17 00:00:00 2001 From: Andrea Leardini Date: Wed, 23 Oct 2024 14:48:17 +0200 Subject: [PATCH 1/3] fix: make certificates table sortable --- public/i18n/en/translation.json | 7 ++ .../certificates/CertificatesTable.vue | 77 +++++++++++++++++-- tailwind.config.js | 5 ++ 3 files changed, 81 insertions(+), 8 deletions(-) diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json index b4a725e5a..d56755eff 100644 --- a/public/i18n/en/translation.json +++ b/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" } } diff --git a/src/components/standalone/certificates/CertificatesTable.vue b/src/components/standalone/certificates/CertificatesTable.vue index ba914238b..4caa6fb6e 100644 --- a/src/components/standalone/certificates/CertificatesTable.vue +++ b/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,15 +123,51 @@ function getDropdownItems(item: Certificate) { : []) ] } + +const onSort = (payload: any) => { + sortKey.value = payload.key + sortDescending.value = payload.descending +}