Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2025-11-04 20:36:03 +01:00
Code Issues Packages Projects Releases Activity

Reworked ACL/CRUDP picker to use more sophisticated JSON syntax

Browse Source
This commit is contained in:
Djamil Legato
2020-01-28 17:09:49 -08:00
parent 5a7e88462a
commit 6a8245b818
4 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
themes/grav/app/forms/fields/acl-picker.js
View File

@@ -6,7 +6,8 @@ body.on('change', '[data-acl_picker] select', (event) => {
const target = $(event.currentTarget);
const value = target.val();
const item = target.closest('.permissions-item');
const inputs = item.find('input[name]');
const inputs = item.find('input[type="checkbox"], input[type="radio"]');
const hidden = item.find('input[type="hidden"][name]');
const wrapper = target.closest('[data-acl_picker_id]');
const type = item.data('fieldType');
@@ -23,8 +24,8 @@ body.on('change', '[data-acl_picker] select', (event) => {
const rand = Math.round(Math.random() * 500);
const name = crudpContainer.data('fieldName');
const id = input.prop('id').split('_').slice(0, -1).join('_') + `_${value}+${rand}`;
const key = input.data('crudpKey');
input.prop('name', name.replace(/(.*)(\[[^\]]*\])/, `$1[${value}][${key}]`));
// const key = input.data('crudpKey');
hidden.prop('name', name.replace(/(.*)(\[[^\]]*\])/, `$1[${value}]`));
input.prop('id', id);
input.next('label').prop('for', id);
});
@@ -33,6 +34,16 @@ body.on('change', '[data-acl_picker] select', (event) => {
wrapper.find('.permissions-item .button.add-item')[!value ? 'addClass' : 'removeClass']('disabled').prop('disabled', !value ? 'disabled' : null);
});
body.on('input', 'input[data-crudp-key]', (event) => {
const target = $(event.currentTarget);
const container = target.closest('.crudp-container');
const hidden = container.find('input[type="hidden"][name]');
const key = target.data('crudpKey');
const json = JSON.parse(hidden.val() || '{}');
json[key] = target.val();
hidden.val(JSON.stringify(json));
});
body.on('click', '[data-acl_picker] .remove-item', (event) => {
const target = $(event.currentTarget);
const container = target.closest('.permissions-item');

6
themes/grav/app/forms/fields/indeterminate.js
View File

@@ -1,3 +1,4 @@
import $ from 'jquery';
document.addEventListener('click', (event) => {
if (document.querySelector('#pages-filters')) {
@@ -42,8 +43,9 @@ document.addEventListener('click', (event) => {
break;
}
const input = new CustomEvent('input', { detail: { target: checkbox }});
document.dispatchEvent(input);
// const input = new CustomEvent('input', { detail: { target: checkbox }});
// document.dispatchEvent(input);
$(checkbox).trigger('input');
}
});

30
themes/grav/js/admin.min.js vendored
View File

File diff suppressed because one or more lines are too long

25
themes/grav/templates/forms/fields/acl_picker/acl_picker.html.twig
View File

@@ -64,12 +64,14 @@
<input type="checkbox"
id="{{ field.name ~ '_' ~ key ~ '_' }}"
data-crudp-key="{{ key }}"
name="{{ (scope ~ field.name)|fieldName ~ '[][' ~ key ~ ']' }}"
{# name="{{ (scope ~ field.name)|fieldName ~ '[][' ~ key ~ ']' }}"#}
indeterminte="false" value=" ">
<label for="{{ field.name ~ '_' ~ key ~ '_' }}">{{ key }}</label>
</span>
</div>
{% endfor %}
<input type="hidden" name="{{ (scope ~ '_json.' ~ field.name)|fieldName ~ '[][' ~ key ~ ']' }}">
</div>
{% endif %}
<button class="button add-item"><i class="fa fa-plus"></i></button>
@@ -109,18 +111,19 @@
{% for crudp_key, button in crudp %}
<div>
{% set crudp_value = value[key][crudp_key] %}
<span class="checkboxes indeterminate toggleable {{ classes[crudp_value]}} hint--top"
data-_check-status="{{ crudp_value == '' ? 2 : crudp_value|number }}"
data-hint="{{ button.title }}">
<input type="checkbox"
id="{{ field.name ~ '_' ~ crudp_key ~ '_' }}"
data-crudp-key="{{ crudp_key }}"
name="{{ (scope ~ field.name)|fieldName ~ '[' ~ key ~ '][' ~ crudp_key ~ ']' }}"
indeterminate="{{ ['', 1] in crudp_value ? 'true' : 'false' }}" value="{{ crudp_value == '' ? 2 : crudp_value|number }}" {% if crudp_value == 1 %}checked{% endif %}>
<label for="{{ field.name ~ '_' ~ crudp_key ~ '_' }}">{{ crudp_key }}</label>
</span>
<span class="checkboxes indeterminate toggleable {{ classes[crudp_value]}} hint--top"
data-_check-status="{{ crudp_value == '' ? 2 : crudp_value|number }}"
data-hint="{{ button.title }}">
<input type="checkbox"
id="{{ field.name ~ '_' ~ crudp_key ~ '_' }}"
data-crudp-key="{{ crudp_key }}"
{#name="{{ (scope ~ field.name)|fieldName ~ '[' ~ key ~ '][' ~ crudp_key ~ ']' }}"#}
indeterminate="{{ ['', 1] in crudp_value ? 'true' : 'false' }}" value="{{ crudp_value == '' ? 2 : crudp_value|number }}" {% if crudp_value == 1 %}checked{% endif %}>
<label for="{{ field.name ~ '_' ~ crudp_key ~ '_' }}">{{ crudp_key }}</label>
</span>
</div>
{% endfor %}
<input type="hidden" name="{{ (scope ~ '_json.' ~ field.name)|fieldName ~ '[' ~ key ~ ']' }}">
</div>
{% endif %}
<button class="button add-item"><i class="fa fa-plus"></i></button>