From 1cf89b32784f13c69f27b207c696c7407b933fa4 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Sun, 29 Jan 2023 20:00:15 +0100
Subject: [PATCH] Forms!

---
 frontend/src/actions.js                       |  77 +++++-
 frontend/src/components/grid-items.svelte     |   2 +-
 frontend/src/components/icon.svelte           |  14 +
 .../collection/components/form.svelte         |  97 +++++++
 .../collection/components/forminput.svelte    |  76 ++++++
 .../indexdetail.svelte}                       |   8 +-
 .../collection/components/viewconfig.svelte   | 242 ++++++++++++++++++
 .../collection/find-viewconfig.svelte         | 182 -------------
 .../connection/collection/find.svelte         |  71 +++--
 .../connection/collection/index.svelte        |  21 +-
 .../connection/collection/indexes.svelte      |   2 +-
 .../connection/collection/insert.svelte       |  82 +++++-
 .../connection/collection/remove.svelte       |   2 +-
 .../connection/collection/update.svelte       |  25 +-
 .../connection/export/dumpinfo.svelte         |   2 -
 frontend/src/organisms/settings/index.svelte  |   2 +-
 frontend/src/stores.js                        |  31 ++-
 frontend/src/style.css                        | 130 +++++-----
 frontend/src/utils.js                         |  60 ++++-
 .../{collection_find_views.go => views.go}    |  61 ++---
 20 files changed, 817 insertions(+), 370 deletions(-)
 create mode 100644 frontend/src/organisms/connection/collection/components/form.svelte
 create mode 100644 frontend/src/organisms/connection/collection/components/forminput.svelte
 rename frontend/src/organisms/connection/collection/{indexes-detail.svelte => components/indexdetail.svelte} (94%)
 create mode 100644 frontend/src/organisms/connection/collection/components/viewconfig.svelte
 delete mode 100644 frontend/src/organisms/connection/collection/find-viewconfig.svelte
 rename internal/app/{collection_find_views.go => views.go} (72%)

