diff --git a/css/includes/_base.scss b/css/includes/_base.scss index e29070979db..a17161e4e11 100644 --- a/css/includes/_base.scss +++ b/css/includes/_base.scss @@ -467,6 +467,16 @@ body pre { } } +// Missing class from tabler, probably need to update it ? +.btn-check:checked+.btn { + color : var(--tblr-btn-hover-color) !important; + background-color: var(--tblr-btn-active-bg) !important; +} + +.w-fit-content { + width: fit-content; +} + .accordion-button:hover, .accordion-button:focus { z-index: unset; } diff --git a/css/includes/components/form/_form-editor.scss b/css/includes/components/form/_form-editor.scss index 6d3a4fb830c..97f7b168f4c 100644 --- a/css/includes/components/form/_form-editor.scss +++ b/css/includes/components/form/_form-editor.scss @@ -290,3 +290,39 @@ } } } + +.logic-operator-selector .select2-selection { + border: 0 !important; + background-color: var(--tblr-pink-lt) !important; + + // Fix some border conflicts with tabler/select2 + border-top-right-radius: var(--tblr-border-radius) !important; + border-bottom-right-radius: var(--tblr-border-radius) !important; +} + +.question-selector .select2-selection { + border: 0 !important; + background-color: var(--tblr-indigo-lt) !important; + + // Fix some border conflicts with tabler/select2 + border-top-right-radius: var(--tblr-border-radius) !important; + border-bottom-right-radius: var(--tblr-border-radius) !important; +} + +.value-operator-selector .select2-selection { + border: 0 !important; + background-color: var(--tblr-teal-lt) !important; + + // Fix some border conflicts with tabler/select2 + border-top-right-radius: var(--tblr-border-radius) !important; + border-bottom-right-radius: var(--tblr-border-radius) !important; +} + +.value-selector { + border: 0 !important; + background-color: var(--tblr-yellow-lt) !important; +} + +.visibility-dropdown-card { + width: 600px; +} diff --git a/dependency_injection/services.php b/dependency_injection/services.php index f64a5372906..abad264e6e3 100644 --- a/dependency_injection/services.php +++ b/dependency_injection/services.php @@ -59,6 +59,10 @@ $services->load('Glpi\Kernel\\Listener\\', $projectDir . '/src/Glpi/Kernel/Listener'); $services->load('Glpi\DependencyInjection\\', $projectDir . '/src/Glpi/DependencyInjection'); $services->load('Glpi\Progress\\', $projectDir . '/src/Glpi/Progress')->exclude($projectDir . '/src/Glpi/Progress/SessionProgress.php'); + $services->load( + 'Glpi\Form\ConditionalVisiblity\\', + $projectDir . '/src/Glpi/Form/ConditionalVisiblity/*Manager.php' + ); /** * Override Symfony's logger. diff --git a/install/migrations/update_10.0.x_to_11.0.0/form.php b/install/migrations/update_10.0.x_to_11.0.0/form.php index a436abbb2e6..022dade3ec0 100644 --- a/install/migrations/update_10.0.x_to_11.0.0/form.php +++ b/install/migrations/update_10.0.x_to_11.0.0/form.php @@ -103,6 +103,8 @@ `name` varchar(255) NOT NULL DEFAULT '', `description` longtext, `rank` int NOT NULL DEFAULT '0', + `visibility_strategy` varchar(30) NOT NULL DEFAULT '', + `conditions` JSON NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `uuid` (`uuid`), KEY `name` (`name`), @@ -124,6 +126,8 @@ `description` longtext, `default_value` text COMMENT 'JSON - The default value type may not be the same for all questions type', `extra_data` text COMMENT 'JSON - Extra configuration field(s) depending on the questions type', + `visibility_strategy` varchar(30) NOT NULL DEFAULT '', + `conditions` JSON NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `uuid` (`uuid`), KEY `name` (`name`), @@ -142,6 +146,8 @@ `name` varchar(255) NOT NULL DEFAULT '', `description` longtext, `rank` int NOT NULL DEFAULT '0', + `visibility_strategy` varchar(30) NOT NULL DEFAULT '', + `conditions` JSON NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `uuid` (`uuid`), KEY `name` (`name`), diff --git a/install/mysql/glpi-empty.sql b/install/mysql/glpi-empty.sql index d1584ff9b11..fc2de2768ae 100644 --- a/install/mysql/glpi-empty.sql +++ b/install/mysql/glpi-empty.sql @@ -9504,6 +9504,8 @@ CREATE TABLE `glpi_forms_sections` ( `name` varchar(255) NOT NULL DEFAULT '', `description` longtext, `rank` int NOT NULL DEFAULT '0', + `visibility_strategy` varchar(30) NOT NULL DEFAULT '', + `conditions` JSON NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `uuid` (`uuid`), KEY `name` (`name`), @@ -9523,6 +9525,8 @@ CREATE TABLE `glpi_forms_questions` ( `description` longtext, `default_value` text COMMENT 'JSON - The default value type may not be the same for all questions type', `extra_data` text COMMENT 'JSON - Extra configuration field(s) depending on the questions type', + `visibility_strategy` varchar(30) NOT NULL DEFAULT '', + `conditions` JSON NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `uuid` (`uuid`), KEY `name` (`name`), @@ -9539,6 +9543,8 @@ CREATE TABLE `glpi_forms_comments` ( `name` varchar(255) NOT NULL DEFAULT '', `description` longtext, `rank` int NOT NULL DEFAULT '0', + `visibility_strategy` varchar(30) NOT NULL DEFAULT '', + `conditions` JSON NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `uuid` (`uuid`), KEY `name` (`name`), diff --git a/js/modules/Forms/EditorController.js b/js/modules/Forms/EditorController.js index ffe038e61cd..670a02feae2 100644 --- a/js/modules/Forms/EditorController.js +++ b/js/modules/Forms/EditorController.js @@ -117,6 +117,13 @@ export class GlpiFormEditorController .find("[data-glpi-form-editor-form-details-name]")[0] .select(); } + + this.computeState(); + + // Some radios wont be displayed correclty as checked as they share the same name. + // This is fixed by re-checking them after the state has been computed. + // Not sure if there is a better solution for this, it doesn't feel great. + this.#refreshCheckedInputs(); } /** @@ -139,13 +146,13 @@ export class GlpiFormEditorController () => this.#handleBackendUpdateResponse() ); + // Handle clicks inside the form editor, remove the active item $(document) .on( 'click', '[data-glpi-form-editor]', () => { - this.#setFormDetailsAsActive(); $('.simulate-focus').removeClass('simulate-focus'); } ); @@ -164,6 +171,23 @@ export class GlpiFormEditorController (e, original_event) => this.#handleTinyMCEClick(original_event) ); + + // Handle visiblity editor dropdowns + // The dropdown content will be re-rendered each time it is opened. + // This ensure the selectable data is always up to date (i.e. the + // question selector has up to date questions names, contains all newly + // added questions and do not include deleted questions). + $(document) + .on( + 'show.bs.dropdown', + '[data-glpi-form-editor-visibility-dropdown]', + (e) => this.#renderVisibilityEditor( + $(e.target) + .parent() + .find('[data-glpi-form-editor-visibility-editor]') + ), + ); + // Compute state before submitting the form $(this.#target).on('submit', (event) => { try { @@ -399,6 +423,7 @@ export class GlpiFormEditorController `), ); break; + // Delete the target comment case "delete-comment": this.#deleteComment( @@ -406,6 +431,51 @@ 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')}`); + this.#setVisibilityValue( + target.closest('[data-glpi-form-editor-block],[data-glpi-form-editor-section-details]'), + input.val() + ); + break; + } + + // Re-render the visibility editor + case "render-visibility-editor": { + this.#renderVisibilityEditor( + $(target).closest( + '[data-glpi-form-editor-visibility-editor]' + ) + ); + break; + } + + // Delete the selected conditon and re-render the visibility editor + case "delete-condition": { + this.#deleteCondition( + $(target).closest('[data-glpi-form-editor-visibility-editor]'), + $(target) + .closest('[data-glpi-form-editor-condition]') + .data('glpi-form-editor-condition-index') + ); + break; + } + + // Add a new empty condition and re-render the visibility editor + case "add-condition": { + this.#addNewEmptyCondition( + $(target).closest('[data-glpi-form-editor-visibility-editor]') + ); + break; + } + // Unknown action default: throw new Error(`Unknown action: ${action}`); @@ -960,6 +1030,24 @@ export class GlpiFormEditorController ); } + // When an input/label are coupled using id/for properties, we must update + // them to make sure they are unique too. + copy.find('input[id]').each(function() { + const id = $(this).attr('id'); + const labels = copy.find(`label[for=${id}]`); + if (labels.length == 0) { + return; + } + + const rand = getUUID(); + const new_id = `${id}_${rand}`; + + $(this).attr('id', new_id); + labels.each(function() { + $(this).attr('for', new_id); + }); + }); + // Insert the new question switch (action) { case "append": @@ -1794,4 +1882,162 @@ export class GlpiFormEditorController const form_details = $(this.#target).find("[data-glpi-form-editor-form-details]"); 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]') + .removeClass('d-flex') + .addClass('d-none') + ; + container.find(`[data-glpi-editor-visibility-badge=${value}]`) + .removeClass('d-none') + .addClass('d-flex') + ; + + // Show/hide the condition editor + const should_displayed_editor = (container + .find(`[data-glpi-form-editor-visibility-editor-display-for-${value}]`) + .length + ) > 0; + container.find(`[data-glpi-form-editor-visibility-editor]`) + .toggleClass('d-none', !should_displayed_editor) + ; + } + + /** + * To render the condition editor, the unsaved state must be computed + * and sent to the server. + * + * This method compute the available questions of the forms, the defined + * conditions and the current selected item. + */ + #getFormStateForVisibilityEditor(container) { + this.computeState(); + + const form_data = { + 'questions': [], + 'conditions': [], + 'selected_item_uuid': this.#getItemInput( + container.closest('[data-glpi-form-editor-block], [data-glpi-form-editor-section-details]'), + 'uuid', + ), + // For now, the type is hardcoded to 'question' but we will support + // conditions on section and comments too + 'selected_item_type': container.closest( + '[data-glpi-form-editor-condition-type]' + ).data('glpi-form-editor-condition-type'), + }; + + // Extract all questions + $(this.#target) + .find("[data-glpi-form-editor-question]") + .each((_index, question) => { + form_data.questions.push({ + 'uuid': this.#getItemInput($(question), "uuid"), + 'name': this.#getItemInput($(question), "name"), + 'type': this.#getItemInput($(question), "type"), + }); + }) + ; + + // Extract already defined conditions for the current question + container.find('[data-glpi-form-editor-condition]') + .each((_index, condition) => { + const condition_data = {}; + + // Try to find a selected logic operator + const condition_logic_operator = $(condition).find( + '[data-glpi-form-editor-condition-logic-operator]' + ); + if (condition_logic_operator.length > 0) { + condition_data.logic_operator = condition_logic_operator.val(); + } + + // Try to find a selected item + const condition_item = $(condition).find( + '[data-glpi-form-editor-condition-item]' + ); + if (condition_item.length > 0) { + condition_data.item = condition_item.val(); + } + + // Try to find a selected value operator + const condition_value_operator = $(condition).find( + '[data-glpi-form-editor-condition-value-operator]' + ); + if (condition_value_operator.length > 0) { + condition_data.value_operator = condition_value_operator.val(); + } + + // Try to find a selected value + const condition_value = $(condition).find( + '[data-glpi-form-editor-condition-value]' + ); + if (condition_value.length > 0) { + condition_data.value = condition_value.val(); + } + + form_data.conditions.push(condition_data); + }) + ; + + return form_data; + } + + async #renderVisibilityEditor(container, form_data = null) { + if (form_data === null) { + form_data = this.#getFormStateForVisibilityEditor(container); + } + + const content = await $.post('/ajax/Form/ConditionalVisibilityEditor', { + form_data: form_data, + }); + container.html(content); + } + + #addNewEmptyCondition(container) { + const form_data = this.#getFormStateForVisibilityEditor(container); + + // Add new empty condition + form_data.conditions.push({ + 'item': '', + }); + + this.#renderVisibilityEditor(container, form_data); + } + + #deleteCondition(container, condition_index) { + const form_data = this.#getFormStateForVisibilityEditor(container); + + // Remove the condition from the list + form_data.conditions = form_data.conditions.filter((_condition, index) => { + return index != condition_index; + }); + + this.#renderVisibilityEditor(container, form_data); + } + + #refreshCheckedInputs() { + $(this.#target) + .find('[data-glpi-editor-refresh-checked]') + .removeProp('checked') + ; + $(this.#target) + .find('[data-glpi-editor-refresh-checked]') + .prop('checked', true) + ; + } } diff --git a/phpunit/functional/Glpi/Form/ConditionalVisibility/EditorManagerTest.php b/phpunit/functional/Glpi/Form/ConditionalVisibility/EditorManagerTest.php new file mode 100644 index 00000000000..80e5b2da653 --- /dev/null +++ b/phpunit/functional/Glpi/Form/ConditionalVisibility/EditorManagerTest.php @@ -0,0 +1,257 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace tests\units\Glpi\Form\ConditionalVisiblity; + +use Glpi\Form\ConditionalVisiblity\ConditionData; +use Glpi\Form\ConditionalVisiblity\EditorManager; +use Glpi\Form\ConditionalVisiblity\FormData; +use Glpi\Form\ConditionalVisiblity\LogicOperator; +use Glpi\Form\ConditionalVisiblity\ValueOperator; +use Glpi\Form\QuestionType\QuestionTypeFile; +use Glpi\Form\QuestionType\QuestionTypeShortText; +use GLPITestCase; + +final class EditorManagerTest extends GLPITestCase +{ + private function getManagerWithData(FormData $form_data): EditorManager + { + $editor_manager = new EditorManager(); + $editor_manager->setFormData($form_data); + return $editor_manager; + } + + public function testDefaultConditionIsAdded(): void + { + // Arrange: create an editor manager with no conditions + $form_data = new FormData([]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the defined conditions + $conditions = $editor_manager->getDefinedConditions(); + + // Assert: the defined conditions should contain a single default condition + $this->assertEquals($conditions, [ + new ConditionData( + item_uuid: '', + item_type: '', + value_operator: null, + value: null, + ) + ]); + } + + public function testConditionsAreFound(): void + { + // Arrange: create an editor manager with two conditions + $form_data = new FormData([ + 'conditions' => [ + [ + 'item' => 'question-1', + 'value_operator' => ValueOperator::EQUALS->value, + 'value' => 'foo', + ], + [ + 'logic_operator' => LogicOperator::OR->value, + 'item' => 'question-2', + 'value_operator' => ValueOperator::EQUALS->value, + 'value' => 'bar', + ], + ], + ]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the defined conditions + $conditions = $editor_manager->getDefinedConditions(); + + // Assert: the two defined conditions should be found + $this->assertEquals($conditions, [ + new ConditionData( + item_uuid: 1, + item_type: 'question', + value_operator: ValueOperator::EQUALS->value, + value: 'foo', + ), + new ConditionData( + item_uuid: 2, + item_type: 'question', + logic_operator: LogicOperator::OR->value, + value_operator: ValueOperator::EQUALS->value, + value: 'bar', + ), + ]); + } + + public function testConditionsHaveDefaultLogicOperators(): void + { + // Arrange: create an editor manager with one conditon without logic operator + $form_data = new FormData([ + 'conditions' => [ + [ + 'item' => 'question-1', + 'value_operator' => ValueOperator::EQUALS->value, + 'value' => 'foo', + ], + ], + ]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the defined condition + $conditions = $editor_manager->getDefinedConditions(); + $condition = array_pop($conditions); + + // Assert: the fallback "AND" operator must be found + $this->assertEquals(LogicOperator::AND, $condition->getLogicOperator()); + } + + public function testOnlyValidQuestionsAreReturnedForDropdowns(): void + { + // Arrange: create an editor manager with three questions + $form_data = new FormData([ + 'questions' => [ + [ + 'uuid' => 1, + 'name' => 'Question 1', + 'type' => QuestionTypeShortText::class, + ], + [ + 'uuid' => 2, + 'name' => 'Question 2', + 'type' => QuestionTypeFile::class, // do not support conditions + ], + [ + 'uuid' => 3, + 'name' => 'Question 3', + 'type' => QuestionTypeShortText::class, + ], + ], + ]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the questions dropdown values + $dropdown_values = $editor_manager->getItemsDropdownValues(); + + // Assert: the dropdown values should not contains the "Question 2" + // question that do not support conditions. + $this->assertEquals($dropdown_values, [ + 'question-1' => 'Question 1', + 'question-3' => 'Question 3', + ]); + } + + public function testSelectedQuestionIsExcludedFromDropdownValues(): void + { + // Arrange: create an editor manager with three questions + // The third question is selected. + $form_data = new FormData([ + 'questions' => [ + [ + 'uuid' => 1, + 'name' => 'Question 1', + 'type' => QuestionTypeShortText::class, + ], + [ + 'uuid' => 2, + 'name' => 'Question 2', + 'type' => QuestionTypeShortText::class, + ], + [ + 'uuid' => 3, + 'name' => 'Question 3', + 'type' => QuestionTypeShortText::class, + ], + ], + 'selected_item_uuid' => 3, + 'selected_item_type' => 'question', + ]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the questions dropdown values + $dropdown_values = $editor_manager->getItemsDropdownValues(); + + // Assert: the dropdown values should not contains "Question 3" as it + // is selected. + $this->assertEquals($dropdown_values, [ + 'question-1' => 'Question 1', + 'question-2' => 'Question 2', + ]); + } + + public function testValueOperatorsForValidQuestionsAreReturned(): void + { + // Arrange: create an editor manager with one question that supports conditions. + $form_data = new FormData([ + 'questions' => [ + [ + 'uuid' => 1, + 'name' => 'Question 1', + 'type' => QuestionTypeShortText::class, + ], + ], + ]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the operators for the question. + $dropdown_values = $editor_manager->getValueOperatorDropdownValues(1); + + // Assert: the expected operators for a "ShortText" questions should be found. + $this->assertEquals([ + 'equals' => __("Is equal to"), + 'not_equals' => __("Is not equal to"), + 'contains' => __("Contains"), + 'not_contains' => __("Do not contains"), + ], $dropdown_values); + } + + public function testValueOperatorsForInvalidQuestionAreNotReturned(): void + { + // Arrange: create an editor manager with three questions + $form_data = new FormData([ + 'questions' => [ + [ + 'uuid' => 2, + 'name' => 'Question 2', + 'type' => QuestionTypeFile::class, // do not support conditions + ], + ], + ]); + $editor_manager = $this->getManagerWithData($form_data); + + // Act: get the operators the question. + $dropdown_values = $editor_manager->getValueOperatorDropdownValues(2); + + // Assert: no operators should be found. + $this->assertEquals([], $dropdown_values); + } +} diff --git a/src/Glpi/Controller/Form/ConditionalVisibilityEditor/IndexController.php b/src/Glpi/Controller/Form/ConditionalVisibilityEditor/IndexController.php new file mode 100644 index 00000000000..cb558309c8e --- /dev/null +++ b/src/Glpi/Controller/Form/ConditionalVisibilityEditor/IndexController.php @@ -0,0 +1,68 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Controller\Form\ConditionalVisibilityEditor; + +use Glpi\Controller\AbstractController; +use Glpi\Form\ConditionalVisiblity\EditorManager; +use Glpi\Form\ConditionalVisiblity\FormData; +use Symfony\Component\HttpFoundation\Request; +use Symfony\Component\HttpFoundation\Response; +use Symfony\Component\Routing\Attribute\Route; + +final class IndexController extends AbstractController +{ + public function __construct( + private EditorManager $editor_manager, + ) { + } + + #[Route( + // Need '/ajax' prefix due to legacy CSRF constraints. + "/ajax/Form/ConditionalVisibilityEditor", + name: "glpi_form_conditional_visibility_editor", + methods: "POST" + )] + public function __invoke(Request $request): Response + { + $form_data = $request->request->all()['form_data']; + $this->editor_manager->setFormData(new FormData($form_data)); + + return $this->render('pages/admin/form/conditional_visibility_editor.html.twig', [ + 'manager' => $this->editor_manager, + 'defined_conditions' => $this->editor_manager->getDefinedConditions(), + 'items_values' => $this->editor_manager->getItemsDropdownValues(), + ]); + } +} diff --git a/src/Glpi/Form/Comment.php b/src/Glpi/Form/Comment.php index 6f1b3630037..0590021c636 100644 --- a/src/Glpi/Form/Comment.php +++ b/src/Glpi/Form/Comment.php @@ -37,6 +37,8 @@ use CommonDBChild; use Glpi\Application\View\TemplateRenderer; +use Glpi\Form\ConditionalVisiblity\ConditionnableInterface; +use Glpi\Form\ConditionalVisiblity\ConditionnableTrait; use Log; use Override; use Ramsey\Uuid\Uuid; @@ -44,8 +46,10 @@ /** * Comment of a given helpdesk form's section */ -final class Comment extends CommonDBChild implements BlockInterface +final class Comment extends CommonDBChild implements BlockInterface, ConditionnableInterface { + use ConditionnableTrait; + public static $itemtype = Section::class; public static $items_id = 'forms_sections_id'; @@ -85,6 +89,11 @@ public function prepareInputForAdd($input) $input['uuid'] = Uuid::uuid4(); } + // JSON fields must have a value when created to prevent SQL errors + if (!isset($input['conditions'])) { + $input['conditions'] = json_encode([]); + } + $input = $this->prepareInput($input); return parent::prepareInputForUpdate($input); } @@ -107,6 +116,11 @@ private function prepareInput($input): array $input['forms_sections_uuid'] = $section->fields['uuid']; } + if (isset($input['_conditions'])) { + $input['conditions'] = json_encode($input['_conditions']); + unset($input['_conditions']); + } + return $input; } diff --git a/src/Glpi/Form/ConditionalVisiblity/ConditionData.php b/src/Glpi/Form/ConditionalVisiblity/ConditionData.php new file mode 100644 index 00000000000..7dd398e5199 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/ConditionData.php @@ -0,0 +1,84 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +final class ConditionData +{ + public function __construct( + private string $item_uuid, + private string $item_type, + private ?string $value_operator, + private mixed $value, + private ?string $logic_operator = null, + ) { + } + + /** + * Itemtype + uuid, used for dropdowns to allow selecting type + item using + * a single dropdown + */ + public function getItemDropdownKey(): string + { + return $this->item_type . '-' . $this->item_uuid; + } + + public function getItemUuid(): string + { + return $this->item_uuid; + } + + public function getItemType(): string + { + return $this->item_type; + } + + public function getValue(): mixed + { + return $this->value; + } + + public function getLogicOperator(): LogicOperator + { + // Fallback to "AND" if no value is set. + return LogicOperator::tryFrom($this->logic_operator ?? "") ?? LogicOperator::AND; + } + + public function getValueOperator(): ?ValueOperator + { + // No follback here as an empty value is valid if the condition is not + // fully specified yet. + return ValueOperator::tryFrom($this->value_operator ?? ""); + } +} diff --git a/src/Glpi/Form/ConditionalVisiblity/ConditionnableInterface.php b/src/Glpi/Form/ConditionalVisiblity/ConditionnableInterface.php new file mode 100644 index 00000000000..0f4ba370293 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/ConditionnableInterface.php @@ -0,0 +1,58 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +use Glpi\Form\QuestionVisibilityStrategy; + +/** + * This interface must be satisfied by any form item for which its visibility + * can be toggled depending on some conditions. + */ +interface ConditionnableInterface +{ + /** + * Get configured condition data from the database. + * + * @return ConditionData[] + **/ + public function getConfiguredConditionsData(): array; + + /** + * Get the configured visibility strategy from the database. + * + * @return \Glpi\Form\QuestionVisibilityStrategy + */ + public function getConfiguredVisibilityStrategy(): QuestionVisibilityStrategy; +} diff --git a/src/Glpi/Form/ConditionalVisiblity/ConditionnableTrait.php b/src/Glpi/Form/ConditionalVisiblity/ConditionnableTrait.php new file mode 100644 index 00000000000..936d9965280 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/ConditionnableTrait.php @@ -0,0 +1,70 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +use Glpi\Form\QuestionVisibilityStrategy; +use JsonException; + +trait ConditionnableTrait +{ + /** @return ConditionData[] */ + public function getConfiguredConditionsData(): array + { + parent::post_getFromDB(); + + try { + $raw_data = json_decode( + json : $this->fields['conditions'], + associative: true, + flags : JSON_THROW_ON_ERROR, + ); + } catch (JsonException $e) { + $raw_data = []; + } + + $form_data = new FormData([ + 'conditions' => $raw_data, + ]); + + return $form_data->getConditionsData(); + } + + public function getConfiguredVisibilityStrategy(): QuestionVisibilityStrategy + { + $strategy_value = $this->fields['visibility_strategy'] ?? ""; + $strategy = QuestionVisibilityStrategy::tryFrom($strategy_value); + return $strategy ?? QuestionVisibilityStrategy::ALWAYS_VISIBLE; + } +} diff --git a/src/Glpi/Form/ConditionalVisiblity/EditorManager.php b/src/Glpi/Form/ConditionalVisiblity/EditorManager.php new file mode 100644 index 00000000000..c13ae3badc5 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/EditorManager.php @@ -0,0 +1,155 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +final class EditorManager +{ + private FormData $form_data; + + /** + * Current data; must be set before calling others methods. + */ + public function setFormData(FormData $form_data): void + { + $this->form_data = $form_data; + } + + /** + * Get the defined conditions of the current form data. + * Will add a default empty condition if none are defined. + * + * @return ConditionData[] + */ + public function getDefinedConditions(): array + { + $conditions = $this->form_data->getConditionsData(); + if (empty($conditions)) { + $conditions[] = new ConditionData( + item_uuid: '', + item_type: '', + value_operator: null, + value: null, + ); + } + + return $conditions; + } + + /** + * Get a formatted array that is ready to be displayed in a dropdown, with + * each options being a question of the current form data that support + * conditions. + * + * In the future, this will also contains sections as they can be used as + * conditions too (show question X if section xxx is visible...) + * + * @return string[] + */ + public function getItemsDropdownValues(): array + { + $questions_data = $this->form_data->getQuestionsData(); + + $dropdown_values = []; + foreach ($questions_data as $question_data) { + // Make sure the question can be used as a condition criteria. + if (!($question_data->getType() instanceof UsedAsCriteriaInterface)) { + continue; + } + + // Ignore the question that is currently selected as a condition can't + // be used as a criteria for its own visiblity. + if ( + $this->form_data->getSelectedItemType() == Type::QUESTION->value + && $question_data->getUuid() == $this->form_data->getSelectedItemUuid() + ) { + continue; + } + + // Format itemtype + uuid into a single key to allow selected both + // with a simple dropdown. + $key = Type::QUESTION->value . '-' . $question_data->getUuid(); + $dropdown_values[$key] = $question_data->getName(); + } + + return $dropdown_values; + } + + /** + * Get the allowed values operators for the given question using its uuid. + */ + public function getValueOperatorDropdownValues(string $question_uuid): array + { + // Try to find a question for the given uuid. + $question = $this->findQuestionDataByUuid($question_uuid); + if ($question === null) { + return []; + } + + // Make sure the question can be used as a criteria. + $type = $question->getType(); + if (!$type instanceof UsedAsCriteriaInterface) { + return []; + } + + // Load possible value operators + $dropdown_values = []; + foreach ($type->getSupportedValueOperators() as $operator) { + $dropdown_values[$operator->value] = $operator->getLabel(); + } + + return $dropdown_values; + } + + public function getLogicOperatorDropdownValues(): array + { + return LogicOperator::getDropdownValues(); + } + + private function findQuestionDataByUuid(string $question_uuid): ?QuestionData + { + $questions = $this->form_data->getQuestionsData(); + $questions = array_filter( + $questions, + fn (QuestionData $q): bool => $question_uuid == $q->getUuid(), + ); + + if (count($questions) !== 1) { + return null; + } + + $question = array_pop($questions); + return $question; + } +} diff --git a/src/Glpi/Form/ConditionalVisiblity/FormData.php b/src/Glpi/Form/ConditionalVisiblity/FormData.php new file mode 100644 index 00000000000..431895dcd42 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/FormData.php @@ -0,0 +1,126 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +use Glpi\Form\QuestionType\QuestionTypeInterface; +use ReflectionClass; + +final class FormData +{ + /** @var QuestionData[] $questions_data */ + private array $questions_data = []; + + /** @var ConditionData[] $conditions_data */ + private array $conditions_data = []; + + private string $selected_item_uuid; + private string $selected_item_type; + + public function __construct( + array $raw_data + ) { + $this->parseRawQuestionsData($raw_data['questions'] ?? []); + $this->parseRawConditionsData($raw_data['conditions'] ?? []); + $this->selected_item_uuid = $raw_data['selected_item_uuid'] ?? ''; + $this->selected_item_type = $raw_data['selected_item_type'] ?? ''; + } + + /** @return QuestionData[] */ + public function getQuestionsData(): array + { + return $this->questions_data; + } + + /** @return ConditionData[] */ + public function getConditionsData(): array + { + return $this->conditions_data; + } + + public function getSelectedItemUuid(): string + { + return $this->selected_item_uuid; + } + + public function getSelectedItemType(): string + { + return $this->selected_item_type; + } + + private function parseRawQuestionsData(array $questions_data): void + { + foreach ($questions_data as $question_data) { + $type = $question_data['type'] ?? null; + if ( + !is_a($type, QuestionTypeInterface::class, true) + || (new ReflectionClass($type))->isAbstract() + ) { + continue; + } + + $this->questions_data[] = new QuestionData( + uuid: $question_data['uuid'], + name: $question_data['name'], + type: new $type(), + ); + } + } + + private function parseRawConditionsData(array $conditions_data): void + { + foreach ($conditions_data as $condition_data) { + $item_key = $condition_data['item']; + + if ($item_key == '') { + // Item has not yet been selected. + $type = ''; + $uuid = ''; + } else { + // Item has been selected, extract type and uuid. + $item_parts = explode('-', $item_key); + $type = array_shift($item_parts); + $uuid = implode('-', $item_parts); + } + + $this->conditions_data[] = new ConditionData( + item_uuid : $uuid, + item_type : $type, + value_operator: $condition_data['value_operator'] ?? null, + value : $condition_data['value'] ?? null, + logic_operator: $condition_data['logic_operator'] ?? null, + ); + } + } +} diff --git a/src/Glpi/Form/ConditionalVisiblity/LogicOperator.php b/src/Glpi/Form/ConditionalVisiblity/LogicOperator.php new file mode 100644 index 00000000000..65bbe792d9a --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/LogicOperator.php @@ -0,0 +1,57 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +enum LogicOperator: string +{ + case AND = 'and'; + case OR = 'or'; + + public function getLabel(): string + { + return match ($this) { + self::AND => __("And"), + self::OR => __("Or"), + }; + } + + public static function getDropdownValues(): array + { + return [ + self::AND->value => self::AND->getLabel(), + self::OR->value => self::OR->getLabel(), + ]; + } +} diff --git a/src/Glpi/Form/ConditionalVisiblity/QuestionData.php b/src/Glpi/Form/ConditionalVisiblity/QuestionData.php new file mode 100644 index 00000000000..e79894bb541 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/QuestionData.php @@ -0,0 +1,62 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +use Glpi\Form\QuestionType\QuestionTypeInterface; + +final class QuestionData +{ + public function __construct( + private string $uuid, + private string $name, + private QuestionTypeInterface $type, + ) { + } + + public function getName(): string + { + return $this->name; + } + + public function getUuid(): string + { + return $this->uuid; + } + + public function getType(): QuestionTypeInterface + { + return $this->type; + } +} diff --git a/src/Glpi/Form/ConditionalVisiblity/Type.php b/src/Glpi/Form/ConditionalVisiblity/Type.php new file mode 100644 index 00000000000..d92e04de679 --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/Type.php @@ -0,0 +1,42 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +enum Type: string +{ + case QUESTION = 'question'; + case SECTION = 'section'; + case COMMENT = 'comment'; +} diff --git a/src/Glpi/Form/ConditionalVisiblity/UsedAsCriteriaInterface.php b/src/Glpi/Form/ConditionalVisiblity/UsedAsCriteriaInterface.php new file mode 100644 index 00000000000..736917f3ebc --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/UsedAsCriteriaInterface.php @@ -0,0 +1,44 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +/** + * Items that implements this interface can be used as a criteria in a condition. + */ +interface UsedAsCriteriaInterface +{ + /** @return ValueOperator[] */ + public function getSupportedValueOperators(): array; +} diff --git a/src/Glpi/Form/ConditionalVisiblity/ValueOperator.php b/src/Glpi/Form/ConditionalVisiblity/ValueOperator.php new file mode 100644 index 00000000000..d85845ad2bb --- /dev/null +++ b/src/Glpi/Form/ConditionalVisiblity/ValueOperator.php @@ -0,0 +1,61 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form\ConditionalVisiblity; + +enum ValueOperator: string +{ + case EQUALS = 'equals'; + case NOT_EQUALS = 'not_equals'; + case CONTAINS = 'contains'; + case NOT_CONTAINS = 'not_contains'; + + // Not yet implemented: + // case GREATER_THAN = 'greater_than'; + // case GREATER_THAN_OR_EQUALS = 'greater_than_or_equals'; + // case LESS_THAN = 'less_than'; + // case LESS_THAN_OR_EQUALS = 'less_than_or_equals'; + // case VISIBLE = 'visible'; + // case NOT_VISIBLE = 'not_visible'; + + public function getLabel(): string + { + return match ($this) { + self::EQUALS => __("Is equal to"), + self::NOT_EQUALS => __("Is not equal to"), + self::CONTAINS => __("Contains"), + self::NOT_CONTAINS => __("Do not contains"), + }; + } +} diff --git a/src/Glpi/Form/Export/Serializer/FormSerializer.php b/src/Glpi/Form/Export/Serializer/FormSerializer.php index fbea126b45a..a4c49b58df4 100644 --- a/src/Glpi/Form/Export/Serializer/FormSerializer.php +++ b/src/Glpi/Form/Export/Serializer/FormSerializer.php @@ -36,7 +36,6 @@ namespace Glpi\Form\Export\Serializer; use Entity; -use Glpi\DBAL\JsonFieldInterface; use Glpi\Form\AccessControl\FormAccessControl; use Glpi\Form\Comment; use Glpi\Form\Destination\FormDestination; diff --git a/src/Glpi/Form/Question.php b/src/Glpi/Form/Question.php index 93ba62bb64c..1104ecff38b 100644 --- a/src/Glpi/Form/Question.php +++ b/src/Glpi/Form/Question.php @@ -38,18 +38,22 @@ use CommonDBChild; use Glpi\Application\View\TemplateRenderer; use Glpi\Form\AccessControl\FormAccessControlManager; +use Glpi\Form\ConditionalVisiblity\ConditionnableInterface; +use Glpi\Form\ConditionalVisiblity\ConditionnableTrait; use Glpi\Form\QuestionType\QuestionTypeInterface; use Glpi\Form\QuestionType\QuestionTypesManager; use Log; use Override; -use ReflectionClass; use Ramsey\Uuid\Uuid; +use ReflectionClass; /** * Question of a given helpdesk form's section */ -final class Question extends CommonDBChild implements BlockInterface +final class Question extends CommonDBChild implements BlockInterface, ConditionnableInterface { + use ConditionnableTrait; + public static $itemtype = Section::class; public static $items_id = 'forms_sections_id'; @@ -151,8 +155,13 @@ public function prepareInputForAdd($input) $input['uuid'] = Uuid::uuid4(); } + // JSON fields must have a value when created to prevent SQL errors + if (!isset($input['conditions'])) { + $input['conditions'] = json_encode([]); + } + $input = $this->prepareInput($input); - return parent::prepareInputForUpdate($input); + return parent::prepareInputForAdd($input); } #[Override] @@ -220,6 +229,11 @@ private function prepareInput($input): array } } + if (isset($input['_conditions'])) { + $input['conditions'] = json_encode($input['_conditions']); + unset($input['_conditions']); + } + return $input; } diff --git a/src/Glpi/Form/QuestionType/QuestionTypeShortText.php b/src/Glpi/Form/QuestionType/QuestionTypeShortText.php index a8fb30c0ddf..5bf0eb69573 100644 --- a/src/Glpi/Form/QuestionType/QuestionTypeShortText.php +++ b/src/Glpi/Form/QuestionType/QuestionTypeShortText.php @@ -35,9 +35,11 @@ namespace Glpi\Form\QuestionType; +use Glpi\Form\ConditionalVisiblity\UsedAsCriteriaInterface; +use Glpi\Form\ConditionalVisiblity\ValueOperator; use Override; -final class QuestionTypeShortText extends AbstractQuestionTypeShortAnswer +final class QuestionTypeShortText extends AbstractQuestionTypeShortAnswer implements UsedAsCriteriaInterface { #[Override] public function getInputType(): string @@ -62,4 +64,15 @@ public function getWeight(): int { return 10; } + + #[Override] + public function getSupportedValueOperators(): array + { + return [ + ValueOperator::EQUALS, + ValueOperator::NOT_EQUALS, + ValueOperator::CONTAINS, + ValueOperator::NOT_CONTAINS, + ]; + } } diff --git a/src/Glpi/Form/QuestionVisibilityStrategy.php b/src/Glpi/Form/QuestionVisibilityStrategy.php new file mode 100644 index 00000000000..f4653754093 --- /dev/null +++ b/src/Glpi/Form/QuestionVisibilityStrategy.php @@ -0,0 +1,69 @@ +. + * + * --------------------------------------------------------------------- + */ + +namespace Glpi\Form; + +enum QuestionVisibilityStrategy: string +{ + case ALWAYS_VISIBLE = 'always_visible'; + case VISIBLE_IF = 'visible_if'; + case HIDDEN_IF = 'hidden_if'; + + public function getLabel(): string + { + return match ($this) { + self::ALWAYS_VISIBLE => __('Always visible'), + self::VISIBLE_IF => __('Visible if...'), + self::HIDDEN_IF => __("Hidden if..."), + }; + } + + public function getIcon(): string + { + return match ($this) { + self::ALWAYS_VISIBLE => 'ti ti-eye', + self::VISIBLE_IF => 'ti ti-eye-cog', + self::HIDDEN_IF => 'ti ti-eye-off', + }; + } + + public function showEditor(): bool + { + return match ($this) { + self::ALWAYS_VISIBLE => false, + self::VISIBLE_IF => true, + self::HIDDEN_IF => true, + }; + } +} diff --git a/src/Glpi/Form/Section.php b/src/Glpi/Form/Section.php index ca52fab8f66..9ccbd8f07ff 100644 --- a/src/Glpi/Form/Section.php +++ b/src/Glpi/Form/Section.php @@ -36,14 +36,18 @@ namespace Glpi\Form; use CommonDBChild; +use Glpi\Form\ConditionalVisiblity\ConditionnableInterface; +use Glpi\Form\ConditionalVisiblity\ConditionnableTrait; use Override; use Ramsey\Uuid\Uuid; /** * Section of a given helpdesk form */ -final class Section extends CommonDBChild +final class Section extends CommonDBChild implements ConditionnableInterface { + use ConditionnableTrait; + public static $itemtype = Form::class; public static $items_id = 'forms_forms_id'; @@ -92,9 +96,32 @@ public function prepareInputForAdd($input) $input['uuid'] = Uuid::uuid4(); } + // JSON fields must have a value when created to prevent SQL errors + if (!isset($input['conditions'])) { + $input['conditions'] = json_encode([]); + } + + $input = $this->prepareInput($input); + return parent::prepareInputForAdd($input); + } + + #[Override] + public function prepareInputForUpdate($input) + { + $input = $this->prepareInput($input); return parent::prepareInputForUpdate($input); } + private function prepareInput($input): array + { + if (isset($input['_conditions'])) { + $input['conditions'] = json_encode($input['_conditions']); + unset($input['_conditions']); + } + + return $input; + } + /** * Get blocks of this section * Block can be a question or a comment diff --git a/src/Migration.php b/src/Migration.php index 3cac3a54243..ef8f4838b40 100644 --- a/src/Migration.php +++ b/src/Migration.php @@ -365,6 +365,10 @@ private function fieldFormat($type, $default_value, $nodefault = false): string $format = "INT " . DBConnection::getDefaultPrimaryKeySignOption() . " NOT NULL DEFAULT 0"; break; + case 'json': + $format = "JSON NOT NULL"; + break; + default: $format = $type; break; diff --git a/templates/pages/admin/form/conditional_visibility_dropdown.html.twig b/templates/pages/admin/form/conditional_visibility_dropdown.html.twig new file mode 100644 index 00000000000..5003cc03aee --- /dev/null +++ b/templates/pages/admin/form/conditional_visibility_dropdown.html.twig @@ -0,0 +1,187 @@ +{# + # --------------------------------------------------------------------- + # + # GLPI - Gestionnaire Libre de Parc Informatique + # + # http://glpi-project.org + # + # @copyright 2015-2025 Teclib' and contributors. + # @licence https://www.gnu.org/licenses/gpl-3.0.html + # + # --------------------------------------------------------------------- + # + # LICENSE + # + # This file is part of GLPI. + # + # This program is free software: you can redistribute it and/or modify + # it under the terms of the GNU General Public License as published by + # the Free Software Foundation, either version 3 of the License, or + # (at your option) any later version. + # + # This program is distributed in the hope that it will be useful, + # but WITHOUT ANY WARRANTY; without even the implied warranty of + # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + # GNU General Public License for more details. + # + # You should have received a copy of the GNU General Public License + # along with this program. If not, see . + # + # --------------------------------------------------------------------- + #} + +{# Compute strategy, with a fallback to "Always visible" for new questions #} +{% if item is null %} + {% set question_strategy = enum('Glpi\\Form\\QuestionVisibilityStrategy').ALWAYS_VISIBLE %} +{% else %} + {% set question_strategy = item.getConfiguredVisibilityStrategy() %} +{% endif %} + +{# Spacing div (ms-auto must be applied to an item that is always visible) #} +
+ +
+ +
+
+
+

