update raw mode

vuejs/client/src/components/Form/Advanced.vue

@@ -47,7 +47,7 @@ import { useFilter } from "@utils/form.js";
 const props = defineProps({
   // id && value && method
   template: {
-    type: Array,
+    type: Object,
     required: true,
     default: {},
   },
@@ -245,6 +245,8 @@ onMounted(() => {
     :containerClass="`col-span-12 w-full m-1 p-1`"
     :columns="props.columns"
   >
+    <Title type="card" :title="'dashboard_advanced_mode'" />
+    <Subtitle type="card" :subtitle="'dashboard_advanced_mode_subtitle'" />
     <Container :containerClass="`grid grid-cols-12 col-span-12 w-full`">
       <Combobox
         v-bind="comboboxPlugin"
@@ -264,10 +266,7 @@ onMounted(() => {
         <Title type="card" :title="plugin.name" />
         <Subtitle type="card" :subtitle="plugin.description" />
 
-        <Container
-          style="max-height: 300px; overflow: auto"
-          class="grid grid-cols-12 w-full relative"
-        >
+        <Container class="grid grid-cols-12 w-full relative">
           <template
             v-for="(setting, name, index) in plugin.settings"
             :key="index"

vuejs/client/src/components/Form/Raw.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { defineProps, reactive, onMounted, computed } from "vue";
+import Container from "@components/Widget/Container.vue";
+import Title from "@components/Widget/Title.vue";
+import Subtitle from "@components/Widget/Subtitle.vue";
+import Input from "@components/Forms/Field/Input.vue";
+import Button from "@components/Widget/Button.vue";
+import { v4 as uuidv4 } from "uuid";
+import { isItemKeyword } from "@utils/form.js";
+/**
+  @name Form/Advanced.vue
+  @description This component is used to create a complete advanced form with plugin selection.
+  @example
+  template: [
+        {
+          columns: { pc: 6, tablet: 12, mobile: 12 },
+          id: "test-check",
+          value: "yes",
+          label: "Checkbox",
+          name: "checkbox",
+          required: true,
+          hideLabel: false,
+          headerClass: "text-red-500",
+          inpType: "checkbox",
+        },
+        {
+          id: "test-input",
+          value: "yes",
+          type: "text",
+          name: "test-input",
+          disabled: false,
+          required: true,
+          label: "Test input",
+          pattern: "(test)",
+          inpType: "input",
+        },
+      ],
+  @param {object} template - Template object with plugin and settings data.
+  @param {string} containerClass - Container
+  @param {object} columns - Columns object.
+*/
+
+const props = defineProps({
+  // id && value && method
+  template: {
+    type: Object,
+    required: true,
+    default: {},
+  },
+  containerClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  columns: {
+    type: Object,
+    required: false,
+    default: {},
+  },
+});
+
+const buttonSave = {
+  id: uuidv4(),
+  text: "action_save",
+  disabled: false,
+  color: "success",
+  size: "normal",
+  type: "submit",
+  containerClass: "flex justify-center",
+};
+</script>
+
+<template>
+  <Container
+    :tag="'form'"
+    method="POST"
+    :containerClass="`col-span-12 w-full m-1 p-1`"
+    :columns="props.columns"
+  >
+    <Title type="card" :title="'dashboard_raw_mode'" />
+    <Subtitle type="card" :subtitle="'dashboard_raw_mode_subtitle'" />
+    <Container class="col-span-12 w-full">
+      <div>
+        {{ props.template }}
+      </div>
+    </Container>
+    <Button v-bind="buttonSave" />
+  </Container>
+</template>

vuejs/client/src/components/Form/Templates.vue

@@ -3,6 +3,7 @@ import { reactive, defineProps, computed, onBeforeMount } from "vue";
 import Container from "@components/Widget/Container.vue";
 import Combobox from "@components/Forms/Field/Combobox.vue";
 import Advanced from "@components/Form/Advanced.vue";
+import Raw from "@components/Form/Raw.vue";
 import { v4 as uuidv4 } from "uuid";
 
 /**
@@ -91,7 +92,7 @@ onBeforeMount(() => {
     :columns="props.columns"
   >
     <Container
-      v-if="data.modes.length > 1 && data.templates.length > 1"
+      v-if="data.modes.length > 1 || data.templates.length > 1"
       :containerClass="`col-span-12 grid grid-cols-12`"
     >
       <Combobox
@@ -113,5 +114,9 @@ onBeforeMount(() => {
       v-if="data.currModeName === 'advanced'"
       :template="props.templates[data.currModeName][data.currTemplateName]"
     />
+    <Raw
+      v-if="data.currModeName === 'raw'"
+      :template="props.templates[data.currModeName][data.currTemplateName]"
+    />
   </Container>
 </template>

vuejs/client/src/lang/en.json

@@ -82,6 +82,10 @@
   "dashboard_status_error": "status inactive or error.",
   "dashboard_status_warning": "status warning or alert.",
   "dashboard_status_info": "status loading or waiting or unknown.",
+  "dashboard_raw_mode": "raw mode",
+  "dashboard_raw_mode_subtitle": "Raw mode shows settings as raw key-value pairs of settings.",
+  "dashboard_advanced_mode": "Advanced mode",
+  "dashboard_advanced_mode_subtitle": "Advanced mode show settings by plugin in dedicated fields.",
   "inp_input_valid": "input valid",
   "inp_input_error_required": "input is required",
   "inp_input_error": "input is invalid",
@@ -102,6 +106,8 @@
   "inp_select_plugin_type_desc": "Only show plugins of the chosen type",
   "inp_select_plugin_context": "plugin context",
   "inp_select_plugin_context_desc": "Only show plugins of the chosen context.",
+  "inp_search_key": "search key",
+  "inp_search_key_desc": "Search within the settings key.",
   "action_send": "send {name}",
   "action_start": "start {name}",
   "action_disable": "disable {name}",

vuejs/client/src/utils/form.js

@@ -266,4 +266,4 @@ function isItemSelect(filters, item) {
   return false;
 }
 
-export { useForm, useFilter };
+export { useForm, useFilter, isItemKeyword, isItemSelect };

vuejs/plugins.json

@@ -1109,6 +1109,7 @@
                             "mobile": 12
                         },
                         "disabled": false,
+                        "value": "127.0.0.1",
                         "popovers": [
                             {
                                 "iconColor": "blue",

vuejs/test.py

@@ -91,6 +91,8 @@ def set_raw(template, plugins_data):
     # Update settings with global config data
     for plugin in plugins :          
         for setting, value in plugin.get("settings").items() :
+            value["value"] = value.get("default")
+
             # check if setting is in template
             if setting in settings :
                 # Update value or set default as value
@@ -116,12 +118,14 @@ def set_advanced(template, plugins_data):
             loop_id += 1
             # add zindex for container
             value["containerClass"] = f"z-{total_settings - loop_id}"
+
             # regex by pattern
             value["pattern"] = value.get("regex", "")
 
             # set inpType based on type define for each settings
             inpType = "checkbox" if value.get("type") == "check" else "select" if value.get("type") == "select" else "datepicker" if value.get("type") == "date" else "input"
             value["inpType"] =  inpType
+
             # set name using the label
             value["name"] = value.get("label")
 
@@ -137,6 +141,8 @@ def set_advanced(template, plugins_data):
             # By default, the input is enabled unless specific method
             value["disabled"] = False
 
+            value["value"] = value.get("default")
+
             # check if setting is in template
             if setting in settings :
                 # Update value or set default as value
@@ -174,5 +180,3 @@ with open('plugins.json', 'w') as f:
     json.dump(forms_global, f, indent=4)
 
         
-
-