diff --git a/frontend/src/actions.js b/frontend/src/actions.js
index eca588a..e425351 100644
--- a/frontend/src/actions.js
+++ b/frontend/src/actions.js
@@ -1,13 +1,72 @@
-export function input(node, { json, autofocus } = { json: false, autofocus: false }) {
+import { int32, int64, isInt, uint64 } from './utils';
+
+export function input(node, { autofocus, type, onValid, onInvalid, mandatory } = {
+  autofocus: false,
+  type: '',
+  onValid: () => 0,
+  onInvalid: () => 0,
+  mandatory: false,
+}) {
+
+  const getMessage = () => {
+    const checkInteger = () => (isInt(node.value) ? false : 'Value must be an integer');
+    const checkNumberBoundaries = boundaries => {
+      if (node.value < boundaries[0]) {
+        return `Input is too low for type ${type}`;
+      }
+      else if (node.value > boundaries[1]) {
+        return `Input is too high for type ${type}`;
+      }
+      else {
+        return true;
+      }
+    };
+
+    switch (type) {
+      case 'json':
+        try {
+          JSON.parse(node.value);
+          return false;
+        }
+        catch {
+          return 'Invalid JSON';
+        }
+
+      case 'int': // int32
+        return checkInteger() || checkNumberBoundaries(int32);
+
+      case 'long': // int64
+        return checkInteger() || checkNumberBoundaries(int64);
+
+      case 'uint64':
+        return checkInteger() || checkNumberBoundaries(uint64);
+
+      case 'string':
+        if (mandatory && (node.value == '')) {
+          return 'This field cannot empty';
+        }
+        return false;
+
+      case 'double':
+      case 'decimal':
+      default:
+        return false;
+    }
+  };
+
   const handleInput = () => {
-    if (json) {
-      try {
-        JSON.parse(node.value);
-        node.classList.remove('invalid');
-      }
-      catch {
-        node.classList.add('invalid');
-      }
+    const invalid = getMessage();
+    if (invalid) {
+      node.classList.add('invalid');
+      node.setCustomValidity(invalid);
+      node.reportValidity();
+      onInvalid?.();
+    }
+    else {
+      node.classList.remove('invalid');
+      node.setCustomValidity('');
+      node.reportValidity();
+      onValid?.();
     }
   };
 
diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte
index b1a5b36..6786d7b 100644
--- a/frontend/src/components/grid-items.svelte
+++ b/frontend/src/components/grid-items.svelte
@@ -111,7 +111,7 @@
         {#if item.children?.length}
           <button
             class="toggle"
-            on:click={evt => toggleChildren(item[key], evt.shiftKey)}
+            on:click|stopPropagation={evt => toggleChildren(item[key], evt.shiftKey)}
             style:transform="translateX({level * 10}px)"
           >
             <Icon name={childrenOpen[item[key]] ? 'chev-d' : 'chev-r'} />
diff --git a/frontend/src/components/icon.svelte b/frontend/src/components/icon.svelte
index 78fdbb1..100c8ea 100644
--- a/frontend/src/components/icon.svelte
+++ b/frontend/src/components/icon.svelte
@@ -53,11 +53,25 @@
     <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
   {:else if name === 'table'}
     <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
+  {:else if name === 'form'}
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
   {:else if name === 'cog'}
     <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
   {:else if name === 'zap'}
     <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
   {:else if name === 'server'}
     <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><path d="M6 6h.01M6 18h.01"/>
+  {:else if name === 'text'}
+    <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
+  {:else if name === 'hash'}
+    <path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/>
+  {:else if name === 'toggle-l'}
+    <rect x="1" y="5" width="22" height="14" rx="7" ry="7"/><circle cx="8" cy="12" r="3"/>
+  {:else if name === 'cal'}
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
+  {:else if name === 'code'}
+    <path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/>
+  {:else if name === 'target'}
+    <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
   {/if}
 </svg>
diff --git a/frontend/src/organisms/connection/collection/components/form.svelte b/frontend/src/organisms/connection/collection/components/form.svelte
new file mode 100644
index 0000000..f88f3f8
--- /dev/null
+++ b/frontend/src/organisms/connection/collection/components/form.svelte
@@ -0,0 +1,97 @@
+<script>
+  import { resolveKeypath, setValue } from '../../../../utils';
+  import Icon from '../../../../components/icon.svelte';
+  import FormInput from './forminput.svelte';
+
+  export let item = {};
+  export let view = {};
+  export let valid = false;
+
+  const validity = {};
+  $: valid = Object.values(validity).every(v => !!v);
+
+  const iconMap = {
+    string: 'text',
+    int: 'hash',
+    long: 'hash',
+    uint64: 'hash',
+    double: 'hash',
+    decimal: 'hash',
+    bool: 'toggle-l',
+    date: 'cal',
+  };
+
+  const keypathProxy = new Proxy(item, {
+    get: (item, key) => resolveKeypath(item, key),
+    set: (item, key, value) => {
+      setValue(item, key, value);
+      return true;
+    },
+  });
+
+  function reset(columnKey) {
+    keypathProxy[columnKey] = undefined;
+  }
+</script>
+
+{#if item && view}
+  {#each view?.columns?.filter(c => c.inputType !== 'none') || [] as column}
+    <!-- svelte-ignore a11y-label-has-associated-control because FormInput contains one -->
+    <label class="column">
+      <div class="label">
+        <Icon name={iconMap[column.inputType]} />
+        <span>
+          {column.key}
+          {#if column.mandatory}
+            <span class="tag" class:invalid={!validity[column.key]}>mandatory</span>
+          {/if}
+        </span>
+      </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]}>
+          <Icon name="reload" />
+        </button>
+      </div>
+    </label>
+  {/each}
+{/if}
+
+<style>
+  .column {
+    display: block;
+  }
+  .column + .column {
+    margin-top: 1rem;
+  }
+  .column .label {
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .column .label :global(svg) {
+    width: 13px;
+    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);
+    color: #777;
+    text-transform: uppercase;
+    font-size: 10px;
+    padding: 3px 5px;
+    font-weight: 600;
+  }
+  .tag.invalid {
+    background-color: rgba(255, 80, 80, 0.3);
+    color: #8d2c2c;
+  }
+</style>
diff --git a/frontend/src/organisms/connection/collection/components/forminput.svelte b/frontend/src/organisms/connection/collection/components/forminput.svelte
new file mode 100644
index 0000000..97517a6
--- /dev/null
+++ b/frontend/src/organisms/connection/collection/components/forminput.svelte
@@ -0,0 +1,76 @@
+<script>
+  import { isDate } from '../../../../utils';
+  import { createEventDispatcher } from 'svelte';
+  import { input } from '../../../../actions';
+
+  export let column = {};
+  export let value = undefined;
+  export let valid = true;
+
+  const dispatch = createEventDispatcher();
+  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;
+  $: dispatch('input', value);
+
+  $: 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>
diff --git a/frontend/src/organisms/connection/collection/indexes-detail.svelte b/frontend/src/organisms/connection/collection/components/indexdetail.svelte
similarity index 94%
rename from frontend/src/organisms/connection/collection/indexes-detail.svelte
rename to frontend/src/organisms/connection/collection/components/indexdetail.svelte
index 8f663cb..94d0ef9 100644
--- a/frontend/src/organisms/connection/collection/indexes-detail.svelte
+++ b/frontend/src/organisms/connection/collection/components/indexdetail.svelte
@@ -1,8 +1,8 @@
 <script>
-  import Icon from '../../../components/icon.svelte';
-  import { input } from '../../../actions';
-  import Modal from '../../../components/modal.svelte';
-  import { CreateIndex } from '../../../../wailsjs/go/app/App';
+  import Icon from '../../../../components/icon.svelte';
+  import { input } from '../../../../actions';
+  import Modal from '../../../../components/modal.svelte';
+  import { CreateIndex } from '../../../../../wailsjs/go/app/App';
   import { createEventDispatcher } from 'svelte';
 
   export let collection = {};
diff --git a/frontend/src/organisms/connection/collection/components/viewconfig.svelte b/frontend/src/organisms/connection/collection/components/viewconfig.svelte
new file mode 100644
index 0000000..e1e09c4
--- /dev/null
+++ b/frontend/src/organisms/connection/collection/components/viewconfig.svelte
@@ -0,0 +1,242 @@
+<script>
+  import TabBar from '../../../../components/tabbar.svelte';
+  import Modal from '../../../../components/modal.svelte';
+  import Icon from '../../../../components/icon.svelte';
+  import { views } from '../../../../stores';
+  import { randomString } from '../../../../utils';
+  import { input } from '../../../../actions';
+
+  export let collection;
+  export let show = false;
+  export let activeViewKey = 'list';
+  export let firstItem = {};
+
+  $: tabs = Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key))
+    .sort((a, b) => sortTabKeys(a[0], b[0]))
+    .map(([ key, v ]) => ({ key, title: v.name, closable: key !== 'list' }));
+
+  function sortTabKeys(a, b) {
+    if (a === 'list') {
+      return -1;
+    }
+    if (b === 'list') {
+      return 1;
+    }
+    else {
+      return a.localeCompare(b);
+    }
+  }
+
+  function createView() {
+    const newViewKey = randomString();
+    $views[newViewKey] = {
+      name: 'Table view',
+      host: collection.hostKey,
+      database: collection.dbKey,
+      collection: collection.key,
+      type: 'table',
+      columns: [ { key: '_id', showInTable: true, inputType: 'string' } ],
+    };
+    activeViewKey = newViewKey;
+  }
+
+  function removeView(viewKey) {
+    const keys = Object.keys($views).sort(sortTabKeys);
+    const oldIndex = keys.indexOf(viewKey);
+    const newKey = keys[oldIndex - 1];
+    activeViewKey = newKey;
+    delete $views[viewKey];
+    $views = $views;
+  }
+
+  function addColumn(before) {
+    if (typeof before === 'number') {
+      $views[activeViewKey].columns = [
+        ...$views[activeViewKey].columns.slice(0, before),
+        { showInTable: true, inputType: 'none' },
+        ...$views[activeViewKey].columns.slice(before),
+      ];
+    }
+    else {
+      $views[activeViewKey].columns = [
+        ...$views[activeViewKey].columns,
+        { showInTable: true, inputType: 'none' },
+      ];
+    }
+  }
+
+  function addSuggestedColumns() {
+    if ((typeof firstItem !== 'object') || (firstItem === null)) {
+      return;
+    }
+
+    $views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => ({
+      key,
+      showInTable: true,
+      inputType: 'none',
+    }));
+  }
+
+  function moveColumn(oldIndex, delta) {
+    const column = $views[activeViewKey].columns[oldIndex];
+    const newIndex = oldIndex + delta;
+
+    $views[activeViewKey].columns.splice(oldIndex, 1);
+    $views[activeViewKey].columns.splice(newIndex, 0, column);
+    $views[activeViewKey].columns = $views[activeViewKey].columns;
+  }
+
+  function removeColumn(index) {
+    $views[activeViewKey].columns.splice(index, 1);
+    $views[activeViewKey].columns = $views[activeViewKey].columns;
+  }
+</script>
+
+<Modal title="View configuration" bind:show contentPadding={false}>
+  <TabBar
+    {tabs}
+    canAddTab={true}
+    on:addTab={createView}
+    on:closeTab={e => removeView(e.detail)}
+    bind:selectedKey={activeViewKey}
+  />
+
+  <div class="options">
+    {#if $views[activeViewKey]}
+      <div class="meta">
+        {#key activeViewKey}
+          <label class="field">
+            <span class="label">View name</span>
+            <input type="text" use:input={{ autofocus: true }} bind:value={$views[activeViewKey].name} disabled={activeViewKey === 'list'} />
+          </label>
+        {/key}
+        <label class="field">
+          <span class="label">View type</span>
+          <select bind:value={$views[activeViewKey].type} disabled>
+            <option value="list">List view</option>
+            <option value="table">Table view</option>
+          </select>
+        </label>
+      </div>
+
+      {#if $views[activeViewKey].type === 'list'}
+        <div class="flex">
+          <input type="checkbox" id="hideObjectIndicators" bind:checked={$views[activeViewKey].hideObjectIndicators} />
+          <label for="hideObjectIndicators">
+            Hide object indicators ({'{...}'} and [...]) in list view and show nothing instead
+          </label>
+        </div>
+      {:else if $views[activeViewKey].type === 'table'}
+        <div class="columns">
+          {#each $views[activeViewKey].columns as column, columnIndex}
+            <div class="column">
+              <label class="field">
+                <input type="text" use:input bind:value={column.key} placeholder="Column keypath" />
+              </label>
+
+              <label class="field" title="Show column in table view">
+                <span class="label">
+                  <Icon name="table" />
+                </span>
+                <span class="checkbox">
+                  <input type="checkbox" bind:checked={column.showInTable} />
+                </span>
+              </label>
+
+              <label class="field" title="Input type in form view">
+                <span class="label">
+                  <Icon name="form" />
+                </span>
+                <select bind:value={column.inputType}>
+                  <option value="none">Hidden in form</option>
+                  <optgroup label="Strings">
+                    <option value="string">String</option>
+                    <option value="objectid">ObjectID</option>
+                  </optgroup>
+                  <optgroup label="Integers">
+                    <option value="int">Integer (32-bit, signed)</option>
+                    <option value="uint64">Integer (64-bit, unsigned)</option>
+                    <option value="long">Long (64-bit integer, signed)</option>
+                  </optgroup>
+                  <optgroup label="Floats">
+                    <option value="double">Double (64-bit)</option>
+                    <option value="decimal">Decimal (128-bit)</option>
+                  </optgroup>
+                  <optgroup label="Miscellaneous">
+                    <option value="bool">Boolean</option>
+                    <option value="date">Date</option>
+                  </optgroup>
+                </select>
+              </label>
+
+              <label class="field" title="Mandatory (field must be valid in order to submit form)">
+                <span class="label">
+                  <Icon name="target" />
+                </span>
+                <span class="checkbox">
+                  <input type="checkbox" bind:checked={column.mandatory} disabled={column.inputType === 'none'} />
+                </span>
+              </label>
+
+              <button class="btn" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
+                <Icon name="+" />
+              </button>
+              <button class="btn" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
+                <Icon name="chev-u" />
+              </button>
+              <button class="btn" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === $views[activeViewKey].columns.length - 1} title="Move column one position down">
+                <Icon name="chev-d" />
+              </button>
+              <button class="btn danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
+                <Icon name="x" />
+              </button>
+            </div>
+          {:else}
+            <p>No columns yet</p>
+          {/each}
+        </div>
+        <button class="btn" on:click={addColumn}>
+          <Icon name="+" /> Add column
+        </button>
+        <button class="btn" on:click={addSuggestedColumns} disabled={!Object.keys(firstItem || {}).length}>
+          <Icon name="zap" /> Add suggested columns
+        </button>
+      {/if}
+    {/if}
+  </div>
+</Modal>
+
+<style>
+  .options {
+    padding: 1rem;
+  }
+
+  .meta {
+    display: grid;
+    grid-template: 1fr / 1fr 1fr;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .flex {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .columns {
+    border: 1px solid #ccc;
+    overflow: auto;
+    padding: 0.5rem 0.5rem 0;
+    margin-bottom: 0.5rem;
+  }
+  .columns p {
+    margin-bottom: 0.5rem;
+  }
+  .columns .column {
+    display: grid;
+    grid-template: 1fr / 1fr repeat(7, auto);
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+</style>
diff --git a/frontend/src/organisms/connection/collection/find-viewconfig.svelte b/frontend/src/organisms/connection/collection/find-viewconfig.svelte
deleted file mode 100644
index 1039468..0000000
--- a/frontend/src/organisms/connection/collection/find-viewconfig.svelte
+++ /dev/null
@@ -1,182 +0,0 @@
-<script>
-  import TabBar from '../../../components/tabbar.svelte';
-  import Modal from '../../../components/modal.svelte';
-  import Icon from '../../../components/icon.svelte';
-  import { views } from '../../../stores';
-  import { randomString } from '../../../utils';
-  import { input } from '../../../actions';
-
-  export let collection;
-  export let show = false;
-  export let activeViewKey = 'list';
-  export let firstItem = {};
-
-  $: tabs = Object.entries($views).filter(v => (
-    v[0] === 'list' || (
-      v[1].host === collection.hostKey &&
-      v[1].database === collection.dbKey &&
-      v[1].collection === collection.key
-    )
-  )).sort((a, b) => sortTabKeys(a[0], b[0]))
-    .map(([ key, v ]) => ({ key, title: v.name, closable: key !== 'list' }));
-
-  function sortTabKeys(a, b) {
-    if (a === 'list') {
-      return -1;
-    }
-    if (b === 'list') {
-      return 1;
-    }
-    else {
-      return a.localeCompare(b);
-    }
-  }
-
-  function createView() {
-    const newViewKey = randomString();
-    $views[newViewKey] = {
-      name: 'Table view',
-      host: collection.hostKey,
-      database: collection.dbKey,
-      collection: collection.key,
-      type: 'table',
-      columns: [ { key: '_id' } ],
-    };
-    activeViewKey = newViewKey;
-  }
-
-  function removeView(viewKey) {
-    const keys = Object.keys($views).sort(sortTabKeys);
-    const oldIndex = keys.indexOf(viewKey);
-    const newKey = keys[oldIndex - 1];
-    console.log(keys, oldIndex, newKey);
-    activeViewKey = newKey;
-    delete $views[viewKey];
-    $views = $views;
-  }
-
-  function addColumn(before) {
-    if (typeof before === 'number') {
-      $views[activeViewKey].columns = [
-        ...$views[activeViewKey].columns.slice(0, before),
-        {},
-        ...$views[activeViewKey].columns.slice(before),
-      ];
-    }
-    else {
-      $views[activeViewKey].columns = [ ...$views[activeViewKey].columns, {} ];
-    }
-  }
-
-  function addSuggestedColumns() {
-    if ((typeof firstItem !== 'object') || (firstItem === null)) {
-      return;
-    }
-    $views[activeViewKey].columns = Object.keys(firstItem).map(key => ({ key }));
-  }
-
-  function moveColumn(oldIndex, delta) {
-    const column = $views[activeViewKey].columns[oldIndex];
-    const newIndex = oldIndex + delta;
-
-    $views[activeViewKey].columns.splice(oldIndex, 1);
-    $views[activeViewKey].columns.splice(newIndex, 0, column);
-    $views[activeViewKey].columns = $views[activeViewKey].columns;
-  }
-
-  function removeColumn(index) {
-    $views[activeViewKey].columns.splice(index, 1);
-    $views[activeViewKey].columns = $views[activeViewKey].columns;
-  }
-</script>
-
-<Modal title="View configuration" bind:show contentPadding={false}>
-  <TabBar
-    {tabs}
-    canAddTab={true}
-    on:addTab={createView}
-    on:closeTab={e => removeView(e.detail)}
-    bind:selectedKey={activeViewKey}
-  />
-
-  <div class="options">
-    {#if $views[activeViewKey]}
-      <div class="meta">
-        {#key activeViewKey}
-          <label class="field">
-            <span class="label">View name</span>
-            <input type="text" use:input={{ autofocus: true }} bind:value={$views[activeViewKey].name} disabled={activeViewKey === 'list'} />
-          </label>
-        {/key}
-        <label class="field">
-          <span class="label">View type</span>
-          <select bind:value={$views[activeViewKey].type} disabled={activeViewKey === 'list'}>
-            <option value="list">List view</option>
-            <option value="table">Table view</option>
-          </select>
-        </label>
-      </div>
-
-      {#if $views[activeViewKey].type === 'list'}
-        <div class="flex">
-          <input type="checkbox" id="hideObjectIndicators" bind:checked={$views[activeViewKey].hideObjectIndicators} />
-          <label for="hideObjectIndicators">
-            Hide object indicators ({'{...}'} and [...]) in list view and show nothing instead
-          </label>
-        </div>
-      {:else if $views[activeViewKey].type === 'table'}
-        {#each $views[activeViewKey].columns as column, columnIndex}
-          <div class="column">
-            <label class="field">
-              <input type="text" use:input bind:value={column.key} placeholder="Column keypath" />
-            </label>
-            <button class="btn" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
-              <Icon name="+" />
-            </button>
-            <button class="btn" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
-              <Icon name="chev-u" />
-            </button>
-            <button class="btn" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === $views[activeViewKey].columns.length - 1} title="Move column one position down">
-              <Icon name="chev-d" />
-            </button>
-            <button class="btn danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
-              <Icon name="x" />
-            </button>
-          </div>
-        {/each}
-        <button class="btn" on:click={addColumn}>
-          <Icon name="+" /> Add column
-        </button>
-        <button class="btn" on:click={addSuggestedColumns} disabled={!firstItem}>
-          <Icon name="zap" /> Add suggested columns
-        </button>
-      {/if}
-    {/if}
-  </div>
-</Modal>
-
-<style>
-  .options {
-    padding: 1rem;
-  }
-
-  .meta {
-    display: grid;
-    grid-template: 1fr / 1fr 1fr;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .flex {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
-
-  .column {
-    display: grid;
-    grid-template: 1fr / 1fr repeat(4, auto);
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-</style>
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 4f7e43d..b251a4e 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -1,18 +1,18 @@
 <script>
-  import { FindItems, RemoveItemById } from '../../../../wailsjs/go/app/App';
-  import CodeExample from '../../../components/code-example.svelte';
-  import { input } from '../../../actions';
-  import ObjectGrid from '../../../components/objectgrid.svelte';
-  import Icon from '../../../components/icon.svelte';
-  import ObjectViewer from '../../../components/objectviewer.svelte';
-  import FindViewConfigModal from './find-viewconfig.svelte';
-  import { onMount } from 'svelte';
-  import Grid from '../../../components/grid.svelte';
-  import { applicationSettings, views } from '../../../stores';
   import { EJSON } from 'bson';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { FindItems, RemoveItemById } from '../../../../wailsjs/go/app/App';
+  import { input } from '../../../actions';
+  import CodeExample from '../../../components/code-example.svelte';
+  import Grid from '../../../components/grid.svelte';
+  import Icon from '../../../components/icon.svelte';
+  import ObjectGrid from '../../../components/objectgrid.svelte';
+  import ObjectViewer from '../../../components/objectviewer.svelte';
+  import { applicationSettings, views } from '../../../stores';
 
   export let collection;
 
+  const dispatch = createEventDispatcher();
   const defaults = {
     query: '{}',
     sort: $applicationSettings.defaultSort || '{ "_id": 1 }',
@@ -22,19 +22,16 @@
   };
 
   let form = { ...defaults };
-  let activeViewKey = 'list';
   let result = {};
   let submittedForm = {};
   let queryField;
   let activePath = [];
   let objectViewerData;
-  let viewConfigModalOpen = false;
+  $: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key);
   $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
   $: lastPage = (submittedForm.limit && result?.results?.length) ? Math.max(0, Math.ceil((result.total - submittedForm.limit) / submittedForm.limit)) : 0;
   $: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
 
-  $: collection && refresh();
-
   async function submitQuery() {
     activePath = [];
     const newResult = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
@@ -100,6 +97,7 @@
     submitQuery();
   }
 
+  $: collection && refresh();
   onMount(refresh);
 </script>
 
@@ -108,19 +106,19 @@
     <div class="form-row one">
       <label class="field">
         <span class="label">Query or id</span>
-        <input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ json: true, autofocus: true }} placeholder={defaults.query} />
+        <input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ type: 'json', autofocus: true }} placeholder={defaults.query} />
       </label>
 
       <label class="field">
         <span class="label">Sort</span>
-        <input type="text" class="code" bind:value={form.sort} use:input={{ json: true }} placeholder={defaults.sort} />
+        <input type="text" class="code" bind:value={form.sort} use:input={{ type: 'json' }} placeholder={defaults.sort} />
       </label>
     </div>
 
     <div class="form-row two">
       <label class="field">
         <span class="label">Fields</span>
-        <input type="text" class="code" bind:value={form.fields} use:input={{ json: true }} placeholder={defaults.fields} />
+        <input type="text" class="code" bind:value={form.fields} use:input={{ type: 'json' }} placeholder={defaults.fields} />
       </label>
 
       <label class="field">
@@ -142,19 +140,19 @@
   <div class="result">
     <div class="grid">
       {#key result}
-        {#if activeViewKey === 'table'}
-          <Grid
-            key="_id"
-            columns={$views[activeViewKey]?.columns?.map(c => ({ key: c.key, title: c.key })) || []}
-            showHeaders={true}
-            items={result.results || []}
+        {#if collection.viewKey === 'list'}
+          <ObjectGrid
+            data={result.results}
+            hideObjectIndicators={$views[collection.viewKey]?.hideObjectIndicators}
             bind:activePath
             on:trigger={e => openJson(e.detail?.itemKey)}
           />
-        {:else if activeViewKey === 'list'}
-          <ObjectGrid
-            data={result.results}
-            hideObjectIndicators={$views[activeViewKey]?.hideObjectIndicators}
+        {:else}
+          <Grid
+            key="_id"
+            columns={$views[collection.viewKey]?.columns?.map(c => ({ key: c.key, title: c.key })) || []}
+            showHeaders={true}
+            items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
             bind:activePath
             on:trigger={e => openJson(e.detail?.itemKey)}
           />
@@ -169,9 +167,16 @@
         {/key}
       </div>
       <div>
-        <button class="btn" on:click={() => viewConfigModalOpen = true} title="Configure view">
-          <Icon name="cog" />
-        </button>
+        <label class="field inline">
+          <select bind:value={collection.viewKey}>
+            {#each Object.entries(viewsForCollection) as [key, view]}
+              <option value={key}>{view.name}</option>
+            {/each}
+          </select>
+          <button class="btn" on:click={() => dispatch('openViewConfig', { firstItem: result.results?.[0] })} title="Configure view">
+            <Icon name="cog" />
+          </button>
+        </label>
         <button class="btn danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
           <Icon name="-" />
         </button>
@@ -193,12 +198,6 @@
 </div>
 
 <ObjectViewer bind:data={objectViewerData} />
-<FindViewConfigModal
-  bind:show={viewConfigModalOpen}
-  bind:activeViewKey
-  firstItem={result.results?.[0]}
-  {collection}
-/>
 
 <datalist id="limits">
   {#each [ 1, 5, 10, 25, 50, 100, 200 ] as value}
diff --git a/frontend/src/organisms/connection/collection/index.svelte b/frontend/src/organisms/connection/collection/index.svelte
index 7c418af..f824e5f 100644
--- a/frontend/src/organisms/connection/collection/index.svelte
+++ b/frontend/src/organisms/connection/collection/index.svelte
@@ -9,6 +9,7 @@
   import Stats from './stats.svelte';
   import Update from './update.svelte';
   import { EventsOn } from '../../../../wailsjs/runtime/runtime';
+  import ViewConfig from './components/viewconfig.svelte';
 
   export let collection;
   export let hostKey;
@@ -17,6 +18,8 @@
 
   let tab = 'find';
   let find;
+  let viewConfigModalOpen = false;
+  let firstItem;
 
   $: if (collection) {
     collection.hostKey = hostKey;
@@ -31,6 +34,11 @@
     await tick();
     find.performQuery(event.detail);
   }
+
+  function openViewConfig(event) {
+    firstItem = event.detail?.firstItem;
+    viewConfigModalOpen = true;
+  }
 </script>
 
 <div class="collection" class:empty={!collection}>
@@ -47,8 +55,8 @@
 
       <div class="container">
         {#if tab === 'stats'} <Stats {collection} />
-        {:else if tab === 'find'} <Find {collection} bind:this={find} />
-        {:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} />
+        {:else if tab === 'find'} <Find {collection} bind:this={find} on:openViewConfig={openViewConfig} />
+        {:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} on:openViewConfig={openViewConfig} />
         {:else if tab === 'update'} <Update {collection} on:performFind={catchQuery} />
         {:else if tab === 'remove'} <Remove {collection} />
         {:else if tab === 'indexes'} <Indexes {collection} />
@@ -60,6 +68,15 @@
   {/if}
 </div>
 
+{#if collection}
+  <ViewConfig
+    bind:show={viewConfigModalOpen}
+    bind:activeViewKey={collection.viewKey}
+    {firstItem}
+    {collection}
+  />
+{/if}
+
 <style>
   .collection {
     height: 100%;
diff --git a/frontend/src/organisms/connection/collection/indexes.svelte b/frontend/src/organisms/connection/collection/indexes.svelte
index 4ea5f98..93a9cae 100644
--- a/frontend/src/organisms/connection/collection/indexes.svelte
+++ b/frontend/src/organisms/connection/collection/indexes.svelte
@@ -3,7 +3,7 @@
   import ObjectGrid from '../../../components/objectgrid.svelte';
   import { DropIndex, GetIndexes } from '../../../../wailsjs/go/app/App';
   import Icon from '../../../components/icon.svelte';
-  import IndexDetail from './indexes-detail.svelte';
+  import IndexDetail from './components/indexdetail.svelte';
 
   export let collection;
 
diff --git a/frontend/src/organisms/connection/collection/insert.svelte b/frontend/src/organisms/connection/collection/insert.svelte
index 793273d..654c739 100644
--- a/frontend/src/organisms/connection/collection/insert.svelte
+++ b/frontend/src/organisms/connection/collection/insert.svelte
@@ -1,17 +1,34 @@
 <script>
-  import { input } from '../../../actions';
+  import { views } from '../../../stores';
   import { createEventDispatcher } from 'svelte';
   import { InsertItems } from '../../../../wailsjs/go/app/App';
+  import { input } from '../../../actions';
   import Icon from '../../../components/icon.svelte';
+  import Form from './components/form.svelte';
+  import ObjectViewer from '../../../components/objectviewer.svelte';
 
   export let collection;
 
   const dispatch = createEventDispatcher();
   let json = '';
+  let newItems = [];
   let insertedIds;
+  let objectViewerData = '';
+  let viewType = 'form';
+  let formValid = false;
+  $: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key);
+  $: oppositeViewType = viewType === 'table' ? 'form' : 'table';
 
   async function insert() {
-    insertedIds = await InsertItems(collection.hostKey, collection.dbKey, collection.key, json);
+    if (collection.viewKey === 'list') {
+      insertedIds = await InsertItems(collection.hostKey, collection.dbKey, collection.key, json);
+    }
+    else {
+      insertedIds = await InsertItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(newItems));
+      if (insertedIds) {
+        newItems = [];
+      }
+    }
   }
 
   function showDocs() {
@@ -21,19 +38,38 @@
         : `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
     });
   }
+
+  function switchViewType() {
+    viewType = oppositeViewType;
+  }
+
+  function showJson() {
+    if (viewType === 'form') {
+      objectViewerData = { ...(newItems[0] || {}) };
+    }
+    else if (viewType === 'table') {
+      objectViewerData = [ ...newItems ];
+    }
+  }
 </script>
 
 <form on:submit|preventDefault={insert}>
-  <label class="field">
-    <textarea
-      cols="30"
-      rows="10"
-      placeholder="[]"
-      class="code"
-      bind:value={json}
-      use:input={{ json: true, autofocus: true }}
-    ></textarea>
-  </label>
+  {#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}
+    <div class="form">
+      <Form bind:item={newItems[0]} bind:valid={formValid} view={$views[collection.viewKey]} />
+    </div>
+  {/if}
 
   <div class="flex">
     <div>
@@ -45,13 +81,33 @@
       {#if insertedIds}
         <button class="btn" type="button" on:click={showDocs}>View inserted docs</button>
       {/if}
-      <button type="submit" class="btn" disabled={!json}>
+      {#if collection.viewKey !== 'list'}
+        <button class="btn" type="button" on:click={showJson} title="Show JSON">
+          <Icon name="code" />
+        </button>
+        <button class="btn" type="button" on:click={switchViewType} title="Edit as {oppositeViewType}">
+          <Icon name={oppositeViewType} />
+        </button>
+      {/if}
+      <label class="field inline">
+        <select bind:value={collection.viewKey}>
+          {#each Object.entries(viewsForCollection) as [key, view]}
+            <option value={key}>{key === 'list' ? 'Raw JSON' : view.name}</option>
+          {/each}
+        </select>
+        <button class="btn" type="button" on:click={() => dispatch('openViewConfig')} title="Configure view">
+          <Icon name="cog" />
+        </button>
+      </label>
+      <button type="submit" class="btn" disabled={$views[collection.viewKey]?.type === 'list' ? !json : !formValid}>
         <Icon name="+" /> Insert
       </button>
     </div>
   </div>
 </form>
 
+<ObjectViewer data={objectViewerData} />
+
 <style>
   form {
     display: grid;
diff --git a/frontend/src/organisms/connection/collection/remove.svelte b/frontend/src/organisms/connection/collection/remove.svelte
index bb8265a..5622201 100644
--- a/frontend/src/organisms/connection/collection/remove.svelte
+++ b/frontend/src/organisms/connection/collection/remove.svelte
@@ -34,7 +34,7 @@
       placeholder={'{}'}
       class="code"
       bind:value={json}
-      use:input={{ json: true, autofocus: true }}
+      use:input={{ type: 'json', autofocus: true }}
     ></textarea>
   </label>
 
diff --git a/frontend/src/organisms/connection/collection/update.svelte b/frontend/src/organisms/connection/collection/update.svelte
index 332549a..647eeb6 100644
--- a/frontend/src/organisms/connection/collection/update.svelte
+++ b/frontend/src/organisms/connection/collection/update.svelte
@@ -124,14 +124,14 @@
 
   <label class="field">
     <span class="label">Filter</span>
-    <input type="text" class="code" bind:value={form.query} use:input={{ json: true, autofocus: true }} placeholder={'{}'} />
+    <input type="text" class="code" bind:value={form.query} use:input={{ type: 'json', autofocus: true }} placeholder={'{}'} />
   </label>
 
   <fieldset class="parameters">
     {#each form.parameters as param, index}
       <fieldset class="parameter">
         <label class="field">
-          <select bind:value={param.type}>
+          <select bind:value={param.type} class="type">
             {#each Object.entries(atomicUpdateOperators) as [groupName, options]}
               <optgroup label={groupName}>
                 {#each Object.entries(options) as [key, label]}
@@ -142,18 +142,17 @@
               </optgroup>
             {/each}
           </select>
+          <input type="text" class="code" bind:value={param.value} placeholder={'{}'} use:input={{ type: 'json' }} />
         </label>
 
         <label class="field">
-          <input type="text" class="code" bind:value={param.value} placeholder={'{}'} use:input={{ json: true }} />
+          <button class="btn" disabled={form.parameters.length >= allOperators.length} on:click={() => addParameter()} type="button">
+            <Icon name="+" />
+          </button>
+          <button class="btn" disabled={form.parameters.length < 2} on:click={() => removeParam(index)} type="button">
+            <Icon name="-" />
+          </button>
         </label>
-
-        <button class="btn" disabled={form.parameters.length >= allOperators.length} on:click={() => addParameter()} type="button">
-          <Icon name="+" />
-        </button>
-        <button class="btn" disabled={form.parameters.length < 2} on:click={() => removeParam(index)} type="button">
-          <Icon name="-" />
-        </button>
       </fieldset>
     {/each}
   </fieldset>
@@ -182,7 +181,11 @@
   }
   .parameter {
     display: grid;
-    grid-template: 1fr / auto 1fr auto auto;
+    grid-template: 1fr / 1fr auto;
     gap: 0.5rem;
   }
+
+  select.type {
+    max-width: 150px;
+  }
 </style>
diff --git a/frontend/src/organisms/connection/export/dumpinfo.svelte b/frontend/src/organisms/connection/export/dumpinfo.svelte
index 728c497..2c24195 100644
--- a/frontend/src/organisms/connection/export/dumpinfo.svelte
+++ b/frontend/src/organisms/connection/export/dumpinfo.svelte
@@ -7,8 +7,6 @@
   export let info;
   export let hosts = {};
 
-  $: console.log(info);
-
   async function selectHost(hostKey) {
     info.hostKey = hostKey;
     info.dbKey = undefined;
diff --git a/frontend/src/organisms/settings/index.svelte b/frontend/src/organisms/settings/index.svelte
index 7275f5a..75da366 100644
--- a/frontend/src/organisms/settings/index.svelte
+++ b/frontend/src/organisms/settings/index.svelte
@@ -16,7 +16,7 @@
 
     <label for="defaultSort">Default sort query</label>
     <label class="field">
-      <input type="text" class="code" bind:value={$settings.defaultSort} id="defaultSort" use:input={{ json: true }} />
+      <input type="text" class="code" bind:value={$settings.defaultSort} id="defaultSort" use:input={{ type: 'json' }} />
     </label>
 
     <label for="autosubmitQuery">Autosubmit query</label>
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 7a44862..1338745 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -43,8 +43,14 @@ export const applicationSettings = (() => {
     return newSettings;
   };
 
+  let skipUpdate = true;
+
   reload();
   subscribe(newSettings => {
+    if (skipUpdate) {
+      skipUpdate = false;
+      return;
+    }
     UpdateSettings(JSON.stringify(newSettings || {}));
   });
 
@@ -56,7 +62,6 @@ export const environment = (() => {
   const reload = async() => {
     const newEnv = await Environment();
     set(newEnv);
-    console.log(newEnv);
     return newEnv;
   };
 
@@ -66,16 +71,38 @@ export const environment = (() => {
 
 export const views = (() => {
   const { set, subscribe } = writable({});
+
   const reload = async() => {
     const newViewStore = await Views();
     set(newViewStore);
     return newViewStore;
   };
 
+  const forCollection = (hostKey, dbKey, collKey) => {
+    let allViews;
+    subscribe(v => allViews = v)();
+
+    const entries = Object.entries(allViews).filter(v => (
+      v[0] === 'list' || (
+        v[1].host === hostKey &&
+        v[1].database === dbKey &&
+        v[1].collection === collKey
+      )
+    ));
+
+    return Object.fromEntries(entries);
+  };
+
+  let skipUpdate = true;
+
   reload();
   subscribe(newViewStore => {
+    if (skipUpdate) {
+      skipUpdate = false;
+      return;
+    }
     UpdateViewStore(JSON.stringify(newViewStore));
   });
 
-  return { reload, set, subscribe };
+  return { reload, set, subscribe, forCollection };
 })();
diff --git a/frontend/src/style.css b/frontend/src/style.css
index c94a3f9..2de111a 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -51,64 +51,6 @@ select:disabled {
   color: #444;
 }
 
-.field {
-  display: flex;
-  white-space: nowrap;
-  align-items: stretch;
-}
-.field > * {
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-right: none;
-  display: inline-block;
-  margin: 0;
-  background-color: #fff;
-}
-.field .label {
-  background-color: #eee;
-  display: flex;
-  align-items: center;
-}
-.field > :first-child {
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-.field > :last-child {
-  border-right: 1px solid #ccc;
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-.field > input,
-.field > textarea,
-.field > select {
-  flex: 1;
-}
-.field > input:focus,
-.field > textarea:focus,
-.field > select:focus {
-  outline: none;
-  border-color: #00008b;
-  box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
-}
-.field > input.invalid,
-.field > textarea.invalid,
-.field > select.invalid {
-  background-color: rgba(255, 80, 80, 0.3);
-  border-color: rgb(255, 80, 80);
-}
-.field > span.checkbox {
-  text-align: center;
-  min-width: 75px;
-}
-.field > select {
-  appearance: none;
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
-  background: #fff;
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.5rem center;
-}
-
 .btn {
   background-color: #00008b;
   border: 1px solid #00008b;
@@ -143,6 +85,78 @@ select:disabled {
   cursor: not-allowed;
 }
 
+.field {
+  display: flex;
+  white-space: nowrap;
+  align-items: stretch;
+}
+.field > * {
+  display: inline-block;
+  margin: 0;
+  border-radius: 0;
+}
+.field .label,
+.field span.checkbox {
+  background-color: #eee;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  justify-content: center;
+}
+.field > input,
+.field > textarea,
+.field > select {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+.field > input:focus,
+.field > textarea:focus,
+.field > select:focus {
+  outline: none;
+  border-color: #00008b;
+  box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
+}
+.field > input.invalid,
+.field > textarea.invalid,
+.field > select.invalid {
+  background-color: rgba(255, 80, 80, 0.3);
+  border-color: rgb(255, 80, 80);
+}
+.field.inline {
+  display: inline-flex;
+}
+.field.inline > input,
+.field.inline > textarea,
+.field.inline > select {
+  max-width: 150px;
+}
+.field > span.checkbox {
+  min-width: 75px;
+  background-color: #fff;
+}
+.field > select {
+  appearance: none;
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  background: #fff;
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+}
+.field > :first-child {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.field > *:not(:last-child) {
+  border-right: none;
+}
+.field > :last-child {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
 code,
 .code {
   font-family: Menlo, monospace;
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index a50461f..3924d1f 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -1,9 +1,18 @@
 import { get } from 'svelte/store';
 import { environment } from './stores';
 
-export function resolveKeypath(object, path) {
-  // Get a value from an object with a JSON path, from Webdesq core
+// Calculate the min and max values of 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;
 
+// Boundaries for some ubiquitous integer types
+export const int32 = [ intMin(32), intMax(32) ];
+export const int64 = [ intMin(64), intMax(64) ];
+export const uint64 = [ 0, uintMax(64) ];
+
+// Get a value from an object with a JSON path, from Webdesq core
+export function resolveKeypath(object, path) {
   const parts = path.split('.').flatMap(part => {
     const indexMatch = part.match(/\[\d+\]/g);
     if (indexMatch) {
@@ -23,6 +32,42 @@ export function resolveKeypath(object, path) {
   return result;
 }
 
+// Set a value in an object with a JSON path, from Webdesq core
+export function setValue(object, path, value) {
+  const parts = path.split('.').flatMap(part => {
+    let indexMatch = part.match(/\[\d+\]/g);
+    if (indexMatch) {
+      // Convert strings to numbers
+      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
+      const base = part.slice(0, part.indexOf(indexMatch[0]));
+      return base.length ? [ base, ...indexes ] : indexes;
+    }
+    indexMatch = part.match(/^\d+$/g);
+    if (indexMatch) {
+      // Convert strings to numbers
+      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
+      const base = part.slice(0, part.indexOf(indexMatch[0]));
+      return base.length ? [ base, ...indexes ] : indexes;
+    }
+    return part;
+  });
+  let result = object;
+  while (parts.length) {
+    const part = parts.shift();
+    if (!parts.length) {
+      // No parts left, we can set the value
+      result[part] = value;
+      break;
+    }
+    if (!result[part]) {
+      // Default value if none is found
+      result[part] = (typeof parts[0] === 'number') ? [] : {};
+    }
+    result = result[part];
+  }
+  return object;
+}
+
 export function controlKeyDown(event) {
   const env = get(environment);
   // @ts-ignore
@@ -34,7 +79,16 @@ export function controlKeyDown(event) {
   }
 }
 
-function randInt(min, max) {
+// https://stackoverflow.com/a/14794066
+export function isInt(value) {
+  if (isNaN(value)) {
+    return false;
+  }
+  const x = parseFloat(value);
+  return (x | 0) === x;
+}
+
+export function randInt(min, max) {
   return Math.round(Math.random() * (max - min) + min);
 }
 
diff --git a/internal/app/collection_find_views.go b/internal/app/views.go
similarity index 72%
rename from internal/app/collection_find_views.go
rename to internal/app/views.go
index 4adbdbb..a2572ce 100644
--- a/internal/app/collection_find_views.go
+++ b/internal/app/views.go
@@ -11,15 +11,30 @@ import (
 )
 
 type ViewType string
+type InputType string
 
 const (
 	TableView ViewType = "table"
 	ListView  ViewType = "list"
+
+	NoInput       InputType = "none"
+	StringInput   InputType = "string"
+	ObjectIdInput InputType = "objectid"
+	IntegerInput  InputType = "int"
+	LongInput     InputType = "long"
+	Uint64Input   InputType = "uint64"
+	DoubleInput   InputType = "double"
+	DecimalInput  InputType = "decimal"
+	BoolInput     InputType = "bool"
+	DateInput     InputType = "date"
 )
 
 type ViewColumn struct {
-	Key   string `json:"key"`
-	Width int64  `json:"width"`
+	Key         string    `json:"key"`
+	Width       int64     `json:"width"`
+	ShowInTable bool      `json:"showInTable"`
+	Mandatory   bool      `json:"mandatory"`
+	InputType   InputType `json:"inputType"`
 }
 
 type View struct {
@@ -82,48 +97,6 @@ func (a *App) Views() (ViewStore, error) {
 	return views, nil
 }
 
-// func (a *App) AddView(jsonData string) error {
-// 	views, err := a.Views()
-// 	if err != nil {
-// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
-// 			Type:  runtime.InfoDialog,
-// 			Title: "Could not retrieve views",
-// 		})
-// 		return errors.New("could not retrieve existing view store")
-// 	}
-
-// 	var newView View
-// 	err = json.Unmarshal([]byte(jsonData), &newView)
-// 	if err != nil {
-// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
-// 			Type:  runtime.InfoDialog,
-// 			Title: "Malformed JSON",
-// 		})
-// 		return errors.New("invalid JSON")
-// 	}
-
-// 	id, err := uuid.NewRandom()
-// 	if err != nil {
-// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
-// 			Type:  runtime.InfoDialog,
-// 			Title: "Failed to generate a UUID",
-// 		})
-// 		return errors.New("could not generate a UUID")
-// 	}
-
-// 	views[id.String()] = newView
-// 	err = updateViewStore(views)
-// 	if err != nil {
-// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
-// 			Type:  runtime.InfoDialog,
-// 			Title: "Could not update view store",
-// 		})
-// 		return errors.New("could not update view store")
-// 	}
-
-// 	return nil
-// }
-
 func (a *App) UpdateViewStore(jsonData string) error {
 	var viewStore ViewStore
 	err := json.Unmarshal([]byte(jsonData), &viewStore)