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>
 

frontend/src/organisms/connection/collection/components/form.svelte

@@ -23,16 +23,18 @@
   };
 
   const keypathProxy = new Proxy(item, {
-    get: (item, key) => resolveKeypath(item, key),
+    get: resolveKeypath,
     set: (item, key, value) => {
       setValue(item, key, value);
-      return true;
+      // eslint-disable-next-line no-self-assign
+      value = value;
+      return item;
     },
   });
 </script>
 
 {#if item && view}
-  {#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column}
+  {#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column, index}
     <!-- svelte-ignore a11y-label-has-associated-control because FormInput contains one -->
     <label class="column">
       <div class="label">
@@ -45,7 +47,7 @@
         </span>
       </div>
       <div class="input">
-        <FormInput {column} bind:value={keypathProxy[column.key]} bind:valid={validity[column.key]} />
+        <FormInput {column} bind:value={keypathProxy[column.key]} bind:valid={validity[column.key]} autofocus={index === 0} />
       </div>
     </label>
   {/each}

frontend/src/organisms/connection/collection/insert.svelte

@@ -8,21 +8,33 @@
   import ObjectViewer from '../../../components/objectviewer.svelte';
   import Grid from '../../../components/grid.svelte';
   import { inputTypes, randomString } from '../../../utils';
+  import { EJSON } from 'bson';
+  import Details from '../../../components/details.svelte';
 
   export let collection;
 
   const dispatch = createEventDispatcher();
+  const formValidity = {};
   let json = '';
   let newItems = [];
   let insertedIds;
   let objectViewerData = '';
   let viewType = 'form';
-  let formValid = false;
+  let allValid = false;
   $: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key);
   $: oppositeViewType = viewType === 'table' ? 'form' : 'table';
+  $: allValid = Object.values(formValidity).every(v => v !== false);
 
-  $: if (collection.viewKey !== 'list') {
-    json = JSON.stringify(newItems, undefined, 2);
+  $: {
+    if (collection.viewKey === 'list') {
+      try {
+        newItems = EJSON.parse(json, { relaxed: false });
+      }
+      catch { /* ok */ }
+    }
+    else {
+      json = EJSON.stringify(newItems, undefined, 2, { relaxed: false });
+    }
   }
 
   async function insert() {
@@ -56,47 +68,69 @@
   function addRow() {
     newItems = [ ...newItems, {} ];
   }
+
+  function deleteRow(index) {
+    newItems.splice(index, 1);
+    newItems = newItems;
+  }
 </script>
 
 <form on:submit|preventDefault={insert}>
-  {#if collection.viewKey === 'list'}
-    <label class="field">
-      <textarea
-        cols="30"
-        rows="10"
-        placeholder="[]"
-        class="code"
-        bind:value={json}
-        use:input={{ type: 'json', autofocus: true }}
-      ></textarea>
-    </label>
-  {:else if viewType === 'form'}
-    <div class="form">
-      <Form bind:item={newItems[0]} bind:valid={formValid} view={$views[collection.viewKey]} />
-    </div>
-  {:else if viewType === 'table'}
-    <div class="table">
-      <Grid
-        key="id"
-        items={newItems}
-        columns={
-          $views[collection.viewKey]?.columns
-            ?.filter(c => inputTypes.includes(c.inputType))
-            .map(c => ({ ...c, id: randomString(8), title: c.key })) || []
-        }
-        showHeaders={true}
-        canAddRows={true}
-        canSelect={false}
-        canRemoveItems={true}
-        hideChildrenToggles={true}
-        on:addRow={addRow}
-        bind:inputsValid={formValid}
-      />
-    </div>
-  {/if}
+  <div class="items">
+    {#if collection.viewKey === 'list'}
+      <label class="field">
+        <textarea
+          cols="30"
+          rows="10"
+          placeholder="[]"
+          class="code"
+          bind:value={json}
+          use:input={{ type: 'json', autofocus: true }}
+        ></textarea>
+      </label>
+    {:else if viewType === 'form'}
+      <div class="form">
+        {#each newItems as item, index}
+          <Details
+            title="Item #{index + 1} {(item._id !== undefined) ? `(${item._id})` : ''}"
+            initiallyOpen={index === 0}
+            deletable={true}
+            on:delete={() => deleteRow(index)}
+          >
+            <fieldset>
+              <Form bind:item={newItems[index]} bind:valid={formValidity[index]} view={$views[collection.viewKey]} />
+            </fieldset>
+          </Details>
+        {/each}
+      </div>
+    {:else if viewType === 'table'}
+      <div class="table">
+        <Grid
+          key="id"
+          items={newItems}
+          columns={
+            $views[collection.viewKey]?.columns
+              ?.filter(c => inputTypes.includes(c.inputType))
+              .map(c => ({ ...c, id: randomString(8), title: c.key })) || []
+          }
+          showHeaders={true}
+          canSelect={false}
+          canRemoveItems={true}
+          hideChildrenToggles={true}
+          on:addRow={addRow}
+          bind:inputsValid={allValid}
+        />
+      </div>
+    {/if}
+  </div>
 
   <div class="flex">
     <div>
+      {#if collection.viewKey !== 'list'}
+        <button class="btn" type="button" on:click={addRow}>
+          <Icon name="+" /> Add item
+        </button>
+      {/if}
       {#if insertedIds}
         <span class="flash-green">Success! {insertedIds.length} document{insertedIds.length > 1 ? 's' : ''} inserted</span>
       {/if}
@@ -123,7 +157,7 @@
           <Icon name="cog" />
         </button>
       </label>
-      <button type="submit" class="btn" disabled={$views[collection.viewKey]?.type === 'list' ? !json : !formValid}>
+      <button type="submit" class="btn" disabled={$views[collection.viewKey]?.type === 'list' ? !json : !allValid}>
         <Icon name="+" /> Insert
       </button>
     </div>
@@ -135,11 +169,14 @@
 <style>
   form {
     display: grid;
-    grid-template-rows: 1fr auto;
+    grid-template: 1fr auto / 1fr;
     gap: 0.5rem;
   }
 
-  .table {
+  .items {
+    overflow: auto;
+  }
+  .items .table {
     background-color: #fff;
     border: 1px solid #ccc;
   }

frontend/src/utils.js

@@ -2,7 +2,7 @@ import { ObjectId } from 'bson';
 import { get } from 'svelte/store';
 import { environment } from './stores';
 
-// Calculate the min and max values of signed integers with n bits
+// Calculate the min and max values of (un)signed integers with n bits
 export const intMin = bits => Math.pow(2, bits - 1) * -1;
 export const intMax = bits => Math.pow(2, bits - 1) - 1;
 export const uintMax = bits => Math.pow(2, bits) - 1;
@@ -64,6 +64,7 @@ export function setValue(object, path, value) {
     }
     return part;
   });
+
   let result = object;
   while (parts.length) {
     const part = parts.shift();
@@ -78,6 +79,7 @@ export function setValue(object, path, value) {
     }
     result = result[part];
   }
+
   return object;
 }