From 0bb954dd9e5110da8f70a3a3ffceb8b1947ce95d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Cailly?= <ccailly@teclib.com>
Date: Wed, 6 Nov 2024 11:16:44 +0100
Subject: [PATCH] ui(forms): Rework and refactor editor page, render page and
 question type components

---
 .../components/form/_form-editor.scss         |  31 ++++-
 .../components/form/_form-renderer.scss       |  18 +++
 .../AbstractQuestionTypeActors.php            |  27 ++--
 .../AbstractQuestionTypeSelectable.php        |   3 +-
 .../AbstractQuestionTypeShortAnswer.php       |   2 +-
 .../QuestionType/QuestionTypeDateTime.php     |   6 +-
 .../QuestionType/QuestionTypeDropdown.php     |   3 +-
 .../Form/QuestionType/QuestionTypeFile.php    |   2 +
 .../Form/QuestionType/QuestionTypeItem.php    |  14 +-
 .../QuestionType/QuestionTypeLongText.php     |  18 +--
 .../QuestionType/QuestionTypeRequestType.php  |   6 +-
 .../Form/QuestionType/QuestionTypeUrgency.php |   6 +-
 .../QuestionType/QuestionTypeUserDevice.php   |   9 +-
 .../pages/admin/form/form_question.html.twig  |   2 +-
 templates/pages/form_renderer.html.twig       | 124 +++++++++---------
 15 files changed, 174 insertions(+), 97 deletions(-)

diff --git a/css/includes/components/form/_form-editor.scss b/css/includes/components/form/_form-editor.scss
index e0f6fba81d1..50a09cc2202 100644
--- a/css/includes/components/form/_form-editor.scss
+++ b/css/includes/components/form/_form-editor.scss
@@ -74,6 +74,24 @@
             display: flex !important;
         }
     }
+
+    .fileupload {
+        margin: 0;
+    }
+
+    .only-uploaded-files {
+        .fileupload_info {
+            margin-bottom: 0;
+
+            p:first-child {
+                margin-top: 10px;
+            }
+
+            p:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
 }
 
 .editor-footer {
@@ -250,7 +268,6 @@
             border-bottom-right-radius: var(--tblr-border-radius);
             padding: 0.5rem;
             padding-bottom: 0;
-            margin-bottom: 0.5rem;
         }
 
         .single-preview-dropdown, .multiple-preview-dropdown {
@@ -259,5 +276,17 @@
                 border-bottom-right-radius: unset;
             }
         }
+
+        div:not([data-glpi-form-editor-selectable-question-options])>[data-glpi-form-selectable-question-option]:last-child {
+            margin-bottom: 0 !important;
+        }
+    }
+
+    &:not([data-glpi-form-editor-active-question]) {
+        [data-glpi-form-editor-selectable-question-options] {
+            [data-glpi-form-selectable-question-option]:last-child {
+                margin-bottom: 0 !important;
+            }
+        }
     }
 }
diff --git a/css/includes/components/form/_form-renderer.scss b/css/includes/components/form/_form-renderer.scss
index cf354277564..ad7030ed6a9 100644
--- a/css/includes/components/form/_form-renderer.scss
+++ b/css/includes/components/form/_form-renderer.scss
@@ -41,4 +41,22 @@
             margin-bottom: 0 !important;
         }
     }
+
+    .fileupload {
+        margin: 0;
+    }
+
+    .only-uploaded-files {
+        .fileupload_info {
+            margin-bottom: 0;
+
+            p:first-child {
+                margin-top: 10px;
+            }
+
+            p:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
 }
diff --git a/src/Glpi/Form/QuestionType/AbstractQuestionTypeActors.php b/src/Glpi/Form/QuestionType/AbstractQuestionTypeActors.php
index 43f4dd91910..2797e66e745 100644
--- a/src/Glpi/Form/QuestionType/AbstractQuestionTypeActors.php
+++ b/src/Glpi/Form/QuestionType/AbstractQuestionTypeActors.php
@@ -213,15 +213,16 @@ public function renderAdministrationTemplate(?Question $question): string
             actors_dropdown,
             '',
             {
-                'disabled': is_multiple_actors,
-                'no_label': true,
+                'disabled'     : is_multiple_actors,
+                'no_label'     : true,
+                'mb'           : '',
+                'wrapper_class': '',
                 'field_class': [
                     'actors-dropdown',
                     'col-12',
                     'col-sm-6',
                     not is_multiple_actors ? '' : 'd-none'
                 ]|join(' '),
-                wrapper_class: ''
             }
         ) }}
         {{ fields.htmlField(
@@ -229,14 +230,15 @@ public function renderAdministrationTemplate(?Question $question): string
             actors_dropdown_multiple,
             '',
             {
-                'no_label': true,
-                'field_class': [
+                'no_label'     : true,
+                'wrapper_class': '',
+                'mb'           : '',
+                'field_class'  : [
                     'actors-dropdown',
                     'col-12',
                     'col-sm-6',
                     is_multiple_actors ? '' : 'd-none'
                 ]|join(' '),
-                wrapper_class: ''
             }
         ) }}
 TWIG;
@@ -338,9 +340,10 @@ public function renderEndUserTemplate(Question $question): string
             question.getEndUserInputName(),
             value,
             {
-                'multiple': is_multiple_actors,
+                'multiple'     : is_multiple_actors,
                 'allowed_types': allowed_types,
-                'aria_label': aria_label
+                'aria_label'   : aria_label,
+                'mb'           : ''
             }
         ]) %}
 
