Make la thematic area content node more compact

[manuelmeister]

Improve the ContentNode to be more dense and improve error messages.

[github-actions]

⛔ Feature branch deployment currently inactive.

If the PR is still open, you can add the deploy! label to this PR to trigger a feature branch deployment.

[BacLuc]

It doesn't seem to work as intended:

But also not on dev:

but this is broken on staging (and i assume on prod) too

uups, i detected another bug

[BacLuc]

i am not yet convinced that it is good to show the available items >100 pixels below the trigger point.
Maybe a toggle to hide/show the not selected items, default is hidden?

[manuelmeister]

@BacLuc sorry I'm not sure what you are talking about. I'm fixing the bug for notes, safetyconcept & storycontext in a separate bugfix #4268

[usu]

I like the look of the compact style.

A few issues with the behavior though:

• Selecting new entries is buggy. See video below.

• Animation is not consistent with other similar inputs. For example on Activity Responsibles, newly selected items from the dropdown are added immediately to the main input & an animation shows that saving is in progress and other animation when the saving was successful. This is very consistent with other inputs. In your current proposal for LA, you deviate from this: New selected items ar

Recording.2023-12-22.102005.mp4

e only added to the main input after successful saving. There's no animation indicating a save-in-progress.

[manuelmeister]

@usu thanks for the review. You're right. I adjusted the functionality and fixed the buggy behaviour.

[usu]

Nice! Last thing I noticed is that there is no dirty handling (see video below). Selected keys is overriden, whenever a API response comes back.

Recording.2023-12-23.094734.mp4

[manuelmeister]

@usu how could I solve this?

[usu]

@usu how could I solve this?

The main principle could be copied from ActivityResponsibles.vue:

You'd want a local copy of the selected items (selectedCampCollaborations) which is used as the v-model for e-select. Then you need a watcher on the store/API value (currentCampCollaborationIRIs). In this watcher you'd check if the incoming selection (newIRIs) is the same as the local copy (selectedCampCollaborations). If yes, the dirty flag is removed.

• You can give it a try. Or I can make a proposal. As you prefer...
• Maybe some of the logic could be abstracted into a common component or a composable to avoid code duplication. But we could also do this in a second step, if we see it is worth.
• Above dirty logic has 1 flaw: If you quickly change back-and forth between the same selection, at one point the dirty flag is removed, even though more network requests are in progress. A better variant would be to use a dirtyTimestamp to ensure, only the last network request can remove the dirty flag. We currently use this improved version only for dragging content nodes (RootNode, DraggableContentNodes), so I think it would be fair to just implement the simplified variant.

[manuelmeister]

@usu thanks for the help! I've implemented the dirty handling while keeping the debounced save, because the individual options are not saved in separate db fields, we try to limit the requests.

[manuelmeister]

@BacLuc I fixed your issue. The overlay is now on top of the select like in the other instances.

[BacLuc]

With the fix of the requestCount decrease in the error case, this is ok for me.
Thank you