Update RccCardComponent #863fwxxx9
This issue is about updating RccCardComponent so that we can use it in various places.
The initial set up of the card component used in the self-monitoring set was done in a way that we would be able to use it for different purposes across the HCP and the PAT apps. See issue: #235 https://gitlab.com/recoverycat/rcc-client/-/issues/235
This new purpose is for data visualization. We want to use the same card as was made but there are some specifics for this variation.
At the moment the card component can have an edit and a remove button. For the new case it needs something different: a pin button. That's enough for me to stop thinking about adding more specialized buttons, but rather to make the component more generic; and that is what this issue is all about :)
What is to be done?
Add a new input to the component for an array of Actions. Instead of the fixed In/Outputs for edit resp. remove use these actions to render the buttons and execute those action instead of the outputs.
Remove In/Output for edit/delete and refactor the parts of the monitoring setup that used these in/output such that they use actions instead.
Replace editable with a more generic disabled property.
Challenges
Which button/action goes where?
Originally I thought we could make use of roles to determine which action replaces which button, but unfortunately roles live on ItemActions. Actions have categories, but those serve a different purpose
and they do not feel applicable here; and adding yet another property to Actions seems over the top.
We could have an input for a top action and another one for the bottom action. But on the one hand I would like to support more than two actions in the future (not now) and on the other hand I am not so fond of mixing layout and semantics. We could try something like primaryAction and secondaryAction, works for me, but that does not seems too different from an Array and still only supports two actions.
I would suggest – for now – to use the first action of the array to replace the edit button and the second one to replace the remove button.
What if there are more than two actions?
In the future I imagine for this case to replace the edit/first button with a little menu and put all but the last action in it. That is not needed now though. I suggest ignoring every action after the second.
What if we have only one button and it is supposed to replace the remove button
I suggest accepting null in the array of actions. This way [null, action] would make the component only show the replacement for the remove button. But I am pretty sure there is a better way :D
The pin button has a state, what about that?
In the images below you can see that when the pin was clicked the whole card gets a colored border and the pin icon is filled in with a color too. This is of no concern for this component!
In this specific case we will have to implement the 'pinned' state in another way. In fact we should hand over different actions to the component depending on the state: If it is pinned we should deliver an unpin action and otherwise the pin action. They could even have different icons. But this is not part of this issue
Same goes for the border. border and pin color in the pinned state are not part of this issue!
Requirements
- no more editClick and removeClick Outputs
- Component works with actions
- Refactor monitoring setup (where applicable)
- component can be disabled (locks down all actions, same as not editable atm)
Where to start?
lib/common/src/ui-components/card/card.component.ts
Layouts
Clickup: https://app.clickup.com/t/863fwxxx9
