|
|
|
@ -14,7 +14,7 @@ |
|
|
|
import Table from "./Table.svelte" |
|
|
|
import { TableNames } from "constants" |
|
|
|
import CreateEditRow from "./modals/CreateEditRow.svelte" |
|
|
|
import { Pagination } from "@budibase/bbui" |
|
|
|
import { Pagination, Heading, Body, Layout } from "@budibase/bbui" |
|
|
|
import { fetchData } from "@budibase/frontend-core" |
|
|
|
import { API } from "api" |
|
|
|
|
|
|
|
@ -27,6 +27,8 @@ |
|
|
|
$: enrichedSchema = enrichSchema($tables.selected?.schema) |
|
|
|
$: id = $tables.selected?._id |
|
|
|
$: fetch = createFetch(id) |
|
|
|
$: hasCols = checkHasCols(schema) |
|
|
|
$: hasRows = !!$fetch.rows?.length |
|
|
|
|
|
|
|
const enrichSchema = schema => { |
|
|
|
let tempSchema = { ...schema } |
|
|
|
@ -47,6 +49,20 @@ |
|
|
|
|
|
|
|
return tempSchema |
|
|
|
} |
|
|
|
|
|
|
|
const checkHasCols = schema => { |
|
|
|
if (!schema || Object.keys(schema).length === 0) { |
|
|
|
return false |
|
|
|
} |
|
|
|
let fields = Object.values(schema) |
|
|
|
for (let field of fields) { |
|
|
|
if (!field.autocolumn) { |
|
|
|
return true |
|
|
|
} |
|
|
|
} |
|
|
|
return false |
|
|
|
} |
|
|
|
|
|
|
|
// Fetches new data whenever the table changes |
|
|
|
const createFetch = tableId => { |
|
|
|
return fetchData({ |
|
|
|
@ -104,40 +120,73 @@ |
|
|
|
disableSorting |
|
|
|
on:updatecolumns={onUpdateColumns} |
|
|
|
on:updaterows={onUpdateRows} |
|
|
|
customPlaceholder |
|
|
|
> |
|
|
|
<CreateColumnButton on:updatecolumns={onUpdateColumns} /> |
|
|
|
{#if schema && Object.keys(schema).length > 0} |
|
|
|
{#if !isUsersTable} |
|
|
|
<CreateRowButton |
|
|
|
<div class="buttons"> |
|
|
|
<div class="left-buttons"> |
|
|
|
<CreateColumnButton |
|
|
|
highlighted={$fetch.loaded && (!hasCols || !hasRows)} |
|
|
|
on:updatecolumns={onUpdateColumns} |
|
|
|
/> |
|
|
|
{#if !isUsersTable} |
|
|
|
<CreateRowButton |
|
|
|
on:updaterows={onUpdateRows} |
|
|
|
title={"Create row"} |
|
|
|
modalContentComponent={CreateEditRow} |
|
|
|
disabled={!hasCols} |
|
|
|
highlighted={$fetch.loaded && hasCols && !hasRows} |
|
|
|
/> |
|
|
|
{/if} |
|
|
|
{#if isInternal} |
|
|
|
<CreateViewButton disabled={!hasCols || !hasRows} /> |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
<div class="right-buttons"> |
|
|
|
<ManageAccessButton resourceId={$tables.selected?._id} /> |
|
|
|
{#if isUsersTable} |
|
|
|
<EditRolesButton /> |
|
|
|
{/if} |
|
|
|
{#if !isInternal} |
|
|
|
<ExistingRelationshipButton |
|
|
|
table={$tables.selected} |
|
|
|
on:updatecolumns={onUpdateColumns} |
|
|
|
/> |
|
|
|
{/if} |
|
|
|
<HideAutocolumnButton bind:hideAutocolumns /> |
|
|
|
<ImportButton |
|
|
|
tableId={$tables.selected?._id} |
|
|
|
on:updaterows={onUpdateRows} |
|
|
|
title={"Create row"} |
|
|
|
modalContentComponent={CreateEditRow} |
|
|
|
/> |
|
|
|
{/if} |
|
|
|
{#if isInternal} |
|
|
|
<CreateViewButton /> |
|
|
|
{/if} |
|
|
|
<ManageAccessButton resourceId={$tables.selected?._id} /> |
|
|
|
{#if isUsersTable} |
|
|
|
<EditRolesButton /> |
|
|
|
{/if} |
|
|
|
{#if !isInternal} |
|
|
|
<ExistingRelationshipButton |
|
|
|
table={$tables.selected} |
|
|
|
on:updatecolumns={onUpdateColumns} |
|
|
|
<ExportButton |
|
|
|
disabled={!hasRows || !hasCols} |
|
|
|
view={$tables.selected?._id} |
|
|
|
/> |
|
|
|
{/if} |
|
|
|
<HideAutocolumnButton bind:hideAutocolumns /> |
|
|
|
<!-- always have the export last --> |
|
|
|
<ExportButton view={$tables.selected?._id} /> |
|
|
|
<ImportButton |
|
|
|
tableId={$tables.selected?._id} |
|
|
|
on:updaterows={onUpdateRows} |
|
|
|
/> |
|
|
|
{#key id} |
|
|
|
<TableFilterButton {schema} on:change={onFilter} /> |
|
|
|
{/key} |
|
|
|
{/if} |
|
|
|
{#key id} |
|
|
|
<TableFilterButton |
|
|
|
{schema} |
|
|
|
on:change={onFilter} |
|
|
|
disabled={!hasCols || !hasRows} |
|
|
|
/> |
|
|
|
{/key} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div slot="placeholder"> |
|
|
|
<Layout gap="S"> |
|
|
|
{#if !hasCols} |
|
|
|
<Heading>Let's create some columns</Heading> |
|
|
|
<Body> |
|
|
|
Start building out your table structure<br /> |
|
|
|
by adding some columns |
|
|
|
</Body> |
|
|
|
{:else} |
|
|
|
<Heading>Now let's add a row</Heading> |
|
|
|
<Body> |
|
|
|
Add some data to your table<br /> |
|
|
|
by adding some rows |
|
|
|
</Body> |
|
|
|
{/if} |
|
|
|
</Layout> |
|
|
|
</div> |
|
|
|
</Table> |
|
|
|
{#key id} |
|
|
|
<div in:fade={{ delay: 200, duration: 100 }}> |
|
|
|
@ -162,4 +211,20 @@ |
|
|
|
align-items: center; |
|
|
|
margin-top: var(--spacing-xl); |
|
|
|
} |
|
|
|
.buttons { |
|
|
|
flex: 1 1 auto; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
.left-buttons, |
|
|
|
.right-buttons { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
gap: var(--spacing-m); |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Andrew Kingston
4 years ago
GitHub