@@ -349,11 +352,13 @@ public function renderEndUserTemplate(Question $question): string
             actors_dropdown,
             '',
             {
-                'no_label': true,
-                'field_class': [
+                'no_label'     : true,
+                'wrapper_class': '',
+                'mb'           : '',
+                'field_class'  : [
                     'col-12',
                     'col-sm-6',
-                ]|join(' ')
+                ]|join(' '),
             }
         ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/AbstractQuestionTypeSelectable.php b/src/Glpi/Form/QuestionType/AbstractQuestionTypeSelectable.php
index 4e9668481a3..21168820234 100644
--- a/src/Glpi/Form/QuestionType/AbstractQuestionTypeSelectable.php
+++ b/src/Glpi/Form/QuestionType/AbstractQuestionTypeSelectable.php
@@ -211,6 +211,7 @@ public function renderAdministrationTemplate(?Question $question): string
 
             <div
                 class="d-flex gap-1 align-items-center mb-2"
+                data-glpi-form-selectable-question-option
                 {{ extra_details ? 'data-glpi-form-editor-question-extra-details' : '' }}
             >
                 <i
@@ -303,7 +304,7 @@ public function renderEndUserTemplate(
     ): string {
         $template = <<<TWIG
             {% for value in values %}
-                <label class="form-check">
+                <label class="form-check {{ loop.last ? 'mb-0' : '' }}">
                     <input
                         type="{{ input_type }}"
                         name="{{ question.getEndUserInputName() }}[]"
diff --git a/src/Glpi/Form/QuestionType/AbstractQuestionTypeShortAnswer.php b/src/Glpi/Form/QuestionType/AbstractQuestionTypeShortAnswer.php
index 68657460b33..72b558b1ae8 100644
--- a/src/Glpi/Form/QuestionType/AbstractQuestionTypeShortAnswer.php
+++ b/src/Glpi/Form/QuestionType/AbstractQuestionTypeShortAnswer.php
@@ -97,7 +97,7 @@ public function renderAdministrationTemplate(?Question $question): string
     {
         $template = <<<TWIG
             <input
-                class="form-control mb-2"
+                class="form-control"
                 type="{{ input_type }}"
                 name="default_value"
                 placeholder="{{ input_placeholder }}"
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeDateTime.php b/src/Glpi/Form/QuestionType/QuestionTypeDateTime.php
index d6fc741610b..5aef528bbbe 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeDateTime.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeDateTime.php
@@ -189,9 +189,9 @@ public function renderAdministrationTemplate(?Question $question): string
             {% set rand = random() %}
 
             <div class="row g-2">
-                <div class="col-5">
+                <div class="col-6">
                     <input
-                        class="form-control mb-2"
+                        class="form-control"
                         type="{{ input_type }}"
                         id="date_input_{{ rand }}"
                         name="default_value"
@@ -339,7 +339,7 @@ public function renderEndUserTemplate(
         $template = <<<TWIG
             <input
                 type="{{ input_type }}"
-                class="form-control"
+                class="form-control w-50"
                 name="{{ question.getEndUserInputName() }}"
                 value="{{ default_value }}"
                 {{ question.fields.is_mandatory ? 'required' : '' }}
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeDropdown.php b/src/Glpi/Form/QuestionType/QuestionTypeDropdown.php
index fddaeb69368..bf5dc6195fd 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeDropdown.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeDropdown.php
@@ -221,8 +221,9 @@ public function renderEndUserTemplate(
                 '',
                 {
                     'no_label': true,
-                    'values': checked_values,
+                    'values'  : checked_values,
                     'multiple': is_multiple,
+                    'mb'      : '',
                 }
             ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeFile.php b/src/Glpi/Form/QuestionType/QuestionTypeFile.php
index fb6c66e78e6..b28a2746286 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeFile.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeFile.php
@@ -75,6 +75,7 @@ public function renderAdministrationTemplate(?Question $question): string
                     'init'           : question is not null ? true: false,
                     'no_label'       : true,
                     'full_width'     : true,
+                    'mb'             : '',
                 }
             ) }}
 TWIG;
