From 0083dcc45f3806b4436468bc774d8b9e2b8c45ed Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 4 Jan 2023 13:08:28 +0000
Subject: [PATCH] Added sorting to the options field

---
 packages/bbui/src/Form/Core/RadioGroup.svelte | 21 +++++++++++++++++--
 .../components/app/forms/OptionsField.svelte  |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
index a3952a9759..f7afc10bbc 100644
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -11,14 +11,31 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionTitle = option => option
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => dispatch("change", e.target.value)
+
+  const getSortedOptions = (options, getLabel, sort) => {
+    if (!options?.length || !Array.isArray(options)) {
+      return []
+    }
+    if (!sort) {
+      return options
+    }
+    return [...options].sort((a, b) => {
+      const labelA = getLabel(a)
+      const labelB = getLabel(b)
+      return labelA > labelB ? 1 : -1
+    })
+  }
+
+  $: parsedOptions = getSortedOptions(options, getOptionLabel, sort)
 </script>
 
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
-  {#if options && Array.isArray(options)}
-    {#each options as option}
+  {#if parsedOptions && Array.isArray(parsedOptions)}
+    {#each parsedOptions as option}
       <div
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 41a3281973..3c229c0509 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -79,6 +79,7 @@
         getOptionLabel={flatOptions ? x => x : x => x.label}
         getOptionTitle={flatOptions ? x => x : x => x.label}
         getOptionValue={flatOptions ? x => x : x => x.value}
+        {sort}
       />
     {/if}
   {/if}