[1081] Made show booking form field settings functional

This commit is contained in:
Thomas Saedt 2021-05-30 13:27:39 +02:00
parent ea2cdeff70
commit 1bcbf9f71b
5 changed files with 219 additions and 56 deletions

View file

@ -1444,6 +1444,24 @@ class Backend_api extends EA_Controller {
$settings = json_decode($this->input->post('settings', FALSE), TRUE);
//check if phone number settings are valid
$phone_number_required = false;
$phone_number_shown = false;
foreach ($settings as $setting)
{
if ($setting['name'] == "require_phone_number"){
$phone_number_required = $setting['value'];
}
if ($setting['name'] == "show_phone_number"){
$phone_number_shown = $setting['value'];
}
}
if ($phone_number_required && !$phone_number_shown){//we have settings that break the appointments field.
throw new Exception("You cannot hide the phone number in the booking form while it's also required!");
}
$this->settings_model->save_settings($settings);
}
else

View file

@ -168,6 +168,70 @@
</span>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<!-- CLIENT FORM TAB -->
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE) ? '' : 'd-none' ?>
<div class="tab-pane <?= $hidden ?>" id="client-form">
<form>
<fieldset>
<legend class="border-bottom mb-4">
<?= lang('client_form') ?>
<?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 mr-2"></i>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<div class="wrapper row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label for="show-phone-number"><?= lang('phone_number') ?></label>
<button id="show-phone-number" data-field="show_phone_number" type="button" class="hide-toggle form-control form-sub-button">
<div class="hide-toggle-visible hidden"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></div>
<div class="hide-toggle-hidden"><img src="<?= base_url('assets/img/eye-hidden.svg') ?>"/> <?= lang('hidden') ?></div>
</button>
</div>
<div class="form-group">
<label for="show-address"><?= lang('address') ?></label>
<button id="show-address" data-field="show_address" type="button" class="hide-toggle form-control form-sub-button">
<div class="hide-toggle-visible hidden"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></div>
<div class="hide-toggle-hidden"><img src="<?= base_url('assets/img/eye-hidden.svg') ?>"/> <?= lang('hidden') ?></div>
</button>
</div>
<div class="form-group">
<label for="show-city"><?= lang('city') ?></label>
<button id="show-city" data-field="show_city" type="button" class="hide-toggle form-control form-sub-button">
<div class="hide-toggle-visible hidden"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></div>
<div class="hide-toggle-hidden"><img src="<?= base_url('assets/img/eye-hidden.svg') ?>"/> <?= lang('hidden') ?></div>
</button>
</div>
<div class="form-group">
<label for="show-zip-code"><?= lang('zip_code') ?></label>
<button id="show-zip-code" data-field="show_zip_code" type="button" class="hide-toggle form-control form-sub-button">
<div class="hide-toggle-visible hidden"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></div>
<div class="hide-toggle-hidden"><img src="<?= base_url('assets/img/eye-hidden.svg') ?>"/> <?= lang('hidden') ?></div>
</button>
</div>
<div class="form-group">
<label for="show-notes"><?= lang('notes') ?></label>
<button id="show-notes" data-field="show_notes" type="button" class="hide-toggle form-control form-sub-button">
<div class="hide-toggle-visible hidden"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></div>
<div class="hide-toggle-hidden"><img src="<?= base_url('assets/img/eye-hidden.svg') ?>"/> <?= lang('hidden') ?></div>
</button>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customer-notifications">
@ -214,61 +278,6 @@
</div>
</div>
</div>
</fieldset>
</form>
</div>
<!-- CLIENT FORM TAB -->
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE) ? '' : 'd-none' ?>
<div class="tab-pane <?= $hidden ?>" id="client-form">
<form>
<fieldset>
<legend class="border-bottom mb-4">
<?= lang('client_form') ?>
<?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 mr-2"></i>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<div class="wrapper row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label for="show-phone-number"><?= lang('phone_number') ?></label>
<button id="show-phone-number" data-field="show_phone_number" type="button" class="form-control form-sub-button"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></button>
</div>
<div class="form-group">
<label for="show-address"><?= lang('address') ?></label>
<button id="show-address" data-field="show_address" type="button" class="form-control form-sub-button"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></button>
</div>
<div class="form-group">
<label for="show-city"><?= lang('city') ?></label>
<button id="show-city" data-field="show_city" type="button" class="form-control form-sub-button"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></button>
</div>
<div class="form-group">
<label for="show-zip-code"><?= lang('zip_code') ?></label>
<button id="show-zip-code" data-field="show_zip_code" type="button" class="form-control form-sub-button"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></button>
</div>
<div class="form-group">
<label for="show-notes"><?= lang('notes') ?></label>
<button id="show-notes" data-field="show_notes" type="button" class="form-control form-sub-button"><img src="<?= base_url('assets/img/eye.svg') ?>"/> <?= lang('visible') ?></button>
</div>
</div>
<!-- <div class="col-12 col-sm-6">
<div class="form-group">
<label for="company-name"><?= lang('company_name') ?> *</label>
<input id="company-name" data-field="company_name" class="required form-control">
<span class="form-text text-muted">
<?= lang('company_name_hint') ?>
</span>
</div>
</div> -->
</div>
</fieldset>

