CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 01:28:51 +13:00
Code Issues Projects Releases Wiki Activity

Use common Table component across backend UI and add initial empty page for relationships

Browse source
This commit is contained in:
Andrew Kingston 2020-10-01 07:19:38 +01:00
parent a4ccd75564
commit d0ef67dee0
7 changed files with 107 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

185
packages/builder/src/components/backend/DataTable/ModelDataTable.svelte
View file

@ -1,187 +1,30 @@
<script>
import { onMount } from "svelte"
import fsort from "fast-sort"
import getOr from "lodash/fp/getOr"
import { store, backendUiStore } from "builderStore"
import { Button, Icon } from "@budibase/bbui"
import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte"
import AttachmentList from "./AttachmentList.svelte"
import TablePagination from "./TablePagination.svelte"
import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
import { backendUiStore } from "builderStore"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ViewPopover from "./popovers/View.svelte"
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
import EditRowPopover from "./popovers/EditRow.svelte"
import * as api from "./api"
import Table from "./Table.svelte"
const ITEMS_PER_PAGE = 10
// Internal headers we want to hide from the user
const INTERNAL_HEADERS = ["_id", "_rev", "modelId", "type"]
let modalOpen = false
let data = []
let headers = []
let currentPage = 0
let search
$: title = $backendUiStore.selectedModel.name
$: schema = $backendUiStore.selectedModel.schema
// Fetch records for specified model
$: {
if (
$backendUiStore.selectedView &&
$backendUiStore.selectedView.name.startsWith("all_")
) {
if ($backendUiStore.selectedView?.name?.startsWith("all_")) {
api.fetchDataForView($backendUiStore.selectedView).then(records => {
data = records || []
})
}
}
$: sort = $backendUiStore.sort
$: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
$: paginatedData = sorted
? sorted.slice(
currentPage * ITEMS_PER_PAGE,
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
)
: []
$: headers = Object.keys($backendUiStore.selectedModel.schema)
.sort()
.filter(id => !INTERNAL_HEADERS.includes(id))
$: schema = $backendUiStore.selectedModel.schema
</script>
<section>
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
<div class="popovers">
<ColumnPopover />
{#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
<RowPopover />
<ViewPopover />
{/if}
</div>
<table class="bb-table">
<thead>
<tr>
<th class="edit-header">
<div>Edit</div>
</th>
{#each headers as header}
<th>
<ColumnHeaderPopover
field={$backendUiStore.selectedModel.schema[header]} />
</th>
{/each}
</tr>
</thead>
<tbody>
{#if paginatedData.length === 0}
<td class="no-border">No data.</td>
{#each headers as header}
<td class="no-border" />
{/each}
{/if}
{#each paginatedData as row}
<tr>
<td>
<EditRowPopover {row} />
</td>
{#each headers as header}
<td>
{#if schema[header].type === 'link'}
{JSON.stringify(row[header])}
{:else if schema[header].type === 'attachment'}
<AttachmentList files={row[header] || []} />
{:else}{getOr('', header, row)}{/if}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<TablePagination
{data}
bind:currentPage
pageItemCount={paginatedData.length}
{ITEMS_PER_PAGE} />
</section>
<style>
.title {
font-size: 24px;
font-weight: 600;
text-rendering: optimizeLegibility;
text-transform: capitalize;
margin-top: 0;
}
.popovers {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
table {
border: 1px solid var(--grey-4);
background: #fff;
border-collapse: collapse;
}
thead {
background: var(--grey-3);
border-bottom: 1px solid var(--grey-4);
}
thead th {
color: var(--ink);
font-weight: 500;
font-size: 14px;
text-rendering: optimizeLegibility;
transition: 0.5s all;
vertical-align: middle;
height: 48px;
padding-top: 0;
padding-bottom: 0;
}
.edit-header {
width: 100px;
cursor: default;
}
.edit-header:hover {
color: var(--ink);
}
th:hover {
color: var(--blue);
cursor: pointer;
}
td {
max-width: 200px;
text-overflow: ellipsis;
border: 1px solid var(--grey-4);
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
padding: var(--spacing-l) var(--spacing-m);
font-size: var(--font-size-xs);
}
td.no-border {
border: none;
}
tbody {
border: 1px solid var(--grey-4);
}
tbody tr {
border-bottom: 1px solid var(--grey-4);
transition: 0.3s background-color;
color: var(--ink);
}
tbody tr:hover {
background: var(--grey-1);
}
</style>
<Table {title} {schema} {data} allowEditing={true}>
<ColumnPopover />
{#if Object.keys(schema).length > 0}
<RowPopover />
<ViewPopover />
{/if}
</Table>

55
packages/builder/src/components/backend/DataTable/Table.svelte
View file

@ -1,4 +1,5 @@
<script>
import { goto } from "@sveltech/routify"
import { onMount } from "svelte"
import fsort from "fast-sort"
import getOr from "lodash/fp/getOr"
@ -16,16 +17,16 @@
import EditRowPopover from "./popovers/EditRow.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
const ITEMS_PER_PAGE = 10
export let schema = []
export let data = []
export let title
const ITEMS_PER_PAGE = 10
export let allowEditing = false
let currentPage = 0
$: columns = schema ? Object.keys(schema) : []
$: sort = $backendUiStore.sort
$: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
$: paginatedData =
@ -35,6 +36,10 @@
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
)
: []
function selectRelationship(recordId, fieldName) {
$goto(`../relationship/${recordId}/${fieldName}`)
}
</script>
<section>
@ -47,13 +52,25 @@
<table class="bb-table">
<thead>
<tr>
{#if allowEditing}
<th class="edit-header">
<div>Edit</div>
</th>
{/if}
{#each columns as header}
<th>{header}</th>
<th>
{#if allowEditing}
<ColumnHeaderPopover field={schema[header]} />
{:else}{header}{/if}
</th>
{/each}
</tr>
</thead>
<tbody>
{#if paginatedData.length === 0}
{#if allowEditing}
<td class="no-border">No data.</td>
{/if}
{#each columns as header, idx}
<td class="no-border">
{#if idx === 0}No data.{/if}
@ -62,9 +79,20 @@
{/if}
{#each paginatedData as row}
<tr>
{#if allowEditing}
<td>
<EditRowPopover {row} />
</td>
{/if}
{#each columns as header}
<td>
{#if schema[header].type === 'attachment'}
{#if schema[header].type === 'link'}
<div
class="link"
on:click={() => selectRelationship(row._id, header)}>
{row[header] ? row[header].length : 0} linked row(s)
</div>
{:else if schema[header].type === 'attachment'}
<AttachmentList files={row[header] || []} />
{:else}{getOr('', header, row)}{/if}
</td>
@ -101,7 +129,6 @@
}
thead th {
color: var(--ink);
text-transform: capitalize;
font-weight: 500;
font-size: 14px;
text-rendering: optimizeLegibility;
@ -149,4 +176,20 @@
:global(.popovers > div) {
margin-right: var(--spacing-m);
}
.edit-header {
width: 60px;
}
.edit-header:hover {
cursor: default;
color: var(--ink);
}
.link {
text-decoration: underline;
}
.link:hover {
color: var(--grey-6);
cursor: pointer;
}
</style>

34
packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
View file

@ -1,20 +1,6 @@
<script>
import { onMount } from "svelte"
import fsort from "fast-sort"
import getOr from "lodash/fp/getOr"
import { store, backendUiStore } from "builderStore"
import api from "builderStore/api"
import { Button, Icon } from "@budibase/bbui"
import Table from "./Table.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte"
import TablePagination from "./TablePagination.svelte"
import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ViewPopover from "./popovers/View.svelte"
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
import EditRowPopover from "./popovers/EditRow.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
import GroupByPopover from "./popovers/GroupBy.svelte"
import FilterPopover from "./popovers/Filter.svelte"
@ -24,22 +10,24 @@
let data = []
$: name = view.name
$: filters = view.filters
$: field = view.field
$: groupBy = view.groupBy
$: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy)
// Fetch records for specified view
$: {
if (!name.startsWith("all_")) {
fetchViewData(name, view.field, view.groupBy)
}
}
async function fetchViewData(name, field, groupBy) {
const params = new URLSearchParams()
if (field) {
params.set("field", field)
params.set("stats", true)
}
if (groupBy) params.set("group", groupBy)
let QUERY_VIEW_URL = `/api/views/${name}?${params}`
if (groupBy) {
params.set("group", groupBy)
}
const QUERY_VIEW_URL = `/api/views/${name}?${params}`
const response = await api.get(QUERY_VIEW_URL)
data = await response.json()
}

4
packages/builder/src/components/backend/ModelNavigator/EditTable.svelte
View file

@ -20,13 +20,14 @@
}
function hideEditor() {
dropdown.hide()
dropdown?.hide()
editing = false
}
async function deleteTable() {
await backendUiStore.actions.models.delete(table)
notifier.success("Table deleted")
hideEditor()
}
async function save() {
@ -77,6 +78,7 @@
body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`}
okText="Delete Table"
onOk={deleteTable}
onCancel={hideEditor}
title="Confirm Delete" />
<style>

18
packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/[selectedField]/index.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
import { onMount } from "svelte"
import { params } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import api from "../../../../../../../../builderStore/api"
console.log($params)
let data
onMount(async () => {
const QUERY_VIEW_URL = `/api/${$params.selectedModel}/${$params.selectedRecord}/enrich`
const response = await api.get(QUERY_VIEW_URL)
data = await response.json()
console.log(data)
})
</script>
<div>hello world!</div>

6
packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/index.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
$goto("../../")
</script>
<!-- routify:options index=false -->

6
packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/index.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
$goto("../")
</script>
<!-- routify:options index=false -->