Refactored the general settings page functionality and structure
This commit is contained in:
Alex Tselegidis
parent
84df2423c2
commit
42ff670928
5 changed files with 299 additions and 229 deletions
|
|
@ -54,15 +54,14 @@ class General_settings extends EA_Controller {
|
|||
|
||||
$user_id = session('user_id');
|
||||
|
||||
$role_slug = session('role_slug');
|
||||
script_vars([
|
||||
'general_settings' => $this->settings_model->get(),
|
||||
]);
|
||||
|
||||
html_vars([
|
||||
'page_title' => lang('settings'),
|
||||
'active_menu' => PRIV_SYSTEM_SETTINGS,
|
||||
'user_display_name' => $this->accounts->get_user_display_name($user_id),
|
||||
'timezones' => $this->timezones->to_array(),
|
||||
'privileges' => $this->roles_model->get_permissions_by_slug($role_slug),
|
||||
'system_settings' => $this->settings_model->get(),
|
||||
]);
|
||||
|
||||
$this->load->view('pages/general_settings', html_vars());
|
||||
|
|
@ -80,7 +79,7 @@ class General_settings extends EA_Controller {
|
|||
throw new Exception('You do not have the required permissions for this task.');
|
||||
}
|
||||
|
||||
$settings = json_decode(request('settings', FALSE), TRUE);
|
||||
$settings = request('general_settings', FALSE);
|
||||
|
||||
// Check if phone number settings are valid.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,162 +1,152 @@
|
|||
<?php
|
||||
/**
|
||||
* @var array $system_settings
|
||||
* @var array $user_settings
|
||||
* @var string $timezones
|
||||
* @var array $privileges
|
||||
*/
|
||||
?>
|
||||
|
||||
<?php extend('layouts/backend_layout') ?>
|
||||
|
||||
<?php section('content') ?>
|
||||
|
||||
<div id="general-page" class="container-fluid backend-page">
|
||||
<div id="general">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend class="border-bottom mb-4">
|
||||
<?= lang('General_settings') ?>
|
||||
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
|
||||
<button type="button" class="save-settings btn btn-primary btn-sm mb-2"
|
||||
data-tippy-content="<?= lang('save') ?>">
|
||||
<i class="fas fa-check-square me-2"></i>
|
||||
<?= lang('save') ?>
|
||||
</button>
|
||||
<?php endif ?>
|
||||
</legend>
|
||||
<div id="general-settings-page" class="container backend-page">
|
||||
<div id="general-settings">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 offset-lg-2">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
|
||||
<?= lang('general_settings') ?>
|
||||
|
||||
<div class="wrapper row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="company-name">
|
||||
<?= lang('company_name') ?>
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input id="company-name" data-field="company_name" class="required form-control">
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('company_name_hint') ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
|
||||
<button type="button" id="save-settings" class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-check-square me-2"></i>
|
||||
<?= lang('save') ?>
|
||||
</button>
|
||||
<?php endif ?>
|
||||
</legend>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="company-email">
|
||||
<?= lang('company_email') ?>
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input id="company-email" data-field="company_email" class="required form-control">
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('company_email_hint') ?>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="company-name">
|
||||
<?= lang('company_name') ?>
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input id="company-name" data-field="company_name" class="required form-control">
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('company_name_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="company-link">
|
||||
<?= lang('company_link') ?>
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input id="company-link" data-field="company_link" class="required form-control">
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('company_link_hint') ?>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="company-email">
|
||||
<?= lang('company_email') ?>
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input id="company-email" data-field="company_email" class="required form-control">
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('company_email_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="company-link">
|
||||
<?= lang('company_link') ?>
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input id="company-link" data-field="company_link" class="required form-control">
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('company_link_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="date-format">
|
||||
<?= lang('date_format') ?>
|
||||
</label>
|
||||
<select class="form-control" id="date-format" data-field="date_format">
|
||||
<option value="DMY">DMY</option>
|
||||
<option value="MDY">MDY</option>
|
||||
<option value="YMD">YMD</option>
|
||||
</select>
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('date_format_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="time-format">
|
||||
<?= lang('time_format') ?>
|
||||
</label>
|
||||
<select class="form-control" id="time-format" data-field="time_format">
|
||||
<option value="<?= TIME_FORMAT_REGULAR ?>">H:MM AM/PM</option>
|
||||
<option value="<?= TIME_FORMAT_MILITARY ?>">HH:MM</option>
|
||||
</select>
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('time_format_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="first-weekday">
|
||||
<?= lang('first_weekday') ?>
|
||||
</label>
|
||||
<select class="form-control" id="first-weekday" data-field="first_weekday">
|
||||
<option value="sunday"><?= lang('sunday') ?></option>
|
||||
<option value="monday"><?= lang('monday') ?></option>
|
||||
<option value="tuesday"><?= lang('tuesday') ?></option>
|
||||
<option value="wednesday"><?= lang('wednesday') ?></option>
|
||||
<option value="thursday"><?= lang('thursday') ?></option>
|
||||
<option value="friday"><?= lang('friday') ?></option>
|
||||
<option value="saturday"><?= lang('saturday') ?></option>
|
||||
</select>
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('first_weekday_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="date-format">
|
||||
<?= lang('date_format') ?>
|
||||
</label>
|
||||
<select class="form-control" id="date-format" data-field="date_format">
|
||||
<option value="DMY">DMY</option>
|
||||
<option value="MDY">MDY</option>
|
||||
<option value="YMD">YMD</option>
|
||||
</select>
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('date_format_hint') ?>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="google-analytics-code">
|
||||
Google Analytics ID</label>
|
||||
<input id="google-analytics-code" placeholder="UA-XXXXXXXX-XX or G-XXXXXXXXXX"
|
||||
data-field="google_analytics_code" class="form-control">
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('google_analytics_code_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="time-format">
|
||||
<?= lang('time_format') ?>
|
||||
</label>
|
||||
<select class="form-control" id="time-format" data-field="time_format">
|
||||
<option value="<?= TIME_FORMAT_REGULAR ?>">H:MM AM/PM</option>
|
||||
<option value="<?= TIME_FORMAT_MILITARY ?>">HH:MM</option>
|
||||
</select>
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('time_format_hint') ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="first-weekday">
|
||||
<?= lang('first_weekday') ?>
|
||||
</label>
|
||||
<select class="form-control" id="first-weekday" data-field="first_weekday">
|
||||
<option value="sunday"><?= lang('sunday') ?></option>
|
||||
<option value="monday"><?= lang('monday') ?></option>
|
||||
<option value="tuesday"><?= lang('tuesday') ?></option>
|
||||
<option value="wednesday"><?= lang('wednesday') ?></option>
|
||||
<option value="thursday"><?= lang('thursday') ?></option>
|
||||
<option value="friday"><?= lang('friday') ?></option>
|
||||
<option value="saturday"><?= lang('saturday') ?></option>
|
||||
</select>
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('first_weekday_hint') ?>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="api-token">API Token</label>
|
||||
<input id="api-token" data-field="api_token" class="form-control">
|
||||
<div class="form-text text-muted">
|
||||
<small>
|
||||
<?= lang('api_token_hint') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="google-analytics-code">
|
||||
Google Analytics ID</label>
|
||||
<input id="google-analytics-code" placeholder="UA-XXXXXXXX-XX or G-XXXXXXXXXX"
|
||||
data-field="google_analytics_code" class="form-control">
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('google_analytics_code_hint') ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="api-token">API Token</label>
|
||||
<input id="api-token" data-field="api_token" class="form-control">
|
||||
<div class="form-text text-muted">
|
||||
<?= lang('api_token_hint') ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php section('content') ?>
|
||||
|
||||
<?php section('scripts') ?>
|
||||
|
||||
<script src="<?= asset_url('assets/js/pages/backend_settings_general_helper.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_settings_general.js') ?>"></script>
|
||||
<script>
|
||||
var GlobalVariables = {
|
||||
csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
|
||||
baseUrl: <?= json_encode(config('base_url')) ?>,
|
||||
dateFormat: <?= json_encode(setting('date_format')) ?>,
|
||||
timeFormat: <?= json_encode(setting('time_format')) ?>,
|
||||
timezones: <?= json_encode($timezones) ?>,
|
||||
settings: {
|
||||
system: <?= json_encode($system_settings) ?>,
|
||||
},
|
||||
user: {
|
||||
id: <?= session('user_id') ?>,
|
||||
email: <?= json_encode(session('user_email')) ?>,
|
||||
timezone: <?= json_encode(session('timezone')) ?>,
|
||||
role_slug: <?= json_encode(session('role_slug')) ?>,
|
||||
privileges: <?= json_encode($privileges) ?>
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
BackendSettingsGeneral.initialize(true);
|
||||
});
|
||||
</script>
|
||||
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/http/general_settings_http_client.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/general_settings.js') ?>"></script>
|
||||
|
||||
<?php section('scripts') ?>
|
||||
|
|
|
|||
34
assets/js/http/general_settings_http_client.js
Normal file
34
assets/js/http/general_settings_http_client.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Open Source Web Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
App.Http.GeneralSettings = (function () {
|
||||
/**
|
||||
* Save general settings.
|
||||
*
|
||||
* @param {Object} generalSettings
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
function save(generalSettings) {
|
||||
const url = App.Utils.Url.siteUrl('general_settings/save');
|
||||
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
general_settings: generalSettings
|
||||
};
|
||||
|
||||
return $.post(url, data);
|
||||
}
|
||||
|
||||
return {
|
||||
save
|
||||
};
|
||||
})();
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Open Source Web Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.0.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
window.BackendSettingsGeneral = window.BackendSettingsGeneral || {};
|
||||
|
||||
/**
|
||||
* Backend Settings
|
||||
*
|
||||
* Contains the functionality of the backend settings page. Can either work for system or user settings,
|
||||
* but the actions allowed to the user are restricted to his role (only admin has full privileges).
|
||||
*
|
||||
* @module BackendSettingsGeneral
|
||||
*/
|
||||
(function (exports) {
|
||||
'use strict';
|
||||
|
||||
// Constants
|
||||
exports.SETTINGS_SYSTEM = 'SETTINGS_SYSTEM';
|
||||
|
||||
/**
|
||||
* Tab settings object.
|
||||
*
|
||||
* @type {Object}
|
||||
*/
|
||||
var settings = {};
|
||||
|
||||
/**
|
||||
* Initialize Page
|
||||
*
|
||||
* @param {bool} defaultEventHandlers Optional (true), determines whether to bind the default event handlers.
|
||||
*/
|
||||
exports.initialize = function (defaultEventHandlers) {
|
||||
defaultEventHandlers = defaultEventHandlers || true;
|
||||
|
||||
// Apply setting values from database.
|
||||
GlobalVariables.settings.system.forEach(function (setting) {
|
||||
$('input[data-field="' + setting.name + '"]').val(setting.value);
|
||||
$('select[data-field="' + setting.name + '"]').val(setting.value);
|
||||
});
|
||||
|
||||
// Set default settings helper.
|
||||
settings = new SystemSettingsGeneralHelper();
|
||||
|
||||
if (defaultEventHandlers) {
|
||||
bindEventHandlers();
|
||||
}
|
||||
|
||||
Backend.placeFooterToBottom();
|
||||
};
|
||||
|
||||
/**
|
||||
* Bind the backend/settings default event handlers.
|
||||
*
|
||||
* This method depends on the backend/settings html, so do not use this method on a different page.
|
||||
*/
|
||||
function bindEventHandlers() {
|
||||
/**
|
||||
* Event: Save Settings Button "Click"
|
||||
*
|
||||
* Store the setting changes into the database.
|
||||
*/
|
||||
$('.save-settings').on('click', function () {
|
||||
var data = settings.get();
|
||||
settings.save(data);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: require phone number switch "Click"
|
||||
*
|
||||
* make sure that our phone number is visible when it is required.
|
||||
*/
|
||||
$('#require-phone-number').on('click', function () {
|
||||
if ($(this).prop('checked')) {
|
||||
setShowToggleValue($('#show-phone-number'), true);
|
||||
}
|
||||
});
|
||||
}
|
||||
})(window.BackendSettingsGeneral);
|
||||
133
assets/js/pages/general_settings.js
Normal file
133
assets/js/pages/general_settings.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Open Source Web Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.0.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Account
|
||||
*
|
||||
* Contains the functionality of the general settings page.
|
||||
*/
|
||||
App.Pages.GeneralSettings = (function () {
|
||||
const $saveSettings = $('#save-settings');
|
||||
|
||||
/**
|
||||
* Bind the backend/settings default event handlers.
|
||||
*
|
||||
* This method depends on the backend/settings html, so do not use this method on a different page.
|
||||
*/
|
||||
function bindEventHandlers() {
|
||||
/**
|
||||
* Event: Save Settings Button "Click"
|
||||
*
|
||||
* Store the setting changes into the database.
|
||||
*/
|
||||
$('.save-settings').on('click', function () {
|
||||
var data = settings.get();
|
||||
settings.save(data);
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: require phone number switch "Click"
|
||||
*
|
||||
* make sure that our phone number is visible when it is required.
|
||||
*/
|
||||
$('#require-phone-number').on('click', function () {
|
||||
if ($(this).prop('checked')) {
|
||||
setShowToggleValue($('#show-phone-number'), true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the form has invalid values.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isInvalid() {
|
||||
try {
|
||||
$('#general-settings .is-invalid').removeClass('is-invalid');
|
||||
|
||||
// Validate required fields.
|
||||
|
||||
let missingRequiredFields = false;
|
||||
|
||||
$('#general-settings .required').each(function (index, requiredField) {
|
||||
const $requiredField = $(requiredField);
|
||||
|
||||
if (!$requiredField.val()) {
|
||||
$requiredField.addClass('is-invalid');
|
||||
missingRequiredFields = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (missingRequiredFields) {
|
||||
throw new Error(App.Lang.fields_are_required);
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
Backend.displayNotification(error.message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function serialize(generalSettings) {
|
||||
generalSettings.forEach(function (generalSetting) {
|
||||
$('input[data-field="' + generalSetting.name + '"]').val(generalSetting.value);
|
||||
$('select[data-field="' + generalSetting.name + '"]').val(generalSetting.value);
|
||||
});
|
||||
}
|
||||
|
||||
function deserialize() {
|
||||
const generalSettings = [];
|
||||
|
||||
$('[data-field]').each(function (index, field) {
|
||||
const $field = $(field);
|
||||
|
||||
generalSettings.push({
|
||||
name: $field.data('field'),
|
||||
value: $field.val()
|
||||
});
|
||||
});
|
||||
|
||||
return generalSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the account information.
|
||||
*/
|
||||
function onSaveSettingsClick() {
|
||||
if (isInvalid()) {
|
||||
Backend.displayNotification(App.Lang.settings_are_invalid);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const generalSettings = deserialize();
|
||||
|
||||
App.Http.GeneralSettings.save(generalSettings).done(function () {
|
||||
Backend.displayNotification(App.Lang.settings_saved);
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
const generalSettings = App.Vars.general_settings;
|
||||
|
||||
serialize(generalSettings);
|
||||
|
||||
$saveSettings.on('click', onSaveSettingsClick);
|
||||
|
||||
Backend.placeFooterToBottom();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
return {};
|
||||
})();
|
||||
Loading…
Reference in a new issue