prepare multiples actions + readonly

* prepare utils to add or delete multiple
* remove useless event on filtering
* prepare radonly store

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

@@ -14,9 +14,9 @@ import { plugin_types } from "@utils/variables";
 
 import {
   useCheckPluginsValidity,
-  useUpdateTemplate,
-  useListenTemp,
-  useUnlistenTemp,
+  useUpdateTemp,
+  useListenTempFields,
+  useUnlistenTempFields,
 } from "@utils/form.js";
 import { v4 as uuidv4 } from "uuid";
 /**
@@ -243,7 +243,7 @@ function getPluginNames(template) {
 
 function updateTemplate(e) {
   if (!e.target.closest("[data-advanced-form-plugin]")) return;
-  useUpdateTemplate(e, data.base);
+  useUpdateTemp(e, data.base);
 }
 
 onMounted(() => {
@@ -254,11 +254,11 @@ onMounted(() => {
   // Store update data on
 
   // I want updatInp to access event, data.base and the container attribut
-  useListenTemp(updateTemplate);
+  useListenTempFields(updateTemplate);
 });
 
 onUnmounted(() => {
-  useUnlistenTemp(updateTemplate);
+  useUnlistenTempFields(updateTemplate);
 });
 </script>
 

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

@@ -9,9 +9,9 @@ import Text from "@components/Widget/Text.vue";
 import { v4 as uuidv4 } from "uuid";
 import {
   useCheckPluginsValidity,
-  useUpdateTemplate,
-  useListenTemp,
-  useUnlistenTemp,
+  useUpdateTemp,
+  useListenTempFields,
+  useUnlistenTempFields,
 } from "@utils/form.js";
 
 /**
@@ -94,7 +94,7 @@ function setValidity() {
 
 function updateTemplate(e) {
   if (!e.target.closest("[data-easy-form-step]")) return;
-  useUpdateTemplate(e, data.base);
+  useUpdateTemp(e, data.base);
 }
 
 const buttonSave = {
@@ -124,11 +124,11 @@ onMounted(() => {
   // Restart step one every time the component is mounted
   data.currStep = 0;
   setValidity();
-  useListenTemp(updateTemplate);
+  useListenTempFields(updateTemplate);
 });
 
 onUnmounted(() => {
-  useUnlistenTemp(updateTemplate);
+  useUnlistenTempFields(updateTemplate);
 });
 </script>
 

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

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, defineProps } from "vue";
+import { reactive, defineProps, defineEmits } from "vue";
 import { contentIndex } from "@utils/tabindex.js";
 import ButtonGroup from "@components/Widget/ButtonGroup.vue";
 import Fields from "@components/Form/Fields.vue";
@@ -177,8 +177,8 @@ const props = defineProps({
 });
 
 const multiples = reactive({
+  data: props.multiples,
   invisible: [],
-  toDelete: [],
 });
 
 const buttonAdd = {
@@ -237,13 +237,12 @@ function toggleVisible(id) {
   }
 }
 
-function delGroup(group, multName, groupName) {
-  multiples.toDelete.push({ multName: multName, groupName: groupName });
-}
+// emits
+const emits = defineEmits(["delete", "add"]);
 </script>
 
 <template>
-  <template :key="multObj" v-for="(multObj, multName, id) in props.multiples">
+  <template :key="multObj" v-for="(multObj, multName, id) in multiples.data">
     <Container
       data-is="multiple"
       class="layout-settings-multiple"
@@ -260,7 +259,7 @@ function delGroup(group, multName, groupName) {
 
       <template
         :key="groupId"
-        v-for="(group, groupName, groupId) in props.multiples[multName]"
+        v-for="(group, groupName, groupId) in multiples.data[multName]"
       >
         <Container
           data-group="multiple"
@@ -283,7 +282,7 @@ function delGroup(group, multName, groupName) {
             <Fields :setting="setting" />
           </template>
           <ButtonGroup
-            @click="delGroup(group, multName, groupName)"
+            @click="$emit('delete', multName, groupName)"
             :buttons="[setDeleteState(group)]"
           />
         </Container>

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

@@ -80,7 +80,6 @@ watch(props.data, () => {
 });
 
 function startFilter(filter = {}, value) {
-  filters.isFiltering = true;
   // Case we have new filter value, update it
   // Loop on filter.base and update the "value" key when matching filterName
   if (filter?.filterName && value !== null) {
@@ -136,10 +135,6 @@ function startFilter(filter = {}, value) {
   }
 
   emits("filter", template);
-  // Allow filtering again after 100ms
-  setTimeout(() => {
-    filters.isFiltering = false;
-  }, 100);
 }
 
 // Case we are changing a filter value
@@ -179,7 +174,7 @@ function filterMultiplesSettings(filterSettings, template) {
   // Format to filter
   for (let i = 0; i < template.length; i++) {
     const plugin = template[i];
-    if (!plugin?.multiples || Object.keys(plugin.multiples).length <= 0)
+    if (!plugin?.multiples || Object.keys(plugin?.multiples || {}).length <= 0)
       continue;
     for (const [multName, multGroups] of Object.entries(plugin.multiples)) {
       for (const [groupName, groupSettings] of Object.entries(multGroups)) {
@@ -196,6 +191,7 @@ function filterMultiplesSettings(filterSettings, template) {
       }
     }
   }
+
   // Remove multiples from template
   template.forEach((plugin) => {
     delete plugin.multiples;
@@ -236,13 +232,11 @@ function filterMultiplesSettings(filterSettings, template) {
       <Input
         v-if="filter.type === 'keyword'"
         @inp="(v) => filterData(filter, v)"
-        @change="(v) => filterData(filter, v)"
         v-bind="filter.field"
       />
       <Select
         v-if="filter.type === 'select'"
         @inp="(v) => filterData(filter, v)"
-        @change="(v) => filterData(filter, v)"
         v-bind="filter.field"
       />
     </template>

src/client/vite/src/store/global.js

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 /**
-  @name useEventStore
+  @name useBannerStore
   @description Store to share the current banner state (visible or not).
   This is useful to update components, specially fixed ones, related to the banner visibility.
 */
