From ad5228126467424c88c66f3eeafb8c57f8797e32 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 27 Sep 2023 11:03:13 +0300
Subject: [PATCH 1/4] Implemented node filters.

---
 .../playground/src/components/node_filter.vue | 75 ++++++++++++++++
 packages/playground/src/utils/filter_nodes.ts | 85 +++++++++++++++++++
 2 files changed, 160 insertions(+)
 create mode 100644 packages/playground/src/components/node_filter.vue

diff --git a/packages/playground/src/components/node_filter.vue b/packages/playground/src/components/node_filter.vue
new file mode 100644
index 0000000000..ed69d6c43a
--- /dev/null
+++ b/packages/playground/src/components/node_filter.vue
@@ -0,0 +1,75 @@
+<template>
+  <v-expansion-panels>
+    <v-expansion-panel>
+      <v-expansion-panel-title>
+        <template v-slot:default="{}">
+          <v-row no-gutters>
+            <v-col cols="4" class="d-flex justify-start text-h6"> Filters</v-col>
+          </v-row>
+        </template>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        <v-row no-gutters>
+          <v-col
+            cols="2"
+            class="d-flex justify-end align-center ml-2 mr-2 mb-2"
+            v-for="key in Object.keys($props.modelValue)"
+            :key="key"
+          >
+            <input-validator
+              v-if="$props.modelValue[key].label"
+              v-model:error="$props.modelValue[key].error"
+              #="{ props }"
+              :rules="$props.modelValue[key].rules?.[0] ?? []"
+              :async-rules="$props.modelValue[key].rules?.[1] ?? []"
+              :value="$props.modelValue[key].value"
+            >
+              <v-text-field
+                v-bind="props"
+                v-model="$props.modelValue[key].value"
+                :label="$props.modelValue[key].label"
+                :placeholder="$props.modelValue[key].placeholder"
+                :type="$props.modelValue[key].type"
+              ></v-text-field>
+            </input-validator>
+          </v-col>
+          <v-col cols="2" class="d-flex justify-start align-center mb-6 ml-4">
+            <v-btn @click="resetFilters" variant="outlined" color="primary">Reset filter</v-btn>
+          </v-col>
+        </v-row>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
+
+import type { NodeInputFilterType } from "@/utils/filter_nodes";
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object as PropType<{ [key: string]: NodeInputFilterType }>,
+      required: true,
+    },
+  },
+
+  setup(props, { emit }) {
+    const resetFilters = () => {
+      emit(
+        "update:model-value",
+        Object.keys(props.modelValue).reduce((res, key) => {
+          res[key] = { ...props.modelValue[key], value: undefined };
+          return res;
+        }, {} as any),
+      );
+    };
+
+    return {
+      resetFilters,
+    };
+  },
+});
+</script>
diff --git a/packages/playground/src/utils/filter_nodes.ts b/packages/playground/src/utils/filter_nodes.ts
index 7ae2799c5c..aa62602852 100644
--- a/packages/playground/src/utils/filter_nodes.ts
+++ b/packages/playground/src/utils/filter_nodes.ts
@@ -1,7 +1,10 @@
 import type { FilterOptions, GridClient, NodeInfo } from "@threefold/grid_client";
 
+import type { AsyncRule, SyncRule } from "@/components/input_validator.vue";
 import type { NodeFilters } from "@/components/select_node.vue";
 
+import { isNumeric } from "./validators";
+
 export interface NodeGPUCardType {
   id: string;
   vendor: string;
@@ -33,3 +36,85 @@ export async function getFilteredNodes(grid: GridClient, options: NodeFilters):
   const nodes = await grid.capacity.filterNodes(filters);
   return nodes;
 }
