remain multiples and advanced form

* fix vuln braces
* show multiples in reverse order for better UX
* created a advanced store for a better advanced form management

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

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, reactive, onMounted, onUnmounted } from "vue";
+import { defineProps, reactive, onMounted, onUnmounted, computed } from "vue";
 import MessageUnmatch from "@components/Message/Unmatch.vue";
 import Container from "@components/Widget/Container.vue";
 import Fields from "@components/Form/Fields.vue";
@@ -11,14 +11,8 @@ import Text from "@components/Widget/Text.vue";
 import Filter from "@components/Widget/Filter.vue";
 import GroupMultiple from "@components/Forms/Group/Multiple.vue";
 import { plugin_types } from "@utils/variables";
-import {
-  useCheckPluginsValidity,
-  useUpdateTemp,
-  useListenTempFields,
-  useUnlistenTempFields,
-  useDelAdvancedMult,
-  useAddAdvancedMult,
-} from "@utils/form.js";
+import { useAdvancedForm } from "@store/advanced.js";
+import { useCheckPluginsValidity } from "@utils/form.js";
 import { v4 as uuidv4 } from "uuid";
 /**
   @name Form/Advanced.vue
@@ -53,6 +47,8 @@ import { v4 as uuidv4 } from "uuid";
   @param {object} columns - Columns object.
 */
 
