fix: add card when no port forward is present

NethServer · Oct 3, 2023 · 556f0f2 · 556f0f2
1 parent 41c52b3
commit 556f0f2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
@@ -493,7 +493,10 @@
       "any_zone": "Any zone",
       "any": "Any",
       "destination_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "no_port_forward_configured": "No port forward has been configured.",
+      "no_port_forward_found": "No port forward has been found.",
+      "filter_change_suggestion": "Try using a different filter value."
     },
     "firewall": {
       "title": "Firewall"
@@ -522,4 +525,4 @@
       "title": "Logs"
     }
   }
-}
+}
diff --git a/src/views/standalone/firewall/PortForward.vue b/src/views/standalone/firewall/PortForward.vue
@@ -203,17 +203,47 @@ onMounted(() => {
       v-if="error.notificationDescription"
     />
     <NeSkeleton v-if="loading" :lines="10" />
-    <PortForwardTable
-      v-else
-      v-for="(portForward, key) in filteredPortForwards"
-      :key="key"
-      :port-forwards="portForward"
-      :header="key"
-      @port-forward-delete="openDeleteModal"
-      @port-forward-duplicate="duplicateRedirect"
-      @port-forward-edit="openCreateEditDrawer"
-      @port-forward-toggle-enable="toggleEnableRedirect"
-    />
+    <template v-else>
+      <div
+        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)"
+          ><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"
+      >
+        <p class="mb-4 text-sm">
+          <strong>{{ t('standalone.port_forward.no_port_forward_found') }}</strong>
+        </p>
+        <p class="text-sm">
+          <strong>{{ t('standalone.port_forward.filter_change_suggestion') }}</strong>
+        </p>
+      </div>
+      <PortForwardTable
+        v-else
+        v-for="(portForward, key) in filteredPortForwards"
+        :key="key"
+        :port-forwards="portForward"
+        :header="key"
+        @port-forward-delete="openDeleteModal"
+        @port-forward-duplicate="duplicateRedirect"
+        @port-forward-edit="openCreateEditDrawer"
+        @port-forward-toggle-enable="toggleEnableRedirect"
+      />
+    </template>
   </div>
   <CreateOrEditPortForwardDrawer
     :is-shown="showCreateEditDrawer"