From 7f1aef49255d576abbce1271cb43b17038c8b5b5 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 11 Oct 2023 07:57:17 +0000
Subject: [PATCH 1/6] fix(port-forward): move destination zone combobox

- move destination zone combobox inside of advanced settings
---
 .../firewall/CreateOrEditPortForwardDrawer.vue    | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index dcf19e98c..51be16fbb 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -327,13 +327,6 @@ async function createOrEditPortForward() {
           ></template
         >
       </NeTextInput>
-      <NeCombobox
-        :label="t('standalone.port_forward.destination_zone')"
-        :placeholder="t('standalone.port_forward.choose_zone')"
-        :options="supportedDestinationZones"
-        :selected-label="t('standalone.port_forward.any_zone')"
-        v-model="destinationZone"
-      />
       <NeTextInput
         :label="t('standalone.port_forward.destination_port')"
         v-model="destinationPort"
@@ -353,12 +346,18 @@ async function createOrEditPortForward() {
         </NeButton>
       </div>
       <template v-if="showAdvancedSettings">
+        <NeCombobox
+          :label="t('standalone.port_forward.destination_zone')"
+          :placeholder="t('standalone.port_forward.choose_zone')"
+          :options="supportedDestinationZones"
+          :selected-label="t('standalone.port_forward.any_zone')"
+          v-model="destinationZone"
+        />
         <NeCombobox
           :label="t('standalone.port_forward.wan_ip')"
           :options="wanInterfaces"
           v-model="wan"
         />
-
         <NeMultiTextInput
           :title="t('standalone.port_forward.restrict_access_to')"
           :optional="true"

From 2c2e6d16ff9bb42c55b3265d673b889058e556c9 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 11 Oct 2023 08:15:13 +0000
Subject: [PATCH 2/6] fix(port-forward): handle firewall config error

- handle firewall config error in port forward drawer
- avoid fetching firewall config if data is already loaded
---
 .../firewall/CreateOrEditPortForwardDrawer.vue   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index 51be16fbb..e66bee5d0 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -171,7 +171,9 @@ function close() {
 
 onMounted(() => {
   fetchOptions()
-  firewallConfig.fetch()
+  if (firewallConfig.loading || firewallConfig.error) {
+    firewallConfig.fetch()
+  }
 })
 
 function resetRestrictIPValidationErrors() {
@@ -286,13 +288,17 @@ async function createOrEditPortForward() {
     "
   >
     <NeInlineNotification
-      v-if="error.notificationTitle"
-      :title="error.notificationTitle"
-      :description="error.notificationDescription"
+      v-if="error.notificationTitle || firewallConfig.error"
+      :title="firewallConfig.error ? t('error.cannot_retrieve_zones') : error.notificationTitle"
+      :description="
+        firewallConfig.error
+          ? t(getAxiosErrorMessage(firewallConfig.error))
+          : error.notificationDescription
+      "
       class="mb-6"
       kind="error"
     />
-    <NeSkeleton v-if="loading || firewallConfig.loading" :lines="10" />
+    <NeSkeleton v-if="loading || firewallConfig.loading || firewallConfig.error" :lines="10" />
     <div v-else class="flex flex-col gap-y-6">
       <NeToggle :label="t('standalone.port_forward.status')" v-model="enabled" />
       <NeTextInput

From 9a5a7028ab3749e84326c6c116ed67e0dc7da822 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 11 Oct 2023 08:19:01 +0000
Subject: [PATCH 3/6] fix(port-forward): clear errors on drawer close

---
 .../standalone/firewall/CreateOrEditPortForwardDrawer.vue    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index e66bee5d0..766fc506c 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -165,6 +165,11 @@ watchEffect(() => {
 })
 
 function close() {
+  error.value.notificationTitle = ''
+  error.value.notificationDescription = ''
+  validationErrorBag.value.clear()
+  restrictIPValidationErrors.value = []
+
   resetForm()
   emit('close')
 }

From cf575cb685fbcaac54faf708a08d3d55603d6d40 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 11 Oct 2023 08:24:32 +0000
Subject: [PATCH 4/6] fix(port-forward): use NeEmptyState for empty page

---
 src/views/standalone/firewall/PortForward.vue | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/views/standalone/firewall/PortForward.vue b/src/views/standalone/firewall/PortForward.vue
index dd18de564..a3324b528 100644
--- a/src/views/standalone/firewall/PortForward.vue
+++ b/src/views/standalone/firewall/PortForward.vue
@@ -6,7 +6,8 @@ import {
   NeButton,
   NeTextInput,
   NeSkeleton,
-  NeInlineNotification
+  NeInlineNotification,
+  NeEmptyState
 } from '@nethserver/vue-tailwind-lib'
 import PortForwardTable from '@/components/standalone/firewall/PortForwardTable.vue'
 import { onMounted, ref } from 'vue'
@@ -204,14 +205,11 @@ onMounted(() => {
     />
     <NeSkeleton v-if="loading" :lines="10" />
     <template v-else>
-      <div
+      <NeEmptyState
+        :title="t('standalone.port_forward.no_port_forward_configured')"
+        :icon="['fas', 'circle-info']"
         v-if="Object.keys(portForwards).length == 0"
-        class="flex flex-col items-center justify-center rounded-md p-10 dark:bg-gray-800"
-      >
-        <p class="mb-4 text-sm">
-          <strong>{{ t('standalone.port_forward.no_port_forward_configured') }}</strong>
-        </p>
-        <NeButton kind="primary" @click="openCreateEditDrawer(null)"
+        ><NeButton kind="primary" @click="openCreateEditDrawer(null)"
           ><template #prefix>
             <font-awesome-icon
               :icon="['fas', 'circle-plus']"
@@ -219,19 +217,14 @@ onMounted(() => {
               aria-hidden="true"
             /> </template
           >{{ t('standalone.port_forward.add_port_forward') }}</NeButton
-        >
-      </div>
-      <div
-        v-else-if="Object.keys(filteredPortForwards).length == 0"
-        class="flex flex-col items-center justify-center rounded-md p-10 dark:bg-gray-800"
+        ></NeEmptyState
       >
-        <p class="mb-4 text-sm">
-          <strong>{{ t('standalone.port_forward.no_port_forward_found') }}</strong>
-        </p>
-        <p class="text-sm">
-          {{ t('standalone.port_forward.filter_change_suggestion') }}
-        </p>
-      </div>
+      <NeEmptyState
+        :title="t('standalone.port_forward.no_port_forward_found')"
+        :description="t('standalone.port_forward.filter_change_suggestion')"
+        :icon="['fas', 'circle-info']"
+        v-else-if="Object.keys(filteredPortForwards).length == 0"
+      />
       <PortForwardTable
         v-else
         v-for="(portForward, key) in filteredPortForwards"

From acc8aa1a4aaa5cb198ea4c6a4bb740ea9f62eb81 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 11 Oct 2023 08:41:06 +0000
Subject: [PATCH 5/6] fix(port-forward): fix error cleanup on close

- clear error on close only on add/edit request errors
---
 .../firewall/CreateOrEditPortForwardDrawer.vue           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index 766fc506c..bf4a4551c 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -165,8 +165,13 @@ watchEffect(() => {
 })
 
 function close() {
-  error.value.notificationTitle = ''
-  error.value.notificationDescription = ''
+  if (
+    error.value.notificationTitle === t('error.cannot_edit_port_forward') ||
+    error.value.notificationTitle === t('error.cannot_create_port_forward')
+  ) {
+    error.value.notificationTitle = ''
+    error.value.notificationDescription = ''
+  }
   validationErrorBag.value.clear()
   restrictIPValidationErrors.value = []
 

From f81f37bf0daf16e8b0751f5c17e645d8771c1045 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 11 Oct 2023 11:05:42 +0000
Subject: [PATCH 6/6] fix(port-forward): refetch items when drawer is shown

- refetch items every time the drawer is shown, instead of onmounted
- clear errors every time the drawer is closed
- remove firewallconfig fetch error from skeleton
- avoid showing form if there is a firewallconfig fetch error
---
 .../CreateOrEditPortForwardDrawer.vue         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index bf4a4551c..c0a0cab63 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -12,7 +12,7 @@ import {
   type NeComboboxOption,
   getAxiosErrorMessage
 } from '@nethserver/vue-tailwind-lib'
-import { toRefs, ref, onMounted } from 'vue'
+import { toRefs, ref, watch } from 'vue'
 import type {
   CreateEditPortForwardPayload,
   PortForward
@@ -165,13 +165,8 @@ watchEffect(() => {
 })
 
 function close() {
-  if (
-    error.value.notificationTitle === t('error.cannot_edit_port_forward') ||
-    error.value.notificationTitle === t('error.cannot_create_port_forward')
-  ) {
-    error.value.notificationTitle = ''
-    error.value.notificationDescription = ''
-  }
+  error.value.notificationTitle = ''
+  error.value.notificationDescription = ''
   validationErrorBag.value.clear()
   restrictIPValidationErrors.value = []
 
@@ -179,12 +174,17 @@ function close() {
   emit('close')
 }
 
-onMounted(() => {
-  fetchOptions()
-  if (firewallConfig.loading || firewallConfig.error) {
-    firewallConfig.fetch()
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      fetchOptions()
+      if (firewallConfig.loading || firewallConfig.error) {
+        firewallConfig.fetch()
+      }
+    }
   }
-})
+)
 
 function resetRestrictIPValidationErrors() {
   restrictIPValidationErrors.value = []
@@ -308,8 +308,8 @@ async function createOrEditPortForward() {
       class="mb-6"
       kind="error"
     />
-    <NeSkeleton v-if="loading || firewallConfig.loading || firewallConfig.error" :lines="10" />
-    <div v-else class="flex flex-col gap-y-6">
+    <NeSkeleton v-if="loading || firewallConfig.loading" :lines="10" />
+    <div v-else-if="!firewallConfig.error" class="flex flex-col gap-y-6">
       <NeToggle :label="t('standalone.port_forward.status')" v-model="enabled" />
       <NeTextInput
         :label="t('standalone.port_forward.name')"