Add placeholder table content and add highlighted and disabled states to table buttons
This commit is contained in:
parent
f90f78d1f7
commit
2a5b81a40a
6 changed files with 106 additions and 25 deletions
|
@ -36,6 +36,7 @@
|
|||
export let disableSorting = false
|
||||
export let autoSortColumns = true
|
||||
export let compact = false
|
||||
export let customPlaceholder = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
|
@ -387,13 +388,24 @@
|
|||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="placeholder" class:placeholder--no-fields={!fields?.length}>
|
||||
<div class="placeholder-content">
|
||||
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false">
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
<div>No rows found</div>
|
||||
</div>
|
||||
<div
|
||||
class="placeholder"
|
||||
class:placeholder--custom={customPlaceholder}
|
||||
class:placeholder--no-fields={!fields?.length}
|
||||
>
|
||||
{#if customPlaceholder}
|
||||
<slot name="placeholder" />
|
||||
{:else}
|
||||
<div class="placeholder-content">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Icon--sizeXXL"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
<div>No rows found</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -576,16 +588,19 @@
|
|||
border-top: none;
|
||||
grid-column: 1 / -1;
|
||||
background-color: var(--table-bg);
|
||||
padding: 60px 40px;
|
||||
}
|
||||
.placeholder--no-fields {
|
||||
border-top: var(--table-border);
|
||||
}
|
||||
.placeholder--custom {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.wrapper--quiet .placeholder {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.placeholder-content {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
|
@ -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.data?.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,19 +120,27 @@
|
|||
disableSorting
|
||||
on:updatecolumns={onUpdateColumns}
|
||||
on:updaterows={onUpdateRows}
|
||||
customPlaceholder
|
||||
>
|
||||
<CreateColumnButton on:updatecolumns={onUpdateColumns} />
|
||||
{#if schema && Object.keys(schema).length > 0}
|
||||
{#if !isUsersTable}
|
||||
<CreateRowButton
|
||||
on:updaterows={onUpdateRows}
|
||||
title={"Create row"}
|
||||
modalContentComponent={CreateEditRow}
|
||||
/>
|
||||
{/if}
|
||||
{#if isInternal}
|
||||
<CreateViewButton />
|
||||
{/if}
|
||||
<div class="buttons">
|
||||
<div class="left-buttons">
|
||||
<CreateColumnButton highlighted on:updatecolumns={onUpdateColumns} />
|
||||
{#if !isUsersTable}
|
||||
<CreateRowButton
|
||||
on:updaterows={onUpdateRows}
|
||||
title={"Create row"}
|
||||
modalContentComponent={CreateEditRow}
|
||||
disabled={!hasCols}
|
||||
highlighted={hasCols && !hasRows}
|
||||
/>
|
||||
{/if}
|
||||
{#if isInternal}
|
||||
<CreateViewButton disabled={!hasCols || !hasRows} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="right-buttons" />
|
||||
</div>
|
||||
{#if hasCols}
|
||||
<ManageAccessButton resourceId={$tables.selected?._id} />
|
||||
{#if isUsersTable}
|
||||
<EditRolesButton />
|
||||
|
@ -138,6 +162,15 @@
|
|||
<TableFilterButton {schema} on:change={onFilter} />
|
||||
{/key}
|
||||
{/if}
|
||||
<div slot="placeholder">
|
||||
<Layout gap="S">
|
||||
<Heading>Let's create some columns!</Heading>
|
||||
<Body>
|
||||
Start building out your table structure<br />
|
||||
by adding some columns
|
||||
</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
</Table>
|
||||
{#key id}
|
||||
<div in:fade={{ delay: 200, duration: 100 }}>
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
export let rowCount
|
||||
export let type
|
||||
export let disableSorting = false
|
||||
export let customPlaceholder = false
|
||||
|
||||
let selectedRows = []
|
||||
let editableColumn
|
||||
|
@ -144,6 +145,7 @@
|
|||
{customRenderers}
|
||||
{rowCount}
|
||||
{disableSorting}
|
||||
{customPlaceholder}
|
||||
bind:selectedRows
|
||||
allowSelectRows={allowEditing && !isUsersTable}
|
||||
allowEditRows={allowEditing}
|
||||
|
@ -153,7 +155,9 @@
|
|||
on:editrow={e => editRow(e.detail)}
|
||||
on:clickrelationship={e => selectRelationship(e.detail)}
|
||||
on:sort
|
||||
/>
|
||||
>
|
||||
<slot slot="placeholder" name="placeholder" />
|
||||
</Table>
|
||||
</div>
|
||||
{/key}
|
||||
</Layout>
|
||||
|
|
|
@ -2,10 +2,21 @@
|
|||
import { ActionButton, Modal } from "@budibase/bbui"
|
||||
import CreateEditColumn from "../modals/CreateEditColumn.svelte"
|
||||
|
||||
export let highlighted = false
|
||||
export let disabled = false
|
||||
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<ActionButton icon="TableColumnAddRight" quiet size="S" on:click={modal.show}>
|
||||
<ActionButton
|
||||
{disabled}
|
||||
selected={highlighted}
|
||||
emphasized={highlighted}
|
||||
icon="TableColumnAddRight"
|
||||
quiet
|
||||
size="S"
|
||||
on:click={modal.show}
|
||||
>
|
||||
Create column
|
||||
</ActionButton>
|
||||
<Modal bind:this={modal}>
|
||||
|
|
|
@ -4,11 +4,21 @@
|
|||
|
||||
export let modalContentComponent = CreateEditRow
|
||||
export let title = "Create row"
|
||||
export let disabled = false
|
||||
export let highlighted = false
|
||||
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<ActionButton icon="TableRowAddBottom" size="S" quiet on:click={modal.show}>
|
||||
<ActionButton
|
||||
{disabled}
|
||||
emphasized={highlighted}
|
||||
selected={highlighted}
|
||||
icon="TableRowAddBottom"
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
>
|
||||
{title}
|
||||
</ActionButton>
|
||||
<Modal bind:this={modal}>
|
||||
|
|
|
@ -2,10 +2,18 @@
|
|||
import { Modal, ActionButton } from "@budibase/bbui"
|
||||
import CreateViewModal from "../modals/CreateViewModal.svelte"
|
||||
|
||||
export let disabled = false
|
||||
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<ActionButton icon="CollectionAdd" size="S" quiet on:click={modal.show}>
|
||||
<ActionButton
|
||||
{disabled}
|
||||
icon="CollectionAdd"
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
>
|
||||
Create view
|
||||
</ActionButton>
|
||||
<Modal bind:this={modal}>
|
||||
|
|
Loading…
Reference in a new issue