Hide reordering UI for Complex Forms

sillsdev · Jan 16, 2025 · e322bd2 · e322bd2
1 parent de7e10e
commit e322bd2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git 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/...c/lib/entry-editor/OrderedItemList.svelte → ...ewer/src/lib/entry-editor/ItemList.svelte b/...c/lib/entry-editor/OrderedItemList.svelte → ...ewer/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
@@ -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