Table view

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

@@ -1,7 +1,7 @@
 <script>
-  import { resolveKeypath, setValue } from '../../../../utils';
+  import { inputTypes, resolveKeypath, setValue } from '../../../../utils';
   import Icon from '../../../../components/icon.svelte';
-  import FormInput from './forminput.svelte';
+  import FormInput from '../../../../components/forminput.svelte';
 
   export let item = {};
   export let view = {};
@@ -12,6 +12,7 @@
 
   const iconMap = {
     string: 'text',
+    objectid: 'anchor',
     int: 'hash',
     long: 'hash',
     uint64: 'hash',
@@ -28,14 +29,10 @@
       return true;
     },
   });
-
-  function reset(columnKey) {
-    keypathProxy[columnKey] = undefined;
-  }
 </script>
 
 {#if item && view}
-  {#each view?.columns?.filter(c => c.inputType !== 'none') || [] as column}
+  {#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column}
     <!-- svelte-ignore a11y-label-has-associated-control because FormInput contains one -->
     <label class="column">
       <div class="label">
@@ -49,9 +46,6 @@
       </div>
       <div class="input">
         <FormInput {column} bind:value={keypathProxy[column.key]} bind:valid={validity[column.key]} />
-        <button type="button" class="btn" title="Reset value" on:click={() => reset(column.key)} disabled={keypathProxy[column.key] === undefined}>
-          <Icon name="reload" />
-        </button>
       </div>
     </label>
   {/each}
@@ -75,12 +69,6 @@
     height: 13px;
   }
 
-  .input {
-    display: grid;
-    grid-template: 1fr / 1fr auto;
-    gap: 0.5rem;
-  }
-
   .tag {
     display: inline-block;
     background-color: rgba(140, 140, 140, 0.1);

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

@@ -1,73 +0,0 @@
-<script>
-  import { isDate } from '../../../../utils';
-  import { input } from '../../../../actions';
-
-  export let column = {};
-  export let value = undefined;
-  export let valid = true;
-
-  const onValid = () => valid = true;
-  const onInvalid = () => valid = false;
-  const numericTypes = [ 'int', 'long', 'uint64', 'double', 'decimal' ];
-  let dateInput;
-  let timeInput;
-  $: type = column.inputType;
-  $: mandatory = column.mandatory;
-
-  $: if (value === undefined) {
-    dateInput && (dateInput.value = undefined);
-    timeInput && (timeInput.value = undefined);
-    mandatory && (valid = false);
-  }
-
-  function setDate(event) {
-    if (event?.currentTarget?.value) {
-      if (!isDate(value)) {
-        value = new Date(event.currentTarget.value);
-      }
-      const date = event.currentTarget.value.split('-').map(n => parseInt(n));
-      value.setFullYear(date[0], date[1], date[2]);
-    }
-  }
-
-  function setTime(event) {
-    if (event?.currentTarget?.value) {
-      const time = event.currentTarget.value.split(':').map(n => parseInt(n));
-      value.setHours?.(time[0], time[1], 0, 0);
-    }
-  }
-
-  function selectChange() {
-    if ((value === undefined) && mandatory) {
-      valid = false;
-    }
-    else {
-      valid = true;
-    }
-  }
-</script>
-
-<div class="field {type}">
-  {#if type === 'string'}
-    <input type="text" bind:value use:input={{ type, onValid, onInvalid, mandatory }} />
-  {:else if numericTypes.includes(type)}
-    <input type="number" bind:value use:input={{ type, onValid, onInvalid, mandatory }} />
-  {:else if type === 'bool'}
-    <select bind:value on:change={selectChange}>
-      <option value={undefined} disabled={mandatory}>Unset</option>
-      <option value={true}>Yes / true</option>
-      <option value={false}>No / false</option>
-    </select>
-  {:else if type === 'date'}
-    {@const isNotDate = !isDate(value)}
-    <input type="date" bind:this={dateInput} on:input={setDate} use:input />
-    <input type="time" bind:this={timeInput} on:input={setTime} disabled={isNotDate} title={isNotDate ? 'Enter a date first' : ''} />
-  {/if}
-</div>
-
-<style>
-  .field.date {
-    display: grid;
-    grid-template: 1fr / 3fr 1fr;
-  }
-</style>

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

@@ -151,7 +151,7 @@
                   <option value="none">Hidden in form</option>
                   <optgroup label="Strings">
                     <option value="string">String</option>
-                    <option value="objectid">ObjectID</option>
+                    <option value="objectid">ObjectId</option>
                   </optgroup>
                   <optgroup label="Integers">
                     <option value="int">Integer (32-bit, signed)</option>

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

@@ -6,6 +6,8 @@
   import Icon from '../../../components/icon.svelte';
   import Form from './components/form.svelte';
   import ObjectViewer from '../../../components/objectviewer.svelte';
+  import Grid from '../../../components/grid.svelte';
+  import { inputTypes, randomString } from '../../../utils';
 
   export let collection;
 
@@ -50,6 +52,10 @@
       objectViewerData = [ ...newItems ];
     }
   }
+
+  function addRow() {
+    newItems = [ ...newItems, {} ];
+  }
 </script>
 
 <form on:submit|preventDefault={insert}>
@@ -64,10 +70,29 @@
         use:input={{ type: 'json', autofocus: true }}
       ></textarea>
     </label>
-  {:else}
+  {: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="flex">
@@ -114,6 +139,11 @@
     gap: 0.5rem;
   }
 
+  .table {
+    background-color: #fff;
+    border: 1px solid #ccc;
+  }
+
   .flex {
     display: flex;
     justify-content: space-between;

frontend/src/organisms/settings/index.svelte

@@ -22,7 +22,7 @@
     <label for="autosubmitQuery">Autosubmit query</label>
     <span>
       <input type="checkbox" id="autosubmitQuery" bind:checked={$settings.autosubmitQuery} />
-      <label for="autosubmitQuery">Query items automatically when you open a collection</label>
+      <label for="autosubmitQuery">Query items automatically after opening a collection</label>
     </span>
   </div>
 </Modal>