table enhancements

packages/builder/rollup.config.js

@@ -103,7 +103,9 @@ const lodash_fp_exports = [
   "toNumber",
   "takeRight",
   "toPairs",
-  "remove"
+  "remove",
+  "findIndex",
+  "compose"
 ]
 
 const lodash_exports = [

packages/builder/src/budibase.css

@@ -107,7 +107,7 @@
 }
 
 .budibase__table thead {
-    background: var(--background-button);
+    background: #fafafa;
 }
 
 .budibase__table th {
@@ -119,3 +119,9 @@
 .budibase__table tr {
     border-bottom: 1px solid #ccc;
 }
+
+.button--toggled {
+    background: #fafafa;
+    color: var(--button-text);
+    padding: 10px;
+}

packages/builder/src/builderStore/store/backend.js

@@ -38,7 +38,7 @@ export const getBackendUiStore = () => {
     },
     records: {
       delete: record => store.update(state => { 
-        state.selectedView.records = remove(state.selectedView.records, { key: record.key });
+        state.selectedView.records = remove(state.selectedView.records, { id: record.id });
         return state
       }),
     },
@@ -125,7 +125,6 @@ export const saveCurrentNode = store => () => {
     if (errors.length > 0) {
       return state
     }
-
     const parentNode = getNode(state.hierarchy, state.currentNode.parent().nodeId)
 
     const existingNode = getNode(state.hierarchy, state.currentNode.nodeId)
@@ -134,10 +133,7 @@ export const saveCurrentNode = store => () => {
     if (existingNode) {
       // remove existing
       index = existingNode.parent().children.indexOf(existingNode)
-      existingNode.parent().children = existingNode.parent().children.filter(c => c.nodeId !== existingNode.nodeId);
+      existingNode.parent().children = existingNode.parent().children.filter(node => node.nodeId !== existingNode.nodeId);
-      // existingNode.parent().children = pipe(existingNode.parent().children, [
-      //   filter(c => c.nodeId !== existingNode.nodeId),
-      // ])
     }
 
     // should add node into existing hierarchy
@@ -172,7 +168,7 @@ export const deleteCurrentNode = store => () => {
   store.update(state => {
     const nodeToDelete = getNode(state.hierarchy, state.currentNode.nodeId)
     state.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent())
-      ? find(n => n !== state.currentNode)(state.hierarchy.children)
+      ? state.hierarchy.children.find(node => node !== state.currentNode)
       : nodeToDelete.parent()
 
     const recordOrIndexKey = hierarchyFunctions.isRecord(nodeToDelete) ? "children" : "indexes";
@@ -212,10 +208,7 @@ export const saveField = databaseStore => field => {
 
 export const deleteField = databaseStore => field => {
   databaseStore.update(db => {
-    db.currentNode.fields = filter(f => f.name !== field.name)(
+    db.currentNode.fields = db.currentNode.fields.filter(f => f.name !== field.name)
-      db.currentNode.fields
-    )
-
     return db
   })
 }

packages/builder/src/database/DatabaseRoot.svelte

@@ -31,8 +31,6 @@
   $: viewOpen = $backendUiStore.visibleModal === "VIEW"
   $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
   $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
-  // $: recordOpen = $store.currentNode && $store.currentNode.type === 'record'
-  // $: viewOpen = $store.currentNode && $store.currentNode.type === 'index'
 </script>
 
 <Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>

packages/builder/src/database/ModelDataTable/ModelDataTable.svelte

@@ -10,19 +10,23 @@
 
   export let selectRecord
 
-  let pages = [1, 2, 3]
+  const ITEMS_PER_PAGE = 2 
+
   let selectedView = ""
   let modalOpen = false
   let headers = []
   let selectedRecord
+  let currentPage = 0
 
   $: views = $store.hierarchy.indexes
   $: currentAppInfo = {
     appname: $store.appname,
-    instanceId: $store.currentInstanceId 
+    instanceId: $store.currentInstanceId,
   }
-  $: data = $backendUiStore.selectedView.records
+  $: data = $backendUiStore.selectedView.records.slice(
-  $: deleteRecordModal = $backendUiStore.visibleModal === "DELETE_RECORD"
+    currentPage * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+  )
 
   const getSchema = getIndexSchema($store.hierarchy)
 
@@ -44,76 +48,86 @@
   })
 </script>
 
-<section>
+{#if views.length > 0} 
-  <div class="table-controls">
+  <section>
-    <h4 class="budibase__title--3">Shoe database</h4>
+    <div class="table-controls">
-    <Select
+      <h4 class="budibase__title--3">{$backendUiStore.selectedDatabase.name || ""}</h4>
-      icon="ri-eye-line"
+      <Select
-      on:change={e => fetchRecordsForView(e.target.value)}>
+        icon="ri-eye-line"
-      {#each views as view}
+        on:change={e => fetchRecordsForView(e.target.value)}>
-        <option value={view.name}>{view.name}</option>
+        {#each views as view}
-      {/each}
+          <option value={view.name}>{view.name}</option>
-    </Select>
-  </div>
-  <table class="uk-table">
-    <thead>
-      <tr>
-        <th>Edit</th>
-        {#each headers as header}
-          <th>{header}</th>
         {/each}
-      </tr>
+      </Select>
-    </thead>
+    </div>
-    <tbody>
+    <table class="uk-table">
-      {#each data as row}
+      <thead>
-        <tr class="hoverable">
+        <tr>
-          <td>
+          <th>Edit</th>
-            <div class="uk-inline">
-              <i class="ri-more-line" />
-              <div uk-dropdown="mode: click">
-                <ul class="uk-nav uk-dropdown-nav">
-                  <li>
-                    <div>View</div>
-                  </li>
-                  <li
-                    on:click={() => { 
-                      selectRecord(row)
-                      backendUiStore.actions.modals.show("RECORD")
-                    }}>
-                    <div>Edit</div>
-                  </li>
-                  <li>
-                    <div
-                      on:click={() => {
-                        selectRecord(row)
-                        backendUiStore.actions.modals.show("DELETE_RECORD")
-                      }}>
-                      Delete
-                    </div>
-                  </li>
-                  <li>
-                    <div>Duplicate</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </td>
           {#each headers as header}
-            <td>{row[header]}</td>
+            <th>{header}</th>
           {/each}
         </tr>
-      {/each}
+      </thead>
-    </tbody>
+      <tbody>
-  </table>
+        {#if data.length === 0}
-  <TablePagination />
+          <div class="no-data">No Data.</div>
-</section>
+        {/if}
+        {#each data as row}
+          <tr class="hoverable">
+            <td>
+              <div class="uk-inline">
+                <i class="ri-more-line" />
+                <div uk-dropdown="mode: click">
+                  <ul class="uk-nav uk-dropdown-nav">
+                    <li
+                      on:click={() => {
+                        selectRecord(row)
+                        backendUiStore.actions.modals.show('RECORD')
+                      }}>
+                      <div>Edit</div>
+                    </li>
+                    <li>
+                      <div
+                        on:click={() => {
+                          selectRecord(row)
+                          backendUiStore.actions.modals.show('DELETE_RECORD')
+                        }}>
+                        Delete
+                      </div>
+                    </li>
+                    <li>
+                      <div
+                        on:click={() => {
+                          console.log("DUPLICATION")
+                        }}>
+                        Duplicate
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </td>
+            {#each headers as header}
+              <td>{row[header]}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+    <TablePagination bind:currentPage pageItemCount={data.length} {ITEMS_PER_PAGE} />
+  </section>
+{:else}
+  Please create a model to get started.
+{/if}
+
 
 <style>
   table {
     border: 1px solid #ccc;
     background: #fff;
     border-radius: 3px;
-    border-collapse: separate;
+    border-collapse: collapse;
   }
 
   thead {
@@ -146,4 +160,8 @@
   .uk-dropdown-nav li:hover {
     cursor: pointer;
   }
+
+  .no-data {
+    padding: 20px;
+  }
 </style>

packages/builder/src/database/ModelDataTable/TablePagination.svelte

@@ -1,18 +1,43 @@
 <script>
   import { backendUiStore } from "../../builderStore"
 
+  export let currentPage
+  export let pageItemCount
+  export let ITEMS_PER_PAGE
+
+  let numPages = 0
+
   $: data = $backendUiStore.selectedView.records
+  $: numPages = Math.ceil(data.length / ITEMS_PER_PAGE)
+
+  const next = () => {
+    if (currentPage + 1 === numPages) return;
+    currentPage = currentPage + 1
+  }
+
+  const previous = () => {
+    if (currentPage == 0) return;
+    currentPage = currentPage - 1
+  }
+
+  const selectPage = page => {
+    currentPage = page
+  }
 </script>
 
 <div class="pagination">
   <div class="pagination__buttons">
-    <button>Previous</button>
+    <button on:click={previous}>Previous</button>
-    <button>Next</button>
+    <button on:click={next}>Next</button>
-    {#each data as page, idx}
+    {#each Array(numPages) as _, idx}
-      <button>{idx + 1}</button>
+      <button
+        class:selected={idx === currentPage}
+        on:click={() => selectPage(idx)}>
+        {idx + 1}
+      </button>
     {/each}
   </div>
-  <p>Showing 10 (hardcoded, update this) of {data.length} entries</p>
+  <p>Showing {pageItemCount} of {data.length} entries</p>
 </div>
 
 <style>
@@ -24,6 +49,10 @@
     justify-content: center;
   }
 
+  .pagination__buttons {
+    display: flex;
+  }
+
   .pagination__buttons button {
     display: inline-block;
     padding: 10px;
@@ -31,16 +60,18 @@
     background: #fff;
     border: 1px solid #ccc;
     text-transform: capitalize;
-    border-radius: 5px;
+    border-radius: 3px;
     font-family: Roboto;
     min-width: 20px;
+    transition: 0.3s background-color;
   }
 
   .pagination__buttons button:hover {
     cursor: pointer;
+    background-color: #fafafa;
   }
 
-  .ri-more-line:hover {
+  .selected {
-    cursor: pointer;
+    color: var(--button-text);
   }
 </style>

packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte

@@ -4,6 +4,8 @@
   import ActionButton from "../../../common/ActionButton.svelte"
   import * as api from "../api"
 
+  export let onClosed
+
   let databaseName
 
   async function createDatabase() {
@@ -14,8 +16,8 @@
 </script>
 
 <section>
-  CREATE A NEW DATABASE FROM HERE
+  Database Name
-  <input type="text" bind:value={databaseName} />
+  <input class="uk-input" type="text" bind:value={databaseName} />
   <div class="actions">
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
     <ActionButton disabled={!databaseName} on:click={createDatabase}>Save</ActionButton>

packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte

@@ -8,12 +8,5 @@
 </script>
 
 <section>
-  <h4 class="budibase__title--4">
+  <ModelView />
-    <i class="ri-list-settings-line" />
-    Create / Edit Model
-  </h4>
-  <div class="actions">
-    <ModelView />
-    <ActionsHeader />
-  </div>
 </section>

packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { store, backendUiStore } from "../../../builderStore"
+  import { findIndex } from "lodash/fp"
   import Modal from "../../../common/Modal.svelte"
   import ActionButton from "../../../common/ActionButton.svelte"
   import Select from "../../../common/Select.svelte"
@@ -69,7 +70,10 @@
         on:click={async () => {
           const recordResponse = await api.saveRecord(record || selectedModel, currentAppInfo)
           backendUiStore.update(state => {
-            state.selectedView.records.push(recordResponse)
+            const idx = findIndex(state.selectedView.records, {
+              id: recordResponse.id
+            })
+            state.selectedView.records.splice(idx, 1, recordResponse)
             return state
           })
           onClosed()

packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte

@@ -4,7 +4,6 @@
   import { store, backendUiStore } from "../../../builderStore"
   import * as api from "../api"
 
-  export let modalOpen = false
   export let record
 
   $: currentAppInfo = {
@@ -18,9 +17,14 @@
 </script>
 
 <section>
-  <h4 class="budibase__title--4">Delete Record</h4>
+  <heading>
-  Are you sure you want to delete this record? All of your data will be
+    <i class="ri-information-line alert" />
-  permanently removed. This action cannot be undone.
+    <h4 class="budibase__title--4">Delete Record</h4>
+  </heading>
+  <p>
+    Are you sure you want to delete this record? All of your data will be
+    permanently removed. This action cannot be undone.
+  </p>
   <div class="modal-actions">
     <ActionButton on:click={onClosed}>Cancel</ActionButton>
     <ActionButton
@@ -34,3 +38,28 @@
     </ActionButton>
   </div>
 </section>
+
+<style>
+  .alert {
+    color: rgba(255, 0, 31, 1);
+    background: #fafafa;
+    padding: 5px;
+  }
+  
+  .modal-actions {
+    position: absolute;
+    bottom: 0;
+    background: #fafafa;
+    border-top: 1px solid #ccc;
+    width: 100%;
+  }
+
+  heading {
+    display: flex;
+    align-items: center;
+  }
+
+  h4 {
+    margin: 0 0 0 10px; 
+  }
+</style>

packages/builder/src/database/ModelView.svelte

@@ -7,8 +7,9 @@
   import Modal from "../common/Modal.svelte"
   import { map, join, filter, some, find, keys, isDate } from "lodash/fp"
   import { store } from "../builderStore"
-  import { common, hierarchy as h } from "../../../core/src"
+  import { common, hierarchy } from "../../../core/src"
   import { templateApi, pipe, validate } from "../common/core"
+  import ActionsHeader from "./ActionsHeader.svelte"
 
   let record
   let getIndexAllowedRecords
@@ -26,7 +27,7 @@
 
   store.subscribe($store => {
     record = $store.currentNode
-    const flattened = h.getFlattenedHierarchy($store.hierarchy)
+    const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy)
     getIndexAllowedRecords = index =>
       pipe(
         index.allowedRecordNodeIds,
@@ -78,21 +79,6 @@
     return value
   }
 
-  let getTypeOptions = typeOptions =>
-    pipe(
-      typeOptions,
-      [
-        keys,
-        map(
-          k =>
-            `<span style="color:var(--slate)">${k}: </span>${getTypeOptionsValueText(
-              typeOptions[k]
-            )}`
-        ),
-        join("<br>"),
-      ]
-    )
-
   const nameChanged = ev => {
     const pluralName = n => `${n}s`
     if (record.collectionName === "") {
@@ -102,113 +88,79 @@
 </script>
 
 <div class="root">
-  <form class="uk-form-stacked">
+  <heading>
-    <h3 class="budibase__label--big">Settings</h3>
+    {#if !editingField}
-
+      <i class="ri-list-settings-line button--toggled" />
-    <Textbox label="Name" bind:text={record.name} on:change={nameChanged} />
+      <h4 class="budibase__title--3">Create / Edit Model</h4>
-    <label class="uk-form-label">Parent</label>
+    {:else}
-    <div class="uk-form-controls">
+      <i class="ri-file-list-line button--toggled" />
-      <Select
+      <h4 class="budibase__title--3">Create / Edit Field</h4>
-        value={parentRecord}
-        on:change={e => store.newChildRecord()}>
-        {#each models as model}
-          <option value={model}>{model.name}</option>
-        {/each}
-      </Select>
-    </div>
-    {#if !record.isSingle}
-      <Textbox label="Collection Name" bind:text={record.collectionName} />
-      <Textbox
-        label="Estimated Record Count"
-        bind:text={record.estimatedRecordCount} />
     {/if}
-    <div class="recordkey">{record.nodeKey()}</div>
+  </heading>
+  {#if !editingField}
+    <form class="uk-form-stacked">
+      <h3 class="budibase__label--big">Settings</h3>
 
-  </form>
+      <Textbox label="Name" bind:text={record.name} on:change={nameChanged} />
-  <div class="table-controls">
-    <span class="budibase__label--big">Fields</span>
-    <h4 class="hoverable" on:click={newField}>Add new field</h4>
-  </div>
 
-  <table class="fields-table uk-table budibase__table">
+      <div class="horizontal-stack">
-    <thead>
+        {#if !record.isSingle}
-      <tr>
+          <Textbox label="Collection Name" bind:text={record.collectionName} />
-        <th>Edit</th>
+        {/if}
-        <th>Name</th>
+        <div>
-        <th>Type</th>
+          <label class="uk-form-label">Parent</label>
-        <th>Values</th>
+          <div class="uk-form-controls">
-        <th />
+            <Select
-      </tr>
+              value={parentRecord}
-    </thead>
+              on:change={e => {
-    <tbody>
+                store.selectExistingNode(record)
-      {#each record ? record.fields : [] as field}
+                store.newChildRecord()
-        <tr>
+              }}>
-          <td>
+              {#each models as model}
-            <i class="ri-more-line" on:click={() => editField(field)} />
+                <option value={model}>{model.name}</option>
-          </td>
+              {/each}
-          <td>
+            </Select>
-            <div>{field.name}</div>
+          </div>
-          </td>
-          <td>{field.type}</td>
-          <td>{field.typeOptions.values}</td>
-          <td>
-            <span class="edit-button" on:click={() => deleteField(field)}>
-              {@html getIcon('trash')}
-            </span>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  {#if editingField}
-    <Modal
-      bind:isOpen={editingField}
-      onClosed={() => onFinishedFieldEdit(false)}>
-
-      <h3 class="budibase__title--3">
-        <i class="ri-file-list-line" />
-        Create / Edit Field
-      </h3>
-      <FieldView
-        field={fieldToEdit}
-        onFinished={onFinishedFieldEdit}
-        allFields={record.fields}
-        store={$store} />
-    </Modal>
-  {/if}
-
-  <!-- <h3 class="budibase__title--3">Indexes</h3> -->
-
-  <!-- {#each record.indexes as index}
-    <div class="index-container">
-      <div class="index-name">
-        {index.name}
-        <span style="margin-left: 7px" on:click={() => editIndex(index)}>
-          {@html getIcon('edit')}
-        </span>
-      </div>
-      <div class="index-field-row">
-        <span class="index-label">records indexed:</span>
-        <span>{getIndexAllowedRecords(index)}</span>
-        <span class="index-label" style="margin-left: 15px">type:</span>
-        <span>{index.indexType}</span>
-      </div>
-      <div class="index-field-row">
-        <span class="index-label">map:</span>
-        <code class="index-mapfilter">{index.map}</code>
-      </div>
-      {#if index.filter}
-        <div class="index-field-row">
-          <span class="index-label">filter:</span>
-          <code class="index-mapfilter">{index.filter}</code>
         </div>
-      {/if}
+    </form>
-    </div>
-  {:else}
-    <div class="no-indexes">No indexes added.</div>
-  {/each} -->
 
+    <div class="table-controls">
+      <span class="budibase__label--big">Fields</span>
+      <h4 class="hoverable new-field" on:click={newField}>Add new field</h4>
+    </div>
+
+    <table class="uk-table fields-table budibase__table">
+      <thead>
+        <tr>
+          <th>Edit</th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Values</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each record ? record.fields : [] as field}
+          <tr>
+            <td>
+              <i class="ri-more-line" on:click={() => editField(field)} />
+            </td>
+            <td>
+              <div>{field.name}</div>
+            </td>
+            <td>{field.type}</td>
+            <td>{field.typeOptions.values}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+    <ActionsHeader />
+  {:else}
+    <FieldView
+      field={fieldToEdit}
+      onFinished={onFinishedFieldEdit}
+      allFields={record.fields}
+      store={$store} />
+  {/if}
 </div>
 
 <style>
@@ -217,10 +169,15 @@
     padding: 2rem;
   }
 
-  .recordkey {
+  .horizontal-stack {
-    font-size: 14px;
+    display: flex;
-    font-weight: 600;
+    justify-content: space-between
-    color: var(--primary100);
+  }
+
+  .new-field {
+    font-size: 16px;
+    font-weight: bold;
+    color: var(--button-text);
   }
 
   .fields-table {
@@ -228,24 +185,10 @@
     border-collapse: collapse;
   }
 
-  .edit-button {
-    cursor: pointer;
-    color: var(--secondary25);
-  }
-
-  .edit-button:hover {
-    cursor: pointer;
-    color: var(--secondary75);
-  }
-
   tbody > tr:hover {
     background-color: var(--primary10);
   }
 
-  tbody > tr:hover .edit-button {
-    color: var(--secondary75);
-  }
-
   .table-controls {
     display: flex;
     justify-content: space-between;
@@ -256,7 +199,12 @@
     cursor: pointer;
   }
 
+  heading {
+    display: flex;
+    align-items: center;
+  }
+
   h4 {
-    margin: 0;
+    margin: 0 0 0 10px;
   }
 </style>

packages/builder/src/nav/HierarchyRow.svelte

@@ -9,9 +9,6 @@
   export let type
 
   let navActive = ""
-  let expanded = false
-
-  $: hasChildren = (node.children || node.indexes) && (node.children.length || node.indexes.length)
 
   const ICON_MAP = {
     index: "ri-eye-line",
@@ -38,26 +35,18 @@
     class:capitalized={type === 'record'}
     style="padding-left: {20 + level * 20}px"
     class:selected={navActive}>
-    {#if hasChildren}
-      <i 
-        class={`ri-arrow-${expanded ? "down" : "right"}-s-line`} 
-        on:click={() => expanded = !expanded}
-      />
-    {/if}
     <i class={ICON_MAP[type]} />
     <span style="margin-left: 1rem">{node.name}</span>
   </div>
-  {#if expanded}
+  {#if node.children}
-    {#if node.children}
+    {#each node.children as child}
-      {#each node.children as child}
+      <svelte:self node={child} level={level + 1} type="record" />
-        <svelte:self node={child} level={level + 1} type="record" />
+    {/each}
-      {/each}
+  {/if}
-    {/if}
+  {#if node.indexes}
-    {#if node.indexes}
+    {#each node.indexes as index}
-      {#each node.indexes as index}
+      <svelte:self node={index} level={level + 1} type="index" />
-        <svelte:self node={index} level={level + 1} type="index" />
+    {/each}
-      {/each}
-    {/if}
   {/if}
 </div>