feat(forms): prevent form elements deletion when they are used by conditions

js/modules/Forms/EditorController.js

@@ -1005,6 +1005,10 @@ export class GlpiFormEditorController
      * @param {jQuery} question
      */
     #deleteQuestion(question) {
+        if (!this.#checkBlockConditionDependencies('question', question)) {
+            return;
+        }
+
         // Dispose all tooltips and popovers
         question.find('[data-bs-toggle="tooltip"]').tooltip('dispose');
 
@@ -1038,6 +1042,150 @@ export class GlpiFormEditorController
         }
     }
 
+    /**
+     * Check if a block is used in conditions and show modal if needed
+     *
+     * @param {string} type Type of block ('question', 'comment', 'section')
+     * @param {jQuery} block The block element to check
+     * @returns {boolean} True if the block can be deleted, false otherwise
+     */
+    #checkBlockConditionDependencies(type, block) {
+        const uuid = `${type}-${this.#getItemInput(block, "uuid")}`;
+        const conditions_that_use_this_block = $('[data-glpi-conditions-editor-item]')
+            .filter((_index, element) => element.value == uuid);
+
+        // If the block is used in a condition, we can't delete it
+        if (conditions_that_use_this_block.length > 0) {
+            this.#showBlockHasConditionsModal(type, conditions_that_use_this_block);
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Show the modal displaying all questions that use the target question in their conditions
+     *
+     * @param {jQuery} conditions_that_use_this_question jQuery object containing condition elements
+     */
+    #showBlockHasConditionsModal(type, conditions_that_use_this_question) {
+        // Only show wanted header
+        $('[data-glpi-form-editor-block-has-conditions-modal-header]')
+            .addClass('d-none')
+            .filter((_index, element) => $(element).data('glpi-form-editor-block-has-conditions-modal-header') === type)
+            .removeClass('d-none');
+
+        // Get the list of questions using this question in their conditions
+        const questions_with_conditions = new Set();
+        const elements_with_conditions = [];
+        conditions_that_use_this_question.each((_index, element) => {
+            // Find the parent question that contains this condition
+            const parent_block = $(element).closest('[data-glpi-form-editor-block]');
+            if (parent_block.length > 0) {
+                const name = this.#getItemInput(parent_block, "name");
+                const uuid = this.#getItemInput(parent_block, "uuid");
+
+                elements_with_conditions.push({
+                    name: name,
+                    uuid: uuid,
+                    type: 'question',
+                    element: parent_block
+                });
+
+                questions_with_conditions.add(name);
+            }
+
+            // Also check for sections using this condition
+            const parent_section = $(element).closest('[data-glpi-form-editor-section-details]');
+            if (parent_section.length > 0) {
+                const name = this.#getItemInput(parent_section, "name");
+                const uuid = this.#getItemInput(parent_section, "uuid");
+
+                elements_with_conditions.push({
+                    name: name,
+                    uuid: uuid,
+                    type: 'section',
+                    element: parent_section
+                });
+
+                questions_with_conditions.add(name);
+            }
+        });
+
+        // Clear and populate the modal list
+        const modal_list = $('[data-glpi-form-editor-block-has-conditions-list]');
+        modal_list.empty();
+
+        // Get the template for list items
+        const template = $('[data-glpi-form-editor-block-has-conditions-item-template]').html();
+
+        // Add each question name to the list
+        elements_with_conditions.forEach(data => {
+            const item = $(template);
+            const nameElement = item.find('[data-glpi-form-editor-block-has-conditions-item-name]');
+
+            nameElement.text(data.name);
+            nameElement.attr('data-glpi-form-editor-block-has-conditions-item-uuid', data.uuid);
+            nameElement.attr('data-glpi-form-editor-block-has-conditions-item-type', data.type);
+
+            modal_list.append(item);
+        });
+
+        // Set up click handlers for the items
+        modal_list.find('[data-glpi-form-editor-block-has-conditions-item-selector]').on('click', (e) => {
+            e.preventDefault();
+
+            // Hide modal
+            $('[data-glpi-form-editor-block-has-conditions-modal]').modal('hide');
+
+            // Get the UUID and type
+            const clickedElement = $(e.currentTarget);
+            const uuid = clickedElement.data('glpi-form-editor-block-has-conditions-item-uuid');
+            const type = clickedElement.data('glpi-form-editor-block-has-conditions-item-type');
+
+            // Find the element with this UUID
+            let targetElement;
+            if (type === 'question') {
+                const allQuestions = $(this.#target).find('[data-glpi-form-editor-question]');
+                allQuestions.each((_index, question) => {
+                    if (this.#getItemInput($(question), "uuid") === uuid) {
+                        targetElement = $(question);
+                    }
+                });
+            } else if (type === 'section') {
+                const allSections = $(this.#target).find('[data-glpi-form-editor-section-details]');
+                allSections.each((_index, section) => {
+                    if (this.#getItemInput($(section), "uuid") === uuid) {
+                        targetElement = $(section);
+                    }
+                });
+            }
+
+            // Make sure we found the element and it's visible (not in a collapsed section)
+            if (targetElement && targetElement.length > 0) {
+                // Make sure parent section is not collapsed
+                const parentSection = targetElement.closest('[data-glpi-form-editor-section]');
+                if (parentSection.hasClass('section-collapsed')) {
+                    // Uncollapse the section
+                    this.#collaspeSection(parentSection);
+                }
+
+                // Set as active
+                this.#setActiveItem(targetElement);
+
+                // Scroll to the element
+                targetElement.get(0).scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                    inline: 'nearest'
+                });
+            }
+        });
+
+        // Show the modal
+        $('[data-glpi-form-editor-block-has-conditions-modal]').modal('show');
+    }
+
     /**
      * Toggle the mandatory class for the given question.
      * @param {jQuery} question
@@ -1643,6 +1791,10 @@ export class GlpiFormEditorController
      * @param {jQuery} section
      */
     #deleteSection(section) {
