@saltcorn/builder 0.9.5-beta.9 → 0.9.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.5-beta.9",
+  "version": "0.9.6-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.9.4",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "0.9.5-beta.9",
+    "@saltcorn/common-code": "0.9.6-beta.0",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Toolbox.js

@@ -586,6 +586,7 @@ const ToolboxList = ({ expanded }) => {
     agg_field_opts,
     views,
     images,
+    disable_toolbox,
   } = options;
   return chunkToolBox(
     [
@@ -596,25 +597,36 @@ const ToolboxList = ({ expanded }) => {
         field_view_options={field_view_options}
       />,
       <JoinFieldElem connectors={connectors} options={options} />,
-      <ViewLinkElem connectors={connectors} options={options} />,
-      <ActionElem connectors={connectors} options={options} />,
-      <LinkElem connectors={connectors} />,
-      <AggregationElem
-        connectors={connectors}
-        child_field_list={child_field_list}
-        agg_field_opts={agg_field_opts}
-      />,
-      // <ViewElem connectors={connectors} views={views} />,
+      !disable_toolbox?.view_link && (
+        <ViewLinkElem connectors={connectors} options={options} />
+      ),
+      !disable_toolbox?.action && (
+        <ActionElem connectors={connectors} options={options} />
+      ),
+      !disable_toolbox?.link && <LinkElem connectors={connectors} />,
+      !disable_toolbox?.aggregation && (
+        <AggregationElem
+          connectors={connectors}
+          child_field_list={child_field_list}
+          agg_field_opts={agg_field_opts}
+        />
+      ),
+      !disable_toolbox?.view && (
+        <ViewElem connectors={connectors} views={views} />
+      ),
       // <ContainerElem connectors={connectors} />,
       // <CardElem connectors={connectors} />,
       //  <TabsElem connectors={connectors} />,
       <HTMLElem connectors={connectors} />,
-      <DropMenuElem connectors={connectors} />,
+      !disable_toolbox?.dropdown_menu && (
+        <DropMenuElem connectors={connectors} />
+      ),
       //  <TableElem connectors={connectors} />,
-      ...(options.allowMultipleElementsPerColumn
-        ? [<LineBreakElem connectors={connectors} />]
-        : []),
-    ],
+      options.allowMultipleElementsPerColumn &&
+        !disable_toolbox?.line_break && (
+          <LineBreakElem connectors={connectors} />
+        ),
+    ].filter(Boolean),
     expanded
   );
 };

package/src/components/elements/View.js

@@ -97,6 +97,7 @@ const ViewSettings = () => {
     name: node.data.props.name,
     view: node.data.props.view,
     relation: node.data.props.relation,
+    order_field: node.data.props.order_field,
     state: node.data.props.state,
     extra_state_fml: node.data.props.extra_state_fml,
     configuration: node.data.props.configuration, // fixed states
@@ -108,6 +109,7 @@ const ViewSettings = () => {
     name,
     view,
     relation,
+    order_field,
     state,
     node_id,
     configuration,
@@ -243,6 +245,12 @@ const ViewSettings = () => {
     value: name,
   }));
   const selectedView = viewOptions.find((v) => v.value === viewname);
+
+  const theview = options.views.find((v) => v.name === viewname);
+
+  const targetTable = options.tables.find(
+    (t) => t.name === safeRelation?.targetTblName
+  );
   return (
     <div>
       {relationsData ? (
@@ -306,6 +314,27 @@ const ViewSettings = () => {
           )}
         </div>
       )}
+      {options.mode === "edit" &&
+      safeRelation?.type === "ChildList" &&
+      theview?.viewtemplate === "Edit" &&
+      targetTable ? (
+        <div>
+          <label>Order field</label>
+          <select
+            value={order_field}
+            className="form-control form-select"
+            onChange={setAProp("order_field")}
+            onBlur={setAProp("order_field")}
+          >
+            <option value=""></option>
+            {targetTable.int_fields.map((f, ix) => (
+              <option key={ix} value={f}>
+                {f}
+              </option>
+            ))}
+          </select>
+        </div>
+      ) : null}
       {options.mode !== "edit" && (
         <Fragment>
           <div>

package/src/components/storage.js

@@ -154,6 +154,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           key={ix}
           view={segment.view}
           relation={segment.relation}
+          order_field={segment.order_field}
           view_name={segment.view_name}
           name={segment.name}
           state={segment.state}
@@ -607,6 +608,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         type: "view",
         view: node.props.view,
         relation: node.props.relation,
+        order_field: node.props.order_field,
         name:
           node.props.name === "not_assigned" ? rand_ident() : node.props.name,
         state: node.props.state,