search

sciapp / sampledb

Sample and Measurement Metadata Database
https://scientific-it-systems.iffgit.fz-juelich.de/SampleDB/
MIT License
21 stars 11 forks source link

Editing object entries in line #22

Closed rnoffke closed 3 years ago

rnoffke commented 3 years ago

Editing object entries in line

A lot of files can be analyzed and uploaded to SampleDB using external tools.

Unfortunately, there are still information these tools cannot extract and must be added manually afterwards.

To make this step easier, a new view has been created which offers the possibility to switch into the 'edit-mode' by double clicking an element. In difference to the 'classic edit-mode' not the whole website changes. Using this mode only the picked element will switch to 'edit-mode'.

inline_edit_base

inline_edit_text_form

If the user focuses the 'edit-form' and now presses enter or clicks outside this element, it will be checked if the content has changed.

If it has changed, the new data will be posted to the server.

When the server has replied an answer it will be looked up if the new data caused an error.

If it does, the user will be informed by an alert-box. Otherwise the website will be refreshed to demonstrate that the change has been successful.

inline_edit_quantity_error_cause

inline_edit_error

The new view is based on the html templates from the view and the form mode.

In the current version the server checks if the user that requests the object has got the permission to edit it and then loads this new inline_edit-mode by default.

The server will render the inline_edit_base.html which is comparable to the /view/base.html and /form/form_base.html (or in principle /form/form_edit.html).

Moreover the server will render this template if the user has got the permission to edit and the mode in the URL has been given with mode=inline_edit.

The last way to request the inline-edit-mode is redundant and it looks like it's not useful.

But to offer a way to set the 'classic' view as default and only use the inline-edit-view on explicit request, it has been implemented

The inline_edit template combines all relevant elements from the /view/base.html and the /form/form_edit.html, like buttonbars, scripts to handle website behavior, etc..

For any object found in the schema, the inline_edit_any.html will be included into the document.

In this 'any-schema' it will be decided if the given type has got a inline_edit template (in the actual version this is the case for the types 'text', 'quantity', 'bool', 'datetime', 'array', 'list', 'table', 'object', 'users' (without array support), 'object_reference' (without array support)).

If there is a template it will include it. Else the view template and the form template of these element will be included where the form template is placed in a hidden div.

Including the form template also makes it possible to use the serializeArray function that is offered by jQuery, to construct the post string.

This feature just should be a little addition to make quick edits on objects easier.

FlorianRhiem commented 3 years ago

Hey @rnoffke,

thank you for the pull request! I will need a little time to review it, but after the first look through how it's used it looks like a really neat improvement for the user interface!

I could imagine that those who do not know about this functionality already might not try to double click an entry. Perhaps a small edit button shown upon mouse over could help, similar to the search button? There's no use in overly cluttering the view mode, but something like that, shown only when the user is hovering the element, might help make it a little more usable by intuition alone. What do you think?

FlorianRhiem commented 3 years ago

Fields with Markdown content seem to be broken. Maybe there is an issue with the language picker not making the markdown editor fields visible?

rnoffke commented 3 years ago

Hey @FlorianRhiem, you're right. Making the user recognize that he can edit the element makes it easier to use and avoids that the feature isn't used.

inline_edit_edit_help_list

As you can see I added an icon to the elements what to click on to enter the edit form also.

Another advantage using this "edit-helper" is that now you can edit 'user' and 'object_references' placed in tables and lists also. This wasn't possible before because I saw no way to do a double click on a link.

I'll look why editing text fields including markdown content does not go tomorrow. Probably there is an issue using the classes to hide or show the 'view-area' and 'form-area'.

FlorianRhiem commented 3 years ago

Great 👍 I've pushed a some minor changes to this branch, including one that uses the jQuery show and hide methods instead of manually setting the css classes. Not much of a difference, but a little clearer.

rnoffke commented 3 years ago

Hey @FlorianRhiem, we fixed the bug that occurs by editing objects inline if "Load objects in background" is active. To avoid this bug we add the actual chosen object to the "referencable_objects" variable in the "form_object_reference_base.html" manually. This will be done if the "Load objects in background"-mode is active only. The "sampledb-load-objects.js" script is changed to remove the manually added object when all objects have loaded in the background. So there is no object in the options for two times.

FlorianRhiem commented 3 years ago

I've squashed the branch into a single commit and merged it into develop. Thank you!