feat(forms): Adding dropdown category and related sub question type #17126

ccailly · 2024-05-15T13:31:17Z

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets

Added Dropdown category and related sub-question type : Dropdown

Form editor view :

Form end user view :

AdrienClairembault

Two small bugs I've found:

1) Wrong input name

Should be answers_141 since we switched to the new format.
This mean answers are not taken into account for this question type.

2) Invalid order

It seems the dropdown is not refreshed after options order are modified using drag and drop.

The "old" order is still displayed until we do another action like changing the default value.

src/Form/QuestionType/AbstractQuestionTypeSelectable.php

src/Form/QuestionType/QuestionTypeDropdown.php

js/form_question_dropdown.js

src/Form/QuestionType/AbstractQuestionTypeSelectable.php

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

js/form_editor_controller.js

orthagh · 2024-05-22T14:43:14Z

(opinion based on the provided screenshots)
I feel the design choice when checking multiple flag to switch between radio or checkboxes for options lead to a bad understanding. At least it took a few seconds to understand the options will be displayed in a real dropdown. I almost made a comment about why call it dropdown.

I think in this particular case, you should not decorate options at all. More, there is the drag icon, so 2 icons on the left of the options

Ideas for alternative ux:

select2 tokenisation (may not work without multiple select)
modal with a [new option] link right to the dropdown
keep the same design (without decoration), but make options list like it's the dropdown opened (check this link)

ccailly · 2024-05-30T09:48:52Z

ccailly · 2024-06-11T08:38:52Z

cedric-anne · 2024-06-11T09:07:11Z

@AdrienClairembault @orthagh
Is this OK for you now?

AdrienClairembault

UI is good now.
Some changes requested for the code.

src/Glpi/Form/QuestionType/AbstractQuestionTypeActors.php

cedric-anne

Seems globally OK, I just made a few minor remarks.

src/Glpi/Form/QuestionType/AbstractQuestionTypeSelectable.php

src/Glpi/Form/QuestionType/QuestionTypeDropdown.php

src/Glpi/Form/QuestionType/AbstractQuestionTypeSelectable.php

cedric-anne · 2024-07-01T09:18:23Z

tests/cypress/e2e/form/question_types/dropdown.cy.js

+        // Check selected options and option labels
+        checkSelectedOptions([1]);
+        checkOptionLabels(["Option 1", "Option 2", "Option 3"]);


Not a blocker, but, IMHO, when we switch from multiple to single value dropdonw, we should do this:

if there are multiple values selected, all should be deselected,

if there is a unique value selected, it should remain selected.

orthagh

As discussed together, the current design still has flaws (particularly choosing the default value dropdown, covering the rest of the design, leads to a strange state).
But they may be addressed later, especially with the right panel discussed many times.

Some I agree we're ok for this PR.

Co-authored-by: Cédric Anne <cedric.anne@gmail.com>

…pdown opened

The decoration input has been hidden, so the tests related to the radio/checkbox check was deleted. The only way to set an option has a default value is to select one or more options in the preview dropdown

Co-authored-by: Cédric Anne <cedric.anne@gmail.com>

ccailly requested a review from AdrienClairembault May 15, 2024 13:31

ccailly self-assigned this May 15, 2024

ccailly added the enhancement label May 15, 2024

ccailly added this to the 11.0.0 milestone May 15, 2024

AdrienClairembault requested changes May 22, 2024

View reviewed changes

ccailly force-pushed the feature/add-dropdown-type-question-form branch from c5ced17 to bd6fc60 Compare May 22, 2024 09:55

ccailly requested a review from AdrienClairembault May 22, 2024 13:01

AdrienClairembault approved these changes May 22, 2024

View reviewed changes

AdrienClairembault requested review from trasher, orthagh and cedric-anne May 22, 2024 13:40

cedric-anne reviewed May 22, 2024

View reviewed changes

cedric-anne self-requested a review May 22, 2024 15:34

