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

Merge pull request #742 from Budibase/autoscreen-templates 

Autoscreen templates
This commit is contained in:
Andrew Kingston 2020-10-16 21:15:59 +01:00 committed by GitHub
parent 062c92b1c0 5253534a05
commit be2fcf338a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 791 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/package.json
View File

@ -63,7 +63,7 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.41.0",
"@budibase/bbui": "^1.44.0",
"@budibase/client": "^0.2.2",
"@budibase/colorpicker": "^1.0.1",
"@fortawesome/fontawesome-free": "^5.14.0",

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

@ -1,10 +1,8 @@
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,
}
})
@ -12,9 +10,9 @@ export default function(tables) {
export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
const createScreen = (table, heading) => ({
const createScreen = table => ({
props: {
_id: "",
_id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
_component: "@budibase/standard-components/newrow",
_styles: {
normal: {},
@ -25,43 +23,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: {},
@ -71,37 +48,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: `/${table.name.toLowerCase()}`,
_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: `/${table.name.toLowerCase()}`,
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "Save Button",
_children: [],
},
],
},
{
_id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
_component: "@budibase/standard-components/dataformwide",
_styles: {
normal: {},
hover: {},
@ -109,19 +236,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: [],
},
],

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

@ -1,7 +1,8 @@
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,7 +15,7 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
const createScreen = (table, heading) => ({
props: {
_id: "",
_id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
_component: "@budibase/standard-components/rowdetail",
_styles: {
normal: {},
@ -25,43 +26,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: {},
@ -71,37 +51,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: `/${table.name.toLowerCase()}`,
_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: `/${table.name.toLowerCase()}`,
},
"##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: `/${table.name.toLowerCase()}`,
},
"##eventHandlerType": "Navigate To",
},
],
_instanceName: "Save Button",
_children: [],
},
],
},
{
_id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
_component: "@budibase/standard-components/dataformwide",
_styles: {
normal: {},
hover: {},
@ -109,19 +285,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: [],
},
],

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

@ -12,7 +12,7 @@ export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
const createScreen = table => ({
props: {
_id: "",
_id: "c7365379815e4457dbe703a886c2da43b",
_component: "@budibase/standard-components/container",
_styles: {
normal: {},
@ -23,14 +23,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: {},
@ -40,69 +49,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: `/${table.name}/new`,
_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: `/${table.name.toLowerCase()}/new`,
},
"##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: "Deals",
name: `all_${table._id}`,
tableId: table._id,
type: "table",
},
_instanceName: `${table.name} Table`,
_children: [],
},
],
_instanceName: `${table.name} - List`,
_code: "",

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"
@ -328,10 +329,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"

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,
}

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

@ -3,21 +3,28 @@ import appStore from "../state/store"
import { parseAppIdFromCookie } from "./getAppId"
export const screenRouter = ({ screens, onScreenSelected, window }) => {
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) {
if (url.startsWith(appId)) return url
return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
if (isRunningLocally()) {
const appId = parseAppIdFromCookie(window.document.cookie)
if (url) {
if (!url.startsWith("/")) {
url = `/${url}`
}
return appId
if (url.startsWith(`/${appId}`)) {
return url
}
return `/${appId}${url}`
}
return `/${appId}`
}
return 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,
}

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",

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

@ -36,7 +36,7 @@
"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;

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

@ -80,22 +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
}
})
@ -139,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">
@ -172,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);

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

@ -1,12 +1,14 @@
<script>
import { Icon } from "@budibase/bbui"
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);
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>