@@ -105,6 +106,7 @@ public function renderEndUserTemplate(Question $question): string
                     'init'                 : true,
                     'no_label'             : true,
                     'full_width'           : true,
+                    'mb'                   : '',
                 }
             ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeItem.php b/src/Glpi/Form/QuestionType/QuestionTypeItem.php
index ee4b22c8832..ba450accb4e 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeItem.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeItem.php
@@ -197,6 +197,7 @@ public function renderAdministrationTemplate(?Question $question): string
                     'add_data_attributes_itemtype_dropdown' : {
                         'glpi-form-editor-specific-question-extra-data': '',
                     },
+                    'mb'                            : '',
                 }
             ) }}
 
@@ -228,7 +229,15 @@ public function renderEndUserTemplate(Question $question): string
         $template = <<<TWIG
             {% import 'components/form/fields_macros.html.twig' as fields %}
 
-            {{ fields.hiddenField(question.getEndUserInputName() ~ '[itemtype]', itemtype) }}
+            {{ fields.hiddenField(
+                question.getEndUserInputName() ~ '[itemtype]',
+                itemtype,
+                '',
+                {
+                    'no_label': true,
+                    'mb': ''
+                }
+            ) }}
             {{ fields.dropdownField(
                 itemtype,
                 question.getEndUserInputName() ~ '[items_id]',
@@ -239,6 +248,9 @@ public function renderEndUserTemplate(Question $question): string
                     'display_emptychoice': true,
                     'right'              : 'all',
                     'aria_label'         : aria_label,
+                    'mb'                 : '',
+                    'addicon'            : false,
+                    'comments'           : false,
                 }
             ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeLongText.php b/src/Glpi/Form/QuestionType/QuestionTypeLongText.php
index 3ff8b0661d7..cc2953a5bbc 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeLongText.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeLongText.php
@@ -107,15 +107,16 @@ public function renderAdministrationTemplate(?Question $question): string
                 question is not null ? question.fields.default_value : '',
                 "",
                 {
-                    'placeholder': placeholder,
+                    'placeholder'    : placeholder,
                     'enable_richtext': true,
-                    'editor_height': "0",
-                    'rows' : 1,
-                    'init': question is not null ? true : false,
-                    'is_horizontal': false,
-                    'full_width'   : true,
-                    'no_label'     : true,
-                    'aria_label': aria_label,
+                    'editor_height'  : "0",
+                    'rows'           : 1,
+                    'init'           : question is not null ? true: false,
+                    'is_horizontal'  : false,
+                    'full_width'     : true,
+                    'no_label'       : true,
+                    'aria_label'     : aria_label,
+                    'mb'             : '',
                 }
             ) }}
 TWIG;
@@ -147,6 +148,7 @@ public function renderEndUserTemplate(Question $question): string
                     'is_horizontal': false,
                     'full_width'   : true,
                     'no_label'     : true,
+                    'mb'           : '',
                 }
             ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeRequestType.php b/src/Glpi/Form/QuestionType/QuestionTypeRequestType.php
index be1149f5a0d..3b0de024099 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeRequestType.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeRequestType.php
@@ -78,7 +78,8 @@ public function renderAdministrationTemplate(?Question $question): string
                 {
                     'init'               : init,
                     'no_label'           : true,
-                    'display_emptychoice': true
+                    'display_emptychoice': true,
+                    'mb'                 : '',
                 }
             ) }}
 TWIG;
@@ -105,7 +106,8 @@ public function renderEndUserTemplate(Question $question): string
             {
                 'no_label'           : true,
                 'display_emptychoice': false,
-                'aria_label'         : label
+                'aria_label'         : label,
+                'mb'                 : '',
             }
         ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeUrgency.php b/src/Glpi/Form/QuestionType/QuestionTypeUrgency.php
index 27695232844..31c732bfbb1 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeUrgency.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeUrgency.php
@@ -104,7 +104,8 @@ public function renderAdministrationTemplate(?Question $question): string
                 {
                     'init'                : init,
                     'no_label'            : true,
-                    'display_emptychoice' : true
+                    'display_emptychoice' : true,
+                    'mb'                  : '',
                 }
             ) }}
 TWIG;
