From 7c6fbf40c752b7d16f50c90dab2a2ede86589398 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 12 Sep 2024 15:12:10 +0200
Subject: [PATCH] fix: minor improvements to nat helpers ui (#361)

---
 src/components/standalone/firewall/nat/NatHelpers.vue      | 7 ++-----
 src/components/standalone/firewall/nat/NatHelpersTable.vue | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/standalone/firewall/nat/NatHelpers.vue b/src/components/standalone/firewall/nat/NatHelpers.vue
index 3eaa4def9..901922882 100644
--- a/src/components/standalone/firewall/nat/NatHelpers.vue
+++ b/src/components/standalone/firewall/nat/NatHelpers.vue
@@ -10,8 +10,7 @@ import {
   NeHeading,
   NeInlineNotification,
   NeTextInput,
-  getAxiosErrorMessage,
-  sortByProperty
+  getAxiosErrorMessage
 } from '@nethesis/vue-components'
 import { computed, onMounted, ref } from 'vue'
 import { type NatHelper } from '@/stores/standalone/firewall'
@@ -63,9 +62,7 @@ async function listNatHelpers() {
 
   try {
     const res = await ubusCall('ns.nathelpers', 'list-nat-helpers')
-    const natHelpersList = res.data.values
-    // sort by status
-    natHelpers.value = natHelpersList.sort(sortByProperty('enabled')).reverse()
+    natHelpers.value = res.data.values
   } catch (err: any) {
     console.error(err)
     error.value.listNatHelpers = t(getAxiosErrorMessage(err))
diff --git a/src/components/standalone/firewall/nat/NatHelpersTable.vue b/src/components/standalone/firewall/nat/NatHelpersTable.vue
index 58ee63a38..4e5ed65f8 100644
--- a/src/components/standalone/firewall/nat/NatHelpersTable.vue
+++ b/src/components/standalone/firewall/nat/NatHelpersTable.vue
@@ -95,7 +95,7 @@ const { currentPage, paginatedItems } = useItemPagination(() => props.filteredNa
           <div class="flex items-center gap-2">
             <font-awesome-icon
               :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
-              class="h-4 w-4"
+              :class="['h-4 w-4', { 'text-green-600 dark:text-green-400': item.enabled }]"
               aria-hidden="true"
             />
             {{ item.enabled ? t('common.enabled') : t('common.disabled') }}