Skip to content

Commit

Permalink
Apply suggested UI changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdrienClairembault
AdrienClairembault committed Dec 18, 2024
1 parent cbe2315 commit e62ab09
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 50 deletions.
21 changes: 20 additions & 1 deletion js/modules/Forms/EditorController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export class GlpiFormEditorController
$(document)
.on(
'show.bs.dropdown',
'[data-glpi-form-editor-visibility-editor-dropdown]',
'[data-glpi-form-editor-visibility-dropdown]',
(e) => this.#renderVisibilityEditor(
$(e.target)
.parent()
Expand Down Expand Up @@ -431,6 +431,12 @@ export class GlpiFormEditorController
);
break;

case "show-visibility-dropdown":
this.#showVisibilityDropdown(
target.closest('[data-glpi-form-editor-block],[data-glpi-form-editor-section-details]')
);
break;

// Set the conditional visibility of a section/question/comment
case "set-visiblity-value": {
const input = $(`#${target.attr('for')}`);
Expand Down Expand Up @@ -1877,6 +1883,19 @@ export class GlpiFormEditorController
this.#setActiveItem(form_details);
}

#showVisibilityDropdown(container) {
container
.find('[data-glpi-form-editor-visibility-dropdown-container]')
.removeClass('d-none')
;

const dropdown = container
.find('[data-glpi-form-editor-visibility-dropdown-container]')
.find('[data-glpi-form-editor-visibility-dropdown]')
;
bootstrap.Dropdown.getOrCreateInstance(dropdown[0]).show();
}

#setVisibilityValue(container, value) {
// Show/hide badges in the container
container.find('[data-glpi-editor-visibility-badge]')
Expand Down
23 changes: 15 additions & 8 deletions templates/pages/admin/form/conditional_visibility_dropdown.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,33 @@
{% set question_strategy = item.getConfiguredVisibilityStrategy() %}
{% endif %}