@@ -131,7 +132,8 @@ public function renderEndUserTemplate(Question $question): string
             {
                 'no_label'            : true,
                 'display_emptychoice' : true,
-                'aria_label'          : label
+                'aria_label'          : label,
+                'mb'                  : '',
             }
         ) }}
 TWIG;
diff --git a/src/Glpi/Form/QuestionType/QuestionTypeUserDevice.php b/src/Glpi/Form/QuestionType/QuestionTypeUserDevice.php
index a0a411fdde4..b10fc06d1f2 100644
--- a/src/Glpi/Form/QuestionType/QuestionTypeUserDevice.php
+++ b/src/Glpi/Form/QuestionType/QuestionTypeUserDevice.php
@@ -91,13 +91,14 @@ public function renderAdministrationTemplate(?Question $question): string
                     'init'               : init,
                     'no_label'           : true,
                     'field_class'        : [
-                        'col-12',
+                        'col-6',
                         'devices-dropdown',
                         is_multiple_devices ? '' : 'd-none'
                     ]|join(' '),
                     'multiple'           : true,
                     'disabled'           : true,
                     'aria_label'         : aria_label_multiple_devices,
+                    'mb'                 : '',
                 }
             ) }}
 
@@ -110,13 +111,14 @@ public function renderAdministrationTemplate(?Question $question): string
                     'init'               : init,
                     'no_label'           : true,
                     'field_class'        : [
-                        'col-12',
+                        'col-6',
                         'devices-dropdown',
                         is_multiple_devices ? 'd-none' : ''
                     ]|join(' '),
                     'display_emptychoice': true,
                     'disabled'           : true,
                     'aria_label'         : aria_label_single_device,
+                    'mb'                 : '',
                 }
             ) }}
 TWIG;
@@ -183,10 +185,11 @@ public function renderEndUserTemplate(Question $question): string
                 '',
                 {
                     'no_label'           : true,
-                    'field_class'        : 'col-12',
+                    'field_class'        : 'col-6',
                     'display_emptychoice': true,
                     'multiple'           : is_multiple_devices,
                     'aria_label'         : aria_label,
+                    'mb'                 : '',
                 }
             ) }}
 TWIG;