+        if (!this.#checkBlockConditionDependencies('section', section)) {
+            return;
+        }
+
         if (section.prev().length == 0) {
             // If this is the first section of the form, set the next section as active if it exists
             if (section.next().length > 0 && this.#getSectionCount() > 2) {
@@ -1705,6 +1857,10 @@ export class GlpiFormEditorController
      * @param {jQuery} comment
      */
     #deleteComment(comment) {
+        if (!this.#checkBlockConditionDependencies('comment', comment)) {
+            return;
+        }
+
         // Dispose all tooltips and popovers
         comment.find('[data-bs-toggle="tooltip"]').tooltip('dispose');
 

templates/pages/admin/form/block_has_conditions_modal.html.twig

@@ -0,0 +1,84 @@
+{#
+ # ---------------------------------------------------------------------
+ #
+ # 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 <https://www.gnu.org/licenses/>.
+ #
+ # ---------------------------------------------------------------------
+ #}
+
+{# Block has conditions modal #}
+<div
+    data-glpi-form-editor-block-has-conditions-modal
+    class="modal modal-blur fade"
+    aria-modal="true"
+    role="dialog"
+    aria-label="{{ __("Block has conditions and cannot be deleted") }}"
+>
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header p-3">
+                <div>
+                    <div class="d-none" data-glpi-form-editor-block-has-conditions-modal-header="question">
+                        <h3 class="m-0">{{ __("This question is used in conditions of other form elements") }}</h3>
+                        <p class="m-0 text-muted">{{ __("You must delete related conditions before deleting this question") }}</p>
+                    </div>
+                    <div class="d-none" data-glpi-form-editor-block-has-conditions-modal-header="comment">
+                        <h3 class="m-0">{{ __("This comment is used in conditions of other form elements") }}</h3>
+                        <p class="m-0 text-muted">{{ __("You must delete related conditions before deleting this comment") }}</p>
+                    </div>
+                    <div class="d-none" data-glpi-form-editor-block-has-conditions-modal-header="section">
+                        <h3 class="m-0">{{ __("This section is used in conditions of other form elements") }}</h3>
+                        <p class="m-0 text-muted">{{ __("You must delete related conditions before deleting this section") }}</p>
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="{{ __("Close") }}"
+                ></button>
+            </div>
+            <div class="modal-body p-0">
+                <div class="list-group list-group-flush list-group-hoverable" data-glpi-form-editor-block-has-conditions-list>
+                    <!-- List items will be populated dynamically by JavaScript -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# Item template for conditions list #}
+    <div class="d-none" data-glpi-form-editor-block-has-conditions-item-template>
+        <div class="list-group-item d-flex align-items-center space-x-2 p-3">
+            <i class="ti ti-circle-x fa-lg text-danger"></i>
+            <a href="#" class="m-0" style="font-weight: var(--tblr-font-weight-medium)"
+               data-glpi-form-editor-block-has-conditions-item-name
+               data-glpi-form-editor-block-has-conditions-item-selector
+               data-glpi-form-editor-block-has-conditions-item-uuid></a>
+        </div>
+    </div>
+</div>

templates/pages/admin/form/form_editor.html.twig

@@ -302,6 +302,9 @@
 
     {# Move section modal #}
     {{ include('pages/admin/form/move_section_modal.html.twig') }}
+
+    {# Block has conditions modal #}
+    {{ include('pages/admin/form/block_has_conditions_modal.html.twig') }}
 </form>
 
 {% if item.canUpdate() %}

templates/pages/admin/form/move_section_modal.html.twig

@@ -40,15 +40,13 @@
     <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="mt-2">
-                    <h3> {{ __("Reorganize sections") }} </h3>
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="{{ __("Close") }}"
-                    ></button>
-                </div>
+                <h3 class="modal-title">{{ __("Reorganize sections") }}</h3>
+                <button
+                    type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="{{ __("Close") }}"
+                ></button>
             </div>
 
             {# Items will be generated when the modal is open #}