+
+// Node filters used in #Explorer, #Dedicated Nodes...
+
+// Input attrs
+export type NodeInputFilterType = {
+  label: string;
+  placeholder: string;
+  value?: string | undefined;
+  rules?: [syncRules: SyncRule[], asyncRules?: AsyncRule[]];
+  error?: string;
+  type: string;
+};
+
+// Input fields
+export type FilterInputs = {
+  nodeId: NodeInputFilterType;
+  farmIds: NodeInputFilterType;
+  farmName: NodeInputFilterType;
+  country: NodeInputFilterType;
+  freeSru: NodeInputFilterType;
+  freeHru: NodeInputFilterType;
+  freeMru: NodeInputFilterType;
+};
+
+// Default input Initialization
+export const inputsInitializer: FilterInputs = {
+  nodeId: {
+    label: "Node ID",
+    placeholder: "Filter by node id.",
+    rules: [[isNumeric("This field accepts numbers only.", { no_symbols: true })]],
+    type: "text",
+  },
+  farmIds: {
+    label: "Farm IDs",
+    placeholder: "e.g. 1, 2, 3",
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        (value: string) => {
+          const ids = value.split(",").map((id: string) => {
+            if (isNaN(+id)) {
+              return isNumeric("This field accepts numbers only.", { no_symbols: true });
+            } else {
+              return isNumeric("This field accepts numbers only.", { no_symbols: true });
+            }
+          });
+          console.log(ids);
+        },
+      ],
+    ],
+    type: "text",
+  },
+  farmName: {
+    label: "Farm Name",
+    placeholder: "Filter by farm name.",
+    type: "text",
+  },
+  country: {
+    label: "Country Full Name",
+    placeholder: "Filter by country.",
+    type: "text",
+  },
+  freeSru: {
+    label: "Free SRU (GB)",
+    placeholder: "Filter by Free SSD greater than or equal to.",
+    rules: [[isNumeric("This field accepts numbers only.", { no_symbols: true })]],
+    type: "text",
+  },
+  freeHru: {
+    label: "Free HRU (GB)",
+    placeholder: "Filter by Free HDD greater than or equal to.",
+    rules: [[isNumeric("This field accepts numbers only.", { no_symbols: true })]],
+    type: "text",
+  },
+  freeMru: {
+    label: "Free MRU (GB)",
+    placeholder: "Filter by Free Memory greater than or equal to.",
+    value: undefined,
+    rules: [[isNumeric("This field accepts numbers only.", { no_symbols: true })]],
+    type: "text",
+  },
+};

From 66fdee5079c418a0c0eafa561520e9c2007961d8 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 27 Sep 2023 17:10:14 +0300
Subject: [PATCH 2/4] Update the model form to validate the inputs.

---
 .../src/components/form_validator.vue         |  16 ++-
 .../playground/src/components/node_filter.vue | 101 ++++++++++--------
 .../playground/src/hooks/form_validator.ts    |   4 +-
 packages/playground/src/utils/filter_nodes.ts |  11 +-
 4 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/packages/playground/src/components/form_validator.vue b/packages/playground/src/components/form_validator.vue
