feat: introduce Grid as a new question type

[Koc]

Closes #2606

🚧 Development still in progress

I'm trying to reuse already existent Option entity by adding extra column optionType=row|column.

✔️ Implemented

🔍 Cols/Rows management

🔍 Cols/Rows titles and various input type

🔍 Very basic table rendering

🗒️ Todo

• Fix total mess with input focus
• Fix items reordering
• Create nested menu to create type of the answer (it is impossible to change answer type later)
• Proper rendering on answer mode
• Store and display results
• Export

[Chartman123]

@Koc I wouldn't combine checkbox and radio grids into one single question type, but make it two types like we already have for "normal" checkbox/radio questions.

[jancborchardt]

Very cool @Koc! :) The answering view layout could use a bunch more whitespace and padding (possibly using whole width always), but also cc @nimishavijay for review.

[Koc]

@Chartman123 Did I understand your correctly that we should have multiple question types here? Not just grid but "Grid - checkboxes", "Grid - radios", "Grid - dropdowns", etc.

I thought to create nested menu for question creation. Select "Grid" on a first step and then select input type on a second step.

[Chartman123]

Not just grid but "Grid - checkboxes", "Grid - radios", "Grid - dropdowns", etc.

Yes, no dropdown grid, but these two:

• Multiple choice grid
• Checkbox grid

You can use the same component like QuestionMultiple.vue for checkboxes and radios, so in this case QuestionGrid.vue and depending on the prop unique it is a radio grid or a checkbox grid, but two different question types grid and grid_unique.

forms/src/models/AnswerTypes.js

Lines 89 to 90 in 3424510

	// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
	unique: true,

And I think that we should keep the options as they are defining just the rows. The number of columns and their labels could be stored in extraSettings.

[nimishavijay]

Awesome feature! :) I will personally definitely use this :)

So the main screen which can use some design is the table rendering, I tried a first basic version here simulating real questions:

What seemed to work:

• Always use full width as @jancborchardt mentioned
• Each row min-height is 34px
• First row min-height is 44px
• Each column min-width is 64px
• First column min-width to 200px
• Gap between rows is 4px
• Gap between columns is 8px
• Inside the table use the MDI radio or checkbox icons
• Use border-bottom: 2px solid var(--color-border) for the first row to separate the heading

Other than that some comments while editing:

• Inside the action menu, not sure if we need a row and column name field as the labels for the rows and columns should ideally be self-explanatory, and we additionally run into the problem that the first cell of the table will have 2 strings to be displayed
• Inside the "Add row" or "Add column" field, the icon can be a plus icon instead of the row or column icon
• Wording changes
  • Grid rows --> Rows
  • Grid columns --> Columns
  • Add a new answer option --> Add row/Add column
  • Capitalize the options inside the dropdown in the action menu (radio --> Radio)

Additionally I know that trying to align the layout of view and edit mode is something that is desired generally so we can try a similar layout for this question type as a follow up, if you wish :) It would look something like this:

[Koc]

@nimishavijay Thank you for styling guides, I will work on it soon.

@Chartman123 I'd prefer to use options because we need ids to associate selected values with rows/columns. User can rename them, so we need rely on id. Also we need to support more complex scenarios than just radio/checkbox. E.g. matrix of numbers, see screen.

Also we already have components for manage options and this is a great opportunity to reuse them

NB! I plan to reopen this PR in upstream instead of my fork.

[Koc]

let's continue in #2945