Profile: Profile Details module - Inline Edit component

[nicksp]

A follow-up task for https://zube.io/x-team/xp-formerly-auto/c/1956

To facilitate the functionality development, we'll need a generic inline-edit component that will support onSave and onCancel custom callbacks to do respectively saving data and reverting it to the previous version. We should keep in mind it might be used for different unrelated fields on the admin dashboard, so it should be a generic one. Also, it would be great to support saving by clicking Enter and canceling edit mode by clicking Esc.

On one of the last projects I implemented a similar component and would like to share a recording of how it works:

It was implemented the way it replicates Trello's similar component, but for our purposes, we can simplify that. I can share the code if required 😄

@mccrodp Do we want to have similar Save/Cancel button when in edit mode? Or what are your expectations of in-edit mode?

[mccrodp]

@nicksp, considering my comment on respecting the controls shown to edit fields based on their type, I'd like to choose the option that is as generic as possible for fields of simple string/text type. If this means having a textfield where clicking Enter is save and clicking out of the area equates to cancel, then that's fine also (if it preserves edits locally while in the window if you need to go back to the edit component after scrolling or clicking elsewhere on the page for example).

What do you suggest in relation to this, I'm open to options?

[nicksp]

@mccrodp Given the current scope, we will have 3 types of in-edit controls: number field (for rate), textarea for text fields, and date picker for availability dates. To make the editing flow clear and consistent regardless of the control type, I suggest showing extra Save/Cancel buttons (as shown in the gif above) for all of the controls in edit mode. Additionally, for all types of controls, we might have a common Enter/Esc functionality to respectively Save or Dismiss changes.