View/Edit single row modal

[NinoZX]

Handy form modal which allows:

• clear preview of entire data row;
• editable fields;

See it in action:

Additional comments:

• modal opens on objectId table cell doubleClick or by selecting one row -> Edit -> Edit this row
• all existing data types supported
• form fields editable without doubleClick
• some fields disabled for edit such as: objectId, createdAt, updatedAt (especially for classes User, Role and Session)
• save changes onBlur for text input fields, on change for date, boolean and file fields
• modal height and width are fixed for now
• some existing components refactored to support new modal functionalities

[jadsonlourenco]

Great work, better to edit.

Just my opinion to make few adjusts if possible:

• Modal size: to be "auto", to have a better appearance. Like the permissions modal.
• Modal Title: based on the action. If the content new show the "New Class name" if exist "Edit ObjectID", and below if the "createdAt" and "updatedAt". So, we can see faster the current object without need to scroll to the top of the modal content.
• Tabs: one for the columns and other fo ACL. The ACL could be like the permissions modal (the content part)
• Relation: show the content inside an accordion, when click to "show" open the accordion and few buttons action on the accordion title bar, to attach/detach relations. The content could be a table, like the default table.

[davimacedo]

@NinoZX that's a great job! Thanks for the PR! What do you think about @jadsonlourenco suggestions? Can you incorporate some of them? @acinader @dplewis @TomWFox thoughts?

[acinader]

whoa!😍

[mtrezza]

@NinoZX Can you add "Save", "Cancel" buttons instead of the "Close" button?

From a usability standpoint, modal editing usually suggests that editing is not final and immediate until the dialog is closed and that there is a way to back out of edits made. That would also be a significant advantage against the in-row editing where edits are immediate, which can cause some pain - by experience.

[NinoZX]

Hi everyone!

Thank you all for your feedback.

@davimacedo

What do you think about @jadsonlourenco suggestions?

Don't know why, but I wrote an answer yesterday, but obviously GitHub didn't store it or something, so I'll answer them bellow one more time 😄.

@mtrezza

Can you add "Save", "Cancel" buttons instead of the "Close" button?
From a usability standpoint, modal editing usually suggests that editing is not final and immediate. That would also be a significant advantage against the in-row editing where edits are final, which can cause some pain - in my own experience.

Was thinking of that from the start. But since I only implemented "Edit" and not "Create" object at the moment, it was easier for me to use existing methods of parent components for updating data rather then developing bulk edit/save on my own. Will consider bulk saving since I will implement creating new objects from modal. Also to support this functionality we would need to support ACL and Relation (described bellow) editing inside of modal which currently I don't have time to implement.

@jadsonlourenco

• Modal size: to be "auto", to have a better appearance. Like the permissions modal.

Sorry for lack of explanation. Width was fixed to 1000px, but if you think auto width is better (which is also fixed but smaller if I am correct) I removed fixed width and pushed changes already.
Regarding height, it is not really fixed. What I mean, modal's content has maxHeight: 60vh with scroll inside it. So header and footer are always visible. I prefer this better then permissions modal which's height is quite shorter and not considering window height.

• Modal Title: based on the action. If the content new show the "New Class name" if exist "Edit ObjectID", and below if the "createdAt" and "updatedAt". So, we can see faster the current object without need to scroll to the top of the modal content.

As I wrote answer to @mtrezza, at the moment I didn't support adding new objects with modal. But that was first next on my TODO list and I hope that this will be done by end of this week. I will implement this along with your suggestions for modal title with "createdAt" and "updatedAt" also visible as subtitle.

• Tabs: one for the columns and other fo ACL. The ACL could be like the permissions modal (the content part)

Was thinking of this at the beginning, but I think current functionality is already user friendly and consistent with rest of application. Only problem now is that if you click "View ACL" modal closes. At the moment I don't have much time at my disposal to implement this, but since my team will use dashboard on daily basis, we will consider to implement this if we see that current implementation is not user friendly enough.

• Relation: show the content inside an accordion, when click to "show" open the accordion and few buttons action on the accordion title bar, to attach/detach relations. The content could be a table, like the default table.

Same answer here as for ACL few rows above. It would be nice to have, but at the moment I believe it is not must have, rather nice to have. And unfortunately, as my schedule doesn't allow me to spend much time right now, I would leave this for future improvements if we conclude that this improves and speeds up everyday work a lot.

Once again, I would like to thank all of you for your great feedback! Also as I wrote before, expect me to implement creating new objects with modal soon.
I hope this will be enough for you to merge this feature as soon as I finish creating new objects with modal.

[NinoZX]

Hello once again!

I finished a list of new functionalities as I promised.
Here is the list of new features:

• width set to default FormModal width
• new object can now be added with modal
• modal title depends on modal mode (New / Edit)
• createdAt and updatedAt fields are shown in header as subtitle
• View ACL is now available as confirm button of modal and removed from content

As said earlier, rest of functionalities that were request above, will be evaluated with daily usage of dashboard and if necessary implemented along the way.
For now I would kindly ask you to review the code and merge the request.

[davimacedo]

That's a nice job! I really like what you did. Congrats. @dplewis do you want to also test before getting it merged?

[NinoZX]

Hi @davimacedo!
Thank you for your feedback!

Let me just inform you that we decided to implement features discussed earlier (ACL managment and pointer/relation view and edit).

Already pushed changes:

• fixed bug when creating new objects with modal;
• ACL modal visible without closing editRowDialog;
• fixed bug when relation clicked after newly saved object
• FormModal replaced with Modal component

And by the end of this week I intend to implement adding pointers and relations as some kind of pickers. So maybe if you could postpone test, review and merge for a few more days.

[davimacedo]

Nice! So let me know when it is ready.

[NinoZX]

Hi @davimacedo!

Sorry for little delay, but finally we managed to produce pointer/relation picker.
At the moment it can be used only with EditRowDialog.
Please try to use it and give us some feedback.

Pointer/relation can be selected via selecting rows from table or by inputing objectId list to footer input field. Also, sidebar on the right of picker always has current selection of objectIds, which can be removed by clicking on them.

Worth noting is that when selecting pointer, only one object id can be selected, on the other hand when relation multiple can be selected.

Here is a short display of functionality.

I believe this is now ready for final code review and ready for merging.

[davimacedo]

Great Job! LGTM!