handle settings type multiple (fetch, add, remove) on services

This commit is contained in:
BlasenhauerJ 2022-11-23 17:05:57 +01:00
parent 8e5dda5209
commit e9dfb59f31
4 changed files with 262 additions and 149 deletions

View File

@ -843,14 +843,6 @@ h6 {
grid-column: auto;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.float-right {
float: right;
}
@ -931,16 +923,16 @@ h6 {
margin-right: 0.625rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
@ -1014,6 +1006,10 @@ h6 {
margin-left: 1.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
@ -1038,10 +1034,6 @@ h6 {
margin-top: 0.125rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-0 {
margin-left: 0px;
}
@ -1182,10 +1174,6 @@ h6 {
height: 25rem;
}
.h-7 {
height: 1.75rem;
}
.h-1\/3 {
height: 33.333333%;
}
@ -1206,10 +1194,6 @@ h6 {
max-height: 7.5rem;
}
.max-h-16 {
max-height: 4rem;
}
.max-h-80 {
max-height: 20rem;
}
@ -1326,18 +1310,10 @@ h6 {
width: 20rem;
}
.w-7 {
width: 1.75rem;
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[750px\] {
min-width: 750px;
}
.min-w-\[900px\] {
min-width: 900px;
}
@ -1444,11 +1420,6 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-12 {
--tw-translate-y: 3rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1489,11 +1460,6 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-19 {
--tw-translate-y: 4.75rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1700,6 +1666,16 @@ h6 {
border-top-right-radius: 0.25rem;
}
.rounded-b-lg {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.rounded-b {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
@ -1710,16 +1686,6 @@ h6 {
border-top-right-radius: 1rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.rounded-b-lg {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.border-2 {
border-width: 2px;
}
@ -1869,10 +1835,6 @@ h6 {
background-color: rgb(64 187 107 / 0.8);
}
.bg-opacity-0 {
--tw-bg-opacity: 0;
}
.bg-none {
background-image: none;
}
@ -2099,6 +2061,11 @@ h6 {
padding-right: 0.75rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
@ -2129,6 +2096,11 @@ h6 {
padding-right: 0.125rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-1\.4 {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
@ -2144,31 +2116,6 @@ h6 {
padding-bottom: 1.25rem;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-0\.6 {
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.pb-0 {
padding-bottom: 0px;
}
@ -2310,10 +2257,6 @@ h6 {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
@ -2342,22 +2285,14 @@ h6 {
line-height: 1;
}
.leading-tight {
line-height: 1.25;
}
.leading-3 {
line-height: 0.75rem;
}
.leading-4 {
line-height: 1rem;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-tight {
line-height: 1.25;
}
.tracking-tight-rem {
letter-spacing: -0.025rem;
}
@ -2967,6 +2902,16 @@ h6 {
border-color: rgb(58 65 111 / var(--tw-border-opacity));
}
.dark .dark\:border-slate-850 {
--tw-border-opacity: 1;
border-color: rgb(17 28 68 / var(--tw-border-opacity));
}
.dark .dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(73 80 87 / var(--tw-border-opacity));
}
.dark .dark\:bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(5 17 57 / var(--tw-bg-opacity));
@ -3186,11 +3131,6 @@ h6 {
grid-column-start: 5;
}
.sm\:my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.sm\:mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
@ -3423,11 +3363,6 @@ h6 {
margin-right: 2rem;
}
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:mt-0 {
margin-top: 0px;
}

View File

@ -236,12 +236,32 @@ class ServiceModal {
class Multiple {
constructor(prefix) {
this.prefix = prefix;
this.container = document.querySelector(`[${this.prefix}-modal-form]`);
this.container = document.querySelector("main");
this.modalForm = document.querySelector(`[${this.prefix}-modal-form]`);
this.init();
}
init() {
this.container.addEventListener("click", (e) => {
//edit button
try {
if (
e.target.closest("button").getAttribute("services-action") === "edit"
) {
//remove all multiples
this.removeMultiples();
//set multiple service values
const servicesSettings = e.target
.closest("[services-service]")
.querySelector("[services-settings]")
.getAttribute("value");
const obj = JSON.parse(servicesSettings);
this.updateModalMultiples(obj);
}
} catch (err) {}
});
this.modalForm.addEventListener("click", (e) => {
//ADD BTN
try {
if (
@ -252,37 +272,70 @@ class Multiple {
const serviceName = btn.getAttribute(`${this.prefix}-multiple-add`);
//get all multiple groups
const multipleEls = document.querySelectorAll(
`[${this.prefix}-settings-multiple="${serviceName}"]`
`[${this.prefix}-settings-multiple*="${serviceName}"]`
);
const count = Number(
multipleEls[1]
.getAttribute(`${this.prefix}-settings-multiple`)
.substring(
multipleEls[1].getAttribute(`${this.prefix}-settings-multiple`)
.length - 1
)
);
const multipleCount = multipleEls.length;
//the default (schema) group is the last group
const schema = multipleEls[multipleEls.length - 1];
const schema = document.querySelector(
`[${this.prefix}-settings-multiple="${serviceName}_SCHEMA"]`
);
//clone it and change name by total - 1 (schema is hidden)
const clone = schema.cloneNode(true);
const cloneTitles = clone.querySelectorAll("h5");
const cloneInps = clone.querySelectorAll("input");
const cloneSelects = clone.querySelectorAll("select");
console.log(clone.getAttribute("services-settings-multiple"));
const name = clone
.getAttribute("services-settings-multiple")
.replace(`SCHEMA`, `${count + 1}`);
clone.setAttribute("services-settings-multiple", name);
clone.classList.remove("hidden");
clone.classList.add("grid");
cloneTitles.forEach((title) => {
title.textContent = `${title.textContent} #${multipleCount}`;
});
try {
const cloneContainer = clone.querySelectorAll(
"[setting-container]"
);
cloneContainer.forEach((ctnr) => {
const newName = ctnr
.getAttribute("setting-container")
.replace("SCHEMA", `${count + 1}`);
ctnr.setAttribute("setting-container", newName);
});
} catch (err) {}
cloneInps.forEach((inp) => {
const currID = inp.getAttribute("id");
const currName = inp.getAttribute("name");
inp.setAttribute("id", `${currID}_${multipleCount}`);
inp.setAttribute("name", `${currName}_${multipleCount}`);
});
try {
const cloneTitles = clone.querySelectorAll("h5");
cloneTitles.forEach((title) => {
title.textContent = `${title.textContent} #${count + 1}`;
});
} catch (err) {}
cloneSelects.forEach((select) => {
const currID = select.getAttribute("id");
const currName = select.getAttribute("name");
select.setAttribute("id", `${currID}_${multipleCount}`);
select.setAttribute("name", `${currName}_${multipleCount}`);
});
try {
const cloneInps = clone.querySelectorAll("input");
cloneInps.forEach((inp) => {
const currID = inp.getAttribute("id");
const currName = inp.getAttribute("name");
inp.setAttribute("id", `${currID}_${count + 1}`);
inp.setAttribute("name", `${currName}_${count + 1}`);
});
} catch (err) {}
try {
const cloneSelects = clone.querySelectorAll("select");
cloneSelects.forEach((select) => {
const currID = select.getAttribute("id");
const currName = select.getAttribute("name");
select.setAttribute("id", `${currID}_${count + 1}`);
select.setAttribute("name", `${currName}_${count + 1}`);
});
} catch (err) {}
//insert new group before first one
const firstMultiple = multipleEls[0];
firstMultiple.insertAdjacentElement("beforebegin", clone);
schema.insertAdjacentElement("afterend", clone);
}
} catch (err) {}
@ -293,23 +346,146 @@ class Multiple {
.closest("button")
.hasAttribute(`${this.prefix}-multiple-delete`)
) {
//remove the first element (last created)
//unless it is the schema (length 1)
const btn = e.target.closest("button");
const serviceName = btn.getAttribute(
`${this.prefix}-multiple-delete`
const multContainer = e.target.closest(
"[services-settings-multiple]"
);
const multipleEls = document.querySelectorAll(
`[${this.prefix}-settings-multiple="${serviceName}"]`
);
if (multipleEls.length === 1) return;
const firstMultiple = multipleEls[0];
firstMultiple.remove();
multContainer.remove();
}
//remove last child
} catch (err) {}
});
}
removeMultiples() {
const multiPlugins = document.querySelectorAll(
`[${this.prefix}-settings-multiple]`
);
multiPlugins.forEach((multiGrp) => {
if (
!multiGrp.getAttribute("services-settings-multiple").includes("SCHEMA")
)
multiGrp.remove();
});
}
updateModalMultiples(settings) {
//filter to get only multiples of services
const multipleSettings = {};
for (const [key, data] of Object.entries(settings)) {
if (!isNaN(key[key.length - 1]) && key[key.length - 2] === "_") {
multipleSettings[key] = {
value: data["value"],
method: data["method"],
};
}
}
//add them to the right plugin
for (const [key, data] of Object.entries(multipleSettings)) {
const num = key[key.length - 1];
const getSchemaKey = key.substring(0, key.length - 2);
const getSchemaSetting = document.querySelector(
`[setting-container="${getSchemaKey}_SCHEMA"]`
);
const cloneSchemaSetting = getSchemaSetting.cloneNode(true);
//replace info
cloneSchemaSetting.setAttribute("setting-container", key);
const title = cloneSchemaSetting.querySelector("h5");
title.textContent = `${title.textContent} #${num}`;
//replace input info
try {
const inp = cloneSchemaSetting.querySelector("input");
inp.setAttribute("id", `${key}`);
inp.setAttribute("name", `${key}`);
} catch (err) {}
//or select
try {
const select = cloneSchemaSetting.querySelector("select");
select.setAttribute("id", `${key}`);
select.setAttribute("name", `${key}`);
} catch (err) {}
getSchemaSetting.insertAdjacentElement("beforebegin", cloneSchemaSetting);
}
//get multiple for all plugins
const multiPlugins = document.querySelectorAll(
`[${this.prefix}-settings-multiple]`
);
multiPlugins.forEach((defaultGrp) => {
//get group number for the multiples settings
const multipleEls = defaultGrp.querySelectorAll("[setting-container]");
const multNum = new Set();
multipleEls.forEach((setting) => {
const name = setting.getAttribute("setting-container");
if (!isNaN(name[name.length - 1])) multNum.add(name[name.length - 1]);
});
//create a different group for each number
multNum.forEach((num) => {
const newGroup = defaultGrp.cloneNode(true);
newGroup.classList.add("grid");
newGroup.classList.remove("hidden");
//change groupe name
const currName = newGroup.getAttribute(
`${this.prefix}-settings-multiple`
);
newGroup.setAttribute(
`${this.prefix}-settings-multiple`,
currName.replace("SCHEMA", num)
);
//remove elements that not fit num unless schema if no custom value
const newGroupSettings = newGroup.querySelectorAll(
"[setting-container]"
);
newGroupSettings.forEach((setting) => {
//remove logic
const settingName = setting.getAttribute("setting-container");
if (
(!settingName.endsWith(num) && !settingName.endsWith("SCHEMA")) ||
(settingName.endsWith("SCHEMA") &&
document.querySelector(`${settingName.replace("SCHEMA", num)}`))
) {
return setting.remove();
}
//else update info by num
setting.setAttribute(
"setting-container",
setting.getAttribute("setting-container").replace(`SCHEMA`, num)
);
const title = setting.querySelector("h5");
if (!title.textContent.includes(`#${num}`))
title.textContent = `${title.textContent} #${num}`;
//replace input info
try {
const inp = setting.querySelector("input");
inp.setAttribute("id", setting.getAttribute("setting-container"));
inp.setAttribute("name", setting.getAttribute("setting-container"));
} catch (err) {}
//or select
try {
const select = setting.querySelector("select");
select.setAttribute(
"id",
setting.getAttribute("setting-container")
);
select.setAttribute(
"name",
setting.getAttribute("setting-container")
);
} catch (err) {}
});
defaultGrp.insertAdjacentElement("afterend", newGroup);
});
});
//remove custom multiple from schema
multiPlugins.forEach((defaultGrp) => {
const multipleEls = defaultGrp.querySelectorAll("[setting-container]");
multipleEls.forEach((setting) => {
const settingName = setting.getAttribute("setting-container");
if (!settingName.endsWith("SCHEMA")) setting.remove();
});
});
}
}
const setCheckbox = new Checkbox("[services-modal-form]");

View File

@ -907,7 +907,6 @@ class FormatValue {
init() {
this.inputs.forEach((inp) => {
console.log(inp);
inp.setAttribute("value", inp.getAttribute("value").trim());
});
}

View File

@ -5,6 +5,7 @@
{% set plugins = config["CONFIG"].get_plugins() %}
<!-- plugin item -->
{% for plugin in plugins %}
<div
{{current_endpoint}}-item="{{plugin['id']}}"
id="{{plugin['id']}}"
@ -215,17 +216,14 @@
<button {{current_endpoint}}-multiple-add="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
Add
</button>
<button {{current_endpoint}}-multiple-delete="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
Remove
</button>
</div>
<div {{current_endpoint}}-settings-multiple="{{plugin['name']}}" class="w-full grid grid-cols-12">
<div {{current_endpoint}}-settings-multiple="{{plugin['name']}}_SCHEMA" class="hidden w-full mb-8 grid-cols-12 border dark:border-gray-700">
{% for setting, value in plugin["settings"].items() %}
{% if current_endpoint
== "global-config" and value['context'] == "global" and value['multiple'] or current_endpoint ==
"services" and value['context'] == "multisite" and value['multiple'] %}
<div
<div setting-container="{{setting}}_SCHEMA"
class="
mx-0 sm:mx-4 my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
id="form-edit-{{current_endpoint}}-{{ value["id"] }}">
@ -394,6 +392,11 @@
<!--end invalid feedback-->
</div>
{% endif %} {% endfor %}
<div class="col-span-12 flex justify-center my-4">
<button {{current_endpoint}}-multiple-delete="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
Remove
</button>
</div>
<!-- end plugin settings -->
</div>
{%endif %}