CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 22:46:09 +12:00
Code Issues Projects Releases Wiki Activity

Integrate sheet into data section better

Browse source
This commit is contained in:
Andrew Kingston 2023-03-02 17:20:51 +00:00
parent 540906cf62
commit 5b590a5976
6 changed files with 178 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

331
packages/builder/src/components/backend/DataTable/DataTable.svelte
View file

@ -18,142 +18,146 @@
Pagination,
Heading,
Body,
Modal,
Layout,
notifications,
} from "@budibase/bbui"
import { fetchData, Sheet } from "@budibase/frontend-core"
import { API } from "api"
import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
// let hideAutocolumns = true
// let filters
//
// $: isUsersTable = $tables.selected?._id === TableNames.USERS
// $: type = $tables.selected?.type
// $: isInternal = type !== "external"
// $: schema = $tables.selected?.schema
// $: enrichedSchema = enrichSchema($tables.selected?.schema)
// $: id = $tables.selected?._id
// $: fetch = createFetch(id)
// $: hasCols = checkHasCols(schema)
// $: hasRows = !!$fetch.rows?.length
// $: showError($fetch.error)
// $: id, (filters = null)
//
// let appliedFilter
// let rawFilter
// let appliedSort
// let selectedRows = []
//
// $: enrichedSchema,
// () => {
// appliedFilter = null
// rawFilter = null
// appliedSort = null
// selectedRows = []
// }
//
// $: if (Number.isInteger($fetch.pageNumber)) {
// selectedRows = []
// }
//
// const showError = error => {
// if (error) {
// notifications.error(error?.message || "Unable to fetch data.")
// }
// }
//
// const enrichSchema = schema => {
// let tempSchema = { ...schema }
// tempSchema._id = {
// type: "internal",
// editable: false,
// displayName: "ID",
// autocolumn: true,
// }
// if (isInternal) {
// tempSchema._rev = {
// type: "internal",
// editable: false,
// displayName: "Revision",
// autocolumn: true,
// }
// }
//
// 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({
// API,
// datasource: {
// tableId,
// type: "table",
// },
// options: {
// schema,
// limit: 10,
// paginate: true,
// },
// })
// }
//
// // Fetch data whenever sorting option changes
// const onSort = async e => {
// const sort = {
// sortColumn: e.detail.column,
// sortOrder: e.detail.order,
// }
// await fetch.update(sort)
// appliedSort = { ...sort }
// appliedSort.sortOrder = appliedSort.sortOrder.toLowerCase()
// selectedRows = []
// }
//
// // Fetch data whenever filters change
// const onFilter = e => {
// filters = e.detail
// fetch.update({
// filter: filters,
// })
// appliedFilter = e.detail
// }
//
// // Fetch data whenever schema changes
// const onUpdateColumns = () => {
// selectedRows = []
// fetch.refresh()
// }
//
// // Fetch data whenever rows are modified. Unfortunately we have to lose
// // our pagination place, as our bookmarks will have shifted.
// const onUpdateRows = () => {
// selectedRows = []
// fetch.refresh()
// }
//
// // When importing new rows it is better to reinitialise request/paging data.
// // Not doing so causes inconsistency in paging behaviour and content.
// const onImportData = () => {
// fetch.getInitialData()
// }
let createColumnModal
let hideAutocolumns = true
let filters
let hasRows = true
$: isUsersTable = $tables.selected?._id === TableNames.USERS
$: type = $tables.selected?.type
$: isInternal = type !== "external"
$: schema = $tables.selected?.schema
$: enrichedSchema = enrichSchema($tables.selected?.schema)
$: id = $tables.selected?._id
$: hasCols = checkHasCols(schema)
$: id, (filters = null)
let appliedFilter
let rawFilter
let appliedSort
let selectedRows = []
$: enrichedSchema,
() => {
appliedFilter = null
rawFilter = null
appliedSort = null
selectedRows = []
}
const enrichSchema = schema => {
let tempSchema = { ...schema }
tempSchema._id = {
type: "internal",
editable: false,
displayName: "ID",
autocolumn: true,
}
if (isInternal) {
tempSchema._rev = {
type: "internal",
editable: false,
displayName: "Revision",
autocolumn: true,
}
}
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
}
// Fetch data whenever sorting option changes
const onSort = async e => {
const sort = {
sortColumn: e.detail.column,
sortOrder: e.detail.order,
}
appliedSort = { ...sort }
appliedSort.sortOrder = appliedSort.sortOrder.toLowerCase()
selectedRows = []
}
// Fetch data whenever filters change
const onFilter = e => {
filters = e.detail
appliedFilter = e.detail
}
</script>
<div>
<Sheet tableId={$tables.selected?._id} {API} />
<div class="wrapper">
<div class="buttons">
<div class="left-buttons">
<CreateColumnButton
highlighted={!hasCols || !hasRows}
on:updatecolumns={null}
/>
{#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={null}
/>
{/if}
<ImportButton
disabled={$tables.selected?._id === "ta_users"}
tableId={$tables.selected?._id}
on:importrows={null}
/>
<ExportButton
disabled={!hasRows || !hasCols}
view={$tables.selected?._id}
filters={appliedFilter}
sorting={appliedSort}
{selectedRows}
/>
{#key id}
<TableFilterButton
{schema}
{filters}
on:change={onFilter}
disabled={!hasCols}
tableId={id}
/>
{/key}
</div>
</div>
<div class="sheet">
<Sheet
tableId={$tables.selected?._id}
{API}
filter={filters}
on:add-column={createColumnModal.show}
/>
</div>
</div>
<!--<div>-->
@ -175,60 +179,6 @@
<!-- }}-->
<!-- customPlaceholder-->
<!-- >-->
<!-- <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-->
<!-- disabled={$tables.selected?._id === "ta_users"}-->
<!-- tableId={$tables.selected?._id}-->
<!-- on:importrows={onImportData}-->
<!-- />-->
<!-- <ExportButton-->
<!-- disabled={!hasRows || !hasCols}-->
<!-- view={$tables.selected?._id}-->
<!-- filters={appliedFilter}-->
<!-- sorting={appliedSort}-->
<!-- {selectedRows}-->
<!-- />-->
<!-- {#key id}-->
<!-- <TableFilterButton-->
<!-- {schema}-->
<!-- {filters}-->
<!-- on:change={onFilter}-->
<!-- disabled={!hasCols}-->
<!-- tableId={id}-->
<!-- />-->
<!-- {/key}-->
<!-- </div>-->
<!-- </div>-->
<!-- <div slot="placeholder">-->
<!-- <Layout gap="S">-->
<!-- {#if !hasCols}-->
@ -262,12 +212,23 @@
<!-- {/key}-->
<!--</div>-->
<Modal bind:this={createColumnModal}>
<CreateEditColumn on:updatecolumns />
</Modal>
<style>
div {
.wrapper {
flex: 1 1 auto;
margin: -28px -40px -40px -40px;
display: flex;
flex-direction: column;
background: var(--background);
}
.sheet {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.pagination {
display: flex;
@ -277,12 +238,14 @@
margin-top: var(--spacing-xl);
}
.buttons {
flex: 1 1 auto;
flex: 0 0 48px;
border-bottom: 2px solid var(--spectrum-global-color-gray-200);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 0 8px;
}
.left-buttons,
.right-buttons {

16
packages/frontend-core/src/components/sheet/HeaderRow.svelte
View file

@ -5,7 +5,7 @@
import { getIconForField } from "./utils"
import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
const { visibleColumns, reorder } = getContext("spreadsheet")
const { visibleColumns, reorder, dispatch } = getContext("spreadsheet")
</script>
<div class="header">
@ -32,6 +32,11 @@
{/each}
</div>
</SheetScrollWrapper>
<div class="add-column" on:click={() => dispatch("add-column")}>
<SheetCell header width={40} center>
<Icon name="Add" size="S" />
</SheetCell>
</div>
</div>
<style>
@ -44,4 +49,13 @@
.row {
display: flex;
}
.add-column {
width: 40px;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
border-left: 2px solid var(--spectrum-global-color-gray-200);
}
</style>

10
packages/frontend-core/src/components/sheet/Sheet.svelte
View file

@ -1,5 +1,5 @@
<script>
import { setContext } from "svelte"
import { setContext, createEventDispatcher } from "svelte"
import { writable } from "svelte/store"
import { createReorderStores } from "./stores/reorder"
import { createViewportStores } from "./stores/viewport"
@ -21,7 +21,7 @@
export let allowAddColumns = true
export let allowAddRows = true
export let allowSelectRows = true
// export let filter
export let filter
// export let sortColumn
// export let sortOrder
@ -30,8 +30,10 @@
const rand = Math.random()
// State stores
const dispatch = createEventDispatcher()
const config = writable({
tableId,
filter,
allowAddRows,
allowAddColumns,
allowSelectRows,
@ -61,6 +63,7 @@
scroll,
hoveredRowId,
config,
dispatch,
}
const { rows, schema } = createRowsStore(context)
context = { ...context, rows, schema }
@ -75,6 +78,7 @@
// Keep config store up to date
$: config.set({
tableId,
filter,
allowAddColumns,
allowAddRows,
allowSelectRows,
@ -85,7 +89,7 @@
</script>
<div class="sheet" style="--cell-height:{cellHeight}px;" id="sheet-{rand}">
<SheetControls />
<!--<SheetControls />-->
<div class="sheet-data">
<StickyColumn />
<div class="sheet-main">

5
packages/frontend-core/src/components/sheet/SheetCell.svelte
View file

@ -8,6 +8,7 @@
export let reorderSource = false
export let reorderTarget = false
export let width = ""
export let center = false
</script>
<div
@ -20,6 +21,7 @@
class:selected
class:reorder-source={reorderSource}
class:reorder-target={reorderTarget}
class:center
on:focus
on:click
on:mousedown
@ -61,6 +63,9 @@
.cell.row-hovered {
background: var(--cell-background-hover);
}
.cell.center {
justify-content: center;
}
/* Header cells */
.cell.header {

2
packages/frontend-core/src/components/sheet/StickyColumn.svelte
View file

@ -145,7 +145,7 @@
on:click={addRow}
width="40"
>
<Icon hoverable name="Add" size="S" />
<Icon name="Add" size="S" />
</SheetCell>
{#if $stickyColumn}
<SheetCell

12
packages/frontend-core/src/components/sheet/stores/rows.js
View file

@ -4,8 +4,9 @@ import { fetchData } from "../../../fetch/fetchData"
import { notifications } from "@budibase/bbui"
export const createRowsStore = context => {
const { config, filter, API, scroll } = context
const { config, API, scroll } = context
const tableId = derived(config, $config => $config.tableId)
const filter = derived(config, $config => $config.filter)
// Flag for whether this is the first time loading our fetch
let loaded = false
@ -19,7 +20,7 @@ export const createRowsStore = context => {
// Local stores for managing fetching data
const query = derived(filter, $filter => buildLuceneQuery($filter))
const fetch = derived(tableId, $tableId => {
const fetch = derived([tableId, filter], ([$tableId, $filter]) => {
if (!$tableId) {
return null
}
@ -43,13 +44,6 @@ export const createRowsStore = context => {
})
})
// Update fetch when query changes
query.subscribe($query => {
get(fetch)?.update({
query: $query,
})
})
// Observe each data fetch and extract some data
fetch.subscribe($fetch => {
if (!$fetch) {