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>
<Modal
{_bb}
{model}
{table}
onClosed={dropdown.hide}
on:newRecord={() => dispatch('newRecord')} />
on:newRow={() => dispatch('newRow')} />
</DropdownMenu> -->
<!-- <style>

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
// 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 => {
params.data[params.colDef.field] = parseFloat(params.newValue)
return true