Updating data grid components which had model/record still defined in them.
This commit is contained in:
parent
20301cb883
commit
416a7598c6
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue