From e322bd239bd46f5a323fc4bcdc58ab5804b1d89c Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 16 Jan 2025 14:09:41 +0100
Subject: [PATCH] Hide reordering UI for Complex Forms

---
 .../src/lib/entry-editor/EntryOrSenseItemList.svelte       | 7 ++++---
 .../{OrderedItemList.svelte => ItemList.svelte}            | 5 +++--
 .../field-editors/ComplexFormComponents.svelte             | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)
 rename frontend/viewer/src/lib/entry-editor/{OrderedItemList.svelte => ItemList.svelte} (97%)

diff --git a/frontend/viewer/src/lib/entry-editor/EntryOrSenseItemList.svelte b/frontend/viewer/src/lib/entry-editor/EntryOrSenseItemList.svelte
index d4a49b995..fb7bd2a8e 100644
--- a/frontend/viewer/src/lib/entry-editor/EntryOrSenseItemList.svelte
+++ b/frontend/viewer/src/lib/entry-editor/EntryOrSenseItemList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import OrderedItemList from './OrderedItemList.svelte';
+  import ItemList from './ItemList.svelte';
 
   import { Icon, MenuItem } from 'svelte-ux';
   import { mdiBookOutline } from '@mdi/js';
@@ -9,11 +9,12 @@
 
   export let value: T[];
   export let readonly: boolean;
+  export let orderable = false;
   export let getEntryId: (item: T) => string;
   export let getHeadword: (item: T) => string | undefined;
 </script>
 
-<OrderedItemList bind:value {readonly} on:change
+<ItemList bind:value {readonly} {orderable} on:change
   getDisplayName={getHeadword}
   getGotoLink={entry => `?entryId=${getEntryId(entry)}&search=${getHeadword(entry)?.replace(/\d?$/, '')}`}>
   <svelte:fragment slot="menuItems" let:item={entry}>
@@ -25,4 +26,4 @@
     </MenuItem>
   </svelte:fragment>
   <slot name="actions" slot="actions" />
-</OrderedItemList>
+</ItemList>
diff --git a/frontend/viewer/src/lib/entry-editor/OrderedItemList.svelte b/frontend/viewer/src/lib/entry-editor/ItemList.svelte
similarity index 97%
rename from frontend/viewer/src/lib/entry-editor/OrderedItemList.svelte
rename to frontend/viewer/src/lib/entry-editor/ItemList.svelte
index 5f6be1d8d..acd4799f3 100644
--- a/frontend/viewer/src/lib/entry-editor/OrderedItemList.svelte
+++ b/frontend/viewer/src/lib/entry-editor/ItemList.svelte
@@ -13,6 +13,7 @@
 
   export let value: T[];
   export let readonly: boolean;
+  export let orderable = false;
   export let getDisplayName: (item: T) => string | undefined;
   export let getGotoLink: ((item: T) => string) | undefined = undefined;
 
@@ -47,7 +48,7 @@
   }
 </script>
 
-<div class="flex gap-2 flex-wrap">
+<div class="flex gap-2 flex-wrap items-center">
   {#each value as item, i}
     {@const gotoLink = getGotoLink?.(item)}
     {@const displayName = getDisplayName(item) || '–'}
@@ -69,7 +70,7 @@
               {@const first = i === 0}
               {@const last = i === count - 1}
               {@const only = count === 1}
-              {#if !only}
+              {#if orderable && !only}
                 <MenuItem>
                   <Toggle let:on={open} let:toggle let:toggleOff>
                     <Popover {open} let:close on:close={toggleOff} placement="right-start" offset={4}>
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte
index b800ea0bc..cf09b9fac 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte
@@ -58,7 +58,7 @@
 >
   <FieldTitle {id} {name} />
   <div class="item-list-field">
-    <EntryOrSenseItemList bind:value {readonly} on:change={() => dispatch('change', { value })} getEntryId={(e) => e.componentEntryId} getHeadword={(e) => e.componentHeadword}>
+    <EntryOrSenseItemList bind:value {readonly} orderable on:change={() => dispatch('change', { value })} getEntryId={(e) => e.componentEntryId} getHeadword={(e) => e.componentHeadword}>
       <svelte:fragment slot="actions">
         <Button on:click={() => openPicker = true} icon={mdiPlus} variant="fill-light" color="success" size="sm">
           Add Component