Sort data returned from server (as much as feasible) (#1074)

* Add a few more sorting utilities

* Sort data by locale (simple cases)

* Sort in org settings

* Sort users page

* Shorten sorting util names

* Users already sorted on server

* Componentize OrganizationDropdown

This allows consistent sorting for a common use case

* Remove flatpickr import

* Sort /directory on server (pagination)

* Fix state mutation error

* Remove $state.snapshot in favor of array.toSorted

* Remove $state.snapshot from /directory

* Use toSorted in #each

* Add more sorts

* Even more sorting

* Fix bug in /users/id/settings/groups

* Fix residual store usage from before upgrade/remove-deprecated

I somehow overlooked this when rebasing...

* Convert OrganizationDropdown to Svelte 5

* Fixed bug with project count not updating on org change

Author: FyreByrd

source/SIL.AppBuilder.Portal/src/lib/components/OrganizationDropdown.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { org_allOrganizations } from '$lib/paraglide/messages';
+  import { languageTag } from '$lib/paraglide/runtime';
+  import { byName } from '$lib/utils';
+  interface Props {
+    organizations: { Id: number; Name: string | null }[];
+    value: number | null;
+    className?: string;
+    allowNull?: boolean;
+    [key: string]: any
+  }
+
+  let {
+    organizations,
+    value = $bindable(),
+    className = '',
+    allowNull = false,
+    ...rest
+  }: Props = $props();
+</script>
+
+<select class="select select-bordered {className}" bind:value {...rest}>
+  {#if allowNull}
+    <option value={null} selected>{org_allOrganizations()}</option>
+  {/if}
+  {#each organizations.toSorted((a, b) => byName(a, b, languageTag())) as organization}
+    <option value={organization.Id}>{organization.Name}</option>
+  {/each}
+</select>

source/SIL.AppBuilder.Portal/src/lib/components/OrganizationSelector.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { languageTag } from '$lib/paraglide/runtime';
+  import { byName } from '$lib/utils';
   import type { Prisma } from '@prisma/client';
   interface Props {
     organizations: Prisma.OrganizationsGetPayload<{
@@ -23,7 +25,7 @@
       </tr>
     </thead>
     <tbody>
-      {#each organizations as org}
+      {#each organizations.toSorted((a, b) => byName(a, b, languageTag())) as org}
         <tr
           class="h-16 border-y hover:bg-base-200 cursor-pointer"
           onclick={() => onSelect(org.Id)}

source/SIL.AppBuilder.Portal/src/lib/components/Pagination.svelte

@@ -68,7 +68,7 @@
     </div>
     <div class="grow">&nbsp;</div>
     <select class="select select-bordered" name="size" bind:value={size}>
-      {#each [10, 25, 50, 100].concat(extraSizeOptions).sort((a, b) => a - b) as value}
+      {#each [10, 25, 50, 100].concat(extraSizeOptions).toSorted((a, b) => a - b) as value}
         <option {value}>{value}</option>
       {/each}
     </select>

source/SIL.AppBuilder.Portal/src/lib/products/components/BuildArtifacts.svelte

@@ -4,27 +4,26 @@
   import * as m from '$lib/paraglide/messages';
   import { languageTag } from '$lib/paraglide/runtime';
   import { getRelativeTime } from '$lib/timeUtils';
-  import { bytesToHumanSize } from '$lib/utils';
-
+  import { byString, bytesToHumanSize } from '$lib/utils';
 
   interface Props {
     build: {
-    Version: string | null;
-    Success: boolean | null;
-    BuildId: number;
-    ProductArtifacts: {
-      ArtifactType: string | null;
-      FileSize: bigint | null;
-      Url: string | null;
-      DateUpdated: Date | null;
-    }[];
-    ProductPublications: {
-      Channel: string | null;
+      Version: string | null;
       Success: boolean | null;
-      LogUrl: string | null;
-      DateUpdated: Date | null;
-    }[];
-  };
+      BuildId: number;
+      ProductArtifacts: {
+        ArtifactType: string | null;
+        FileSize: bigint | null;
+        Url: string | null;
+        DateUpdated: Date | null;
+      }[];
+      ProductPublications: {
+        Channel: string | null;
+        Success: boolean | null;
+        LogUrl: string | null;
+        DateUpdated: Date | null;
+      }[];
+    };
     latestBuildId: number | undefined;
   }
 
@@ -82,13 +81,11 @@
           </tr>
         </thead>
         <tbody>
-          {#each build.ProductArtifacts as artifact}
+          {#each build.ProductArtifacts.toSorted( (a, b) => byString(a.ArtifactType, b.ArtifactType, langTag) ) as artifact}
             <tr>
               <td><IconContainer icon="mdi:file" width="20" /> {artifact.ArtifactType}</td>
               <td>
-                <Tooltip
-                  tip={artifact.DateUpdated?.toLocaleString(langTag)}
-                >
+                <Tooltip tip={artifact.DateUpdated?.toLocaleString(langTag)}>
                   {getRelativeTime(artifact.DateUpdated)}
                 </Tooltip>
               </td>

source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectCard.svelte

@@ -2,7 +2,9 @@
   import IconContainer from '$lib/components/IconContainer.svelte';
   import { getIcon } from '$lib/icons/productDefinitionIcon';
   import * as m from '$lib/paraglide/messages';
+  import { languageTag } from '$lib/paraglide/runtime';
   import { getTimeDateString } from '$lib/timeUtils';
+  import { byString } from '$lib/utils';
   import type { PrunedProject } from '../common';
 
   interface Props {
@@ -76,6 +78,7 @@
   </div>
   <div class="w-full bg-base-100 p-4 pt-2">
     {#if project.Products.length > 0}
+      {@const langTag = languageTag()}
       <table class="w-full">
         <thead>
           <tr class="text-left">
@@ -85,7 +88,7 @@
           </tr>
         </thead>
         <tbody>
-          {#each project.Products as product}
+          {#each project.Products.toSorted( (a, b) => byString(a.ProductDefinitionName, b.ProductDefinitionName, langTag) ) as product}
             <tr>
               <td class="p-2">
                 <div class="flex items-center">

source/SIL.AppBuilder.Portal/src/lib/utils.ts

@@ -20,8 +20,24 @@ interface NamedEntity {
   Name: string | null;
 }
 
-export function sortByName(a: NamedEntity, b: NamedEntity, languageTag: string): number {
-  return a.Name?.localeCompare(b.Name ?? '', languageTag) ?? 0;
+export function byName(
+  a: NamedEntity | null | undefined,
+  b: NamedEntity | null | undefined,
+  languageTag: string
+): number {
+  return byString(a?.Name, b?.Name, languageTag);
+}
+
+export function byString(
+  a: string | null | undefined,
+  b: string | null | undefined,
+  languageTag: string
+): number {
+  return a?.localeCompare(b ?? '', languageTag) ?? 0;
+}
+
+export function byNumber(a: number | bigint | null, b: number | bigint | null): number {
+  return a === b ? 0 : (a ?? 0) > (b ?? 0) ? 1 : -1;
 }
 
 /** returns true if user is a SuperAdmin, or is an OrgAdmin for the specified organization

source/SIL.AppBuilder.Portal/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte

@@ -4,6 +4,7 @@
   import * as m from '$lib/paraglide/messages';
   import { languageTag } from '$lib/paraglide/runtime';
   import { getRelativeTime } from '$lib/timeUtils';
+  import { byString } from '$lib/utils';
   import type { PageData } from './$types';
 
   interface Props {
@@ -21,7 +22,7 @@
 {/snippet}
 
 <div class="flex flex-col w-full">
-  {#each data.buildEngines as buildEngine}
+  {#each data.buildEngines.toSorted( (a, b) => byString(a.BuildEngineUrl, b.BuildEngineUrl, languageTag()) ) as buildEngine}
     <DataDisplayBox
       title={buildEngine.BuildEngineUrl}
       data={buildEngine}

source/SIL.AppBuilder.Portal/src/routes/(authenticated)/admin/settings/organizations/+page.svelte

@@ -3,7 +3,7 @@
   import DataDisplayBox from '$lib/components/settings/DataDisplayBox.svelte';
   import * as m from '$lib/paraglide/messages';
   import { languageTag } from '$lib/paraglide/runtime';
-  import { sortByName } from '$lib/utils';
+  import { byName } from '$lib/utils';
   import type { PageData } from './$types';
 
   interface Props {
@@ -18,7 +18,7 @@
 </a>
 
 <div class="flex flex-col w-full">
-  {#each data.organizations.sort((a, b) => sortByName(a, b, languageTag())) as organization}
+  {#each data.organizations.toSorted((a, b) => byName(a, b, languageTag())) as organization}
     <DataDisplayBox
       editable
       onEdit={() => goto('/admin/settings/organizations/edit?id=' + organization.Id)}

source/SIL.AppBuilder.Portal/src/routes/(authenticated)/admin/settings/organizations/edit/+page.svelte

@@ -4,6 +4,8 @@
   import MultiselectBox from '$lib/components/settings/MultiselectBox.svelte';
   import MultiselectBoxElement from '$lib/components/settings/MultiselectBoxElement.svelte';
   import * as m from '$lib/paraglide/messages';
+  import { languageTag } from '$lib/paraglide/runtime';
+  import { byName } from '$lib/utils';
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
 
@@ -42,7 +44,7 @@
   </LabeledFormInput>
   <LabeledFormInput name="admin_settings_organizations_owner">
     <select class="select select-bordered" name="owner" bind:value={$superFormData.owner}>
-      {#each data.options.users as option}
+      {#each data.options.users.toSorted((a, b) => byName(a, b, languageTag())) as option}
         <option value={option.Id}>{option.Name}</option>
       {/each}
     </select>
@@ -99,7 +101,7 @@
       </div>
     </label>
   </div>
-
+  <!-- TODO: sort this. I think this will need a refactor of MultiselectBox -->
   <MultiselectBox header={m.org_storeSelectTitle()}>
     {#each $superFormData.stores as store}
       <MultiselectBoxElement

source/SIL.AppBuilder.Portal/src/routes/(authenticated)/admin/settings/organizations/new/+page.svelte

@@ -2,6 +2,8 @@
   import { goto } from '$app/navigation';
   import LabeledFormInput from '$lib/components/settings/LabeledFormInput.svelte';
   import * as m from '$lib/paraglide/messages';
+  import { languageTag } from '$lib/paraglide/runtime';
+  import { byName } from '$lib/utils';
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
 
@@ -28,7 +30,7 @@
   </LabeledFormInput>
   <LabeledFormInput name="admin_settings_organizations_owner">
     <select class="select select-bordered" name="owner" bind:value={$form.owner}>
-      {#each data.options.users as user}
+      {#each data.options.users.toSorted((a, b) => byName(a, b, languageTag())) as user}
         <option value={user.Id}>{user.Name}</option>
       {/each}
     </select>