{# Spacing div (ms-auto must be applied to an item that is always visible) #}
<div class="ms-auto"></div>

<div
class="btn-group ms-auto"
data-glpi-form-editor-visibility-dropdown-container

{% set hide = question_strategy == enum('Glpi\\Form\\QuestionVisibilityStrategy').ALWAYS_VISIBLE %}
class="btn-group {{ hide ? 'd-none' : '' }}"

{# May be displayed on section, comment and question #}
{% if item is instanceof("Glpi\\Form\\Question") %}
{# We can't use instanceOf here as `item` may be null #}
{% if type == "Glpi\\Form\\Question" %}
data-glpi-form-editor-question-extra-details
{% elseif item is instanceof("Glpi\\Form\\Section") %}
{% elseif type == "Glpi\\Form\\Section" %}
data-glpi-form-editor-section-extra-details
{% elseif item is instanceof("Glpi\\Form\\Comment") %}
{% elseif type == "Glpi\\Form\\Comment" %}
data-glpi-form-editor-comment-extra-details
{% endif %}
>
<button
title="{{ __('Configure visibility') }}"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
class="dropdown-toggle btn btn-outline-secondary btn-pill btn-sm px-2"
class="dropdown-toggle btn btn-outline-secondary btn-sm px-2"
data-bs-placement="top"
type="button"
data-glpi-form-editor-visibility-editor-dropdown
data-glpi-form-editor-visibility-dropdown
>
{% for strategy in enum_cases('Glpi\\Form\\QuestionVisibilityStrategy') %}
{% set is_visible = question_strategy == strategy %}
Expand All @@ -80,7 +87,7 @@
{{ __('Conditional visibility') }}
</h3>

<div class="btn-group w-100" role="group">
<div class="btn-group" role="group">
{# Display strategy picker #}
{% for strategy in enum_cases('Glpi\\Form\\QuestionVisibilityStrategy') %}
{% set rand = random() %}
Expand Down Expand Up @@ -110,7 +117,7 @@
{% set is_visible = question_strategy.showEditor() %}
{% set visibility_class = is_visible ? '' : 'd-none' %}
<div
class="{{ visibility_class }}"
class="{{ visibility_class }} mt-4"
data-glpi-form-editor-visibility-editor
{% for strategy in enum_cases('Glpi\\Form\\QuestionVisibilityStrategy') %}
{% if strategy.showEditor() %}
Expand Down
50 changes: 36 additions & 14 deletions templates/pages/admin/form/form_comment.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
{# Visibility dropdown #}
{{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', {
'item': comment,
'type': "Glpi\\Form\\Comment",
}, with_context = false) }}

{# Duplicate comment #}
Expand All @@ -98,6 +99,41 @@
data-glpi-form-editor-on-click="duplicate-comment"
data-glpi-form-editor-comment-extra-details
></i>

{# Delete comment #}
<i
role="button"
class="ti ti-trash ms-3 cursor-pointer"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{{ __("Delete") }}"
aria-label="{{ __("Delete") }}"
data-glpi-form-editor-on-click="delete-comment"
data-glpi-form-editor-comment-extra-details
></i>

{# Extra actions #}
<div class="dropdown ms-3 cursor-pointer d-flex align-items-center">
<i
class="ti ti-dots-vertical show"
data-bs-toggle="dropdown"
aria-expanded="false"
role="button"
title="{{ __('More actions') }}"
></i>
<ul class="dropdown-menu" data-bs-popper="none">
<li>
<button
type="button"
class="dropdown-item"
data-glpi-form-editor-on-click="show-visibility-dropdown"
>
<i class="ti ti-eye-cog me-2"></i>
<span>{{ __("Configure visiblity") }}</span>
</button>
</li>
</ul>
</div>
</div>

{# Display common fields #}
Expand All @@ -124,20 +160,6 @@
})
) }}
</div>

<div
class="d-flex flex-row-reverse align-items-center"
data-glpi-form-editor-comment-extra-details
>
<button
class="btn btn-ghost-danger px-2"
type="button"
data-glpi-form-editor-on-click="delete-comment"
>
<i class="ti ti-trash me-2"></i>
{{ __("Delete") }}
</button>
</div>
</div>

{# Common hidden data #}
Expand Down
48 changes: 37 additions & 11 deletions templates/pages/admin/form/form_question.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@
{# Visibility dropdown #}
{{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', {
'item': question,
'type': "Glpi\\Form\\Question",
}, with_context = false) }}

{# Duplicate question #}
Expand All @@ -119,8 +120,42 @@
title="{{ __("Duplicate question") }}"
data-glpi-form-editor-on-click="duplicate-question"
data-glpi-form-editor-question-extra-details
></i>

{# Delete question #}
<i
role="button"
class="ti ti-trash ms-3 cursor-pointer"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{{ __("Delete") }}"
aria-label="{{ __("Delete") }}"
data-glpi-form-editor-on-click="delete-question"
data-glpi-form-editor-question-extra-details
></i>

{# Extra actions #}
<div class="dropdown ms-3 cursor-pointer d-flex align-items-center">
<i
class="ti ti-dots-vertical show"
data-bs-toggle="dropdown"
aria-expanded="false"
role="button"
title="{{ __('More actions') }}"
></i>
<ul class="dropdown-menu" data-bs-popper="none">
<li>
<button
type="button"
class="dropdown-item"
data-glpi-form-editor-on-click="show-visibility-dropdown"
>
<i class="ti ti-eye-cog me-2"></i>
<span>{{ __("Configure visiblity") }}</span>
</button>
</li>
</ul>
</div>
</div>

{# Render the specific question type #}
Expand Down Expand Up @@ -215,11 +250,11 @@
) }}

{# Render the specific question options #}
<div class="ms-2" data-glpi-form-editor-specific-question-options data-glpi-form-editor-question-extra-details>
<div class="ms-auto" data-glpi-form-editor-specific-question-options data-glpi-form-editor-question-extra-details>
{{ question_type.renderAdministrationOptionsTemplate(question)|raw }}
</div>

<label class="form-check form-switch ms-auto mb-0 me-2 cursor-pointer">
<label class="form-check form-switch ms-2 mb-0 cursor-pointer">
<input type="hidden" value="0" name="is_mandatory">
<input
class="form-check-input"
Expand All @@ -231,15 +266,6 @@
>
<span class="form-check-label">{{ __("Mandatory") }}</span>
</label>

<button
class="btn btn-ghost-danger px-2"
type="button"
data-glpi-form-editor-on-click="delete-question"
>
<i class="ti ti-trash me-2"></i>
{{ __("Delete") }}
</button>
</div>
</div>

Expand Down
16 changes: 14 additions & 2 deletions templates/pages/admin/form/form_section.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
{# Visibility dropdown #}
{{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', {
'item': section,
'type': "Glpi\\Form\\Section",
}, with_context = false) }}

{# Collapse section #}
Expand All @@ -108,13 +109,13 @@
></i>

{# Extra actions #}
<div class="dropdown ms-1 cursor-pointer d-flex align-items-center">
<div class="dropdown ms-3 cursor-pointer d-flex align-items-center">
<i
class="ti ti-dots-vertical show"
data-bs-toggle="dropdown"
aria-expanded="false"
role="button"
title="{{ __('Section actions') }}"
title="{{ __('More actions') }}"
></i>
<ul class="dropdown-menu" data-bs-popper="none">
<li>
Expand Down Expand Up @@ -161,6 +162,17 @@
<span>{{ __("Delete section") }}</span>
</button>
</li>

<li>
<button
type="button"
class="dropdown-item"
data-glpi-form-editor-on-click="show-visibility-dropdown"
>
<i class="ti ti-eye-cog me-2"></i>
<span>{{ __("Configure visiblity") }}</span>
</button>
</li>
</ul>
</div>
</div>
Expand Down
17 changes: 11 additions & 6 deletions tests/cypress/e2e/form/editor/conditions.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,11 @@ function checkThatVisibilityOptionsAreHidden() {
cy.findByRole('label', {'name': "Hidden if..."}).should('not.exist');
}

function initVisibilityConfiguration() {
cy.findByRole('button', {'name': 'More actions'}).click();
cy.findByRole('button', {'name': 'Configure visiblity'}).click();
}

function openVisibilityOptions() {
cy.findByTitle('Configure visibility').click();
}
Expand Down Expand Up @@ -193,7 +198,7 @@ describe ('Conditions', () => {
// Select 'Visible if...' (editor should be displayed)
getAndFocusQuestion('My first question').within(() => {
checkThatVisibilityOptionsAreHidden();
openVisibilityOptions();
initVisibilityConfiguration();
checkThatVisibilityOptionsAreVisible();
checkThatSelectedVisibilityOptionIs('Always visible');
checkThatConditionEditorIsNotDisplayed();
Expand Down Expand Up @@ -241,7 +246,7 @@ describe ('Conditions', () => {
});
saveAndReload();
getAndFocusQuestion('My first question').within(() => {
openVisibilityOptions();
initVisibilityConfiguration();
checkThatSelectedVisibilityOptionIs('Always visible');
checkThatConditionEditorIsNotDisplayed();
closeVisibilityOptions();
Expand All @@ -256,7 +261,7 @@ describe ('Conditions', () => {
saveAndReload();

getAndFocusQuestion('My third question').within(() => {
openVisibilityOptions();
initVisibilityConfiguration();
setVisibilityOption('Visible if...');
fillCondition(0, null, 'My second question', 'Is not equal to', 'I love GLPI');
addNewEmptyCondition();
Expand Down Expand Up @@ -312,7 +317,7 @@ describe ('Conditions', () => {
addQuestion('My third question');

getAndFocusQuestion('My third question').within(() => {
openVisibilityOptions();
initVisibilityConfiguration();
setVisibilityOption('Visible if...');
fillCondition(0, null, 'My second question', 'Is not equal to', 'I love GLPI');
addNewEmptyCondition();
Expand Down Expand Up @@ -367,7 +372,7 @@ describe ('Conditions', () => {
saveAndReload();

getAndFocusComment('My first comment').within(() => {
openVisibilityOptions();
initVisibilityConfiguration();
setVisibilityOption('Visible if...');
fillCondition(0, null, 'My second question', 'Contains', 'I love GLPI');
addNewEmptyCondition();
Expand Down Expand Up @@ -422,7 +427,7 @@ describe ('Conditions', () => {
saveAndReload();

getAndFocusSection('My second section').within(() => {
openVisibilityOptions();
initVisibilityConfiguration();
setVisibilityOption('Visible if...');
fillCondition(0, null, 'My second question', 'Do not contains', 'I love GLPI');
addNewEmptyCondition();
Expand Down
Loading

0 comments on commit e62ab09

Please sign in to comment.