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 { @@ -39,16 +40,8 @@ export class StageBindingForm extends Form { }; groupStages(stages: Stage[]): TemplateResult { - const m = new Map(); - 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(stages, (s => s.verboseName || "")).map(([group, stages]) => { return html` ${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(objects: T[], callback: (obj: T) => string): Array<[string, T[]]> { + const m = new Map(); + 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); +}