start easy mode

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

@@ -0,0 +1,114 @@
+<script setup>
+import { defineProps, reactive, onMounted, computed } from "vue";
+import Container from "@components/Widget/Container.vue";
+import Fields from "@components/Form/Fields.vue";
+import Title from "@components/Widget/Title.vue";
+import Subtitle from "@components/Widget/Subtitle.vue";
+import Flex from "@components/Widget/Flex.vue";
+import Button from "@components/Widget/Button.vue";
+import { v4 as uuidv4 } from "uuid";
+import { plugin_types } from "@utils/variables";
+import { useFilter } 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 data = reactive({
+  currStep: 0,
+});
+
+const buttonSave = {
+  id: uuidv4(),
+  text: "action_save",
+  disabled: false,
+  color: "success",
+  size: "normal",
+  type: "submit",
+  containerClass: "flex justify-center",
+};
+
+onMounted(() => {
+  // Restart step one every time the component is mounted
+  data.currStep = 0;
+});
+</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_easy_mode'" />
+    <Subtitle type="card" :subtitle="'dashboard_easy_mode_subtitle'" />
+
+    <template v-for="(step, id) in props.template">
+      <Container v-if="data.currStep === id" class="col-span-12 w-full">
+        <Title type="card" :title="step.name" />
+        <Subtitle type="card" :subtitle="step.description" />
+
+        <Container class="grid grid-cols-12 w-full relative">
+          <template
+            v-for="(setting, name, index) in step.settings"
+            :key="index"
+          >
+            <Fields :setting="setting" />
+          </template>
+        </Container>
+      </Container>
+    </template>
+    <Flex>
+      <Button v-bind="buttonSave" />
+    </Flex>
+  </Container>
+</template>

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

@@ -47,8 +47,6 @@ const data = reactive({
   str: JSON.stringify(props.template),
   // Data on creation of editor
   entry: computed(() => {
-    // TODO : WORK WITH LINE LOOP
-    // ONLY REPLACE FIRST ':' IS REPLACED (IN CASE VALUE CONTAIN ':')
     let dataStr = data.str;
     // Remove first and last curly brackets
     dataStr = dataStr.slice(1, -1);
@@ -144,7 +142,6 @@ const buttonSave = {
     :containerClass="`col-span-12 w-full m-1 p-1`"
     :columns="props.columns"
   >
-    {{ data.isValid ? "Valid" : "Not Valid" }}
     <Title type="card" :title="'dashboard_raw_mode'" />
     <Subtitle type="card" :subtitle="'dashboard_raw_mode_subtitle'" />
     <Container class="col-span-12 w-full">

vuejs/client/src/lang/en.json

@@ -87,6 +87,8 @@
   "dashboard_raw_invalid": "Invalid raw format. Impossible to save.",
   "dashboard_advanced_mode": "Advanced mode",
   "dashboard_advanced_mode_subtitle": "Advanced mode show settings by plugin in dedicated fields.",
+  "dashboard_easy_mode" : "Easy mode",
+  "dashboard_easy_mode_subtitle": "Easy mode will guide you using steps and additional information to help you configure your settings.",
   "inp_input_valid": "input valid",
   "inp_input_error_required": "input is required",
   "inp_input_error": "input is invalid",

vuejs/test.py

@@ -35,7 +35,7 @@ def create_template(name, settings = {}, configs = {}, steps = []):
                     "SETTING_1"
                 ],
                 "configs": [
-                    "CONFIG_2"
+                    "CONFIG_1"
                 ]
             },
             {
@@ -45,7 +45,7 @@ def create_template(name, settings = {}, configs = {}, steps = []):
                     "SETTING_2"
                 ],
                 "configs": [
-                    "CONFIG_4"
+                    "CONFIG_1"
                 ]
             }
         ]
@@ -74,6 +74,14 @@ def get_forms_from_templates(templates, plugins):
     return forms
 
 def set_easy(template, plugins_data):
+    """
+    Prepare the easy form based on the template and plugins data.
+    We need to loop on each steps and prepare settings and configs for each step.
+    """
+    settings = template.get("settings")
+    configs = template.get("configs")
+    plugins = copy.deepcopy(plugins_data)
+
     try:
         return {}
     except:
@@ -169,7 +177,31 @@ def set_advanced(template, plugins_data):
 
 
 templates = [default, low_level]
-global_page_templates = [create_template("global config", global_config_settings)]
+global_page_templates = [create_template("global config", global_config_settings, {
+            "CONFIG_1": "value",
+            "CONFIG_2": "value"
+        }, [
+            {
+                "title": "Title 1",
+                "subtitle": "subtitle 1",
+                "settings": [
+                    "SETTING_1"
+                ],
+                "configs": [
+                    "CONFIG_2"
+                ]
+            },
+            {
+                "title": "Title 2",
+                "subtitle": "subtitle 2",
+                "settings": [
+                    "SETTING_2"
+                ],
+                "configs": [
+                    "CONFIG_4"
+                ]
+            }
+        ])]
 
 
 forms_global = get_forms_from_templates(global_page_templates, plugins_list)