cedric-anne marked this pull request as draft May 29, 2024 06:42

cedric-anne requested a review from AdrienClairembault May 29, 2024 06:43

cedric-anne marked this pull request as ready for review May 30, 2024 09:52

ccailly force-pushed the feature/add-dropdown-type-question-form branch from c02da61 to 9e480e7 Compare June 5, 2024 13:04

AdrienClairembault requested changes Jun 11, 2024

View reviewed changes

src/Glpi/Form/QuestionType/AbstractQuestionTypeActors.php Outdated Show resolved Hide resolved

ccailly force-pushed the feature/add-dropdown-type-question-form branch from 1393d86 to 171489f Compare June 11, 2024 14:16

ccailly requested a review from AdrienClairembault June 17, 2024 14:21

AdrienClairembault approved these changes Jun 24, 2024

View reviewed changes

cedric-anne reviewed Jul 1, 2024

View reviewed changes

orthagh approved these changes Jul 1, 2024

View reviewed changes

ccailly added 3 commits July 1, 2024 12:18

feat(forms): Adding dropdown category and related sub question type

c3729c0

fix: JS lint

2645070

fix: msgid 'Dropdown' is used without plural and with plural

1eca9da

ccailly and others added 15 commits July 1, 2024 12:18

fix: Compute state when a new option is added among others

1c96998

fix: update option uuid in the addOption method

0cd9a71

Apply suggestions from code review

692932d

fix: JS lint

02f1f0d

Apply suggestions from code review

771a757

Co-authored-by: Cédric Anne <cedric.anne@gmail.com>

fix: Fix typo in variable name in form_editor_controller.js

6bc2f6f

fix: update regular expression pattern for input name postfix

9ff6a6f

refactor(ui): Hide decoration and make option style like it's the dro…

fa94a32

…pdown opened

chore(tests): Update e2e tests to fit with new UI

a966d92

The decoration input has been hidden, so the tests related to the radio/checkbox check was deleted. The only way to set an option has a default value is to select one or more options in the preview dropdown

fix: JS lint

bccfbdd

fix: SCSS lint

507e04f

ui: encapsulate option delete icon in a button tag

42aa4e7

chore: Update form editor styles for dropdown previews

f6490a3

chore: update renderAdministrationTemplate method signature

9c6f916

Apply suggestions from code review

000b2be

Co-authored-by: Cédric Anne <cedric.anne@gmail.com>

ccailly force-pushed the feature/add-dropdown-type-question-form branch from 8022991 to 000b2be Compare July 1, 2024 12:52

cedric-anne approved these changes Jul 1, 2024

View reviewed changes

cedric-anne merged commit b04e0ac into glpi-project:main Jul 1, 2024
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): Adding dropdown category and related sub question type #17126

feat(forms): Adding dropdown category and related sub question type #17126

ccailly commented May 15, 2024

AdrienClairembault left a comment

orthagh commented May 22, 2024 •

edited

Loading

ccailly commented May 30, 2024

ccailly commented Jun 11, 2024

cedric-anne commented Jun 11, 2024

AdrienClairembault left a comment

cedric-anne left a comment

cedric-anne Jul 1, 2024

orthagh left a comment

feat(forms): Adding dropdown category and related sub question type #17126

feat(forms): Adding dropdown category and related sub question type #17126

Conversation

ccailly commented May 15, 2024

AdrienClairembault left a comment

Choose a reason for hiding this comment

1) Wrong input name

2) Invalid order

orthagh commented May 22, 2024 • edited Loading

ccailly commented May 30, 2024

ccailly commented Jun 11, 2024

cedric-anne commented Jun 11, 2024

AdrienClairembault left a comment

Choose a reason for hiding this comment

cedric-anne left a comment

Choose a reason for hiding this comment

cedric-anne Jul 1, 2024

Choose a reason for hiding this comment

orthagh left a comment

Choose a reason for hiding this comment

orthagh commented May 22, 2024 •

edited

Loading