instantsearch.js: Fix groups

Author: adriendupuis

docs/js/instantsearch.js

@@ -59,7 +59,7 @@
         instantsearch.widgets.stats({
             container: '#stats',
             templates: {
-            text: `<h1>
+                text: `<h1>
                 Search results ({{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}})
             </h1>`,
             },
@@ -78,14 +78,14 @@
                     const groupNameKey = breadcrumbsKeys.shift();
                     const entryNameKey = breadcrumbsKeys.pop();
                     const newItem = {
+                        groupNameKey,
                         entryNameKey,
                         breadcrumbsKeys,
                         item: getClearedItem(item),
                     };
                     const groupChildren = outputItemsMap[groupNameKey]?.children ?? [];
 
                     outputItemsMap[groupNameKey] = {
-                        groupNameKey,
                         children: [...groupChildren, newItem],
                     };
                 });
@@ -94,31 +94,41 @@
             },
             templates: {
                 item: (hit) => {
-                    const { groupNameKey, children } = hit;
-                    const groupItem = children[0].item;
-                    const groupHeaderHTML = `<h2 class="instantsearch__group-header">
-                        ${instantsearch.highlight({ attribute: `hierarchy.${groupNameKey}`, highlightedTagName: 'mark', hit: groupItem })}
-                        (${children.length})
-                    </h2>`;
+                    const {children} = hit;
+                    let resultHTML = '';
+                    let previousGroupName = null;
+                    let groupChildCount = 0;
                     let groupContentHTML = '';
 
-                    children.forEach((childHit) => {
-                        const { breadcrumbsKeys, entryNameKey, item: entryItem } = childHit;
+                    children.forEach((childHit, index) => {
+                        const {groupNameKey, breadcrumbsKeys, entryNameKey, item: entryItem} = childHit;
                         const headerHTML = `<h3 class="instantsearch__entry-header">
-                            ${instantsearch.highlight({ attribute: `hierarchy.${entryNameKey}`, highlightedTagName: 'mark', hit: entryItem })}
+                            ${instantsearch.highlight({
+                            attribute: `hierarchy.${entryNameKey}`,
+                            highlightedTagName: 'mark',
+                            hit: entryItem
+                        })}
                         </h3>`;
                         let breadcrumbsHTML = '';
                         let contentHTML = '';
 
                         if (entryItem.content) {
                             contentHTML = `<div class="instantsearch__entry-content">
-                                ${instantsearch.highlight({ attribute: `content`, highlightedTagName: 'mark', hit: entryItem })}
+                                ${instantsearch.highlight({
+                                attribute: `content`,
+                                highlightedTagName: 'mark',
+                                hit: entryItem
+                            })}
                             </div>`;
                         }
 
                         breadcrumbsKeys?.forEach((breadcrumbKey) => {
                             breadcrumbsHTML += `<span class="instantsearch__entry-breadcrumbs-item">
-                                ${instantsearch.highlight({ attribute: `hierarchy.${breadcrumbKey}`, highlightedTagName: 'mark', hit: entryItem })}
+                                ${instantsearch.highlight({
+                                attribute: `hierarchy.${breadcrumbKey}`,
+                                highlightedTagName: 'mark',
+                                hit: entryItem
+                            })}
                             </span>`
                         });
 
@@ -130,14 +140,62 @@
                             </div>
                         </a>`;
 
-                        groupContentHTML += childHTML;
+                        let groupName = childHit.item.hierarchy[groupNameKey];
+                        if (index && groupName != previousGroupName) {
+                            // Not first and in a new group
+                            if (children.length === index + 1) {
+                                // Not first, last and in a new group: close previous group, close current group
+                                let groupHeaderHTML = `<h2 class="instantsearch__group-header">
+                                        ${previousGroupName}
+                                        (${groupChildCount})
+                                    </h2>`;
+                                resultHTML += `${groupHeaderHTML}
+                                        <div class="instantsearch__group">
+                                            ${groupContentHTML}
+                                        </div>`;
+                                groupHeaderHTML = `<h2 class="instantsearch__group-header">
+                                        ${groupName}
+                                        (1)
+                                    </h2>`;
+                                resultHTML += `${groupHeaderHTML}
+                                        <div class="instantsearch__group">
+                                            ${childHTML}
+                                        </div>`;
+                            } else {
+                                // Not first, not last and in new group: close previous group, add to next group content
+                                let groupHeaderHTML = `<h2 class="instantsearch__group-header">
+                                        ${previousGroupName}
+                                        (${groupChildCount})
+                                    </h2>`;
+                                resultHTML += `${groupHeaderHTML}
+                                        <div class="instantsearch__group">
+                                            ${groupContentHTML}
+                                        </div>`;
+                                groupContentHTML = childHTML;
+                                groupChildCount = 1;
+                            }
+                        } else if (children.length === index + 1) {
+                            // Last and in previous group: add to previous group and close previous group
+                            groupContentHTML += childHTML;
+                            groupChildCount++;
+                            let groupHeaderHTML = `<h2 class="instantsearch__group-header">
+                                    ${groupName}
+                                    (${groupChildCount})
+                                </h2>`;
+                            resultHTML += `${groupHeaderHTML}
+                                    <div class="instantsearch__group">
+                                        ${groupContentHTML}
+                                    </div>`;
+                        } else {
+                            // Not last and in previous group: add to previous group
+                            groupContentHTML += childHTML;
+                            groupChildCount++;
+                        }
+                        previousGroupName = groupName;
                     });
 
                     return `<div class="instantsearch">
-                        ${groupHeaderHTML}
-                        <div class="instantsearch__group">
-                            ${groupContentHTML}
-                        </div>
+                        ${resultHTML}
                     </div>`;
                 },
             },