Form list

frontend/src/components/details.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+  import Icon from './icon.svelte';
+
+  export let title = '';
+  export let initiallyOpen = false;
+  export let deletable = false;
+
+  const dispatch = createEventDispatcher();
+  /** @type {HTMLDetailsElement} */ let detailsElement;
+
+  onMount(() => {
+    if (initiallyOpen && detailsElement) {
+      detailsElement.open = initiallyOpen;
+    }
+  });
+</script>
+
+<details bind:this={detailsElement}>
+  <summary>
+    <Icon name="chev-d" />
+    {title}
+
+    {#if deletable}
+      <button class="delete" on:click={() => dispatch('delete')}>
+        <Icon name="trash" />
+      </button>
+    {/if}
+  </summary>
+
+  <slot />
+</details>
+
+<style>
+  details {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0.5em 0.5em 0;
+    margin-bottom: 0.5rem;
+  }
+  details[open] {
+    padding: 0.5em;
+  }
+
+  summary {
+    font-weight: 700;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    cursor: pointer;
+  }
+  summary :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+  details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: 0.5em;
+  }
+
+  button.delete {
+    margin-left: auto;
+    color: #c00;
+  }
+</style>

frontend/src/components/forminput.svelte

@@ -1,18 +1,21 @@
 <script>
-  import { numericInputTypes } from '../utils';
+  import { canBeObjectId, numericInputTypes } from '../utils';
   import { input } from '../actions';
   import Icon from './icon.svelte';
   import { ObjectId } from 'bson';
   import Datepicker from './datepicker.svelte';
+  import { onMount } from 'svelte';
 
   export let column = {};
   export let value = undefined;
   export let valid = true;
+  export let autofocus = false;
 
   const onValid = () => valid = true;
   const onInvalid = () => valid = false;
   let objectIdInput;
   let showDatepicker;
+  let selectInput;
   $: type = column.inputType;
   $: mandatory = column.mandatory;
 
@@ -28,7 +31,7 @@
   }
 
   function setObjectId(event) {
-    if (valid) {
+    if (canBeObjectId(valid)) {
       value = new ObjectId(event.currentTarget?.value);
     }
   }
@@ -56,23 +59,29 @@
       valid = true;
     }
   }
+
+  onMount(() => {
+    if (autofocus && selectInput) {
+      selectInput.focus();
+    }
+  });
 </script>
 
 <div class="forminput {type}">
   <div class="field">
     {#if type === 'string'}
-      <input type="text" bind:value use:input={{ type, onValid, onInvalid, mandatory }} />
+      <input type="text" bind:value use:input={{ type, onValid, onInvalid, mandatory, autofocus }} />
     {:else if type === 'objectid'}
       <input
         type="text"
         bind:this={objectIdInput}
         on:input={setObjectId}
-        use:input={{ type, onValid, onInvalid, mandatory }}
+        use:input={{ type, onValid, onInvalid, mandatory, autofocus }}
       />
     {:else if numericInputTypes.includes(type)}
-      <input type="number" bind:value use:input={{ type, onValid, onInvalid, mandatory }} />
+      <input type="number" bind:value use:input={{ type, onValid, onInvalid, mandatory, autofocus }} />
     {:else if type === 'bool'}
-      <select bind:value on:change={selectChange}>
+      <select bind:value on:change={selectChange} bind:this={selectInput}>
         <option value={undefined} disabled={mandatory}>Unset</option>
         <option value={true}>Yes / true</option>
         <option value={false}>No / false</option>
@@ -120,17 +129,13 @@
   }
 
   .actions {
-    display: none;
+    display: flex;
     position: absolute;
     right: 5px;
-    top: 6px;
+    top: 5px;
     background-color: #fff;
   }
   .actions button:last-child {
     border-radius: 2px 6px 6px 2px;
   }
-
-  .forminput:hover .actions {
-    display: flex;
-  }
 </style>

frontend/src/components/grid-items.svelte

@@ -26,7 +26,7 @@
   let _items = [];
 
   $: refresh(hideObjectIndicators, items);
-  $: inputsValid = Object.values(validity).every(v => !!v);
+  $: inputsValid = Object.values(validity).every(v => v !== false);
 
   function refresh(hideObjectIndicators, items) {
     _items = objectToArray(items).map(item => {

frontend/src/components/grid.svelte

@@ -1,7 +1,5 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
   import GridItems from './grid-items.svelte';
-  import Icon from './icon.svelte';
 
   export let columns = [];
   export let items = [];
@@ -11,17 +9,10 @@
   export let showHeaders = false;
   export let hideObjectIndicators = false;
   export let hideChildrenToggles = false;
-  export let canAddRows = false;
   export let canSelect = true;
   export let canRemoveItems = false;
   export let inputsValid = false;
   // export let actions = [];
-
-  const dispatch = createEventDispatcher();
-
-  function addRow() {
-    dispatch('addRow');
-  }
 </script>
 
 <div class="grid">
@@ -73,14 +64,6 @@
         on:trigger
       />
     </tbody>
-
-    {#if canAddRows}
-      <tfoot>
-        <button class="btn-sm" type="button" on:click={addRow}>
-          <Icon name="+" />
-        </button>
-      </tfoot>
-    {/if}
   </table>
 </div>