Updating data grid components which had model/record still defined in them.

This commit is contained in:
mike12345567 2020-10-12 21:31:58 +01:00
parent 20301cb883
commit 416a7598c6
6 changed files with 54 additions and 54 deletions

View File

@ -22,9 +22,9 @@
<h5>Edit Attachment(s)</h5> <h5>Edit Attachment(s)</h5>
<Modal <Modal
{_bb} {_bb}
{model} {table}
onClosed={dropdown.hide} onClosed={dropdown.hide}
on:newRecord={() => dispatch('newRecord')} /> on:newRow={() => dispatch('newRow')} />
</DropdownMenu> --> </DropdownMenu> -->
<!-- <style> <!-- <style>

View File

@ -3,7 +3,7 @@
import { number } from "./valueSetters" import { number } from "./valueSetters"
import { getRenderer } from "./customRenderer" import { getRenderer } from "./customRenderer"
// These maps need to be set up to handle whatever types that are used in the models. // These maps need to be set up to handle whatever types that are used in the tables.
const setters = new Map([["number", number]]) const setters = new Map([["number", number]])
import fetchData from "../fetchData.js" import fetchData from "../fetchData.js"
@ -23,7 +23,7 @@
let data let data
let columnDefs let columnDefs
let selectedRows = [] let selectedRows = []
let model let table
let options = { let options = {
defaultColDef: { defaultColDef: {
flex: 1, flex: 1,
@ -35,10 +35,10 @@
} }
onMount(async () => { onMount(async () => {
if (datasource.modelId) { if (datasource.tableId) {
const jsonModel = await _bb.api.get(`/api/models/${datasource.modelId}`) const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
model = await jsonModel.json() table = await jsonTable.json()
const { schema } = model const { schema } = table
if (!isEmpty(datasource)) { if (!isEmpty(datasource)) {
data = await fetchData(datasource) data = await fetchData(datasource)
columnDefs = Object.keys(schema).map((key, i) => { columnDefs = Object.keys(schema).map((key, i) => {
@ -69,37 +69,37 @@
const shouldHideField = name => { const shouldHideField = name => {
if (name.startsWith("_")) return true if (name.startsWith("_")) return true
// always 'record' // always 'row'
if (name === "type") return true if (name === "type") return true
// tables are always tied to a single modelId, this is irrelevant // tables are always tied to a single tableId, this is irrelevant
if (name === "modelId") return true if (name === "tableId") return true
return false return false
} }
const handleNewRecord = async () => { const handleNewRow = async () => {
data = await fetchData(datasource) data = await fetchData(datasource)
} }
const handleUpdate = ({ detail }) => { const handleUpdate = ({ detail }) => {
data[detail.row] = detail.data data[detail.row] = detail.data
updateRecord(detail.data) updateRow(detail.data)
} }
const updateRecord = async record => { const updateRow = async row => {
const response = await _bb.api.patch( const response = await _bb.api.patch(
`/api/${record.modelId}/records/${record._id}`, `/api/${row.tableId}/rows/${row._id}`,
record row
) )
const json = await response.json() const json = await response.json()
} }
const deleteRecords = async () => { const deleteRows = async () => {
const response = await _bb.api.post(`/api/${datasource.name}/records`, { const response = await _bb.api.post(`/api/${datasource.name}/rows`, {
records: selectedRows, rows: selectedRows,
type: "delete", type: "delete",
}) })
data = data.filter(record => !selectedRows.includes(record)) data = data.filter(row => !selectedRows.includes(row))
selectedRows = [] selectedRows = []
} }
</script> </script>
@ -114,9 +114,9 @@
{#if dataLoaded} {#if dataLoaded}
{#if editable} {#if editable}
<div class="controls"> <div class="controls">
<CreateRowButton {_bb} {model} on:newRecord={handleNewRecord} /> <CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
{#if selectedRows.length > 0} {#if selectedRows.length > 0}
<DeleteButton text small on:click={deleteRecords}> <DeleteButton text small on:click={deleteRows}>
<Icon name="addrow" /> <Icon name="addrow" />
Delete {selectedRows.length} row(s) Delete {selectedRows.length} row(s)
</DeleteButton> </DeleteButton>

View File

@ -8,7 +8,7 @@
let anchor let anchor
let dropdown let dropdown
export let _bb, model export let _bb, table
</script> </script>
<div bind:this={anchor}> <div bind:this={anchor}>
@ -21,9 +21,9 @@
<h5>Add New Row</h5> <h5>Add New Row</h5>
<Modal <Modal
{_bb} {_bb}
{model} {table}
onClosed={dropdown.hide} onClosed={dropdown.hide}
on:newRecord={() => dispatch('newRecord')} /> on:newRow={() => dispatch('newRow')} />
</DropdownMenu> </DropdownMenu>
<style> <style>

View File

@ -14,14 +14,14 @@
} }
export let _bb export let _bb
export let model export let table
export let onClosed export let onClosed
let record = { modelId: model._id } let row = { tableId: table._id }
let store = _bb.store let store = _bb.store
let schema = model.schema let schema = table.schema
let saved = false let saved = false
let recordId let rowId
let isNew = true let isNew = true
let errors = {} let errors = {}
@ -34,32 +34,32 @@
const save = debounce(async () => { const save = debounce(async () => {
for (let field of fields) { for (let field of fields) {
// Assign defaults to empty fields to prevent validation issues // Assign defaults to empty fields to prevent validation issues
if (!(field in record)) { if (!(field in row)) {
record[field] = DEFAULTS_FOR_TYPE[schema[field].type] row[field] = DEFAULTS_FOR_TYPE[schema[field].type]
} }
} }
const SAVE_RECORD_URL = `/api/${model._id}/records` const SAVE_ROW_URL = `/api/${table._id}/rows`
const response = await _bb.api.post(SAVE_RECORD_URL, record) const response = await _bb.api.post(SAVE_ROW_URL, row)
const json = await response.json() const json = await response.json()
if (response.status === 200) { if (response.status === 200) {
store.update(state => { store.update(state => {
state[model._id] = state[model._id] state[table._id] = state[table._id]
? [...state[model._id], json] ? [...state[table._id], json]
: [json] : [json]
return state return state
}) })
errors = {} errors = {}
// wipe form, if new record, otherwise update // wipe form, if new row, otherwise update
// model to get new _rev // table to get new _rev
record = isNew ? { modelId: model._id } : json row = isNew ? { tableId: table._id } : json
onClosed() onClosed()
dispatch("newRecord") dispatch("newRow")
} }
if (response.status === 400) { if (response.status === 400) {
@ -69,19 +69,19 @@
onMount(async () => { onMount(async () => {
const routeParams = _bb.routeParams() const routeParams = _bb.routeParams()
recordId = rowId =
Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0]) Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
isNew = !recordId || recordId === "new" isNew = !rowId || rowId === "new"
if (isNew) { if (isNew) {
record = { modelId: model } row = { tableId: table }
return return
} }
const GET_RECORD_URL = `/api/${model._id}/records/${recordId}` const GET_ROW_URL = `/api/${table._id}/rows/${rowId}`
const response = await _bb.api.get(GET_RECORD_URL) const response = await _bb.api.get(GET_ROW_URL)
const json = await response.json() const json = await response.json()
record = json row = json
}) })
</script> </script>
@ -94,21 +94,21 @@
<div class="form-item"> <div class="form-item">
<Label small forAttr={'form-stacked-text'}>{field}</Label> <Label small forAttr={'form-stacked-text'}>{field}</Label>
{#if schema[field].type === 'string' && schema[field].constraints.inclusion} {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
<select bind:value={record[field]}> <select bind:value={row[field]}>
{#each schema[field].constraints.inclusion as opt} {#each schema[field].constraints.inclusion as opt}
<option>{opt}</option> <option>{opt}</option>
{/each} {/each}
</select> </select>
{:else if schema[field].type === 'datetime'} {:else if schema[field].type === 'datetime'}
<DatePicker bind:value={record[field]} /> <DatePicker bind:value={row[field]} />
{:else if schema[field].type === 'boolean'} {:else if schema[field].type === 'boolean'}
<input class="input" type="checkbox" bind:checked={record[field]} /> <input class="input" type="checkbox" bind:checked={row[field]} />
{:else if schema[field].type === 'number'} {:else if schema[field].type === 'number'}
<input class="input" type="number" bind:value={record[field]} /> <input class="input" type="number" bind:value={row[field]} />
{:else if schema[field].type === 'string'} {:else if schema[field].type === 'string'}
<input class="input" type="text" bind:value={record[field]} /> <input class="input" type="text" bind:value={row[field]} />
{:else if schema[field].type === 'attachment'} {:else if schema[field].type === 'attachment'}
<Dropzone bind:files={record[field]} /> <Dropzone bind:files={row[field]} />
{/if} {/if}
</div> </div>
<hr /> <hr />

View File

@ -9,7 +9,7 @@ const renderers = new Map([
["boolean", booleanRenderer], ["boolean", booleanRenderer],
["attachment", attachmentRenderer], ["attachment", attachmentRenderer],
["options", optionsRenderer], ["options", optionsRenderer],
["link", linkedRecordRenderer], ["link", linkedRowRenderer],
]) ])
export function getRenderer({ type, constraints }, editable) { export function getRenderer({ type, constraints }, editable) {
@ -103,7 +103,7 @@ function optionsRenderer({ inclusion }, editable) {
} }
} }
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
function linkedRecordRenderer(constraints, editable) { function linkedRowRenderer(constraints, editable) {
return params => { return params => {
let container = document.createElement("div") let container = document.createElement("div")
container.style.display = "grid" container.style.display = "grid"

View File

@ -1,5 +1,5 @@
// https://www.ag-grid.com/javascript-grid-value-setters/ // https://www.ag-grid.com/javascript-grid-value-setters/
// These handles values and makes sure they adhere to the data type provided by the model // These handles values and makes sure they adhere to the data type provided by the table
export const number = params => { export const number = params => {
params.data[params.colDef.field] = parseFloat(params.newValue) params.data[params.colDef.field] = parseFloat(params.newValue)
return true return true