Add new template for row details autoscreen
This commit is contained in:
parent
fbe33226c1
commit
cfc8235572
1 changed files with 229 additions and 64 deletions
|
@ -1,7 +1,8 @@
|
||||||
export default function(tables) {
|
export default function(tables) {
|
||||||
return tables.map(table => {
|
return tables.map(table => {
|
||||||
const fields = Object.keys(table.schema)
|
const heading = table.primaryDisplay
|
||||||
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail"
|
? `{{ data.${table.primaryDisplay} }}`
|
||||||
|
: null
|
||||||
return {
|
return {
|
||||||
name: `${table.name} - Detail`,
|
name: `${table.name} - Detail`,
|
||||||
create: () => createScreen(table, heading),
|
create: () => createScreen(table, heading),
|
||||||
|
@ -14,7 +15,7 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
|
||||||
|
|
||||||
const createScreen = (table, heading) => ({
|
const createScreen = (table, heading) => ({
|
||||||
props: {
|
props: {
|
||||||
_id: "",
|
_id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
|
||||||
_component: "@budibase/standard-components/rowdetail",
|
_component: "@budibase/standard-components/rowdetail",
|
||||||
_styles: {
|
_styles: {
|
||||||
normal: {},
|
normal: {},
|
||||||
|
@ -25,43 +26,22 @@ const createScreen = (table, heading) => ({
|
||||||
table: table._id,
|
table: table._id,
|
||||||
_children: [
|
_children: [
|
||||||
{
|
{
|
||||||
_id: "",
|
_id: "ccad6cc135c7947a7ba9c631f655d6e0f",
|
||||||
_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: "",
|
|
||||||
_component: "@budibase/standard-components/container",
|
_component: "@budibase/standard-components/container",
|
||||||
_styles: {
|
_styles: {
|
||||||
normal: {
|
normal: {
|
||||||
display: "flex",
|
width: "700px",
|
||||||
"flex-direction": "row",
|
padding: "0px",
|
||||||
"align-items": "center",
|
background: "white",
|
||||||
"justify-content": "flex-end",
|
"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: {},
|
hover: {},
|
||||||
active: {},
|
active: {},
|
||||||
|
@ -71,37 +51,233 @@ const createScreen = (table, heading) => ({
|
||||||
className: "",
|
className: "",
|
||||||
onLoad: [],
|
onLoad: [],
|
||||||
type: "div",
|
type: "div",
|
||||||
_instanceName: "Buttons Container",
|
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||||
|
_instanceName: "Container",
|
||||||
_children: [
|
_children: [
|
||||||
{
|
{
|
||||||
_id: "",
|
_id: "c6e91622ba7984f468f70bf4bf5120246",
|
||||||
_component: "@budibase/standard-components/button",
|
_component: "@budibase/standard-components/container",
|
||||||
_styles: {
|
_styles: {
|
||||||
normal: {
|
normal: {
|
||||||
"margin-right": "20px",
|
"font-size": "14px",
|
||||||
|
color: "#757575",
|
||||||
},
|
},
|
||||||
hover: {},
|
hover: {},
|
||||||
active: {},
|
active: {},
|
||||||
selected: {},
|
selected: {},
|
||||||
},
|
},
|
||||||
_code: "",
|
_code: "",
|
||||||
text: "Back",
|
|
||||||
className: "",
|
className: "",
|
||||||
disabled: false,
|
onLoad: [],
|
||||||
onClick: [
|
type: "div",
|
||||||
|
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||||
|
_instanceName: "Breadcrumbs",
|
||||||
|
_children: [
|
||||||
{
|
{
|
||||||
parameters: {
|
_id: "caa33353c252c4931b2a51b48a559a7fc",
|
||||||
url: `/${table.name.toLowerCase()}`,
|
_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: "",
|
_id: "cbd1637cd1e274287a3c28ef0bf235d08",
|
||||||
_component: "@budibase/standard-components/button",
|
_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: "#000000",
|
||||||
|
},
|
||||||
|
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: "#9e9e9e",
|
||||||
|
},
|
||||||
|
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: {
|
_styles: {
|
||||||
normal: {},
|
normal: {},
|
||||||
hover: {},
|
hover: {},
|
||||||
|
@ -109,19 +285,8 @@ const createScreen = (table, heading) => ({
|
||||||
selected: {},
|
selected: {},
|
||||||
},
|
},
|
||||||
_code: "",
|
_code: "",
|
||||||
text: "Save",
|
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||||
className: "",
|
_instanceName: "Form",
|
||||||
disabled: false,
|
|
||||||
onClick: [
|
|
||||||
{
|
|
||||||
parameters: {
|
|
||||||
contextPath: "data",
|
|
||||||
tableId: table._id,
|
|
||||||
},
|
|
||||||
"##eventHandlerType": "Save Row",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
_instanceName: "Save Button",
|
|
||||||
_children: [],
|
_children: [],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in a new issue