+ + {{ __('Conditional visibility') }} +

+ +
+ {# Display strategy picker #} + {% for strategy in enum_cases('Glpi\\Form\\QuestionVisibilityStrategy') %} + {% set rand = random() %} + + + {% endfor %} +
+ + {% set is_visible = question_strategy.showEditor() %} + {% set visibility_class = is_visible ? '' : 'd-none' %} +
+ {# This div will be rendered using AJAX when the dropdown is opened #} +
+
+
+
+
+
+
+ {% if item is not null %} + {# Initial values #} + {% for condition in item.getConfiguredConditionsData() %} + {% if condition.getItemUuid() != 0 %} +
+ {% if not loop.first %} + + {% endif %} + + + + + +
+ {% endif %} + {% endfor %} + {% endif %} +
+
+
+
+
diff --git a/templates/pages/admin/form/conditional_visibility_editor.html.twig b/templates/pages/admin/form/conditional_visibility_editor.html.twig new file mode 100644 index 00000000000..17c4e1effc1 --- /dev/null +++ b/templates/pages/admin/form/conditional_visibility_editor.html.twig @@ -0,0 +1,140 @@ +{# + # --------------------------------------------------------------------- + # + # GLPI - Gestionnaire Libre de Parc Informatique + # + # http://glpi-project.org + # + # @copyright 2015-2025 Teclib' and contributors. + # @licence https://www.gnu.org/licenses/gpl-3.0.html + # + # --------------------------------------------------------------------- + # + # LICENSE + # + # This file is part of GLPI. + # + # This program is free software: you can redistribute it and/or modify + # it under the terms of the GNU General Public License as published by + # the Free Software Foundation, either version 3 of the License, or + # (at your option) any later version. + # + # This program is distributed in the hope that it will be useful, + # but WITHOUT ANY WARRANTY; without even the implied warranty of + # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + # GNU General Public License for more details. + # + # You should have received a copy of the GNU General Public License + # along with this program. If not, see . + # + # --------------------------------------------------------------------- + #} + +{% set last_condition_is_filled = false %} + +{% for condition in defined_conditions %} + {% set condition_is_filled = condition.getItemUuid() != '' %} + {% set last_condition_is_filled = loop.last and condition_is_filled %} + +
+
+
+ {% if not loop.first %} + + {% do call('Dropdown::showFromArray', [ + '_conditions[' ~ loop.index0 ~ '][logic_operator]', + manager.getLogicOperatorDropdownValues(), + { + 'value': condition.getLogicOperator().value, + 'aria_label' : __('Logic operator'), + 'add_data_attributes': { + 'glpi-form-editor-condition-logic-operator': '', + }, + }]) %} + + {% endif %} + + + {% do call('Dropdown::showFromArray', [ + '_conditions[' ~ loop.index0 ~ '][item]', + items_values, + { + 'value': condition.getItemDropdownKey(), + 'aria_label' : _n('Item', 'Items', 1), + 'add_data_attributes': { + 'glpi-form-editor-condition-item': '', + 'glpi-form-editor-on-change': "render-visibility-editor", + }, + 'display_emptychoice': true, + 'emptylabel': __("Select an item..."), + } + ]) %} + + + {% if condition_is_filled %} + + + + + {% do call('Dropdown::showFromArray', [ + '_conditions[' ~ loop.index0 ~ '][value_operator]', + manager.getValueOperatorDropdownValues( + condition.getItemUuid() + ), + { + 'value': condition.getValueOperator().value, + 'aria_label' : __('Value operator'), + 'add_data_attributes': { + 'glpi-form-editor-condition-value-operator': '', + }, + } + ]) %} + + + + {% endif %} + + {% if condition_is_filled or loop.index0 > 0 %} + + {% endif %} +
+
+
+{% endfor %} + +{% if last_condition_is_filled %} + +{% endif %} diff --git a/templates/pages/admin/form/form_comment.html.twig b/templates/pages/admin/form/form_comment.html.twig index bad118b378d..5c112a63f25 100644 --- a/templates/pages/admin/form/form_comment.html.twig +++ b/templates/pages/admin/form/form_comment.html.twig @@ -48,6 +48,7 @@ class="mb-3" data-glpi-form-editor-block data-glpi-form-editor-comment + data-glpi-form-editor-condition-type="{{ enum('Glpi\\Form\\ConditionalVisiblity\\Type').COMMENT.value }}" data-glpi-draggable-item >
* + + {# Visibility dropdown #} + {{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', { + 'item': comment, + 'type': "Glpi\\Form\\Comment", + }, with_context = false) }} + {# Duplicate comment #} + + {# Delete comment #} + + + {# Extra actions #} +
+ +
    +
  • + +
    • +
+
{# Display common fields #} @@ -117,20 +160,6 @@ }) ) }} - -
- -
{# Common hidden data #} @@ -150,6 +179,7 @@ value="{{ comment is not null ? comment.fields.rank : 0 }}" />
+
{{ include('pages/admin/form/form_toolbar.html.twig', { 'can_update': can_update, diff --git a/templates/pages/admin/form/form_editor.html.twig b/templates/pages/admin/form/form_editor.html.twig index 1b65026232d..d15b84a41c8 100644 --- a/templates/pages/admin/form/form_editor.html.twig +++ b/templates/pages/admin/form/form_editor.html.twig @@ -71,8 +71,6 @@
- - {# We expect to use the right side to display some extra info later so keep some available space for now #}
{# Card containing the main form data: title, header and status #} -
+
@@ -97,17 +98,64 @@ data-glpi-form-editor-question-details-name /> * + + {% if question is null %} + {% set question_strategy = enum('Glpi\\Form\\QuestionVisibilityStrategy').ALWAYS_VISIBLE %} + {% else %} + {% set question_strategy = question.getConfiguredVisibilityStrategy() %} + {% endif %} + + {# Visibility dropdown #} + {{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', { + 'item': question, + 'type': "Glpi\\Form\\Question", + }, with_context = false) }} + {# Duplicate question #} + + {# Delete question #} + + + {# Extra actions #} +
+ +
    +
  • + +
    • +
+
{# Render the specific question type #} @@ -202,11 +250,11 @@ ) }} {# Render the specific question options #} -
+
{{ question_type.renderAdministrationOptionsTemplate(question)|raw }}
-
@@ -257,6 +296,7 @@ value="{{ constant('class', question_type) }}" /> +
{{ include('pages/admin/form/form_toolbar.html.twig', { 'can_update': can_update, diff --git a/templates/pages/admin/form/form_section.html.twig b/templates/pages/admin/form/form_section.html.twig index d4d2c964ff0..17fdaa8352b 100644 --- a/templates/pages/admin/form/form_section.html.twig +++ b/templates/pages/admin/form/form_section.html.twig @@ -50,6 +50,7 @@
@@ -77,7 +78,7 @@ >
{# Header #} -
+
{# Section's name #} + data-glpi-form-editor-dynamic-input + data-glpi-form-editor-on-input="compute-dynamic-input" + /> + + {# Visibility dropdown #} + {{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', { + 'item': section, + 'type': "Glpi\\Form\\Section", + }, with_context = false) }} {# Collapse section #} {# Extra actions #} -
+
  • @@ -153,6 +162,17 @@ {{ __("Delete section") }}
    • + +
  • + +
diff --git a/tests/cypress/e2e/ajax_controller.cy.js b/tests/cypress/e2e/ajax_controller.cy.js index 13b908174bc..5b99100e697 100644 --- a/tests/cypress/e2e/ajax_controller.cy.js +++ b/tests/cypress/e2e/ajax_controller.cy.js @@ -59,7 +59,7 @@ describe('Ajax Controller', () => { // Go to history tab, it must be updated with a new entry cy.findByRole('tab', {'name': "Historical 2"}).click(); - cy.findAllByRole('row').should('have.length', 4); // 3 entries + header + cy.findAllByRole('row').should('have.length', 5); // 3 entries + header + first section visibility being initialized }); }); }); diff --git a/tests/cypress/e2e/form/editor/conditions.cy.js b/tests/cypress/e2e/form/editor/conditions.cy.js new file mode 100644 index 00000000000..b1a1d13c682 --- /dev/null +++ b/tests/cypress/e2e/form/editor/conditions.cy.js @@ -0,0 +1,476 @@ +/** + * --------------------------------------------------------------------- + * + * GLPI - Gestionnaire Libre de Parc Informatique + * + * http://glpi-project.org + * + * @copyright 2015-2025 Teclib' and contributors. + * @copyright 2003-2014 by the INDEPNET Development Team. + * @licence https://www.gnu.org/licenses/gpl-3.0.html + * + * --------------------------------------------------------------------- + * + * LICENSE + * + * This file is part of GLPI. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + * + * --------------------------------------------------------------------- + */ + +let questions = null; +let comments = null; +let sections = null; + +function createForm() { + cy.login(); + cy.createFormWithAPI().visitFormTab('Form'); + cy.then(() => { + questions = []; + comments = []; + sections = ["First section"]; + }); +} + +function addQuestion(name) { + cy.findByRole('button', {'name': "Add a new question"}).click(); + cy.focused().type(name); + cy.then(() => { + questions.push(name); + }); +} + +function addComment(name) { + cy.findByRole('button', {'name': "Add a new comment"}).click(); + cy.focused().type(name); + cy.then(() => { + comments.push(name); + }); +} + +function addSection(name) { + cy.findByRole('button', {'name': "Add a new section"}).click(); + cy.focused().type(name); + cy.then(() => { + sections.push(name); + }); +} + +function getAndFocusQuestion(name) { + return cy.then(() => { + const index = questions.indexOf(name); + cy.findAllByRole('region', {'name': 'Question details'}).eq(index).click(); + }); +} + +function getAndFocusComment(name) { + return cy.then(() => { + const index = comments.indexOf(name); + cy.findAllByRole('region', {'name': 'Comment details'}).eq(index).click(); + }); +} + +function getAndFocusSection(name) { + return cy.then(() => { + const index = sections.indexOf(name); + cy.findAllByRole('region', {'name': 'Section details'}).eq(index).click(); + }); +} + +function saveAndReload() { + cy.findByRole('button', {'name': "Save"}).click(); + cy.findByRole('alert') + .should('contain.text', 'Item successfully updated') + ; + cy.reload(); +} + +function checkThatVisibilityOptionsAreHidden() { + cy.findByRole('label', {'name': "Always visible"}).should('not.exist'); + cy.findByRole('label', {'name': "Visible if..."}).should('not.exist'); + 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(); +} + +function closeVisibilityOptions() { + cy.findByTitle('Configure visibility').click(); +} + +function checkThatSelectedVisibilityOptionIs(option) { + cy.findByRole('radio', {'name': option}).should('be.checked'); + cy.findByRole('button', {'name': option}).should('exist'); +} + +function setVisibilityOption(option) { + // Label is the next node + cy.findByRole('radio', {'name': option}).next().click(); +} + +function checkThatVisibilityOptionsAreVisible() { + cy.findByRole('radio', {'name': "Always visible"}).should('be.visible'); + cy.findByRole('radio', {'name': "Visible if..."}).should('be.visible'); + cy.findByRole('radio', {'name': "Hidden if..."}).should('be.visible'); +} + +function checkThatConditionEditorIsDisplayed() { + cy.getDropdownByLabelText('Item').should('exist'); +} + +function checkThatConditionEditorIsNotDisplayed() { + cy.getDropdownByLabelText('Item').should('not.exist'); +} + +function addNewEmptyCondition() { + cy.findByRole('button', {'name': 'Add another criteria'}).click(); +} + +function deleteConditon(index) { + cy.get("[data-glpi-form-editor-condition]").eq(index).as('condition'); + cy.get('@condition').findByRole('button', {'name': 'Delete criteria'}).click(); +} + +function fillCondition(index, logic_operator, question_name, value_operator_name, value) { + cy.get("[data-glpi-form-editor-condition]").eq(index).as('condition'); + if (logic_operator !== null && index > 0) { + cy.get('@condition') + .getDropdownByLabelText('Logic operator') + .selectDropdownValue(logic_operator) + ; + } + cy.get('@condition').getDropdownByLabelText('Item').selectDropdownValue(question_name); + cy.get('@condition').getDropdownByLabelText('Value operator') + .selectDropdownValue(value_operator_name) + ; + cy.get('@condition').findByRole('textbox', {'name': 'Value'}).type(value); +} + +function checkThatConditionExist(index, logic_operator, question_name, value_operator_name, value) { + cy.get("[data-glpi-form-editor-condition]").eq(index).as('condition'); + if (logic_operator !== null && index > 0) { + cy.get('@condition') + .getDropdownByLabelText('Logic operator') + .should('have.text', logic_operator) + ; + } + cy.get('@condition').getDropdownByLabelText('Item').should('have.text', question_name); + cy.get('@condition').getDropdownByLabelText('Value operator').should( + 'have.text', + value_operator_name + ); + cy.get('@condition').findByRole('textbox', {'name': 'Value'}).should('have.value', value); +} + +function checkThatConditionDoNotExist(index) { + cy.get("[data-glpi-form-editor-condition]").eq(index).should('not.exist'); +} + +describe ('Conditions', () => { + beforeEach(() => { + cy.login(); + }); + + it('can set the conditional visibility of a question', () => { + createForm(); + addQuestion('My first question'); + saveAndReload(); + + // Select 'Visible if...' (editor should be displayed) + getAndFocusQuestion('My first question').within(() => { + checkThatVisibilityOptionsAreHidden(); + initVisibilityConfiguration(); + checkThatVisibilityOptionsAreVisible(); + checkThatSelectedVisibilityOptionIs('Always visible'); + checkThatConditionEditorIsNotDisplayed(); + setVisibilityOption('Visible if...'); + checkThatSelectedVisibilityOptionIs('Visible if...'); + checkThatConditionEditorIsDisplayed(); + }); + saveAndReload(); + getAndFocusQuestion('My first question').within(() => { + openVisibilityOptions(); + checkThatSelectedVisibilityOptionIs('Visible if...'); + checkThatConditionEditorIsDisplayed(); + closeVisibilityOptions(); + }); + + // Select 'Hidden if...' (editor should be displayed) + getAndFocusQuestion('My first question').within(() => { + checkThatVisibilityOptionsAreHidden(); + openVisibilityOptions(); + checkThatVisibilityOptionsAreVisible(); + checkThatSelectedVisibilityOptionIs('Visible if...'); + checkThatConditionEditorIsDisplayed(); + setVisibilityOption('Hidden if...'); + checkThatSelectedVisibilityOptionIs('Hidden if...'); + checkThatConditionEditorIsDisplayed(); + }); + saveAndReload(); + getAndFocusQuestion('My first question').within(() => { + openVisibilityOptions(); + checkThatSelectedVisibilityOptionIs('Hidden if...'); + checkThatConditionEditorIsDisplayed(); + closeVisibilityOptions(); + }); + + // Select 'Always visible' (editor should be hidden) + getAndFocusQuestion('My first question').within(() => { + checkThatVisibilityOptionsAreHidden(); + openVisibilityOptions(); + checkThatVisibilityOptionsAreVisible(); + checkThatSelectedVisibilityOptionIs('Hidden if...'); + checkThatConditionEditorIsDisplayed(); + setVisibilityOption('Always visible'); + checkThatSelectedVisibilityOptionIs('Always visible'); + checkThatConditionEditorIsNotDisplayed(); + }); + saveAndReload(); + getAndFocusQuestion('My first question').within(() => { + initVisibilityConfiguration(); + checkThatSelectedVisibilityOptionIs('Always visible'); + checkThatConditionEditorIsNotDisplayed(); + closeVisibilityOptions(); + }); + }); + + it('can use the editor to add or delete conditions on a question', () => { + createForm(); + addQuestion('My first question'); + addQuestion('My second question'); + addQuestion('My third question'); + saveAndReload(); + + getAndFocusQuestion('My third question').within(() => { + initVisibilityConfiguration(); + setVisibilityOption('Visible if...'); + fillCondition(0, null, 'My second question', 'Is not equal to', 'I love GLPI'); + addNewEmptyCondition(); + fillCondition(1, 'Or', 'My first question', 'Contains', 'GLPI is great'); + }); + saveAndReload(); + getAndFocusQuestion('My third question').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My second question', + 'Is not equal to', + 'I love GLPI', + ); + checkThatConditionExist( + 1, + 'Or', + 'My first question', + 'Contains', + 'GLPI is great', + ); + deleteConditon(0); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + saveAndReload(); + getAndFocusQuestion('My third question').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + }); + + it('can use the editor to add or delete conditions (unsaved form)', () => { + // Repeat the same process as the previous test but skip the saveAndReload + // step to see how GLPI's handle conditions on unsaved questions. + createForm(); + addQuestion('My first question'); + addQuestion('My second question'); + addQuestion('My third question'); + + getAndFocusQuestion('My third question').within(() => { + initVisibilityConfiguration(); + setVisibilityOption('Visible if...'); + fillCondition(0, null, 'My second question', 'Is not equal to', 'I love GLPI'); + addNewEmptyCondition(); + fillCondition(1, 'Or', 'My first question', 'Contains', 'GLPI is great'); + }); + saveAndReload(); + getAndFocusQuestion('My third question').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My second question', + 'Is not equal to', + 'I love GLPI' + ); + checkThatConditionExist( + 1, + 'Or', + 'My first question', + 'Contains', + 'GLPI is great', + ); + deleteConditon(0); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + saveAndReload(); + getAndFocusQuestion('My third question').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + }); + + it('can use the editor to add or delete conditions on a comment', () => { + createForm(); + addQuestion('My first question'); + addQuestion('My second question'); + addComment('My first comment'); + saveAndReload(); + + getAndFocusComment('My first comment').within(() => { + initVisibilityConfiguration(); + setVisibilityOption('Visible if...'); + fillCondition(0, null, 'My second question', 'Contains', 'I love GLPI'); + addNewEmptyCondition(); + fillCondition(1, 'Or', 'My first question', 'Contains', 'GLPI is great'); + }); + saveAndReload(); + getAndFocusComment('My first comment').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My second question', + 'Contains', + 'I love GLPI' + ); + checkThatConditionExist( + 1, + 'Or', + 'My first question', + 'Contains', + 'GLPI is great', + ); + deleteConditon(0); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + saveAndReload(); + getAndFocusComment('My first comment').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + }); + + it('can use the editor to add or delete conditions on a section', () => { + createForm(); + addQuestion('My first question'); + addQuestion('My second question'); + addSection('My second section'); + saveAndReload(); + + getAndFocusSection('My second section').within(() => { + initVisibilityConfiguration(); + setVisibilityOption('Visible if...'); + fillCondition(0, null, 'My second question', 'Do not contains', 'I love GLPI'); + addNewEmptyCondition(); + fillCondition(1, 'Or', 'My first question', 'Contains', 'GLPI is great'); + }); + saveAndReload(); + getAndFocusSection('My second section').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My second question', + 'Do not contains', + 'I love GLPI' + ); + checkThatConditionExist( + 1, + 'Or', + 'My first question', + 'Contains', + 'GLPI is great', + ); + deleteConditon(0); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + saveAndReload(); + getAndFocusSection('My second section').within(() => { + openVisibilityOptions(); + checkThatConditionExist( + 0, + null, + 'My first question', + 'Contains', + 'GLPI is great', + ); + checkThatConditionDoNotExist(1); + }); + }); +}); diff --git a/tests/cypress/e2e/form/form_editor.cy.js b/tests/cypress/e2e/form/editor/editor.cy.js similarity index 98% rename from tests/cypress/e2e/form/form_editor.cy.js rename to tests/cypress/e2e/form/editor/editor.cy.js index d87c1c3bb81..827d5d96469 100644 --- a/tests/cypress/e2e/form/form_editor.cy.js +++ b/tests/cypress/e2e/form/editor/editor.cy.js @@ -273,7 +273,7 @@ describe ('Form editor', () => { // Delete question cy.get('@second_section') - .findByRole('button', {'name': "Section actions"}) + .findByRole('button', {'name': "More actions"}) .click() ; cy.findByRole('button', {'name': "Delete section"}).click(); @@ -301,7 +301,7 @@ describe ('Form editor', () => { // Duplicate second section cy.get('@sections').eq(1).as('second_section'); cy.get('@second_section') - .findByRole('button', {'name': "Section actions"}) + .findByRole('button', {'name': "More actions"}) .click() ; cy.findByRole('button', {'name': "Duplicate section"}).click(); @@ -359,7 +359,7 @@ describe ('Form editor', () => { // Merge the two sections cy.get('@sections') .eq(1) - .findByRole('button', {'name': "Section actions"}) + .findByRole('button', {'name': "More actions"}) .click() ; cy.findByRole('button', {'name': "Merge with previous section"}).click(); @@ -530,7 +530,7 @@ describe ('Form editor', () => { // Create a second section cy.addSection("Second section"); - cy.findAllByRole('region', {'name': 'Form section'}).as('sections'); + cy.findAllByRole('region', {'name': 'Section details'}).as('sections'); cy.get('@sections').should('have.length', 2); // Add two questions to our section @@ -540,7 +540,7 @@ describe ('Form editor', () => { // Open "reorder sections" modal cy.get('@sections') .eq(0) - .findByRole('button', {'name': "Section actions"}) + .findByRole('button', {'name': "More actions"}) .click() ; cy.findByRole('button', {'name': "Move section"}).click(); @@ -719,8 +719,8 @@ describe ('Form editor', () => { cy.getDropdownByLabelText("Question type").selectDropdownValue('Actors'); // Duplicate first section - cy.findAllByRole('region', {'name': 'Form section'}).eq(0).within(() => { - cy.findByRole('button', {'name': 'Section actions'}).click(); + cy.findAllByRole('region', {'name': 'Section details'}).eq(0).within(() => { + cy.findByRole('button', {'name': 'More actions'}).click(); cy.findByRole('button', {'name': 'Duplicate section'}).click(); }); diff --git a/tests/cypress/e2e/form/form_preview.cy.js b/tests/cypress/e2e/form/form_preview.cy.js index 33a99607060..2b6bd5c9398 100644 --- a/tests/cypress/e2e/form/form_preview.cy.js +++ b/tests/cypress/e2e/form/form_preview.cy.js @@ -126,7 +126,7 @@ describe('Form preview', config, () => { cy.findAllByRole('region', { 'name': 'Form section' }).eq(1).within(() => { // Set the section description - cy.findByRole('button', { 'name': 'Section actions' }).click(); + cy.findByRole('button', { 'name': 'More actions' }).click(); cy.findByRole('button', { 'name': 'Merge with previous section' }).click(); }); checkPreviewButton(); diff --git a/tests/cypress/support/commands/select2.js b/tests/cypress/support/commands/select2.js index 86373431d26..8fa12339cf4 100644 --- a/tests/cypress/support/commands/select2.js +++ b/tests/cypress/support/commands/select2.js @@ -70,15 +70,22 @@ Cypress.Commands.add('selectDropdownValue', {prevSubject: true}, ( ) => { cy.wrap(subject).click(); - // Reduce the scope to the dropdown - if (subject.hasClass('select2-selection--multiple')) { - cy.wrap(subject).find('.select2-search__field').then(($input) => { - cy.get(`#${$input.attr('aria-controls')}`) - .findByRole('option', { name: new_value }) - .click(); - }); - } else { - const select2_id = subject.get(0).children[0].id.replace('-container', ''); - cy.get(`[id="${select2_id}-results"]`).findByRole('option', { name: new_value }).click(); - } + // Select2 content is displayed at the root of the DOM, we must thus + // "recalibrate" the within function using the entire document. + // Without this, any call inside a `within` block would fail as the select2 + // content will be unreachable. + cy.document().its('body').within(() => { + // Reduce the scope to the dropdown + if (subject.hasClass('select2-selection--multiple')) { + cy.wrap(subject).find('.select2-search__field').then(($input) => { + cy.get(`#${$input.attr('aria-controls')}`) + .findByRole('option', { name: new_value }) + .click(); + }); + } else { + const select2_id = subject.get(0).children[0].id.replace('-container', ''); + cy.get(`[id="${select2_id}-results"]`).findByRole('option', { name: new_value }).click(); + } + }); + });