Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

prepare multiples actions + readonly

Browse source 
* prepare utils to add or delete multiple
* remove useless event on filtering
* prepare radonly store
This commit is contained in:
Jordan Blasenhauer 2024-07-12 21:16:56 +02:00
parent f7ced2e649
commit 8eb833198f
6 changed files with 80 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/client/vite/src/components/Form/Advanced.vue
View file

@ -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>

12
src/client/vite/src/components/Form/Easy.vue
View file

@ -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>

15
src/client/vite/src/components/Forms/Group/Multiple.vue
View file

@ -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>

10
src/client/vite/src/components/Widget/Filter.vue
View file

@ -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>

17
src/client/vite/src/store/global.js
View file

@ -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 };
});

60
src/client/vite/src/utils/form.js
View file

@ -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,
};