[CALR-11] Vessel Details module - UI refactoring

[eblondel]

Issue migrated from JIRA: https://sdlc.review.fao.org/jira/browse/CALR-11 Creator/Reporter: Emmanuel Blondel @eblondel Assignee: Brian Ojok @brianandy Priority: Medium Status: Done Date of creation: 2021-11-08T22:01:24.000+0000

Proposal to improve the vessels details UI:

• Handle vessel information as "identity card" UI, to be displayed on the left (later on the right we will be see to add info boxes with numeric indicators associated to each vessel): Set an UI in a shape of "identity card" (could be an info box as starting point, or any other bootstrap UI), handling the vessel name, type, stat type and home port, in a tab selected by default ("Info"). Extend the above UI (with additional tab "Registration") , to handle the 2 registration info: number and port ** Picture of the identity card will be a 'ship' placeholder for the timebeing. A separate bitbucket ticket will tackle vessel picture handling.
• All above sections (ownership, licenses, catch summary & history) should be re-designed with vertical tabs: 1st vertical tab: Ownership 2d vertical tab: Licenses 3rd vertical tab: Catches, with 2 horizontal tabs: ** summary: 1st recycling existing table, next to see if to be enriched with some summary plots. history: recycle current table
• Provide human readable names for all table column names

See here a rought 5min- mockup to give the idea:

!image-2021-11-09-08-45-02-710.png!

[~yann.laurent] any thoughts?

[eblondel]

Author: Emmanuel Blondel @eblondel Date of creation: 2021-11-10T20:32:14.959+0000 Last update: 2021-11-10T20:32:14.959+0000

[~brian.ojok] please put in stand-by until CALR-8 and CALR-10 are finalized.

[eblondel]

Author: Emmanuel Blondel @eblondel Date of creation: 2021-11-16T10:16:55.292+0000 Last update: 2021-11-16T10:16:55.292+0000

Thanks [~brian.ojok] good work, i've merged it to master, but they are some changes to perform before closing this ticket:

• vertical tabs: I'd prefer you use 'shinyWidgets' (stable on  CRAN) see example here: [https://search.r-project.org/CRAN/refmans/shinyWidgets/html/vertical-tab.html] In general it's better to rely on shiny rather than pure web css/js that we should consider only when shiny is not enough. The css/js approach is functional but requires more coding.
• when opening catches tab, the summary table doesn't display, I believe you should look at selecting this tab by default
• manage data tables (in particular the catch history) to make sure they fit a normal (laptop) screen

[eblondel]

Author: Emmanuel Blondel @eblondel Date of creation: 2021-11-16T13:25:51.151+0000 Last update: 2021-11-16T13:25:51.151+0000

Thanks [~brian.ojok] for your changes.