+const advancedForm = useAdvancedForm();
+
 const props = defineProps({
   // id && value && method
   template: {
@@ -75,13 +71,11 @@ const props = defineProps({
 const data = reactive({
   currPlugin: "",
   plugins: [],
-  base: JSON.parse(JSON.stringify(props.template)),
+  base: props.template,
   isRegErr: false,
   isReqErr: false,
   settingErr: "",
   pluginErr: "",
-  // Add filtering and check validity with regex and required
-  format: JSON.parse(JSON.stringify(props.template)),
 });
 
 const comboboxPlugin = {
@@ -109,7 +103,7 @@ const buttonSave = {
   size: "normal",
   type: "button",
   attrs: {
-    "data-submit-form": JSON.stringify(data.base),
+    "data-submit-form": JSON.stringify(advancedForm.templateBase),
   },
   containerClass: "flex justify-center",
   iconName: "plus",
@@ -201,19 +195,19 @@ const filters = [
 ];
 
 function filter(filterData) {
+  advancedForm.templateUIFormat = filterData;
   setValidity();
-  data.format = filterData;
-  data.plugins = getPluginNames(filterData);
+  data.plugins = getPluginNames(advancedForm.templateUIFormat);
   // Check after a filter if previous plugin is still in the list and if at least one plugin is available
   // Update if not the case
   data.currPlugin = data.plugins.includes(data.currPlugin)
     ? data.currPlugin
-    : getFirstPlugin(filterData);
+    : getFirstPlugin(advancedForm.templateUIFormat);
 }
 
 function setValidity() {
   const [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id] =
-    useCheckPluginsValidity(data.base);
+    useCheckPluginsValidity(advancedForm.templateUI);
   data.isRegErr = isRegErr;
   data.isReqErr = isReqErr;
   data.settingErr = settingErr;
@@ -242,24 +236,20 @@ function getPluginNames(template) {
   }
 }
 
-function updateTemplate(e) {
-  if (!e.target.closest("[data-advanced-form-plugin]")) return;
-  useUpdateTemp(e, data.base);
-}
-
 onMounted(() => {
+  advancedForm.setTemplate(props.template);
   // Get first props.forms template name
-  data.currPlugin = getFirstPlugin(props.template);
-  data.plugins = getPluginNames(props.template);
+  data.currPlugin = getFirstPlugin(advancedForm.templateUIFormat);
+  data.plugins = getPluginNames(advancedForm.templateUIFormat);
   setValidity();
   // Store update data on
 
   // I want updatInp to access event, data.base and the container attribut
-  useListenTempFields(updateTemplate);
+  advancedForm.useListenTempFields();
 });
 
 onUnmounted(() => {
-  useUnlistenTempFields(updateTemplate);
+  advancedForm.useUnlistenTempFields();
 });
 </script>
 
@@ -277,7 +267,7 @@ onUnmounted(() => {
     <Filter
       v-if="filters.length"
       @filter="(v) => filter(v)"
-      :data="data.base"
+      :data="advancedForm.templateUI"
       :filters="filters"
     >
       <Combobox
@@ -287,8 +277,8 @@ onUnmounted(() => {
         @inp="data.currPlugin = $event"
       />
     </Filter>
-    <MessageUnmatch v-if="!data.format.length" />
-    <template v-for="plugin in data.format">
+    <MessageUnmatch v-if="!advancedForm.templateUIFormat.length" />
+    <template v-for="(plugin, pluginId) in advancedForm.templateUIFormat">
       <Container
         data-is="content"
         data-advanced-form-plugin
@@ -309,24 +299,23 @@ onUnmounted(() => {
         <GroupMultiple
           @delete="
             (multName, groupName) =>
-              useDelAdvancedMult(data.base, multName, groupName)
+              advancedForm.delMultiple(plugin.id, multName, groupName)
           "
-          @add="(multName) => useAddAdvancedMult(data.base, multName)"
-          v-if="plugin.multiples"
+          @add="(multName) => advancedForm.addMultiple(plugin.id, multName)"
           :multiples="plugin.multiples"
         />
       </Container>
     </template>
     <Button
-      v-if="data.format.length"
+      v-if="advancedForm.templateUIFormat.length"
       v-bind="buttonSave"
       :disabled="data.isReqErr || data.isRegErr ? true : false"
     />
     <div class="flex justify-center items-center" data-is="form-error">
       <Text
         v-if="
-          (data.format.length && data.isRegErr) ||
-          (data.format.length && data.isReqErr)
+          (advancedForm.templateUIFormat.length && data.isRegErr) ||
+          (advancedForm.templateUIFormat.length && data.isReqErr)
         "
         :text="
           data.isReqErr

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

@@ -7,12 +7,7 @@ import Subtitle from "@components/Widget/Subtitle.vue";
 import Button from "@components/Widget/Button.vue";
 import Text from "@components/Widget/Text.vue";
 import { v4 as uuidv4 } from "uuid";
-import {
-  useCheckPluginsValidity,
-  useUpdateTemp,
-  useListenTempFields,
-  useUnlistenTempFields,
-} from "@utils/form.js";
+import { useCheckPluginsValidity } from "@utils/form.js";
 
 /**
   @name Form/Easy.vue

src/client/vite/src/components/Forms/Group/Multiple.vue

@@ -1,5 +1,12 @@
 <script setup>
-import { reactive, defineProps, defineEmits } from "vue";
+import {
+  reactive,
+  defineProps,
+  defineEmits,
+  watch,
+  computed,
+  onMounted,
+} from "vue";
 import { contentIndex } from "@utils/tabindex.js";
 import ButtonGroup from "@components/Widget/ButtonGroup.vue";
 import Button from "@components/Widget/Button.vue";
@@ -205,6 +212,9 @@ const buttonDelete = {
   containerClass: "flex justify-center",
 };
 
+// emits
+const emits = defineEmits(["delete", "add"]);
+
 // Check if at least one input is disabled (this means a method different than ui, default or manual is used)
 // If true, disable the delete button
 function setDeleteState(group) {
@@ -230,19 +240,16 @@ function delInvisible(id) {
 }
 
 function toggleVisible(id) {
-  if (multiples.invisible.includes(id)) {
-    delInvisible(id);
-  } else {
-    setInvisible(id);
-  }
+  multiples.invisible.includes(id) ? delInvisible(id) : setInvisible(id);
 }
 
-// emits
-const emits = defineEmits(["delete", "add"]);
+function delGroup(multName, groupName) {
+  emits("delete", multName, groupName);
+}
 </script>
 
 <template>
-  <template :key="multName" v-for="(multObj, multName, id) in props.multiples">
+  <template v-for="(multObj, multName, id) in props.multiples">
     <Container
       data-is="multiple"
       class="layout-settings-multiple"
@@ -264,36 +271,43 @@ const emits = defineEmits(["delete", "add"]);
         </div>
       </Container>
 
-      <template
-        :key="groupId"
-        v-for="(group, groupName, groupId) in props.multiples[multName]"
+      <div
+        :aria-hidden="
+          multiples.invisible.includes(`${multName}${id}`) ? 'false' : 'true'
+        "
+        :class="[
+          'flex-col-reverse col-span-12',
+          multiples.invisible.includes(`${multName}${id}`) ? 'hidden' : 'flex',
+        ]"
       >
-        <Container
-          data-group="multiple"
-          :data-group-name="groupName"
-          :data-mult-name="multName"
-          :data-plugin-name="multName"
-          class="layout-settings-multiple-group"
-          :aria-hidden="multiples.invisible.includes(`${multName}${id}`)"
-          v-show="
-            multiples.invisible.includes(`${multName}${id}`) ? false : true
-          "
+        <template
+          :key="groupName"
+          v-for="(group, groupName, groupId) in props.multiples[multName]"
         >
-          <Subtitle
-            :subtitle="`${multName.replaceAll('-', ' ')} #${+groupName + 1}`"
-          />
-          <template
-            :key="setting"
-            v-for="(setting, settingName, settingId) in group"
+          <Container
+            data-group="multiple"
+            :data-group-name="groupName"
+            :data-mult-name="multName"
+            class="layout-settings-multiple-group"
           >
-            <Fields :setting="setting" />
-          </template>
-          <ButtonGroup
-            @click="$emit('delete', multName, groupName)"
-            :buttons="[setDeleteState(group)]"
-          />
-        </Container>
-      </template>
+            <Subtitle
+              :subtitle="`${multName.replaceAll('-', ' ')} #${+groupName + 1}`"
+            />
+            <template
+              :key="settingName"
+              v-for="(setting, settingName, settingId) in group"
+            >
+              <Fields :setting="setting" />
+            </template>
+            <div class="col-span-12 flex justify-center">
+              <Button
+                @click="delGroup(multName, groupName)"
+                v-bind="setDeleteState(group)"
+              />
+            </div>
+          </Container>
+        </template>
+      </div>
     </Container>
   </template>
 </template>

src/client/vite/src/components/Widget/Filter.vue

@@ -75,9 +75,13 @@ const filters = reactive({
   isFiltering: false,
 });
 
-watch(props.data, () => {
-  filterData();
-});
+watch(
+  () => props.data,
+  () => {
+    filterData();
+  },
+  { deep: true }
+);
 
 function startFilter(filter = {}, value) {
   // Case we have new filter value, update it
@@ -133,7 +137,6 @@ function startFilter(filter = {}, value) {
     // Remove empty row
     template = template.filter((row) => row.length > 0);
   }
-
   emits("filter", template);
 }