MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into mike-fixes

This commit is contained in:
Michael Shanks 2020-10-16 21:39:51 +01:00
parent 7382da4a60 02bb2357ee
commit 7ab1e9c6fb
39 changed files with 890 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -1,5 +1,5 @@
{
"version": "0.2.1",
"version": "0.2.2",
"npmClient": "yarn",
"packages": [
"packages/*"

6
packages/builder/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/builder",
"version": "0.2.1",
"version": "0.2.2",
"license": "AGPL-3.0",
"private": true,
"scripts": {
@ -63,8 +63,8 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.41.0",
"@budibase/client": "^0.2.1",
"@budibase/bbui": "^1.44.0",
"@budibase/client": "^0.2.2",
"@budibase/colorpicker": "^1.0.1",
"@fortawesome/fontawesome-free": "^5.14.0",
"@sentry/browser": "5.19.1",

18
packages/builder/src/builderStore/store/backend.js
View File

@ -1,4 +1,4 @@
import { writable } from "svelte/store"
import { writable, get } from "svelte/store"
import { cloneDeep } from "lodash/fp"
import api from "../api"
@ -62,16 +62,30 @@ export const getBackendUiStore = () => {
}),
save: async table => {
const updatedTable = cloneDeep(table)
const oldTable = get(store).tables.filter(t => t._id === table._id)[0]
const fieldNames = []
// update any renamed schema keys to reflect their names
for (let key in updatedTable.schema) {
for (let key of Object.keys(updatedTable.schema)) {
// if field name has been seen before remove it
if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
delete updatedTable.schema[key]
continue
}
const field = updatedTable.schema[key]
const oldField = oldTable?.schema[key]
// if the type has changed then revert back to the old field
if (oldField != null && oldField.type !== field.type) {
updatedTable.schema[key] = oldField
}
// field has been renamed
if (field.name && field.name !== key) {
updatedTable.schema[field.name] = field
updatedTable._rename = { old: key, updated: field.name }
delete updatedTable.schema[key]
}
// finally record this field has been used
fieldNames.push(key.toLowerCase())
}
const SAVE_TABLE_URL = `/api/tables`

7
packages/builder/src/builderStore/store/index.js
View File

@ -1,4 +1,4 @@
import { values, cloneDeep } from "lodash/fp"
import { cloneDeep } from "lodash/fp"
import getNewComponentName from "../getNewComponentName"
import { backendUiStore } from "builderStore"
import { writable, get } from "svelte/store"
@ -129,7 +129,10 @@ const setPackage = (store, initial) => async pkg => {
initial.appId = pkg.application._id
initial.pages = pkg.pages
initial.hasAppPackage = true
initial.screens = values(pkg.screens)
initial.screens = [
...Object.values(main_screens),
...Object.values(unauth_screens),
]
initial.builtins = [getBuiltin("##builtin/screenslot")]
initial.appInstances = pkg.application.instances
initial.appId = pkg.application._id

258
packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
View File

@ -1,24 +1,22 @@
import urlSanitize from "./urlSanitize"
import sanitizeUrl from "./sanitizeUrl"
import { rowListUrl } from "./rowListScreen"
export default function(tables) {
return tables.map(table => {
const fields = Object.keys(table.schema)
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Add Row"
return {
name: `${table.name} - New`,
create: () => createScreen(table, heading),
create: () => createScreen(table),
id: NEW_ROW_TEMPLATE,
}
})
}
export const newRowUrl = table => sanitizeUrl(`/${table.name}/new`)
export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
export const newRowUrl = table => urlSanitize(`/${table.name}/new`)
const createScreen = (table, heading) => ({
const createScreen = table => ({
props: {
_id: "",
_id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
_component: "@budibase/standard-components/newrow",
_styles: {
normal: {},
@ -29,43 +27,22 @@ const createScreen = (table, heading) => ({
table: table._id,
_children: [
{
_id: "",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
text: heading,
type: "h1",
_instanceName: "Heading 1",
_children: [],
},
{
_id: "",
_component: "@budibase/standard-components/dataform",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
_instanceName: `${table.name} Form`,
_children: [],
},
{
_id: "",
_id: "ccad6cc135c7947a7ba9c631f655d6e0f",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"align-items": "center",
"justify-content": "flex-end",
width: "700px",
padding: "0px",
background: "white",
"border-radius": "0.5rem",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
margin: "auto",
"margin-top": "20px",
"padding-top": "48px",
"padding-bottom": "48px",
"padding-right": "48px",
"padding-left": "48px",
"margin-bottom": "20px",
},
hover: {},
active: {},
@ -75,37 +52,187 @@ const createScreen = (table, heading) => ({
className: "",
onLoad: [],
type: "div",
_instanceName: "Buttons Container",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Container",
_children: [
{
_id: "",
_component: "@budibase/standard-components/button",
_id: "c6e91622ba7984f468f70bf4bf5120246",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
"margin-right": "20px",
"font-size": "14px",
color: "#757575",
},
hover: {},
active: {},
selected: {},
},
_code: "",
text: "Back",
className: "",
disabled: false,
onClick: [
onLoad: [],
type: "div",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Breadcrumbs",
_children: [
{
parameters: {
url: rowListUrl(table),
_id: "caa33353c252c4931b2a51b48a559a7fc",
_component: "@budibase/standard-components/link",
_styles: {
normal: {
color: "#757575",
"text-transform": "capitalize",
},
hover: {
color: "#4285f4",
},
active: {},
selected: {},
},
"##eventHandlerType": "Navigate To",
_code: "",
url: `/${table.name.toLowerCase()}`,
openInNewTab: false,
text: table.name,
color: "",
hoverColor: "",
underline: false,
fontSize: "",
fontFamily: "initial",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Back Link",
_children: [],
},
{
_id: "c6e218170201040e7a74e2c8304fe1860",
_component: "@budibase/standard-components/text",
_styles: {
normal: {
"margin-right": "4px",
"margin-left": "4px",
},
hover: {},
active: {},
selected: {},
},
_code: "",
text: ">",
type: "none",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Arrow",
_children: [],
},
{
_id: "c799da1fa3a84442e947cc9199518f64c",
_component: "@budibase/standard-components/text",
_styles: {
normal: {
color: "#000000",
},
hover: {},
active: {},
selected: {},
},
_code: "",
text: "New",
type: "none",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Identifier",
_children: [],
},
],
_instanceName: "Back Button",
_children: [],
},
{
_id: "",
_component: "@budibase/standard-components/button",
_id: "cbd1637cd1e274287a3c28ef0bf235d08",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "space-between",
"align-items": "center",
"margin-top": "32px",
"margin-bottom": "32px",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
onLoad: [],
type: "div",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Title Container",
_children: [
{
_id: "c98d3675d04114558bbf28661c5ccfb8e",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {
margin: "0px",
"margin-bottom": "0px",
"margin-right": "0px",
"margin-top": "0px",
"margin-left": "0px",
flex: "1 1 auto",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
text: "New Row",
type: "h3",
_instanceName: "Title",
_children: [],
},
{
_id: "cae402bd3c6a44618a8341bf7ab9ab086",
_component: "@budibase/standard-components/button",
_styles: {
normal: {
background: "#000000",
"border-width": "0",
"border-style": "None",
color: "#fff",
"font-family": "Inter",
"font-weight": "500",
"font-size": "14px",
"margin-left": "16px",
},
hover: {
background: "#4285f4",
},
active: {},
selected: {},
},
_code: "",
text: "Save",
className: "",
disabled: false,
onClick: [
{
parameters: {
contextPath: "data",
tableId: table._id,
},
"##eventHandlerType": "Save Row",
},
{
parameters: {
url: rowListUrl(table),
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "Save Button",
_children: [],
},
],
},
{
_id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
_component: "@budibase/standard-components/dataformwide",
_styles: {
normal: {},
hover: {},
@ -113,25 +240,8 @@ const createScreen = (table, heading) => ({
selected: {},
},
_code: "",
text: "Save",
className: "",
disabled: false,
onClick: [
{
parameters: {
contextPath: "data",
tableId: table._id,
},
"##eventHandlerType": "Save Row",
},
{
parameters: {
url: rowListUrl(table),
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "Save Button",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Form",
_children: [],
},
],

299
packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
View File

@ -1,10 +1,11 @@
import urlSanitize from "./urlSanitize"
import sanitizeUrl from "./sanitizeUrl"
import { rowListUrl } from "./rowListScreen"
export default function(tables) {
return tables.map(table => {
const fields = Object.keys(table.schema)
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail"
const heading = table.primaryDisplay
? `{{ data.${table.primaryDisplay} }}`
: null
return {
name: `${table.name} - Detail`,
create: () => createScreen(table, heading),
@ -14,11 +15,11 @@ export default function(tables) {
}
export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
export const editRowUrl = table => urlSanitize(`/${table.name}/:id`)
export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
const createScreen = (table, heading) => ({
props: {
_id: "",
_id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
_component: "@budibase/standard-components/rowdetail",
_styles: {
normal: {},
@ -29,43 +30,22 @@ const createScreen = (table, heading) => ({
table: table._id,
_children: [
{
_id: "",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
text: heading,
type: "h1",
_instanceName: "Heading 1",
_children: [],
},
{
_id: "",
_component: "@budibase/standard-components/dataform",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
_instanceName: `${table.name} Form`,
_children: [],
},
{
_id: "",
_id: "ccad6cc135c7947a7ba9c631f655d6e0f",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"align-items": "center",
"justify-content": "flex-end",
width: "700px",
padding: "0px",
background: "white",
"border-radius": "0.5rem",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
margin: "auto",
"margin-top": "20px",
"padding-top": "48px",
"padding-bottom": "48px",
"padding-right": "48px",
"padding-left": "48px",
"margin-bottom": "20px",
},
hover: {},
active: {},
@ -75,37 +55,233 @@ const createScreen = (table, heading) => ({
className: "",
onLoad: [],
type: "div",
_instanceName: "Buttons Container",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Container",
_children: [
{
_id: "",
_component: "@budibase/standard-components/button",
_id: "c6e91622ba7984f468f70bf4bf5120246",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
"margin-right": "20px",
"font-size": "14px",
color: "#757575",
},
hover: {},
active: {},
selected: {},
},
_code: "",
text: "Back",
className: "",
disabled: false,
onClick: [
onLoad: [],
type: "div",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Breadcrumbs",
_children: [
{
parameters: {
url: rowListUrl(table),
_id: "caa33353c252c4931b2a51b48a559a7fc",
_component: "@budibase/standard-components/link",
_styles: {
normal: {
color: "#757575",
"text-transform": "capitalize",
},
hover: {
color: "#4285f4",
},
active: {},
selected: {},
},
"##eventHandlerType": "Navigate To",
_code: "",
url: `/${table.name.toLowerCase()}`,
openInNewTab: false,
text: table.name,
color: "",
hoverColor: "",
underline: false,
fontSize: "",
fontFamily: "initial",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Back Link",
_children: [],
},
{
_id: "c6e218170201040e7a74e2c8304fe1860",
_component: "@budibase/standard-components/text",
_styles: {
normal: {
"margin-right": "4px",
"margin-left": "4px",
},
hover: {},
active: {},
selected: {},
},
_code: "",
text: ">",
type: "none",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Arrow",
_children: [],
},
{
_id: "c799da1fa3a84442e947cc9199518f64c",
_component: "@budibase/standard-components/text",
_styles: {
normal: {
color: "#000000",
"text-transform": "capitalize",
},
hover: {},
active: {},
selected: {},
},
_code: "",
text: heading || "Edit",
type: "none",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Identifier",
_children: [],
},
],
_instanceName: "Back Button",
_children: [],
},
{
_id: "",
_component: "@budibase/standard-components/button",
_id: "cbd1637cd1e274287a3c28ef0bf235d08",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "space-between",
"align-items": "center",
"margin-top": "32px",
"margin-bottom": "32px",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
onLoad: [],
type: "div",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Title Container",
_children: [
{
_id: "c98d3675d04114558bbf28661c5ccfb8e",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {
margin: "0px",
"margin-bottom": "0px",
"margin-right": "0px",
"margin-top": "0px",
"margin-left": "0px",
flex: "1 1 auto",
"text-transform": "capitalize",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
text: heading || "Edit Row",
type: "h3",
_instanceName: "Title",
_children: [],
},
{
_id: "c0a162cfb7d1c4bcfa8d24c290ccd1fd6",
_component: "@budibase/standard-components/button",
_styles: {
normal: {
background: "transparent",
"border-width": "0",
"border-style": "None",
color: "#9e9e9e",
"font-family": "Inter",
"font-weight": "500",
"font-size": "14px",
"margin-right": "8px",
"margin-left": "16px",
},
hover: {
background: "transparent",
color: "#4285f4",
},
active: {},
selected: {},
},
_code: "",
text: "Delete",
className: "",
disabled: false,
onClick: [
{
parameters: {
rowId: "{{ data._id }}",
revId: "{{ data._rev }}",
tableId: table._id,
},
"##eventHandlerType": "Delete Row",
},
{
parameters: {
url: rowListUrl(table),
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "Delete Button",
_children: [],
},
{
_id: "cae402bd3c6a44618a8341bf7ab9ab086",
_component: "@budibase/standard-components/button",
_styles: {
normal: {
background: "#000000",
"border-width": "0",
"border-style": "None",
color: "#fff",
"font-family": "Inter",
"font-weight": "500",
"font-size": "14px",
},
hover: {
background: "#4285f4",
},
active: {},
selected: {},
},
_code: "",
text: "Save",
className: "",
disabled: false,
onClick: [
{
parameters: {
contextPath: "data",
tableId: table._id,
},
"##eventHandlerType": "Save Row",
},
{
parameters: {
url: rowListUrl(table),
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "Save Button",
_children: [],
},
],
},
{
_id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
_component: "@budibase/standard-components/dataformwide",
_styles: {
normal: {},
hover: {},
@ -113,19 +289,8 @@ const createScreen = (table, heading) => ({
selected: {},
},
_code: "",
text: "Save",
className: "",
disabled: false,
onClick: [
{
parameters: {
contextPath: "data",
tableId: table._id,
},
"##eventHandlerType": "Save Row",
},
],
_instanceName: "Save Button",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Form",
_children: [],
},
],
@ -134,6 +299,6 @@ const createScreen = (table, heading) => ({
_instanceName: `${table.name} - Detail`,
_code: "",
},
route: editRowUrl(table),
route: rowDetailUrl(table),
name: "",
})

162
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
View File

@ -1,4 +1,4 @@
import urlSanitize from "./urlSanitize"
import sanitizeUrl from "./sanitizeUrl"
import { newRowUrl } from "./newRowScreen"
export default function(tables) {
@ -12,11 +12,11 @@ export default function(tables) {
}
export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
export const rowListUrl = table => urlSanitize(`/${table.name}`)
export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
const createScreen = table => ({
props: {
_id: "",
_id: "c7365379815e4457dbe703a886c2da43b",
_component: "@budibase/standard-components/container",
_styles: {
normal: {},
@ -27,14 +27,23 @@ const createScreen = table => ({
type: "div",
_children: [
{
_id: "",
_id: "cf51241fc063d4d87be032dd509fe0244",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "space-between",
"align-items": "center",
background: "white",
"border-radius": "0.5rem",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
margin: "auto",
"margin-top": "20px",
"border-width": "2px",
"border-color": "rgba(0, 0, 0, 0.1)",
"border-style": "None",
"padding-top": "48px",
"padding-bottom": "48px",
"padding-right": "48px",
"padding-left": "48px",
"margin-bottom": "20px",
},
hover: {},
active: {},
@ -44,69 +53,114 @@ const createScreen = table => ({
className: "",
onLoad: [],
type: "div",
_instanceName: "Header",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Container",
_children: [
{
_id: "",
_component: "@budibase/standard-components/heading",
_id: "c73294c301fd145aabe9bbbbd96a150ac",
_component: "@budibase/standard-components/container",
_styles: {
normal: {},
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "space-between",
"align-items": "center",
"margin-bottom": "32px",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
text: `${table.name} List`,
type: "h1",
_instanceName: "Heading 1",
_children: [],
},
{
_id: "",
_component: "@budibase/standard-components/button",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
text: "Create New",
className: "",
disabled: false,
onClick: [
onLoad: [],
type: "div",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Title Container",
_children: [
{
parameters: {
url: newRowUrl(table),
_id: "c2b77901df95a4d1ca7204c58300bc94b",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {
margin: "0px",
flex: "1 1 auto",
"text-transform": "capitalize",
},
hover: {},
active: {},
selected: {},
},
"##eventHandlerType": "Navigate To",
_code: "",
className: "",
text: table.name,
type: "h3",
_instanceName: "Title",
_children: [],
},
{
_id: "c12a82d77baf24ca9922ea0af7cd4f723",
_component: "@budibase/standard-components/button",
_styles: {
normal: {
background: "#000000",
"border-width": "0",
"border-style": "None",
color: "#fff",
"font-family": "Inter",
"font-weight": "500",
"font-size": "14px",
},
hover: {
background: "#4285f4",
},
active: {},
selected: {},
},
_code: "",
text: "Create New",
className: "",
disabled: false,
onClick: [
{
parameters: {
url: newRowUrl(table),
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "New Button",
_children: [],
},
],
_instanceName: "Create New Button",
},
{
_id: "ca686a2ed89c943e6bafb63fa66a3ead3",
_component: "@budibase/standard-components/datagrid",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
datasource: {
label: table.name,
name: `all_${table._id}`,
tableId: table._id,
type: "table",
},
editable: false,
theme: "alpine",
height: "540",
pagination: true,
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Grid",
_children: [],
detailUrl: `${table.name.toLowerCase()}/:id`,
},
],
},
{
_id: "",
_component: "@budibase/standard-components/datagrid",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_code: "",
datasource: {
label: table.name,
name: `all_${table._id}`,
tableId: table._id,
type: "table",
},
_instanceName: `${table.name} Table`,
_children: [],
},
],
_instanceName: `${table.name} - List`,
_code: "",

0
packages/builder/src/builderStore/store/screenTemplates/urlSanitize.js → packages/builder/src/builderStore/store/screenTemplates/sanitizeUrl.js
View File

1
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -132,7 +132,6 @@
font-size: 24px;
font-weight: 600;
text-rendering: optimizeLegibility;
text-transform: capitalize;
margin-top: 0;
display: flex;
flex-direction: row;

3
packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
View File

@ -110,9 +110,6 @@
align-items: center;
gap: var(--spacing-xs);
}
.container span {
text-transform: capitalize;
}
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);

1
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View File

@ -42,6 +42,7 @@
async function deleteTable() {
await backendUiStore.actions.tables.delete(table)
store.deleteScreens(templateScreens)
await backendUiStore.actions.tables.fetch()
notifier.success("Table deleted")
hideEditor()
}

15
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

@ -27,15 +27,12 @@
const joinPath = join("/")
const normalizedName = name =>
pipe(
name,
[
trimCharsStart("./"),
trimCharsStart("~/"),
trimCharsStart("../"),
trimChars(" "),
]
)
pipe(name, [
trimCharsStart("./"),
trimCharsStart("~/"),
trimCharsStart("../"),
trimChars(" "),
])
const changeScreen = screen => {
store.setCurrentScreen(screen.props._instanceName)

49
packages/builder/src/components/userInterface/DetailScreenSelect.svelte Normal file
View File

@ -0,0 +1,49 @@
<script>
import { DataList } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store } from "builderStore"
const dispatch = createEventDispatcher()
export let value = ""
$: urls = getUrls()
const handleBlur = () => dispatch("change", value)
const getUrls = () => {
return [
...$store.screens
.filter(
screen =>
screen.props._component.endsWith("/rowdetail") ||
screen.route.endsWith(":id")
)
.map(screen => ({
name: screen.props._instanceName,
url: screen.route,
sort: screen.props._component,
})),
]
}
</script>
<div>
<DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
<option value="" />
{#each urls as url}
<option value={url.url}>{url.name}</option>
{/each}
</DataList>
</div>
<style>
div {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
div :global(> div) {
flex: 1 1 auto;
}
</style>

91
packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte Normal file
View File

@ -0,0 +1,91 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
export let parameters
let idFields
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
components: $store.components,
screen: $store.currentPreviewItem,
tables: $backendUiStore.tables,
})
$: idFields = bindableProperties.filter(
bindable =>
bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
)
$: {
if (parameters.rowId) {
// Set rev ID
parameters.revId = parameters.rowId.replace("_id", "_rev")
// Set table ID
const idBinding = bindableProperties.find(
prop =>
prop.runtimeBinding ===
parameters.rowId
.replace("{{", "")
.replace("}}", "")
.trim()
)
if (idBinding) {
const { instance } = idBinding
const component = $store.components[instance._component]
const tableInfo = instance[component.context]
if (tableInfo) {
parameters.tableId =
typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
}
}
console.log(parameters)
}
}
</script>
<div class="root">
{#if idFields.length === 0}
<div class="cannot-use">
Delete row can only be used within a component that provides data, such as
a List
</div>
{:else}
<Label size="m" color="dark">Datasource</Label>
<Select secondary bind:value={parameters.rowId}>
<option value="" />
{#each idFields as idField}
<option value={`{{ ${idField.runtimeBinding} }}`}>
{idField.instance._instanceName}
</option>
{/each}
</Select>
{/if}
</div>
<style>
.root {
display: grid;
column-gap: var(--spacing-s);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline;
}
.root :global(> div:nth-child(2)) {
grid-column-start: 2;
grid-column-end: 6;
}
.cannot-use {
color: var(--red);
font-size: var(--font-size-s);
text-align: center;
width: 70%;
margin: auto;
}
</style>

5
packages/builder/src/components/userInterface/EventsEditor/actions/index.js
View File

@ -1,5 +1,6 @@
import NavigateTo from "./NavigateTo.svelte"
import SaveRow from "./SaveRow.svelte"
import DeleteRow from "./DeleteRow.svelte"
// defines what actions are available, when adding a new one
// the component is the setup panel for the action
@ -11,6 +12,10 @@ export default [
name: "Save Row",
component: SaveRow,
},
{
name: "Delete Row",
component: DeleteRow,
},
{
name: "Navigate To",
component: NavigateTo,

11
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -81,6 +81,7 @@ export const layout = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
],
},
@ -98,6 +99,7 @@ export const margin = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
@ -116,6 +118,7 @@ export const margin = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
@ -134,6 +137,7 @@ export const margin = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
@ -150,6 +154,7 @@ export const margin = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
@ -168,6 +173,7 @@ export const margin = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
@ -189,6 +195,7 @@ export const padding = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
@ -205,6 +212,7 @@ export const padding = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
@ -221,6 +229,7 @@ export const padding = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
@ -237,6 +246,7 @@ export const padding = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
@ -253,6 +263,7 @@ export const padding = [
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },

6
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -6,6 +6,7 @@ import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
import { IconSelect } from "components/userInterface/IconSelect"
import Colorpicker from "@budibase/colorpicker"
@ -289,10 +290,9 @@ export default {
control: TableViewSelect,
},
{
label: "Table URL",
label: "Detail URL",
key: "detailUrl",
placeholder: "tableName",
control: ScreenSelect,
control: DetailScreenSelect,
},
{
label: "Editable",

8
packages/builder/yarn.lock
View File

@ -709,10 +709,10 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@budibase/bbui@^1.41.0":
version "1.41.0"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce"
integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw==
"@budibase/bbui@^1.44.0":
version "1.44.0"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.44.0.tgz#0c00d98173a8b0ab757f61e349ed366bf640be4b"
integrity sha512-YlcRSgOZct8W07z9IaOXNFrVvG0EUWxzcfuEOfXZRviGxm9TIhe/G6T9Cai1ZgPGicnKXa0dPAT3UrzIVB5xJg==
dependencies:
sirv-cli "^0.4.6"
svelte-flatpickr "^2.4.0"

4
packages/cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "budibase",
"version": "0.2.1",
"version": "0.2.2",
"description": "Budibase CLI",
"repository": "https://github.com/Budibase/Budibase",
"homepage": "https://www.budibase.com",
@ -17,7 +17,7 @@
"author": "Budibase",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@budibase/server": "^0.2.1",
"@budibase/server": "^0.2.2",
"@inquirer/password": "^0.0.6-alpha.0",
"chalk": "^2.4.2",
"dotenv": "^8.2.0",

2
packages/client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/client",
"version": "0.2.1",
"version": "0.2.2",
"license": "MPL-2.0",
"main": "dist/budibase-client.js",
"module": "dist/budibase-client.esm.mjs",

10
packages/client/src/api/index.js
View File

@ -1,5 +1,5 @@
import { authenticate } from "./authenticate"
import appStore from "../state/store"
// import appStore from "../state/store"
const apiCall = method => async ({ url, body }) => {
const response = await fetch(url, {
@ -37,7 +37,7 @@ const del = apiCall("DELETE")
const ERROR_MEMBER = "##error"
const error = message => {
const err = { [ERROR_MEMBER]: message }
appStore.update(s => s["##error_message"], message)
// appStore.update(s => s["##error_message"], message)
return err
}
@ -67,6 +67,11 @@ const updateRow = async (params, state) => {
})
}
const deleteRow = async params =>
await del({
url: `/api/${params.tableId}/rows/${params.rowId}/${params.revId}`,
})
const makeRowRequestBody = (parameters, state) => {
// start with the row thats currently in context
const body = { ...(state.data || {}) }
@ -103,4 +108,5 @@ export default {
authenticate: authenticate(apiOpts),
saveRow,
updateRow,
deleteRow,
}

36
packages/client/src/render/screenRouter.js
View File

@ -4,6 +4,7 @@ import { parseAppIdFromCookie } from "./getAppId"
export const screenRouter = ({ screens, onScreenSelected, window }) => {
function sanitize(url) {
if (!url) return url
return url
.split("/")
.map(part => {
@ -15,24 +16,29 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
.toLowerCase()
}
const isRunningLocally = () => {
const hostname = (window.location && window.location.hostname) || ""
return (
hostname === "localhost" ||
hostname === "127.0.0.1" ||
hostname.startsWith("192.168")
)
}
const makeRootedPath = url => {
const hostname = window.location && window.location.hostname
if (hostname) {
if (
hostname === "localhost" ||
hostname === "127.0.0.1" ||
hostname.startsWith("192.168")
) {
const appId = parseAppIdFromCookie(window.document.cookie)
if (url) {
const sanitizedUrl = sanitize(url)
if (sanitizedUrl.startsWith(appId)) return sanitizedUrl
return `/${appId}${
sanitizedUrl.startsWith("/") ? "" : "/"
}${sanitizedUrl}`
if (isRunningLocally()) {
const appId = parseAppIdFromCookie(window.document.cookie)
if (url) {
url = sanitize(url)
if (!url.startsWith("/")) {
url = `/${url}`
}
return appId
if (url.startsWith(`/${appId}`)) {
return url
}
return `/${appId}${url}`
}
return `/${appId}`
}
return sanitize(url)
}

1
packages/client/src/state/eventHandlers.js
View File

@ -8,6 +8,7 @@ export const eventHandlers = routeTo => {
"Navigate To": param => routeTo(param && param.url),
"Update Row": api.updateRow,
"Save Row": api.saveRow,
"Delete Row": api.deleteRow,
"Trigger Workflow": api.triggerWorkflow,
}

4
packages/server/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/server",
"version": "0.2.1",
"version": "0.2.2",
"description": "Budibase Web Server",
"main": "src/electron.js",
"repository": {
@ -42,7 +42,7 @@
"author": "Michael Shanks",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@budibase/client": "^0.2.1",
"@budibase/client": "^0.2.2",
"@koa/router": "^8.0.0",
"@sendgrid/mail": "^7.1.1",
"@sentry/node": "^5.19.2",

16
packages/server/src/api/controllers/table.js
View File

@ -41,6 +41,18 @@ exports.save = async function(ctx) {
oldTable = await db.get(ctx.request.body._id)
}
// make sure that types don't change of a column, have to remove
// the column if you want to change the type
if (oldTable && oldTable.schema) {
for (let propKey of Object.keys(tableToSave.schema)) {
let column = tableToSave.schema[propKey]
let oldColumn = oldTable.schema[propKey]
if (oldColumn && oldColumn.type !== column.type) {
ctx.throw(400, "Cannot change the type of a column")
}
}
}
// Don't rename if the name is the same
let { _rename } = tableToSave
if (_rename && _rename.old === _rename.updated) {
@ -50,9 +62,9 @@ exports.save = async function(ctx) {
// rename row fields when table column is renamed
if (_rename && tableToSave.schema[_rename.updated].type === "link") {
throw "Cannot rename a linked field."
ctx.throw(400, "Cannot rename a linked column.")
} else if (_rename && tableToSave.primaryDisplay === _rename.old) {
throw "Cannot rename the display column."
ctx.throw(400, "Cannot rename the display column.")
} else if (_rename) {
const rows = await db.allDocs(
getRowParams(tableToSave._id, null, {

13
packages/server/src/db/linkedRows/LinkController.js
View File

@ -1,6 +1,7 @@
const CouchDB = require("../index")
const { IncludeDocs, getLinkDocuments } = require("./linkUtils")
const { generateLinkID } = require("../utils")
const Sentry = require("@sentry/node")
/**
* Creates a new link document structure which can be put to the database. It is important to
@ -289,10 +290,14 @@ class LinkController {
const schema = table.schema
for (let fieldName of Object.keys(schema)) {
const field = schema[fieldName]
if (field.type === "link") {
const linkedTable = await this._db.get(field.tableId)
delete linkedTable.schema[table.name]
await this._db.put(linkedTable)
try {
if (field.type === "link") {
const linkedTable = await this._db.get(field.tableId)
delete linkedTable.schema[field.fieldName]
await this._db.put(linkedTable)
}
} catch (err) {
Sentry.captureException(err)
}
}
// need to get the full link docs to delete them

14
packages/server/src/db/linkedRows/index.js
View File

@ -1,5 +1,10 @@
const LinkController = require("./LinkController")
const { IncludeDocs, getLinkDocuments, createLinkView } = require("./linkUtils")
const {
IncludeDocs,
getLinkDocuments,
createLinkView,
getUniqueByProp,
} = require("./linkUtils")
const _ = require("lodash")
/**
@ -110,7 +115,12 @@ exports.attachLinkInfo = async (instanceId, rows) => {
// now iterate through the rows and all field information
for (let row of rows) {
// get all links for row, ignore fieldName for now
const linkVals = responses.filter(el => el.thisId === row._id)
// have to get unique as the previous table query can
// return duplicates, could be querying for both tables in a relation
const linkVals = getUniqueByProp(
responses.filter(el => el.thisId === row._id),
"id"
)
for (let linkVal of linkVals) {
// work out which link pertains to this row
if (!(row[linkVal.fieldName] instanceof Array)) {

6
packages/server/src/db/linkedRows/linkUtils.js
View File

@ -92,3 +92,9 @@ exports.getLinkDocuments = async function({
}
}
}
exports.getUniqueByProp = (array, prop) => {
return array.filter((obj, pos, arr) => {
return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos
})
}

5
packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
View File

@ -19,7 +19,8 @@
"justify-content": "flex-start",
"align-items": "flex-start",
"background": "#fff",
"width": "100%"
"width": "100%",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
},
"hover": {},
"active": {},
@ -67,7 +68,7 @@
"_styles": {
"normal": {
"font-family": "Inter",
"font-weight": "400",
"font-weight": "500",
"color": "#000000",
"text-decoration-line": "none",
"font-size": "16px"

2
packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
View File

@ -97,6 +97,6 @@
],
"_instanceName": "Home"
},
"route": "/*",
"route": "/",
"name": "d834fea2-1b3e-4320-ab34-f9009f5ecc59"
}

2
packages/standard-components/components.json
View File

@ -240,7 +240,7 @@
},
"height": {
"type": "number",
"default": "500"
"default": "540"
},
"pagination": {
"type": "bool",

6
packages/standard-components/package.json
View File

@ -13,7 +13,7 @@
"dev:builder": "rollup -cw"
},
"devDependencies": {
"@budibase/client": "^0.2.1",
"@budibase/client": "^0.2.2",
"@rollup/plugin-commonjs": "^11.1.0",
"lodash": "^4.17.15",
"rollup": "^2.11.2",
@ -31,12 +31,12 @@
"keywords": [
"svelte"
],
"version": "0.2.1",
"version": "0.2.2",
"license": "MIT",
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
"dependencies": {
"@beyonk/svelte-googlemaps": "^2.2.0",
"@budibase/bbui": "^1.41.0",
"@budibase/bbui": "^1.44.0",
"@budibase/svelte-ag-grid": "^0.0.13",
"@fortawesome/fontawesome-free": "^5.14.0",
"@svelteschool/svelte-forms": "^0.7.0",

4
packages/standard-components/src/Button.svelte
View File

@ -25,12 +25,10 @@
<style>
.default {
align-items: center;
font-size: 16px;
padding: 0px 16px;
padding: var(--spacing-s) var(--spacing-l);
box-sizing: border-box;
border-radius: 4px;
outline: none;
height: 40px;
cursor: pointer;
transition: all 0.2s ease 0s;
overflow: hidden;

51
packages/standard-components/src/DataGrid/Component.svelte
View File

@ -11,7 +11,12 @@
import { onMount } from "svelte"
import AgGrid from "@budibase/svelte-ag-grid"
import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
import {
TextButton as DeleteButton,
Icon,
Modal,
ModalContent,
} from "@budibase/bbui"
export let _bb
export let datasource = {}
@ -66,7 +71,7 @@
headerCheckboxSelection: i === 0 && canEdit,
checkboxSelection: i === 0 && canEdit,
valueSetter: setters.get(schema[key].type),
headerName: key.charAt(0).toUpperCase() + key.slice(1),
headerName: key,
field: key,
hide: shouldHideField(key),
sortable: true,
@ -75,19 +80,29 @@
autoHeight: true,
}
})
columnDefs = [...columnDefs, {
headerName: 'Details',
field: '_id',
width: 25,
flex: 0,
editable: false,
sortable: false,
cellRenderer: getRenderer({
type: '_id',
options: detailUrl
}),
autoHeight: true,
}]
if (detailUrl) {
columnDefs = [
...columnDefs,
{
headerName: "Detail",
field: "_id",
minWidth: 100,
width: 100,
flex: 0,
editable: false,
sortable: false,
cellRenderer: getRenderer({
type: "_id",
options: { detailUrl },
}),
autoHeight: true,
pinned: "left",
filter: false,
},
]
}
dataLoaded = true
}
})
@ -131,7 +146,7 @@
href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
</svelte:head>
<div style="--grid-height: {height}px">
<div class="container" style="--grid-height: {height}px">
{#if dataLoaded}
{#if canAddDelete}
<div class="controls">
@ -164,6 +179,10 @@
</div>
<style>
.container :global(.ag-pinned-left-header .ag-header-cell-label) {
justify-content: center;
}
.controls {
min-height: 15px;
margin-bottom: var(--spacing-s);

16
packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
View File

@ -1,12 +1,14 @@
<script>
import { Icon } from '@budibase/bbui'
export let url
import { Button } from "@budibase/bbui"
export let url
let link
</script>
<a href={url}><Icon name="view" /></a>
<a href={url} bind:this={link} />
<Button small translucent on:click={() => link.click()}>View</Button>
<style>
a {
color: var(--grey-6)
}
</style>
a {
display: none;
}
</style>

34
packages/standard-components/src/DataGrid/customRenderer.js
View File

@ -17,14 +17,18 @@ const renderers = new Map([
export function getRenderer(schema, editable) {
if (renderers.get(schema.type)) {
return renderers.get(schema.type)(schema.options, editable)
return renderers.get(schema.type)(
schema.options,
schema.constraints,
editable
)
} else {
return false
}
}
/* eslint-disable no-unused-vars */
function booleanRenderer(options, editable) {
function booleanRenderer(options, constraints, editable) {
return params => {
const toggle = e => {
params.value = !params.value
@ -46,7 +50,7 @@ function booleanRenderer(options, editable) {
}
}
/* eslint-disable no-unused-vars */
function attachmentRenderer(options, editable) {
function attachmentRenderer(options, constraints, editable) {
return params => {
const container = document.createElement("div")
@ -68,7 +72,7 @@ function attachmentRenderer(options, editable) {
}
}
/* eslint-disable no-unused-vars */
function dateRenderer(options, editable) {
function dateRenderer(options, constraints, editable) {
return function(params) {
const container = document.createElement("div")
const toggle = e => {
@ -76,8 +80,7 @@ function dateRenderer(options, editable) {
}
// Options need to be passed in with minTime and maxTime! Needs bbui update.
const datePickerInstance = new DatePicker({
new DatePicker({
target: container,
props: {
value: params.value,
@ -88,7 +91,7 @@ function dateRenderer(options, editable) {
}
}
function optionsRenderer({ inclusion }, editable) {
function optionsRenderer(options, constraints, editable) {
return params => {
if (!editable) return params.value
const container = document.createElement("div")
@ -103,7 +106,7 @@ function optionsRenderer({ inclusion }, editable) {
target: container,
props: {
value: params.value,
options: inclusion,
options: constraints.inclusion,
},
})
@ -113,7 +116,7 @@ function optionsRenderer({ inclusion }, editable) {
}
}
/* eslint-disable no-unused-vars */
function linkedRowRenderer(options, editable) {
function linkedRowRenderer(options, constraints, editable) {
return params => {
let container = document.createElement("div")
container.style.display = "grid"
@ -133,18 +136,21 @@ function linkedRowRenderer(options, editable) {
}
/* eslint-disable no-unused-vars */
function viewDetailsRenderer(options) {
function viewDetailsRenderer(options, constraints, editable) {
return params => {
let container = document.createElement("div")
container.style.display = "grid"
container.style.placeItems = "center"
container.style.alignItems = "center"
container.style.height = "100%"
let url = "/"
if (options.detailUrl) {
url = options.detailUrl.replace(":id", params.data._id)
}
new ViewDetails({
target: container,
props: {
url: `${options}/${params.data._id}`,
},
props: { url },
})
return container

7
packages/standard-components/src/Form.svelte
View File

@ -23,9 +23,7 @@
{#each fields as field}
<div class="form-field" class:wide>
{#if !(schema[field].type === 'boolean' && !wide)}
<Label extraSmall={!wide} grey={!wide}>
{capitalise(schema[field].name)}
</Label>
<Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
{/if}
{#if schema[field].type === 'options'}
<Select secondary bind:value={$store.data[field]}>
@ -65,7 +63,6 @@
}
.form-content {
margin-bottom: var(--spacing-xl);
display: grid;
gap: var(--spacing-xl);
width: 100%;
@ -76,7 +73,7 @@
}
.form-field.wide {
align-items: center;
grid-template-columns: 30% 1fr;
grid-template-columns: 20% 1fr;
gap: var(--spacing-xl);
}
.form-field.wide :global(label) {

25
packages/standard-components/src/Login.svelte
View File

@ -65,9 +65,7 @@
placeholder="Password"
class={_inputClass} />
</div>
</div>
<div class="login-button-container">
<button disabled={loading} on:click={login} class={_buttonClass}>
{buttonText || 'Log In'}
</button>
@ -91,25 +89,24 @@
.content {
display: flex;
flex-direction: column;
align-items: center;
align-items: stretch;
justify-content: center;
}
.logo-container {
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo-container > img {
height: 80px;
max-height: 80px;
max-width: 200px;
margin-bottom: 20px;
}
.login-button-container {
margin-top: 6px;
max-width: 100%;
}
.header-content {
font-family: Inter;
font-weight: 700;
@ -137,12 +134,13 @@
.form-root {
display: flex;
flex-direction: column;
align-items: center;
align-items: stretch;
width: 300px;
margin: auto;
gap: 8px;
}
.control {
padding: 6px 0px;
width: 100%;
}
@ -186,4 +184,9 @@
border-color: #393c44;
color: #393c44;
}
h2 {
text-align: center;
margin-bottom: 10px;
}
</style>

10
packages/standard-components/src/Text.svelte
View File

@ -1,11 +1,7 @@
<script>
import { buildStyle } from "./buildStyle"
export let text = ""
export let className = ""
export let type = ""
export let _bb
const isTag = tag => type === tag
@ -34,3 +30,9 @@
{:else if isTag('sup')}
<sup class={className}>{text}</sup>
{:else}<span>{text}</span>{/if}
<style>
span {
display: inline-block;
}
</style>