@@ -17,3 +17,18 @@ export const useBannerStore = defineStore("banner", () => {
 
   return { isBanner, bannerClass, setBannerVisible };
 });
+
+/**
+  @name useReadonlyStore
+  @description Store to share the current readonly state (true or false).
+  This is useful to unable or enable some inputs or actions related to the readonly state.
+*/
+export const useReadonlyStore = defineStore("readonly", () => {
+  const isReadOnly = ref(true);
+
+  async function setReadOnly(bool) {
+    isReadOnly.value = bool;
+  }
+
+  return { isReadOnly, setReadOnly };
+});

src/client/vite/src/utils/form.js

@@ -303,41 +303,41 @@ function useCheckPluginsValidity(template) {
 }
 
 /**
-  @name useListenTemp
+  @name useListenTempFields
   @description  This will add an handler to all needed event listeners to listen to input, select... fields in order to update the template settings.
   @example 
   function hander(e) {
-    // some code before calling useUpdateTemplate
+    // some code before calling useUpdateTemp
     if (!e.target.closest("[data-advanced-form-plugin]")) return;
-    useUpdateTemplate(e, data.base);
+    useUpdateTemp(e, data.base);
   }
-  @param handler - Callback function to call when event is triggered. This is usually an intermediate function that will call the useUpdateTemplate function.
+  @param handler - Callback function to call when event is triggered. This is usually an intermediate function that will call the useUpdateTemp function.
 */
-function useListenTemp(handler) {
+function useListenTempFields(handler) {
   window.addEventListener("input", handler);
   window.addEventListener("change", handler);
   window.addEventListener("click", handler);
 }
 
 /**
-  @name useUnlistenTemp
+  @name useUnlistenTempFields
   @description  This will stop listening to input, select... fields. Performance optimization and avoid duplicate calls conflicts.
   @example 
   function hander(e) {
-    // some code before calling useUpdateTemplate
+    // some code before calling useUpdateTemp
     if (!e.target.closest("[data-advanced-form-plugin]")) return;
-    useUpdateTemplate(e, data.base);
+    useUpdateTemp(e, data.base);
   }
-  @param handler - Callback function to call when event is triggered. Need to be the same function as the one passed to useListenTemp.
+  @param handler - Callback function to call when event is triggered. Need to be the same function as the one passed to useListenTempFields.
 */
-function useUnlistenTemp(handler) {
+function useUnlistenTempFields(handler) {
   window.removeEventListener("input", handler);
   window.removeEventListener("change", handler);
   window.removeEventListener("click", handler);
 }
 
 /**
-  @name useUpdateTemplate
+  @name useUpdateTemp
   @description This function will check if the target is a setting input-like field.
   In case it is, it will get the id and value for each field case, this will allow to update the template settings.
   @example 
@@ -356,7 +356,7 @@ function useUnlistenTemp(handler) {
   @param e - Event object, get it by default in the event listener.
   @param template - Template with plugins list and detail settings
 */
-function useUpdateTemplate(e, template) {
+function useUpdateTemp(e, template) {
   // Wait some ms that previous update logic is done like datepicker
   setTimeout(() => {
     let inpId, inpValue;
@@ -393,7 +393,7 @@ function useUpdateTemplate(e, template) {
   @name useUpdateTempSettings
   @description This function will loop on template settings in order to update the setting value.
   This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
-  This function needs to be call in useUpdateTemplate.
+  This function needs to be call in useUpdateTemp.
   @param template - Template with plugins list and detail settings
   @param inpId - Input id to update
   @param inpValue - Input value to update
@@ -423,7 +423,7 @@ function useUpdateTempSettings(template, inpId, inpValue, target) {
   @name useUpdateTempMultiples
   @description This function will loop on template multiples in order to update the setting value.
   This will check each plugin.multiples that can be found in the template.
-  This function needs to be call in useUpdateTemplate.
+  This function needs to be call in useUpdateTemp.
   @param template - Template with plugins list and detail settings
   @param inpId - Input id to update
   @param inpValue - Input value to update
@@ -463,13 +463,39 @@ function useUpdateTempMultiples(template, inpId, inpValue, target) {
   }
 }
 
+/**
+  @name useDeleteMultGroup
+  @description This function will delete a group of multiples in the template.
+  The way the backend is working is that to delete a group, we need to send the group name with all default values.
+  This function needs to be call from the multiples component parent with the template and the group name to delete.
+  We will update the values of the group to default values.
+  @param template - Template with plugins list and detail settings
+  @param multName - Input id to update
+  @param groupName - Input value to update
+*/
+function useDeleteMultGroup(template, multName, groupName) {}
+
+/**
+  @name useAddMultGroup
+  @description This function will add a group of multiple in the template with default values.
+  Each plugin has a key "multiples_schema" with each multiples group and their default values.
+  We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
+  @param template - Template with plugins list and detail settings
+  @param multName - Input id to update
+*/
+function useAddMultGroup(template, multName) {
+  // TODO : add to format multiples_schema
+}
+
 export {
   useForm,
   useFilter,
   isItemKeyword,
   isItemSelect,
   useCheckPluginsValidity,
-  useUpdateTemplate,
-  useListenTemp,
-  useUnlistenTemp,
+  useUpdateTemp,
+  useListenTempFields,
+  useUnlistenTempFields,
+  useDeleteMultGroup,
+  useAddMultGroup,
 };