ERP5JS: display form groups legends

This is same as "xhtml_style: display form groups legends", but applied
to ERP5JS.

The returned type of `group_list` changed in the API, it use to be a
list of lists with 2 elements: group id (str) and field list (list),
it is now a list with 3 elements: group id (str), field list (list)
and group title (str).

There's now a new `legend` element in the DOM, only when the group has a
title.

bt5/erp5_hal_json_style/SkinTemplateItem/portal_skins/erp5_hal_json_style/ERP5Document_getHateoas.py

@@ -1254,7 +1254,7 @@ def renderFormDefinition(form, response_dict):
       for field in form.get_fields_in_group(group['goid'], include_disabled=1):
         field_list.append((field.id, {'meta_type': field.meta_type}))
 
-      group_list.append((group['gid'], field_list))
+      group_list.append((group['gid'], field_list, group['gtitle']))
 
   # some forms might not have any fields so we put empty bottom group
   if not group_list:

bt5/erp5_hal_json_style/TestTemplateItem/portal_components/test.erp5.testHalJsonStyle.py

@@ -1069,7 +1069,7 @@ class TestERP5Document_getHateoas_mode_traverse(ERP5HALJSONStyleSkinsMixin):
       "application/hal+json"
     )
     result_dict = json.loads(result)
-    _, group_fields = result_dict['group_list'][-1]
+    _, group_fields, _ = result_dict['group_list'][-1]
     field_names = [field_name for field_name, _ in group_fields]
     self.assertIn("form_id", field_names)
     self.assertIn("dialog_id", field_names)

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js

@@ -84,9 +84,12 @@
   function addGroup(group, rendered_document, form_definition, form_gadget, modification_dict) {
     var group_name = group[0],
       field_list = group[1],
+      group_title = group[2],
       // XXX: > Romain: fieldset will be needed later for menus
       fieldset_element = domsugar("div", {"class": group_name});
-
+    if (group_title) {
+      fieldset_element.appendChild(domsugar('label', {"class": "group_title"}, group_title));
+    }
     return new RSVP.Queue()
       .push(function () {
         var first_listbox_found = false;