fix: port forward #56

UI fixes and better error handling
NethServer · Oct 11, 2023 · 101830e · 101830e
2 parents 86ad2d5 + f81f37b
commit 101830e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 37 deletions.
diff --git 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,14 +165,26 @@ watchEffect(() => {
 })
 
 function close() {
+  error.value.notificationTitle = ''
+  error.value.notificationDescription = ''
+  validationErrorBag.value.clear()
+  restrictIPValidationErrors.value = []
+
   resetForm()
   emit('close')
 }
 
-onMounted(() => {
-  fetchOptions()
-  firewallConfig.fetch()
-})
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      fetchOptions()
+      if (firewallConfig.loading || firewallConfig.error) {
+        firewallConfig.fetch()
+      }
+    }
+  }
+)
 
 function resetRestrictIPValidationErrors() {
   restrictIPValidationErrors.value = []
@@ -286,14 +298,18 @@ 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" />
-    <div v-else class="flex flex-col gap-y-6">
+    <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')"
@@ -327,13 +343,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 +362,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"

diff --git 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,34 +205,26 @@ 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']"
               class="h-4 w-4"
               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"