View file

@ -285,7 +285,16 @@ body legend {
}
.form-sub-button img{
margin-top: -.3rem;
margin-top: -.25rem;
}
.hidden{
visibility: hidden;
height: 0;
}
.hide-toggle div{
display: flex;
}
@media (min-width: 768px) {

View file

@ -101,6 +101,26 @@ window.BackendSettings = window.BackendSettings || {};
if (setting.name === 'privacy_policy_content') {
$('#privacy-policy-content').trumbowyg('html', setting.value);
}
if (setting.name === 'show_phone_number' && setting.value === "1") {
$('#show-phone-number').find("div").toggleClass("hidden");
}
if (setting.name === 'show_address' && setting.value === "1") {
$('#show-address').find("div").toggleClass("hidden");
}
if (setting.name === 'show_city' && setting.value === "1") {
$('#show-city').find("div").toggleClass("hidden");
}
if (setting.name === 'show_zip_code' && setting.value === "1") {
$('#show-zip-code').find("div").toggleClass("hidden");
}
if (setting.name === 'show_notes' && setting.value === "1") {
$('#show-notes').find("div").toggleClass("hidden");
}
});
exports.wp = new WorkingPlan();
@ -187,6 +207,63 @@ window.BackendSettings = window.BackendSettings || {};
settings.save(data);
});
/**
* Event: Visible/Hidden button "Click"
*
* Change the state of the Visible/Hidden button
*/
$('.hide-toggle').on('click', function () {
let $input = $(this);
$input.find("div").toggleClass("hidden");
});
/**
* set a Visible/Hidden toggle button to a certain state
*
* @argument $element for which jquery element to set the state for
* @argument isVisible a boolean which is true if the button should display 'visible' and false when the button should display 'hidden'
*
*/
function setShowToggleValue($element, isVisible){
if (getShowToggleValue($element) !== isVisible){
$element.find("div").toggleClass("hidden");
}
}
/**
* get the Visible/Hidden toggle button
*
* @argument $element for which jquery element to set the state for
*
* @return the state of the button. True for visible, false for hidden.
*/
function getShowToggleValue($element){
let visiblePartArray = $element.find(".hide-toggle-visible");
return !visiblePartArray.hasClass("hidden");
}
/**
* Event: require phone number switch "Click"
*
* make sure that our phone number is visible when it is required.
*/
$('#show-phone-number').on('click', function () {
if (!getShowToggleValue($(this))){//if button is set to hidden
$('#require-phone-number').prop('checked', false);
}
});
/**
* 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);
}
});
/**
* Event: Username "Focusout"
*

View file

@ -63,6 +63,29 @@
});
};
/**
* Get the state of a visible/hidden toggle button
*
* This method uses the DOM elements of the backend/settings page, so it can't be used in another page.
*
* @argument the element jquery of a button object that is a visible/hidden toggle.
*
* @return '0' when the button shows 'invisible' and '1' when the button shows 'visible'. Will always return '0' on an error.
*/
function getToggleButtonState($element) {
let visiblePartArray = $element.find(".hide-toggle-visible");
let invisiblePartArray = $element.find(".hide-toggle-hidden");
if (!(visiblePartArray.length === 0 || invisiblePartArray.length === 0)) {
if (visiblePartArray.hasClass("hidden")){//our button is currently invisible
return '0';//invisible
}else{//our button is currently visible
return '1';//visible
}
}else{
return '0';//invisible
}
}
/**
* Prepare the system settings array.
*
@ -102,6 +125,33 @@
value: $('#display-any-provider').prop('checked') ? '1' : '0'
});
//Client Form Tab
settings.push({
name: 'show_phone_number',
value: getToggleButtonState($('#show-phone-number'))
});
settings.push({
name: 'show_address',
value: getToggleButtonState($('#show-address'))
});
settings.push({
name: 'show_city',
value: getToggleButtonState($('#show-city'))
});
settings.push({
name: 'show_zip_code',
value: getToggleButtonState($('#show-zip-code'))
});
settings.push({
name: 'show_notes',
value: getToggleButtonState($('#show-notes'))
});
// Business Logic Tab