table enhancements

2020-03-22 09:21:18 +00:00 · 2020-03-22 09:21:18 +00:00 · b474f8a600
parent 9756574e6f
commit b474f8a600
12 changed files with 274 additions and 261 deletions
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@ -103,7 +103,9 @@ const lodash_fp_exports = [
  "toNumber",
  "takeRight",
  "toPairs",
-  "remove"
+  "remove",
+  "findIndex",
+  "compose"
 ]

 const lodash_exports = [
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -107,7 +107,7 @@
 }

 .budibase__table thead {
-    background: var(--background-button);
+    background: #fafafa;
 }

 .budibase__table th {
@ -118,4 +118,10 @@

 .budibase__table tr {
    border-bottom: 1px solid #ccc;
+}
+
+.button--toggled {
+    background: #fafafa;
+    color: var(--button-text);
+    padding: 10px;
 }
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/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 = pipe(existingNode.parent().children, [
-      //   filter(c => c.nodeId !== existingNode.nodeId),
-      // ])
+      existingNode.parent().children = existingNode.parent().children.filter(node => node.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 = db.currentNode.fields.filter(f => f.name !== field.name)
    return db
  })
 }
--- a/packages/builder/src/database/DatabaseRoot.svelte
+++ b/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}>
--- a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
+++ b/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
-  $: deleteRecordModal = $backendUiStore.visibleModal === "DELETE_RECORD"
+  $: data = $backendUiStore.selectedView.records.slice(
+    currentPage * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+  )

  const getSchema = getIndexSchema($store.hierarchy)

@ -44,76 +48,86 @@
  })
 </script>

-<section>
-  <div class="table-controls">
-    <h4 class="budibase__title--3">Shoe database</h4>
-    <Select
-      icon="ri-eye-line"
-      on:change={e => fetchRecordsForView(e.target.value)}>
-      {#each views as view}
-        <option value={view.name}>{view.name}</option>
-      {/each}
-    </Select>
-  </div>
-  <table class="uk-table">
-    <thead>
-      <tr>
-        <th>Edit</th>
-        {#each headers as header}
-          <th>{header}</th>
+{#if views.length > 0} 
+  <section>
+    <div class="table-controls">
+      <h4 class="budibase__title--3">{$backendUiStore.selectedDatabase.name || ""}</h4>
+      <Select
+        icon="ri-eye-line"
+        on:change={e => fetchRecordsForView(e.target.value)}>
+        {#each views as view}
+          <option value={view.name}>{view.name}</option>
        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#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>
-                    <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>
+      </Select>
+    </div>
+    <table class="uk-table">
+      <thead>
+        <tr>
+          <th>Edit</th>
          {#each headers as header}
-            <td>{row[header]}</td>
+            <th>{header}</th>
          {/each}
        </tr>
-      {/each}
-    </tbody>
-  </table>
-  <TablePagination />
-</section>
+      </thead>
+      <tbody>
+        {#if data.length === 0}
+          <div class="no-data">No Data.</div>
+        {/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>
--- a/packages/builder/src/database/ModelDataTable/TablePagination.svelte
+++ b/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>Next</button>
-    {#each data as page, idx}
-      <button>{idx + 1}</button>
+    <button on:click={previous}>Previous</button>
+    <button on:click={next}>Next</button>
+    {#each Array(numPages) as _, idx}
+      <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 {
-    cursor: pointer;
+  .selected {
+    color: var(--button-text);
  }
 </style>
--- a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte
+++ b/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
-  <input type="text" bind:value={databaseName} />
+  Database Name
+  <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>
--- a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte
+++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte
@ -8,12 +8,5 @@
 </script>

 <section>
-  <h4 class="budibase__title--4">
-    <i class="ri-list-settings-line" />
-    Create / Edit Model
-  </h4>
-  <div class="actions">
-    <ModelView />
-    <ActionsHeader />
-  </div>
-</section>
+  <ModelView />
+</section>
--- a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/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()
--- a/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/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>
-  Are you sure you want to delete this record? All of your data will be
-  permanently removed. This action cannot be undone.
+  <heading>
+    <i class="ri-information-line alert" />
+    <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>
--- a/packages/builder/src/database/ModelView.svelte
+++ b/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">
-    <h3 class="budibase__label--big">Settings</h3>
-
-    <Textbox label="Name" bind:text={record.name} on:change={nameChanged} />
-    <label class="uk-form-label">Parent</label>
-    <div class="uk-form-controls">
-      <Select
-        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} />
+  <heading>
+    {#if !editingField}
+      <i class="ri-list-settings-line button--toggled" />
+      <h4 class="budibase__title--3">Create / Edit Model</h4>
+    {:else}
+      <i class="ri-file-list-line button--toggled" />
+      <h4 class="budibase__title--3">Create / Edit Field</h4>
    {/if}
-    <div class="recordkey">{record.nodeKey()}</div>
+  </heading>
+  {#if !editingField}
+    <form class="uk-form-stacked">
+      <h3 class="budibase__label--big">Settings</h3>

-  </form>
-  <div class="table-controls">
-    <span class="budibase__label--big">Fields</span>
-    <h4 class="hoverable" on:click={newField}>Add new field</h4>
-  </div>
+      <Textbox label="Name" bind:text={record.name} on:change={nameChanged} />

-  <table class="fields-table uk-table budibase__table">
-    <thead>
-      <tr>
-        <th>Edit</th>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Values</th>
-        <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>
-          <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 class="horizontal-stack">
+        {#if !record.isSingle}
+          <Textbox label="Collection Name" bind:text={record.collectionName} />
+        {/if}
+        <div>
+          <label class="uk-form-label">Parent</label>
+          <div class="uk-form-controls">
+            <Select
+              value={parentRecord}
+              on:change={e => {
+                store.selectExistingNode(record)
+                store.newChildRecord()
+              }}>
+              {#each models as model}
+                <option value={model}>{model.name}</option>
+              {/each}
+            </Select>
+          </div>
        </div>
-      {/if}
-    </div>
-  {:else}
-    <div class="no-indexes">No indexes added.</div>
-  {/each} -->
+    </form>

+    <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 {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--primary100);
+  .horizontal-stack {
+    display: flex;
+    justify-content: space-between
+  }
+
+  .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>
--- a/packages/builder/src/nav/HierarchyRow.svelte
+++ b/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}
-      {#each node.children as child}
-        <svelte:self node={child} level={level + 1} type="record" />
-      {/each}
-    {/if}
-    {#if node.indexes}
-      {#each node.indexes as index}
-        <svelte:self node={index} level={level + 1} type="index" />
-      {/each}
-    {/if}
+  {#if node.children}
+    {#each node.children as child}
+      <svelte:self node={child} level={level + 1} type="record" />
+    {/each}
+  {/if}
+  {#if node.indexes}
+    {#each node.indexes as index}
+      <svelte:self node={index} level={level + 1} type="index" />
+    {/each}
  {/if}
 </div>