417 - Add edit and reorder metadata within galleryView modal

[dstopp]

• Fixes #417
• Were any Django, import pipeline, table_schema, or dictionary files modified? Y/N
  • Database used: opus3_test_200517
  • All Django tests pass: Y/N/NA
• Were any JavaScript or CSS files modified? Y
  • JSHINT run on all affected files: Y
  • Tested on Chrome, Firefox, Safari, and iOS: Y (Remember to test all browser sizes)
  • Tested for race conditions (with delayed API calls if applicable): Y/N/NA

Description of changes: -add an 'edit' button on the galleryView modal to allow user to:

• add a metadata field from the menu list;
• remove a metadata field;
• reorder the metadata fields -Fixed race condition between search widget and selectMetadata modal that cause unselected fields to be highlighted -Fixed missing scrollbar in modal

Known problems: -There is some code that is unused in this pull that will eventually be part of the table header draggable code. I did not remove it for this pull. -There are still 3 django tests failing that appear to not be related to these changes but are still under investigation.

[rfrenchseti]

Current issues:

• On top of the field name, the pointer is a "drag hand". But if you keep moving the pointer to the right, it eventually turns into a vertical "text" bar, even though in that region you can still drag the field. It should stay a "drag hand" all the way across.
• When you have a lot of fields and there is a scrollbar in the slideshow view, and then you drag an item, you can't drag it "off the edge" and have it automatically scroll.
• When a field is added at the bottom of the list, and the new field will end up being off the bottom of the slideshow, it only scrolls to show the new field, not the two lines with the new field and its "Add field here" line, so you have to manually scroll a little to be able to add another field at the bottom.
• When the browser is narrow enough that the font size decreases, there is a large margin between the bottom of the field list and the tool icons at the bottom of the slideshow dialog.
• If you add really long field names (like things from Ring Geometry), and then make the browser really narrow, the field names wrap around making the field+data more than two lines. But then when you go into edit mode, it restricts them to be on a single line, moves the big thumbnail left, and shrinks it. We don't do this with long field data that wraps around (like "Note") - that stays multiple line, which means the whole system works fine when there are more than two lines per field.
• Independent of this pull, when the browser is really narrow and there needs to be a horizontal scrollbar, it has an ugly white background.
• There seems to be a noticeable delay between starting a drag motion and the field actually moving. This makes me doubt whether the drag is actually happening. We don't have that delay when dragging search widgets, but we do when dragging "Select Metadata" fields. It seems like a little too long a delay to me, especially in the slide show.
• When you add or remove a field, the main gallery scrollbar does this weird thing where it jumps to the top and then returns back to the middle.
• Moving with the keyboard left/right arrows keeps you in edit mode, but clicking on the left/right arrows in the toolbar exits edit mode.

[dstopp]

still outstanding:

• In metadata detail slide show, when screen is small, metadata detail info will overlap a little bit with the bottom row (the row of cart, prev/next, and hamburger icons).

[juzen2003]

I create a pull request to Debby's repo (https://github.com/dstopp/pds-opus/pull/9) with these fixes:

• Dynamically update the height of "#galleryViewContents .op-metadata-details" to make sure items in the right columns of metadata detail modal will not overlap with the bottom icon row.
• Change ".op-metatdata-detail-edit" to ".op-metadata-detail-edit".
• Add styling to make sure info with long string like "Multiple Target List" is wrapped in metadata detail modal.

The remaining issue is this one mentioned in previous comment:

• In metadata detail edit menu, when dragging around an item, release and quickly drag any item again, there will be some console errors. Here are steps to reproduce:
  1. In edit detail menu, drag an item, and move around.
  2. Release the item at any position (by releasing the mouse), and quickly hit the mouse again to drag any item.
  3. Move around for some time and the console will have the following errors from jquery ui:

     Uncaught TypeError: Cannot read property 'insertBefore' of null
     Uncaught TypeError: Cannot read property 'removeChild' of null

[juzen2003]

• One weird issue found in metadata detail slideshow:
  1. In edit detail menu, drag an item, and move around.
  2. Release the item at any position (by releasing the mouse), and stay in edit detail menu.
  3. Click either prev/next, there will be a server error.

In step 2, if we go back to normal metadata detail menu by clicking "Done", and then click prev/next icons, we will not see the server error.

[rfrenchseti]

Another bug...If you add a field using the Select Metadata dialog, and then pull up "Add field" in the slideshow, the field you added is still in the list. The dropdown hasn't been refreshed.

[rfrenchseti]

New issue:

• The dropdown box for both "add field" and the sort order pills can be "selected" with Ctrl+A. They should be marked as not-selectable.

Previous issues:

• "As soon as you start dragging a field, a "hole" opens up below the field and all the lower fields move down one slot. This is not how dragging anywhere else works."

The huge hole is gone, but now there's a smaller hole. As soon as you start dragging, all of the fields below the current one shift down about 1/2 a field height.

• "If you have a very wide field contents, the default browser X scrollbar will show up. I thought Dave had fixed this - he and I talked about it yesterday."

This still happens, plus it does something weird with the field height

• "Another bug...If you add a field using the Select Metadata dialog, and then pull up "Add field" in the slideshow, the field you added is still in the list. The dropdown hasn't been refreshed."

This still happens.

• From Dave: "One weird issue found in metadata detail slideshow: In edit detail menu, drag an item, and move around. Release the item at any position (by releasing the mouse), and stay in edit detail menu. Click either prev/next, there will be a server error."

This still happens.

[juzen2003]

• When all fields are added in the in metadata detail slideshow, and the user clicks the "+ Add field here", the dropdown will be empty with the last category left inside. Do we want to disable the dropdown or have a full blank dropdown in this case? Here is the screen capture of the current behavior:
  1. Add all fields in metadata detail slideshow.
  2. Click any "+ Add field here" to open the dropdown
  3. In this case, fields in "Ring Geometry Constraints" category are added at the last, so the dropdown is open with that category title displayed (with empty contents).

[rfrenchseti]

• I think the right behavior is to disable all the Add Field buttons, just like we disable the “+” in the sort pills.
• I can still reproduce the problem with moving fields quickly, hitting next, and having it throw a server backend error. It's hard to do, but I've done it twice.
• The subheadings under Ring Geometry should be indented
• If all the fields under Ring Geometry get used, all the subheadings go away, but Ring Geometry itself still stays around.