chg: [element:settings] Added support of multi-select fields

pull/73/head
Sami Mokaddem 2021-10-20 12:21:13 +02:00
parent 918bf39169
commit ab7db2c348
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
3 changed files with 32 additions and 14 deletions

View File

@ -63,16 +63,26 @@
$input = (function ($settingName, $setting, $appView) {
$settingId = str_replace('.', '_', $settingName);
$setting['value'] = $setting['value'] ?? '';
$options = [];
if ($setting['type'] == 'select') {
$options[] = $appView->Bootstrap->genNode('option', ['value' => '-1', 'data-is-empty-option' => '1'], __('Select an option'));
if ($setting['type'] == 'multi-select') {
$setting['value'] = json_decode(($setting['value']));
}
$options = [];
$options[] = $appView->Bootstrap->genNode('option', ['value' => '-1', 'data-is-empty-option' => '1'], __('Select an option'));
foreach ($setting['options'] as $key => $value) {
$options[] = $appView->Bootstrap->genNode('option', [
$optionParam = [
'class' => [],
'value' => $key,
($setting['value'] == $key ? 'selected' : '') => $setting['value'] == $value ? 'selected' : '',
], h($value));
];
if ($setting['type'] == 'multi-select') {
if (in_array($key, $setting['value'])) {
$optionParam['selected'] = 'selected';
}
} else {
if ($setting['value'] == $key) {
$optionParam['selected'] = 'selected';
}
}
$options[] = $appView->Bootstrap->genNode('option', $optionParam, h($value));
}
$options = implode('', $options);
return $appView->Bootstrap->genNode('select', [
@ -83,7 +93,7 @@
(!empty($setting['error']) ? "border-{$appView->get('variantFromSeverity')[$setting['severity']]}" : ''),
(!empty($setting['error']) ? $appView->get('variantFromSeverity')[$setting['severity']] : ''),
],
($setting['type'] == 'multi-select' ? 'multiple' : '') => '',
($setting['type'] == 'multi-select' ? 'multiple' : '') => ($setting['type'] == 'multi-select' ? 'multiple' : ''),
'id' => $settingId,
'data-setting-name' => $settingName,
'placeholder' => $setting['default'] ?? '',

View File

@ -152,7 +152,7 @@ function focusSearchResults(evt) {
}
}
function saveUserSetting(statusNode, settingName, settingValue) {
function saveSetting(statusNode, settingName, settingValue) {
const url = window.saveSettingURL
const data = {
name: settingName,

View File

@ -18,7 +18,7 @@ $(document).ready(function () {
placement: 'right',
})
}
$('select.custom-select[multiple]').select2()
$('select.form-select[multiple]').select2()
$('.settings-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$('[data-bs-spy="scroll"]').trigger('scroll.bs.scrollspy')
@ -30,7 +30,7 @@ $(document).ready(function () {
const $inputGroup = $(this).closest('.setting-group')
const settingName = $(this).data('setting-name')
const settingValue = $(this).is(':checked') ? 1 : 0
saveSetting($inputGroup[0], $input, settingName, settingValue)
saveAndUpdateSetting($inputGroup[0], $input, settingName, settingValue)
} else {
handleSettingValueChange($(this))
}
@ -40,7 +40,7 @@ $(document).ready(function () {
const $input = $(this).closest('.input-group').find('input, select')
const settingName = $input.data('setting-name')
const settingValue = $input.val()
saveSetting(this, $input, settingName, settingValue)
saveAndUpdateSetting(this, $input, settingName, settingValue)
})
$('.tab-content .setting-group .btn-reset-setting').click(function () {
const $btn = $(this)
@ -59,8 +59,11 @@ $(document).ready(function () {
redirectToSetting(referencedID)
})
function saveSetting(statusNode, $input, settingName, settingValue) {
saveUserSetting(statusNode, settingName, settingValue).then((result) => {
function saveAndUpdateSetting(statusNode, $input, settingName, settingValue) {
if ($input.is('select') && $input.prop('multiple')) {
settingValue = JSON.stringify(settingValue)
}
saveSetting(statusNode, settingName, settingValue).then((result) => {
window.settingsFlattened[settingName] = result.data
if ($input.attr('type') == 'checkbox') {
$input.prop('checked', result.data.value == true)
@ -73,7 +76,12 @@ function saveSetting(statusNode, $input, settingName, settingValue) {
function handleSettingValueChange($input) {
let oldValue = window.settingsFlattened[$input.data('setting-name')].value
const newValue = ($input.attr('type') == 'checkbox' ? $input.is(':checked') : $input.val())
let newValue
if ($input.attr('type') == 'checkbox') {
newValue = $input.is(':checked')
} else {
newValue = $input.val()
}
if ($input.attr('type') == 'checkbox') {
oldValue = oldValue == true
}