Update: QueryPanelComponent, question answering process

This is an update to the QueryPanelComponent it encompasses four bug issues, that I closed in favor of this update. (#430 (closed), #432 (closed), #435 (closed), #433 (closed))

This update only concerns the autosave mode of QueryPanelComponent

What is to be done?

In autosave mode:

• Store the answer automatically whenever the user changes the input. (when queryControl.answerControl.valueChanges emits; debounce: 200).
• When an answer exists (in autosave this implies that an answer has been stored, e.g. .entryExists === true), then show the delete button (see wording below).
• The next button should not store the answer
• Next/Previous buttons only execute sliding, no other functionality.
• Next button: only show if there is a next slide (check this.slide.atEnd)
• Previous button only show if there is previous slide (check this.slide.atStart)
• Delete button: Deletes the answer from storage and clears the form (QueryControl.reset()), uses refresh icon (see below)

Visual update:

• The delete button should have a black border, white background and black strokes.

In default mode (just for contrast):

• Answers do not get stored automatically after user input.
• Submit button: stores the currently entered answer and advances to the next slide
• Delete button: same as autosave, but uses delete/trash bin icon (see below)
• Next/Previous button: same as autosave
• Revert button: Restores previous answer to the form, when current changes have not yet been submitted. (only show if there is a stored answer)

Black/white/clear button

I do not really know yet, how to deal with this new button style. I think for now, it will be alright to manually set it to white background, black strokes and black border. It would be nice to have a more generic way to handle this. Maybe action buttons should get a border input and we add a clearColor category? Do you have any ideas?

Wording mixup: refresh/reset/delete!

The button in question is a delete button, because it is supposed to delete the answer from storage and the screen. In auotsave mode it uses a refresh icon and in a way resets the form for a particular question. So either naming seems legit.

The QueryPanelComponent has two modes: default and autosave. In default mode answers are not stored automatically, but only after the user actively clicked a submit button. The default mode shows different buttons:

• delete button: Deletes the answer from the storage and the screen.
• revert button: When the user changed an answer but has not submitted it: restores the previously stored answer. -> Undo user changes.
• submit button: permanently stores the answer.

In autosave mode there is no submit button and no revertt button. Changes get stored automatically as soon as the user inputs/changes the answer. The delete button is (functionally) still there, but gets another icon: the refresh icon.

I propose to name the button by what it is doing rather than by what icon it shows (I'd also pick an icon that matches what it is doing, but that another issue). So there is a delete button in both modes. There is no refresh button in either mode. And there is a revert button in default mode, that reverts to a previously given answer, which only makes sense in default mode.

Layout