Merge branch 'master' of github.com:Budibase/budibase into master
This commit is contained in:
Michael Shanks
commit
9e6b116ae3
File diff suppressed because it is too large
Load Diff
|
|
@ -11,8 +11,9 @@
|
|||
"lerna": "3.14.1",
|
||||
"prettier": "^1.19.1",
|
||||
"prettier-plugin-svelte": "^0.7.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"svelte": "^3.18.1"
|
||||
"svelte": "^3.28.0"
|
||||
},
|
||||
"scripts": {
|
||||
"bootstrap": "lerna bootstrap",
|
||||
|
|
@ -20,6 +21,8 @@
|
|||
"initialise": "lerna run initialise",
|
||||
"publishdev": "lerna run publishdev",
|
||||
"publishnpm": "yarn build && lerna publish --force-publish",
|
||||
"restore": "npm run clean && npm run bootstrap && npm run build",
|
||||
"nuke": "rimraf ~/.budibase && npm run restore",
|
||||
"clean": "lerna clean",
|
||||
"dev": "node ./scripts/symlinkDev.js && lerna run --parallel dev:builder",
|
||||
"test": "lerna run test",
|
||||
|
|
@ -32,4 +35,4 @@
|
|||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,4 +116,4 @@
|
|||
"svelte-jester": "^1.0.6"
|
||||
},
|
||||
"gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
|
||||
}
|
||||
}
|
||||
|
|
@ -103,7 +103,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<DropdownMenu
|
||||
class="menu"
|
||||
bind:this={dropdown}
|
||||
on:click={hideDropdown}
|
||||
width="170px"
|
||||
|
|
|
|||
|
|
@ -313,6 +313,43 @@ export default {
|
|||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "Grid",
|
||||
_component: "@budibase/standard-components/datagrid",
|
||||
description:
|
||||
"a datagrid component with functionality to add, remove and edit rows.",
|
||||
icon: "ri-file-list-line",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Source",
|
||||
key: "datasource",
|
||||
control: ModelViewSelect,
|
||||
},
|
||||
{
|
||||
label: "Editable",
|
||||
key: "editable",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Theme",
|
||||
key: "theme",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"alpine",
|
||||
"alpine-dark",
|
||||
"balham",
|
||||
"balham-dark",
|
||||
"material",
|
||||
],
|
||||
placeholder: "alpine",
|
||||
},
|
||||
],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/stackedlist",
|
||||
name: "Stacked List",
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
{
|
||||
"categories": [
|
||||
{
|
||||
"name": "Basic",
|
||||
"components": [
|
||||
{
|
||||
"component": "Container",
|
||||
"description": "This component contains things within itself",
|
||||
"icon": "ri-layout-row-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Text",
|
||||
"description": "This is a simple text component",
|
||||
"icon": "ri-t-box-fill",
|
||||
"commonProps": {
|
||||
},
|
||||
"type": [
|
||||
{
|
||||
"_component": "@budibase/standard-components/header",
|
||||
"name": "Headline",
|
||||
"icon": "headline",
|
||||
"props": {
|
||||
"type": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
"h1",
|
||||
"h2"
|
||||
],
|
||||
"default": "h1"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"_component": "@budibase/standard-components/text",
|
||||
"name": "Paragraph",
|
||||
"icon": "paragraph",
|
||||
"props": {
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"component": "Button",
|
||||
"description": "A basic html button that is ready for styling",
|
||||
"icon": "ri-radio-button-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Icon",
|
||||
"description": "A basic component for displaying icons",
|
||||
"icon": "ri-sun-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Avatar",
|
||||
"description": "A basic component for rendering an avatar",
|
||||
"icon": "ri-user-smile-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Link",
|
||||
"description": "A basic link component for internal and external links",
|
||||
"icon": "ri-link",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -33,6 +33,7 @@ exports.save = async function(ctx) {
|
|||
views: {},
|
||||
...rest,
|
||||
}
|
||||
let renameDocs = []
|
||||
|
||||
// if the model obj had an _id then it will have been retrieved
|
||||
const oldModel = ctx.preExisting
|
||||
|
|
@ -49,14 +50,11 @@ exports.save = async function(ctx) {
|
|||
include_docs: true,
|
||||
})
|
||||
)
|
||||
|
||||
const docs = records.rows.map(({ doc }) => {
|
||||
renameDocs = records.rows.map(({ doc }) => {
|
||||
doc[_rename.updated] = doc[_rename.old]
|
||||
delete doc[_rename.old]
|
||||
return doc
|
||||
})
|
||||
|
||||
await db.bulkDocs(docs)
|
||||
delete modelToSave._rename
|
||||
}
|
||||
|
||||
|
|
@ -69,9 +67,6 @@ exports.save = async function(ctx) {
|
|||
modelView.schema = modelToSave.schema
|
||||
}
|
||||
|
||||
const result = await db.post(modelToSave)
|
||||
modelToSave._rev = result.rev
|
||||
|
||||
// update linked records
|
||||
await linkRecords.updateLinks({
|
||||
instanceId,
|
||||
|
|
@ -82,6 +77,14 @@ exports.save = async function(ctx) {
|
|||
oldModel: oldModel,
|
||||
})
|
||||
|
||||
// don't perform any updates until relationships have been
|
||||
// checked by the updateLinks function
|
||||
if (renameDocs.length !== 0) {
|
||||
await db.bulkDocs(renameDocs)
|
||||
}
|
||||
const result = await db.post(modelToSave)
|
||||
modelToSave._rev = result.rev
|
||||
|
||||
ctx.eventEmitter &&
|
||||
ctx.eventEmitter.emitModel(`model:save`, instanceId, modelToSave)
|
||||
|
||||
|
|
@ -105,11 +108,8 @@ exports.save = async function(ctx) {
|
|||
exports.destroy = async function(ctx) {
|
||||
const instanceId = ctx.user.instanceId
|
||||
const db = new CouchDB(instanceId)
|
||||
|
||||
const modelToDelete = await db.get(ctx.params.modelId)
|
||||
|
||||
await db.remove(modelToDelete)
|
||||
|
||||
// Delete all records for that model
|
||||
const records = await db.allDocs(
|
||||
getRecordParams(ctx.params.modelId, null, {
|
||||
|
|
@ -117,7 +117,7 @@ exports.destroy = async function(ctx) {
|
|||
})
|
||||
)
|
||||
await db.bulkDocs(
|
||||
records.rows.map(record => ({ _id: record.id, _deleted: true }))
|
||||
records.rows.map(record => ({ ...record.doc, _deleted: true }))
|
||||
)
|
||||
|
||||
// update linked records
|
||||
|
|
@ -127,6 +127,9 @@ exports.destroy = async function(ctx) {
|
|||
model: modelToDelete,
|
||||
})
|
||||
|
||||
// don't remove the table itself until very end
|
||||
await db.remove(modelToDelete)
|
||||
|
||||
ctx.eventEmitter &&
|
||||
ctx.eventEmitter.emitModel(`model:delete`, instanceId, modelToDelete)
|
||||
ctx.status = 200
|
||||
|
|
|
|||
|
|
@ -68,64 +68,11 @@ exports.patch = async function(ctx) {
|
|||
}
|
||||
|
||||
exports.save = async function(ctx) {
|
||||
const instanceId = ctx.user.instanceId
|
||||
const db = new CouchDB(instanceId)
|
||||
let record = ctx.request.body
|
||||
record.modelId = ctx.params.modelId
|
||||
|
||||
if (!record._rev && !record._id) {
|
||||
record._id = generateRecordID(record.modelId)
|
||||
if (ctx.request.body.type === "delete") {
|
||||
await bulkDelete(ctx)
|
||||
} else {
|
||||
await saveRecord(ctx)
|
||||
}
|
||||
|
||||
// if the record obj had an _id then it will have been retrieved
|
||||
const existingRecord = ctx.preExisting
|
||||
|
||||
const model = await db.get(record.modelId)
|
||||
|
||||
record = coerceRecordValues(record, model)
|
||||
|
||||
const validateResult = await validate({
|
||||
record,
|
||||
model,
|
||||
})
|
||||
|
||||
if (!validateResult.valid) {
|
||||
ctx.status = 400
|
||||
ctx.body = {
|
||||
status: 400,
|
||||
errors: validateResult.errors,
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// make sure link records are up to date
|
||||
record = await linkRecords.updateLinks({
|
||||
instanceId,
|
||||
eventType: linkRecords.EventType.RECORD_SAVE,
|
||||
record,
|
||||
modelId: record.modelId,
|
||||
model,
|
||||
})
|
||||
|
||||
if (existingRecord) {
|
||||
const response = await db.put(record)
|
||||
record._rev = response.rev
|
||||
record.type = "record"
|
||||
ctx.body = record
|
||||
ctx.status = 200
|
||||
ctx.message = `${model.name} updated successfully.`
|
||||
return
|
||||
}
|
||||
|
||||
record.type = "record"
|
||||
const response = await db.post(record)
|
||||
record._rev = response.rev
|
||||
|
||||
ctx.eventEmitter &&
|
||||
ctx.eventEmitter.emitRecord(`record:save`, instanceId, record, model)
|
||||
ctx.body = record
|
||||
ctx.status = 200
|
||||
ctx.message = `${model.name} created successfully`
|
||||
}
|
||||
|
||||
exports.fetchView = async function(ctx) {
|
||||
|
|
@ -349,3 +296,87 @@ const TYPE_TRANSFORM_MAP = {
|
|||
false: false,
|
||||
},
|
||||
}
|
||||
|
||||
async function bulkDelete(ctx) {
|
||||
const instanceId = ctx.user.instanceId
|
||||
const { records } = ctx.request.body
|
||||
const db = new CouchDB(ctx.user.instanceId)
|
||||
|
||||
await db.bulkDocs(
|
||||
records.map(
|
||||
record => ({ ...record, _deleted: true }),
|
||||
err => {
|
||||
if (err) {
|
||||
ctx.status = 500
|
||||
} else {
|
||||
records.forEach(record => {
|
||||
ctx.eventEmitter &&
|
||||
ctx.eventEmitter.emitRecord(`record:delete`, instanceId, record)
|
||||
})
|
||||
ctx.status = 200
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
async function saveRecord(ctx) {
|
||||
const instanceId = ctx.user.instanceId
|
||||
const db = new CouchDB(instanceId)
|
||||
let record = ctx.request.body
|
||||
record.modelId = ctx.params.modelId
|
||||
|
||||
if (!record._rev && !record._id) {
|
||||
record._id = generateRecordID(record.modelId)
|
||||
}
|
||||
|
||||
// if the record obj had an _id then it will have been retrieved
|
||||
const existingRecord = ctx.preExisting
|
||||
|
||||
const model = await db.get(record.modelId)
|
||||
|
||||
record = coerceRecordValues(record, model)
|
||||
|
||||
const validateResult = await validate({
|
||||
record,
|
||||
model,
|
||||
})
|
||||
|
||||
if (!validateResult.valid) {
|
||||
ctx.status = 400
|
||||
ctx.body = {
|
||||
status: 400,
|
||||
errors: validateResult.errors,
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// make sure link records are up to date
|
||||
record = await linkRecords.updateLinks({
|
||||
instanceId,
|
||||
eventType: linkRecords.EventType.RECORD_SAVE,
|
||||
record,
|
||||
modelId: record.modelId,
|
||||
model,
|
||||
})
|
||||
|
||||
if (existingRecord) {
|
||||
const response = await db.put(record)
|
||||
record._rev = response.rev
|
||||
record.type = "record"
|
||||
ctx.body = record
|
||||
ctx.status = 200
|
||||
ctx.message = `${model.name} updated successfully.`
|
||||
return
|
||||
}
|
||||
|
||||
record.type = "record"
|
||||
const response = await db.post(record)
|
||||
record._rev = response.rev
|
||||
|
||||
ctx.eventEmitter &&
|
||||
ctx.eventEmitter.emitRecord(`record:save`, instanceId, record, model)
|
||||
ctx.body = record
|
||||
ctx.status = 200
|
||||
ctx.message = `${model.name} created successfully`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ class LinkController {
|
|||
})
|
||||
// now add the docs to be deleted to the bulk operation
|
||||
operations.push(...toDeleteDocs)
|
||||
// replace this field with a simple entry to denote there are links
|
||||
// remove the field from this row, link doc will be added to record on way out
|
||||
delete record[fieldName]
|
||||
}
|
||||
}
|
||||
|
|
@ -234,8 +234,16 @@ class LinkController {
|
|||
for (let fieldName of Object.keys(schema)) {
|
||||
const field = schema[fieldName]
|
||||
if (field.type === "link") {
|
||||
// handle this in a separate try catch, want
|
||||
// the put to bubble up as an error, if can't update
|
||||
// table for some reason
|
||||
let linkedModel
|
||||
try {
|
||||
linkedModel = await this._db.get(field.modelId)
|
||||
} catch (err) {
|
||||
continue
|
||||
}
|
||||
// create the link field in the other model
|
||||
const linkedModel = await this._db.get(field.modelId)
|
||||
linkedModel.schema[field.fieldName] = {
|
||||
name: field.fieldName,
|
||||
type: "link",
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ exports.updateLinks = async function({
|
|||
model,
|
||||
oldModel,
|
||||
}) {
|
||||
const baseReturnObj = record == null ? model : record
|
||||
if (instanceId == null) {
|
||||
throw "Cannot operate without an instance ID."
|
||||
}
|
||||
|
|
@ -50,12 +51,16 @@ exports.updateLinks = async function({
|
|||
arguments[0].modelId = model._id
|
||||
}
|
||||
let linkController = new LinkController(arguments[0])
|
||||
if (
|
||||
!(await linkController.doesModelHaveLinkedFields()) &&
|
||||
(oldModel == null ||
|
||||
!(await linkController.doesModelHaveLinkedFields(oldModel)))
|
||||
) {
|
||||
return record
|
||||
try {
|
||||
if (
|
||||
!(await linkController.doesModelHaveLinkedFields()) &&
|
||||
(oldModel == null ||
|
||||
!(await linkController.doesModelHaveLinkedFields(oldModel)))
|
||||
) {
|
||||
return baseReturnObj
|
||||
}
|
||||
} catch (err) {
|
||||
return baseReturnObj
|
||||
}
|
||||
switch (eventType) {
|
||||
case EventType.RECORD_SAVE:
|
||||
|
|
|
|||
|
|
@ -57,21 +57,26 @@ exports.generateModelID = () => {
|
|||
|
||||
/**
|
||||
* Gets the DB allDocs/query params for retrieving a record.
|
||||
* @param {string} modelId The model in which the records have been stored.
|
||||
* @param {string|null} modelId The model in which the records have been stored.
|
||||
* @param {string|null} recordId The ID of the record which is being specifically queried for. This can be
|
||||
* left null to get all the records in the model.
|
||||
* @param {object} otherProps Any other properties to add to the request.
|
||||
* @returns {object} Parameters which can then be used with an allDocs request.
|
||||
*/
|
||||
exports.getRecordParams = (modelId, recordId = null, otherProps = {}) => {
|
||||
exports.getRecordParams = (
|
||||
modelId = null,
|
||||
recordId = null,
|
||||
otherProps = {}
|
||||
) => {
|
||||
if (modelId == null) {
|
||||
throw "Cannot build params for records without a model ID"
|
||||
return getDocParams(DocumentTypes.RECORD, null, otherProps)
|
||||
} else {
|
||||
const endOfKey =
|
||||
recordId == null
|
||||
? `${modelId}${SEPARATOR}`
|
||||
: `${modelId}${SEPARATOR}${recordId}`
|
||||
return getDocParams(DocumentTypes.RECORD, endOfKey, otherProps)
|
||||
}
|
||||
const endOfKey =
|
||||
recordId == null
|
||||
? `${modelId}${SEPARATOR}`
|
||||
: `${modelId}${SEPARATOR}${recordId}`
|
||||
return getDocParams(DocumentTypes.RECORD, endOfKey, otherProps)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -199,9 +199,15 @@
|
|||
"icon": {
|
||||
"description": "A HTML icon tag",
|
||||
"props": {
|
||||
"icon": "string",
|
||||
"size": {"type": "string", "default": "fa-lg"},
|
||||
"color": {"type": "string", "default": "#000"}
|
||||
"icon": "string",
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "fa-lg"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"default": "#000"
|
||||
}
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
|
|
@ -215,6 +221,25 @@
|
|||
"color": "string"
|
||||
}
|
||||
},
|
||||
"datagrid": {
|
||||
"description": "a datagrid component with functionality to add, remove and edit rows.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"datasource": "models",
|
||||
"editable": "bool",
|
||||
"theme": {
|
||||
"type": "options",
|
||||
"default": "alpine",
|
||||
"options": [
|
||||
"alpine",
|
||||
"alpine-dark",
|
||||
"balham",
|
||||
"balham-dark",
|
||||
"material"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"dataform": {
|
||||
"description": "an HTML table that fetches data from a table or view and displays it.",
|
||||
"data": true,
|
||||
|
|
@ -538,19 +563,34 @@
|
|||
"height": "number",
|
||||
"axisTimeCombinations": "string",
|
||||
"color": "string",
|
||||
"grid": {"type":"string", "default": "horizontal"},
|
||||
"grid": {
|
||||
"type": "string",
|
||||
"default": "horizontal"
|
||||
},
|
||||
"aspectRatio": "number",
|
||||
"dateLabel": "string",
|
||||
"isAnimated": {"type": "bool", "default": true},
|
||||
"isAnimated": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"lineCurve": "string",
|
||||
"locale": "string",
|
||||
"numberFormat": "string",
|
||||
"shouldShowAllDataPoints": {"type": "bool", "default": true},
|
||||
"shouldShowAllDataPoints": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"topicLabel": "string",
|
||||
"valueLabel": "string",
|
||||
"xAxisValueType": {"type":"string", "default": "date"},
|
||||
"xAxisValueType": {
|
||||
"type": "string",
|
||||
"default": "date"
|
||||
},
|
||||
"xAxisScale": "string",
|
||||
"xAxisFormat": {"type":"string", "default": "custom"},
|
||||
"xAxisFormat": {
|
||||
"type": "string",
|
||||
"default": "custom"
|
||||
},
|
||||
"xAxisCustomFormat": "string",
|
||||
"xAxisLabel": "string",
|
||||
"yAxisLabel": "string",
|
||||
|
|
|
|||
|
|
@ -37,13 +37,16 @@
|
|||
"dependencies": {
|
||||
"@beyonk/svelte-googlemaps": "^2.2.0",
|
||||
"@budibase/bbui": "^1.41.0",
|
||||
"@budibase/svelte-ag-grid": "^0.0.13",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"@svelteschool/svelte-forms": "^0.7.0",
|
||||
"britecharts": "^2.16.1",
|
||||
"d3-selection": "^1.4.2",
|
||||
"fast-sort": "^2.2.0",
|
||||
"flatpickr": "^4.6.6",
|
||||
"fusioncharts": "^3.15.1-sr.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"svelte-flatpickr": "^2.4.0",
|
||||
"svelte-flatpickr": "^3.1.0",
|
||||
"svelte-fusioncharts": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import svelte from "rollup-plugin-svelte"
|
|||
import resolve from "rollup-plugin-node-resolve"
|
||||
import commonjs from "@rollup/plugin-commonjs"
|
||||
import postcss from "rollup-plugin-postcss"
|
||||
import { terser } from "rollup-plugin-terser"
|
||||
|
||||
const lodash_fp_exports = ["isEmpty"]
|
||||
|
||||
|
|
@ -16,6 +17,7 @@ export default {
|
|||
},
|
||||
],
|
||||
plugins: [
|
||||
terser(),
|
||||
postcss({
|
||||
plugins: [],
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
|
||||
import AttachmentList from "../../attachments/AttachmentList.svelte"
|
||||
// import Modal from "./Modal.svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let anchor
|
||||
let dropdown
|
||||
|
||||
export let files
|
||||
</script>
|
||||
|
||||
<AttachmentList {files} />
|
||||
<!-- <div bind:this={anchor}>
|
||||
<Button text small on:click={dropdown.show}>
|
||||
<Icon name="edit" />
|
||||
</Button>
|
||||
</div>
|
||||
<DropdownMenu bind:this={dropdown} {anchor} align="left">
|
||||
<h5>Edit Attachment(s)</h5>
|
||||
<Modal
|
||||
{_bb}
|
||||
{model}
|
||||
onClosed={dropdown.hide}
|
||||
on:newRecord={() => dispatch('newRecord')} />
|
||||
</DropdownMenu> -->
|
||||
|
||||
<!-- <style>
|
||||
div {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
place-items: start center;
|
||||
}
|
||||
h5 {
|
||||
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style> -->
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<script>
|
||||
// Import valueSetters and custom renderers
|
||||
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.
|
||||
const setters = new Map([["number", number]])
|
||||
|
||||
import fetchData from "../fetchData.js"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import AgGrid from "@budibase/svelte-ag-grid"
|
||||
import CreateRowButton from "./CreateRow/Button.svelte"
|
||||
import { TextButton as DeleteButton, Icon } from "@budibase/bbui"
|
||||
|
||||
export let _bb
|
||||
export let datasource = {}
|
||||
export let editable
|
||||
export let theme = 'alpine'
|
||||
|
||||
let dataLoaded = false
|
||||
let data
|
||||
let columnDefs
|
||||
let selectedRows = []
|
||||
let model
|
||||
let options = {
|
||||
defaultColDef: {
|
||||
flex: 1,
|
||||
minWidth: 150,
|
||||
filter: true,
|
||||
},
|
||||
rowSelection: editable ? "multiple" : false,
|
||||
suppressRowClickSelection: !editable,
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (datasource.modelId) {
|
||||
const jsonModel = await _bb.api.get(`/api/models/${datasource.modelId}`)
|
||||
model = await jsonModel.json()
|
||||
const { schema } = model
|
||||
if (!isEmpty(datasource)) {
|
||||
data = await fetchData(datasource)
|
||||
columnDefs = Object.keys(schema).map((key, i) => {
|
||||
return {
|
||||
headerCheckboxSelection: i === 0 && editable,
|
||||
checkboxSelection: i === 0 && editable,
|
||||
valueSetter: setters.get(schema[key].type),
|
||||
headerName: key.charAt(0).toUpperCase() + key.slice(1),
|
||||
field: key,
|
||||
hide: shouldHideField(key),
|
||||
sortable: true,
|
||||
editable: editable,
|
||||
cellRenderer: getRenderer(schema[key], editable),
|
||||
autoHeight: true,
|
||||
}
|
||||
})
|
||||
}
|
||||
dataLoaded = true
|
||||
}
|
||||
})
|
||||
|
||||
const isEditable = type =>
|
||||
type !== "boolean" &&
|
||||
type !== "options" &&
|
||||
// type !== "datetime" &&
|
||||
type !== "link" &&
|
||||
type !== "attachment"
|
||||
|
||||
const shouldHideField = name => {
|
||||
if (name.startsWith("_")) return true
|
||||
// always 'record'
|
||||
if (name === "type") return true
|
||||
// tables are always tied to a single modelId, this is irrelevant
|
||||
if (name === "modelId") return true
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const handleNewRecord = async () => {
|
||||
data = await fetchData(datasource)
|
||||
}
|
||||
|
||||
const handleUpdate = ({ detail }) => {
|
||||
data[detail.row] = detail.data
|
||||
updateRecord(detail.data)
|
||||
}
|
||||
|
||||
const updateRecord = async record => {
|
||||
const response = await _bb.api.patch(
|
||||
`/api/${record.modelId}/records/${record._id}`,
|
||||
record
|
||||
)
|
||||
const json = await response.json()
|
||||
}
|
||||
|
||||
const deleteRecords = async () => {
|
||||
const response = await _bb.api.post(`/api/${datasource.name}/records`, {
|
||||
records: selectedRows,
|
||||
type: "delete",
|
||||
})
|
||||
data = data.filter(record => !selectedRows.includes(record))
|
||||
selectedRows = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
{#if dataLoaded}
|
||||
{#if editable}
|
||||
<div class="controls">
|
||||
<CreateRowButton {_bb} {model} on:newRecord={handleNewRecord} />
|
||||
{#if selectedRows.length > 0}
|
||||
<DeleteButton text small on:click={deleteRecords}>
|
||||
<Icon name="addrow" />
|
||||
Delete {selectedRows.length} row(s)
|
||||
</DeleteButton>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<AgGrid
|
||||
{theme}
|
||||
{options}
|
||||
{data}
|
||||
{columnDefs}
|
||||
on:update={handleUpdate}
|
||||
on:select={({ detail }) => (selectedRows = detail)} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
--grid-height: 800px;
|
||||
}
|
||||
.container :global(form) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2);
|
||||
}
|
||||
.controls {
|
||||
margin-bottom: var(--spacing-s);
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
grid-template-columns: auto auto;
|
||||
justify-content: start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
|
||||
import Modal from "./Modal.svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let anchor
|
||||
let dropdown
|
||||
|
||||
export let _bb, model
|
||||
</script>
|
||||
|
||||
<div bind:this={anchor}>
|
||||
<Button text small on:click={dropdown.show}>
|
||||
<Icon name="addrow" />
|
||||
Create New Row
|
||||
</Button>
|
||||
</div>
|
||||
<DropdownMenu bind:this={dropdown} {anchor} align="left">
|
||||
<h5>Add New Row</h5>
|
||||
<Modal
|
||||
{_bb}
|
||||
{model}
|
||||
onClosed={dropdown.hide}
|
||||
on:newRecord={() => dispatch('newRecord')} />
|
||||
</DropdownMenu>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: grid;
|
||||
}
|
||||
h5 {
|
||||
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import { Button, Label, DatePicker } from "@budibase/bbui"
|
||||
import Dropzone from "../../attachments/Dropzone.svelte"
|
||||
import debounce from "lodash.debounce"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
const DEFAULTS_FOR_TYPE = {
|
||||
string: "",
|
||||
boolean: false,
|
||||
number: null,
|
||||
link: [],
|
||||
}
|
||||
|
||||
export let _bb
|
||||
export let model
|
||||
export let onClosed
|
||||
|
||||
let record = { modelId: model._id }
|
||||
let store = _bb.store
|
||||
let schema = model.schema
|
||||
let saved = false
|
||||
let recordId
|
||||
let isNew = true
|
||||
let errors = {}
|
||||
|
||||
$: fields = schema ? Object.keys(schema) : []
|
||||
|
||||
$: errorMessages = Object.entries(errors).map(
|
||||
([field, message]) => `${field} ${message}`
|
||||
)
|
||||
|
||||
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]
|
||||
}
|
||||
}
|
||||
|
||||
const SAVE_RECORD_URL = `/api/${model._id}/records`
|
||||
const response = await _bb.api.post(SAVE_RECORD_URL, record)
|
||||
|
||||
const json = await response.json()
|
||||
|
||||
if (response.status === 200) {
|
||||
store.update(state => {
|
||||
state[model._id] = state[model._id]
|
||||
? [...state[model._id], json]
|
||||
: [json]
|
||||
return state
|
||||
})
|
||||
|
||||
errors = {}
|
||||
|
||||
// wipe form, if new record, otherwise update
|
||||
// model to get new _rev
|
||||
record = isNew ? { modelId: model._id } : json
|
||||
|
||||
onClosed()
|
||||
dispatch("newRecord")
|
||||
}
|
||||
|
||||
if (response.status === 400) {
|
||||
errors = json.errors
|
||||
}
|
||||
})
|
||||
|
||||
onMount(async () => {
|
||||
const routeParams = _bb.routeParams()
|
||||
recordId =
|
||||
Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
|
||||
isNew = !recordId || recordId === "new"
|
||||
|
||||
if (isNew) {
|
||||
record = { modelId: model }
|
||||
return
|
||||
}
|
||||
|
||||
const GET_RECORD_URL = `/api/${model._id}/records/${recordId}`
|
||||
const response = await _bb.api.get(GET_RECORD_URL)
|
||||
const json = await response.json()
|
||||
record = json
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="actions">
|
||||
{#each errorMessages as error}
|
||||
<p class="error">{error}</p>
|
||||
{/each}
|
||||
<form on:submit|preventDefault>
|
||||
{#each fields as field}
|
||||
<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]}>
|
||||
{#each schema[field].constraints.inclusion as opt}
|
||||
<option>{opt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else if schema[field].type === 'datetime'}
|
||||
<DatePicker bind:value={record[field]} />
|
||||
{:else if schema[field].type === 'boolean'}
|
||||
<input class="input" type="checkbox" bind:checked={record[field]} />
|
||||
{:else if schema[field].type === 'number'}
|
||||
<input class="input" type="number" bind:value={record[field]} />
|
||||
{:else if schema[field].type === 'string'}
|
||||
<input class="input" type="text" bind:value={record[field]} />
|
||||
{:else if schema[field].type === 'attachment'}
|
||||
<Dropzone bind:files={record[field]} />
|
||||
{/if}
|
||||
</div>
|
||||
<hr />
|
||||
{/each}
|
||||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="button-margin-3">
|
||||
<Button secondary on:click={onClosed}>Cancel</Button>
|
||||
</div>
|
||||
<div class="button-margin-4">
|
||||
<Button primary on:click={save}>Save</Button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.actions {
|
||||
padding: var(--spacing-l) var(--spacing-xl);
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 20px 30px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
background: var(--grey-1);
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.button-margin-3 {
|
||||
grid-column-start: 3;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.button-margin-4 {
|
||||
grid-column-start: 4;
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import { DatePicker } from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<DatePicker />
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Select } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let value
|
||||
export let options
|
||||
|
||||
$: dispatch("change", value)
|
||||
</script>
|
||||
|
||||
<Select label={false} bind:value>
|
||||
<option value="">Choose an option</option>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
// Custom renderers to handle special types
|
||||
// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
|
||||
|
||||
import AttachmentCell from "./AttachmentCell/Button.svelte"
|
||||
import Select from "./Select/Wrapper.svelte"
|
||||
import DatePicker from "./DateTime/Wrapper.svelte"
|
||||
|
||||
const renderers = new Map([
|
||||
["boolean", booleanRenderer],
|
||||
["attachment", attachmentRenderer],
|
||||
["options", optionsRenderer],
|
||||
["link", linkedRecordRenderer],
|
||||
])
|
||||
|
||||
export function getRenderer({ type, constraints }, editable) {
|
||||
if (renderers.get(type)) {
|
||||
return renderers.get(type)(constraints, editable)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
function booleanRenderer(constraints, editable) {
|
||||
return params => {
|
||||
const toggle = e => {
|
||||
params.value = !params.value
|
||||
params.setValue(e.currentTarget.checked)
|
||||
}
|
||||
let input = document.createElement("input")
|
||||
input.style.display = "grid"
|
||||
input.style.placeItems = "center"
|
||||
input.style.height = "100%"
|
||||
input.type = "checkbox"
|
||||
input.checked = params.value
|
||||
if (editable) {
|
||||
input.addEventListener("click", toggle)
|
||||
} else {
|
||||
input.disabled = true
|
||||
}
|
||||
|
||||
return input
|
||||
}
|
||||
}
|
||||
/* eslint-disable no-unused-vars */
|
||||
function attachmentRenderer(constraints, editable) {
|
||||
return params => {
|
||||
const container = document.createElement("div")
|
||||
|
||||
const attachmentInstance = new AttachmentCell({
|
||||
target: container,
|
||||
props: {
|
||||
files: params.value || [],
|
||||
},
|
||||
})
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
/* eslint-disable no-unused-vars */
|
||||
function dateRenderer(constraints, editable) {
|
||||
return function(params) {
|
||||
const container = document.createElement("div")
|
||||
const toggle = e => {
|
||||
params.setValue(e.detail[0][0])
|
||||
}
|
||||
|
||||
// Options need to be passed in with minTime and maxTime! Needs bbui update.
|
||||
|
||||
const datePickerInstance = new DatePicker({
|
||||
target: container,
|
||||
props: {
|
||||
value: params.value,
|
||||
},
|
||||
})
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
||||
function optionsRenderer({ inclusion }, editable) {
|
||||
return params => {
|
||||
if (!editable) return params.value
|
||||
const container = document.createElement("div")
|
||||
container.style.display = "grid"
|
||||
container.style.placeItems = "center"
|
||||
container.style.height = "100%"
|
||||
const change = e => {
|
||||
params.setValue(e.detail)
|
||||
}
|
||||
|
||||
const selectInstance = new Select({
|
||||
target: container,
|
||||
props: {
|
||||
value: params.value,
|
||||
options: inclusion,
|
||||
},
|
||||
})
|
||||
|
||||
selectInstance.$on("change", change)
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
/* eslint-disable no-unused-vars */
|
||||
function linkedRecordRenderer(constraints, editable) {
|
||||
return params => {
|
||||
let container = document.createElement("div")
|
||||
container.style.display = "grid"
|
||||
container.style.placeItems = "center"
|
||||
container.style.height = "100%"
|
||||
|
||||
container.innerText = params.value.length || 0
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// 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
|
||||
export const number = params => {
|
||||
params.data[params.colDef.field] = parseFloat(params.newValue)
|
||||
return true
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<a href={file.url} target="_blank">
|
||||
<div class="file">
|
||||
{#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
|
||||
<img {width} {height} src={file.url} />
|
||||
<img {width} {height} src={file.url} alt="preview of {file.name}" />
|
||||
{:else}
|
||||
<i class="far fa-file" />
|
||||
{/if}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
width: 75px;
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
|
|||
export { default as link } from "./Link.svelte"
|
||||
export { default as image } from "./Image.svelte"
|
||||
export { default as Navigation } from "./Navigation.svelte"
|
||||
export { default as datagrid } from "./DataGrid/Component.svelte"
|
||||
export { default as datatable } from "./DataTable.svelte"
|
||||
export { default as dataform } from "./DataForm.svelte"
|
||||
export { default as dataformwide } from "./DataFormWide.svelte"
|
||||
|
|
|
|||
14
yarn.lock
14
yarn.lock
|
|
@ -4007,6 +4007,13 @@ rimraf@2.6.3:
|
|||
dependencies:
|
||||
glob "^7.1.3"
|
||||
|
||||
rimraf@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
|
||||
integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
|
||||
dependencies:
|
||||
glob "^7.1.3"
|
||||
|
||||
rollup-plugin-replace@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3"
|
||||
|
|
@ -4393,9 +4400,10 @@ supports-color@^5.3.0:
|
|||
dependencies:
|
||||
has-flag "^3.0.0"
|
||||
|
||||
svelte@^3.18.1:
|
||||
version "3.18.1"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.18.1.tgz#db0f82cc46394ca8c9a9d183995e1ebfeea3bdd0"
|
||||
svelte@^3.28.0:
|
||||
version "3.29.0"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.29.0.tgz#80acac4254341ad8f3301e5ef03f4127ea967d96"
|
||||
integrity sha512-f+A65eyOQ5ujETLy+igNXtlr6AEjAQLYd1yJE1VwNiXMQO5Z/Vmiy3rL+zblV/9jd7rtTTWqO1IcuXsP2Qv0OA==
|
||||
|
||||
table@^5.2.3:
|
||||
version "5.4.6"
|
||||
|
|
|
|||
Loading…
Reference in New Issue