diff --git a/templates/pages/admin/form/form_question.html.twig b/templates/pages/admin/form/form_question.html.twig
index f8239c490ca..0d4bad32362 100644
--- a/templates/pages/admin/form/form_question.html.twig
+++ b/templates/pages/admin/form/form_question.html.twig
@@ -120,7 +120,7 @@
 
             {# Display common fields #}
             <div
-                class="content-editable-tinymce"
+                class="content-editable-tinymce mt-2"
                 data-glpi-form-editor-question-description
                 {# Mark as secondary if empty #}
                 {{ question is null or question.fields.description|length == 0 ? "data-glpi-form-editor-question-extra-details" : "" }}
diff --git a/templates/pages/form_renderer.html.twig b/templates/pages/form_renderer.html.twig
index 130c99036da..5c4b83d20ab 100644
--- a/templates/pages/form_renderer.html.twig
+++ b/templates/pages/form_renderer.html.twig
@@ -49,17 +49,13 @@
 
             {# Form header: title and description #}
             <div
-                class="card mb-3"
+                class="mb-4"
                 data-glpi-form-renderer-form-header
             >
-                <div class="card-status-top bg-primary"></div>
+                <h1 class="form-title mb-2"> {{ form.fields.name }} </h1>
 
-                <div class="card-body">
-                    <h1 class="form-title"> {{ form.fields.name }} </h1>
-
-                    <div class="text-muted form-description">
-                        {{ form.fields.header|safe_html }}
-                    </div>
+                <div class="text-muted form-description">
+                    {{ form.fields.header|safe_html }}
                 </div>
             </div>
 
@@ -69,73 +65,77 @@
                 {% set section_index = loop.index0 %}
 
                 <div
-                    class="{{ is_first_section and not is_single_section_form ? "" : "d-none" }}"
+                    class="{{ is_first_section ? "" : "d-none" }}"
                     data-glpi-form-renderer-section="{{ section_index }}"
                 >
+                    {% if not is_single_section_form %}
+                        <div
+                            class="bg-primary px-2 py-1 rounded-top "
+                            style="width: fit-content;"
+                        >
+                            {{ __("Step %d of %d")|format(loop.index, form.getSections()|length) }}
+                        </div>
+                    {% endif %}
                     <div
-                        class="bg-primary px-2 py-1 rounded-top "
-                        style="width: fit-content;"
-                    >
-                        {{ __("Step %d of %d")|format(loop.index, form.getSections()|length) }}
-                    </div>
-                    <div
-                        class="card mb-3"
+                        class="card mb-3" {{ not is_single_section_form ? "style='border-top-left-radius: 0;'" : "" }}
                     >
                         <div class="card-body">
 
-                            <h2>{{ section.fields.name }}</h2>
-
-                            <div class="text-muted section-description">
-                                {{ section.fields.description|safe_html }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {% for form_block in section.getBlocks() %}
-                    {% if form_block is instanceof('Glpi\\Form\\Question') %}
-                        {% set question_type = form_block.getQuestionType() %}
-                    {% endif %}
+                            {% if not is_single_section_form %}
+                                <h2 class="mb-1 {{ not section.fields.name ? "text-muted" : "" }}">
+                                    {{ section.fields.name|default(__('Untitled section')) }}
+                                </h2>
 
-                    {% set skip_question = false %}
+                                <div class="text-muted section-description mb-3">
+                                    {{ section.fields.description|safe_html }}
+                                </div>
+                            {% endif %}
 
-                    {# Skip unknown types (may be a disabled plugin) #}
-                    {% if form_block is instanceof('Glpi\\Form\\Question') and question_type is null %}
-                        {% set skip_question = true %}
-                    {% endif %}
+                            {% for form_block in section.getBlocks() %}
+                                {% if form_block is instanceof('Glpi\\Form\\Question') %}
+                                    {% set question_type = form_block.getQuestionType() %}
+                                {% endif %}
 
-                    {# Skip questions not allowed for anonymous forms #}
-                    {% if not skip_question and form_block is instanceof('Glpi\\Form\\Question') and unauthenticated_user and not question_type.isAllowedForUnauthenticatedAccess() %}
-                        {% set skip_question = true %}
-                    {% endif %}
+                                {% set skip_question = false %}
 
-                    {% if not skip_question %}
-                        <section
-                            aria-label="{{ form_block.fields.name }}"
-                            class="card mb-3 {{ is_first_section ? "" : "d-none" }}"
-                            data-glpi-form-renderer-parent-section="{{ section_index }}"
-                        >
-                            <div class="card-body">
-                                <h3>
-                                    {{ form_block.fields.name }}
-                                    {% if form_block.fields.is_mandatory %}
-                                        <span class="text-danger">*</span>
-                                    {% endif %}
-                                </h3>
+                                {# Skip unknown types (may be a disabled plugin) #}
+                                {% if form_block is instanceof('Glpi\\Form\\Question') and question_type is null %}
+                                    {% set skip_question = true %}
+                                {% endif %}
 
-                                {% if form_block is instanceof('Glpi\\Form\\Question') %}
-                                    <div class="mb-2">
-                                        {{ question_type.renderEndUserTemplate(form_block)|raw }}
-                                    </div>
+                                {# Skip questions not allowed for anonymous forms #}
+                                {% if not skip_question and form_block is instanceof('Glpi\\Form\\Question') and unauthenticated_user and not question_type.isAllowedForUnauthenticatedAccess() %}
+                                    {% set skip_question = true %}
                                 {% endif %}
 
-                                <div class="text-muted block-description">
-                                    {{ form_block.fields.description|safe_html }}
-                                </div>
-                            </div>
-                        </section>
-                    {% endif %}
-                {% endfor %}
+                                {% if not skip_question %}
+                                    <section
+                                        aria-label="{{ form_block.fields.name }}"
+                                        class="{{ loop.last ? "" : "mb-3" }} {{ is_first_section ? "" : "d-none" }}"
+                                        data-glpi-form-renderer-parent-section="{{ section_index }}"
+                                    >
+                                        <h3 class="mb-2 {{ not form_block.fields.name ? "text-muted" : "" }}">
+                                            {{ form_block.fields.name|default(__('Untitled question')) }}
+                                            {% if form_block.fields.is_mandatory %}
+                                                <span class="text-danger">*</span>
+                                            {% endif %}
+                                        </h3>
+
+                                        {% if form_block is instanceof('Glpi\\Form\\Question') %}
+                                            <div class="mb-2">
+                                                {{ question_type.renderEndUserTemplate(form_block)|raw }}
+                                            </div>
+                                        {% endif %}
+
+                                        <div class="text-muted block-description">
+                                            {{ form_block.fields.description|safe_html }}
+                                        </div>
+                                    </section>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
 
             {% endfor %}