index 8df4cbaa40..82530fef5e 100644
--- a/packages/playground/src/components/form_validator.vue
+++ b/packages/playground/src/components/form_validator.vue
@@ -10,13 +10,23 @@ import type { InputValidatorService } from "@/hooks/input_validator";
 
 export default {
   name: "FormValidator",
-  props: ["modelValue"],
+  props: {
+    modelValue: Boolean,
+    validOnInit: Boolean,
+  },
   emits: { "update:modelValue": (value: boolean) => value },
-  setup(_, { emit, expose }) {
+  setup(props, { emit, expose }) {
     const statusMap = ref(new Map<number, ValidatorStatus>());
     const serviceMap = new Map<number, InputValidatorService>();
 
-    const valid = computed(() => [...statusMap.value.values()].every(status => status === ValidatorStatus.Valid));
+    const valid = computed(() =>
+      [...statusMap.value.values()].every(status => {
+        if (props.validOnInit) {
+          return status === ValidatorStatus.Valid || status === ValidatorStatus.Init;
+        }
+        return status === ValidatorStatus.Valid;
+      }),
+    );
     watch(valid, valid => emit("update:modelValue", valid), { immediate: true });
 
     const form: FormValidatorService = {
diff --git a/packages/playground/src/components/node_filter.vue b/packages/playground/src/components/node_filter.vue
index ed69d6c43a..8e4448afe8 100644
--- a/packages/playground/src/components/node_filter.vue
+++ b/packages/playground/src/components/node_filter.vue
@@ -1,52 +1,65 @@
 <template>
-  <v-expansion-panels>
-    <v-expansion-panel>
-      <v-expansion-panel-title>
-        <template v-slot:default="{}">
+  <form-validator valid-on-init ref="formRef" @update:model-value="$emit('update:valid', $event)">
+    <v-expansion-panels
+      @update:model-value="
+        e => {
+          if (typeof e === 'number') {
+            formRef.validate();
+          }
+        }
+      "
+    >
+      <v-expansion-panel>
+        <v-expansion-panel-title>
+          <template v-slot:default="{}">
+            <v-row no-gutters>
+              <v-col cols="4" class="d-flex justify-start text-h6"> Filters</v-col>
+            </v-row>
+          </template>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-row no-gutters>
-            <v-col cols="4" class="d-flex justify-start text-h6"> Filters</v-col>
-          </v-row>
-        </template>
-      </v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <v-row no-gutters>
-          <v-col
-            cols="2"
-            class="d-flex justify-end align-center ml-2 mr-2 mb-2"
-            v-for="key in Object.keys($props.modelValue)"
-            :key="key"
-          >
-            <input-validator
-              v-if="$props.modelValue[key].label"
-              v-model:error="$props.modelValue[key].error"
-              #="{ props }"
-              :rules="$props.modelValue[key].rules?.[0] ?? []"
-              :async-rules="$props.modelValue[key].rules?.[1] ?? []"
-              :value="$props.modelValue[key].value"
+            <v-col
+              cols="12"
+              sm="6"
+              md="6"
+              xl="6"
+              xxl="12"
+              class="d-flex justify-end align-center ml-2 mr-2 mb-2"
+              v-for="key in Object.keys($props.modelValue)"
+              :key="key"
             >
-              <v-text-field
-                v-bind="props"
-                v-model="$props.modelValue[key].value"
-                :label="$props.modelValue[key].label"
-                :placeholder="$props.modelValue[key].placeholder"
-                :type="$props.modelValue[key].type"
-              ></v-text-field>
-            </input-validator>
-          </v-col>
-          <v-col cols="2" class="d-flex justify-start align-center mb-6 ml-4">
-            <v-btn @click="resetFilters" variant="outlined" color="primary">Reset filter</v-btn>
-          </v-col>
-        </v-row>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-  </v-expansion-panels>
+              <input-validator
+                v-if="$props.modelValue[key].label"
+                #="{ props }"
+                :rules="$props.modelValue[key].rules?.[0] ?? []"
+                :async-rules="$props.modelValue[key].rules?.[1] ?? []"
+                :value="$props.modelValue[key].value"
+              >
+                <v-text-field
+                  v-bind="props"
+                  v-model="$props.modelValue[key].value"
+                  :label="$props.modelValue[key].label"
+                  :placeholder="$props.modelValue[key].placeholder"
+                  :type="$props.modelValue[key].type"
+                ></v-text-field>
+              </input-validator>
+            </v-col>
+            <v-col cols="2" class="d-flex justify-start align-center mb-6 ml-4">
+              <v-btn @click="resetFilters" variant="outlined" color="primary">Reset filter</v-btn>
+            </v-col>
+          </v-row>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </form-validator>
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { NodeInputFilterType } from "@/utils/filter_nodes";
+import type { NodeInputFilterType } from "@/explorer/utils/types";
+import { useFormRef } from "@/hooks/form_validator";
 
 export default defineComponent({
   props: {
@@ -54,9 +67,12 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: NodeInputFilterType }>,
       required: true,
     },
+    valid: Boolean,
   },
 
   setup(props, { emit }) {
+    const formRef = useFormRef();
+
     const resetFilters = () => {
       emit(
         "update:model-value",
@@ -69,6 +85,7 @@ export default defineComponent({
 
     return {
       resetFilters,
+      formRef,
     };
   },
 });
diff --git a/packages/playground/src/hooks/form_validator.ts b/packages/playground/src/hooks/form_validator.ts
index 24faec78c2..12aae3bd6c 100644
--- a/packages/playground/src/hooks/form_validator.ts
+++ b/packages/playground/src/hooks/form_validator.ts
@@ -30,8 +30,8 @@ export function useForm(): FormValidatorService | null {
   return inject(formValidatorKey, null);
 }
 
+export function useFormRef(): Ref<FormValidatorService>;
 export function useFormRef(isArray: true): Ref<FormValidatorService[]>;
-export function useFormRef(isArray: false): Ref<FormValidatorService>;
-export function useFormRef(isArray = false) {
+export function useFormRef(isArray?: true) {
   return isArray ? (ref([]) as Ref<FormValidatorService[]>) : (ref() as Ref<FormValidatorService>);
 }
diff --git a/packages/playground/src/utils/filter_nodes.ts b/packages/playground/src/utils/filter_nodes.ts
index aa62602852..b6ff1faecb 100644
--- a/packages/playground/src/utils/filter_nodes.ts
+++ b/packages/playground/src/utils/filter_nodes.ts
@@ -73,16 +73,15 @@ export const inputsInitializer: FilterInputs = {
     placeholder: "e.g. 1, 2, 3",
     rules: [
       [
-        isNumeric("This field accepts numbers only.", { no_symbols: true }),
         (value: string) => {
           const ids = value.split(",").map((id: string) => {
-            if (isNaN(+id)) {
-              return isNumeric("This field accepts numbers only.", { no_symbols: true });
-            } else {
-              return isNumeric("This field accepts numbers only.", { no_symbols: true });
+            const numericId = parseInt(id);
+            if (!isNaN(numericId)) {
+              return numericId;
             }
           });
-          console.log(ids);
+          const validate = isNumeric("This field accepts numbers only.", { no_symbols: false });
+          return validate(String(ids));
         },
       ],
     ],

From fe46a2f5df015902bfdf3c4730258ea9d0fba116 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 27 Sep 2023 18:25:27 +0300
Subject: [PATCH 3/4] Define the node-filters as a global component.

---
 packages/playground/src/config.ts              | 2 ++
 packages/playground/src/global-components.d.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/playground/src/config.ts b/packages/playground/src/config.ts
index 165b32b1e3..7a9579c6f1 100644
--- a/packages/playground/src/config.ts
+++ b/packages/playground/src/config.ts
@@ -6,6 +6,7 @@ import DTabs from "./components/dynamic_tabs.vue";
 import FormValidator from "./components/form_validator.vue";
 import InputTooltip from "./components/input_tooltip.vue";
 import InputValidator from "./components/input_validator.vue";
+import NodeFilters from "./components/node_filter.vue";
 import PasswordInputWrapper from "./components/password_input_wrapper.vue";
 import ViewLayout from "./components/view_layout.vue";
 import WebletLayout from "./components/weblet_layout.vue";
@@ -20,6 +21,7 @@ const GLOBAL_COMPONENTS: { [key: string]: Component } = {
   FormValidator,
   ViewLayout,
   InputTooltip,
+  NodeFilters,
 };
 
 export function defineGlobals(app: App<Element>): void {
diff --git a/packages/playground/src/global-components.d.ts b/packages/playground/src/global-components.d.ts
index f31e5bc31f..8111a0570e 100644
--- a/packages/playground/src/global-components.d.ts
+++ b/packages/playground/src/global-components.d.ts
@@ -5,6 +5,7 @@ import DTabs from "./components/dynamic_tabs.vue";
 import FormValidator from "./components/form_validator.vue";
 import InputTooltip from "./components/input_tooltip.vue";
 import InputValidator from "./components/input_validator.vue";
+import NodeFilters from "./components/node_filter.vue";
 import PasswordInputWrapper from "./components/password_input_wrapper.vue";
 import ViewLayout from "./components/view_layout.vue";
 import WebletLayout from "./components/weblet_layout.vue";
@@ -20,6 +21,7 @@ declare module "@vue/runtime-core" {
     FormValidator: typeof FormValidator;
     ViewLayout: typeof ViewLayout;
     InputTooltip: typeof InputTooltip;
+    NodeFilters: typeof NodeFilters;
   }
 
   interface ComponentCustomProperties {

From 2a7d8517ed1e03ff2a5f46b212d03358a1c297c2 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 27 Sep 2023 18:39:11 +0300
Subject: [PATCH 4/4] make the card of node filter fields responsive.

---
 packages/playground/src/components/node_filter.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/playground/src/components/node_filter.vue b/packages/playground/src/components/node_filter.vue
index 8e4448afe8..654fdf6161 100644
--- a/packages/playground/src/components/node_filter.vue
+++ b/packages/playground/src/components/node_filter.vue
@@ -18,13 +18,11 @@
           </template>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
-          <v-row no-gutters>
+          <v-row justify="center" justify-md="start" no-gutters>
             <v-col
               cols="12"
-              sm="6"
-              md="6"
-              xl="6"
-              xxl="12"
+              sm="4"
+              md="2"
               class="d-flex justify-end align-center ml-2 mr-2 mb-2"
               v-for="key in Object.keys($props.modelValue)"
               :key="key"
@@ -45,7 +43,7 @@
                 ></v-text-field>
               </input-validator>
             </v-col>
-            <v-col cols="2" class="d-flex justify-start align-center mb-6 ml-4">
+            <v-col cols="12" sm="4" md="2" class="d-flex justify-start align-center mb-6 ml-4">
               <v-btn @click="resetFilters" variant="outlined" color="primary">Reset filter</v-btn>
             </v-col>
           </v-row>