From b15aca80ca518682df13d12192380b2326d6776c Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 31 Mar 2021 15:57:59 +0200
Subject: [PATCH] web: add utils for grouping

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/pages/flows/StageBindingForm.ts | 11 ++---------
 web/src/utils.ts                        | 13 +++++++++++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/src/pages/flows/StageBindingForm.ts b/web/src/pages/flows/StageBindingForm.ts
index e71828ce7..ab0736748 100644
--- a/web/src/pages/flows/StageBindingForm.ts
+++ b/web/src/pages/flows/StageBindingForm.ts
@@ -7,6 +7,7 @@ import { Form } from "../../elements/forms/Form";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
+import { groupBy } from "../../utils";
 
 @customElement("ak-stage-binding-form")
 export class StageBindingForm extends Form<FlowStageBinding> {
@@ -39,16 +40,8 @@ export class StageBindingForm extends Form<FlowStageBinding> {
     };
 
     groupStages(stages: Stage[]): TemplateResult {
-        const m = new Map<string, Stage[]>();
-        stages.forEach(p => {
-            if (!m.has(p.verboseName || "")) {
-                m.set(p.verboseName || "", []);
-            }
-            const tProviders = m.get(p.verboseName || "") || [];
-            tProviders.push(p);
-        });
         return html`
-            ${Array.from(m).map(([group, stages]) => {
+            ${groupBy<Stage>(stages, (s => s.verboseName || "")).map(([group, stages]) => {
                 return html`<optgroup label=${group}>
                     ${stages.map(stage => {
                         const selected = (this.fsb?.stage === stage.pk);
diff --git a/web/src/utils.ts b/web/src/utils.ts
index a9531be2b..b36342dbd 100644
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@@ -56,3 +56,16 @@ export function camelToSnake(key: string): string {
     const result = key.replace(/([A-Z])/g, " $1");
     return result.split(" ").join("_").toLowerCase();
 }
+
+export function groupBy<T>(objects: T[], callback: (obj: T) => string): Array<[string, T[]]> {
+    const m = new Map<string, T[]>();
+    objects.forEach(obj => {
+        const group = callback(obj);
+        if (!m.has(group)) {
+            m.set(group, []);
+        }
+        const tProviders = m.get(group) || [];
+        tProviders.push(obj);
+    });
+    return Array.from(m);
+}