@saltcorn/builder 1.6.0-alpha.1 → 1.6.0-alpha.11

package/src/components/elements/Action.js

@@ -3,10 +3,11 @@
  * @module components/elements/Action
  * @subcategory components / elements
  */
-/*global notifyAlert*/
+/*global notifyAlert, apply_showif*/
 
-import React, { Fragment, useContext, useEffect } from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import { useNode } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import {
   BlockSetting,
@@ -19,9 +20,12 @@ import {
   setAPropGen,
   buildOptions,
   ConfigField,
+  reactSelectStyles,
+  builderSelectClassName,
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
+import { MultiLineCodeEditor } from "./MonacoEditor";
 import Select from "react-select";
 
 export /**
@@ -91,6 +95,7 @@ export /**
  * @returns {div}
  */
 const ActionSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     name: node.data.props.name,
     action_row_variable: node.data.props.action_row_variable,
@@ -141,6 +146,13 @@ const ActionSettings = () => {
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
+  const cfgFieldsForForm =
+    name === "run_js_code"
+      ? (cfgFields || []).filter((f) => f.name !== "code")
+      : cfgFields;
+
+  const runJsCodeModalOnly = false;
+  const [codeModalOpen, setCodeModalOpen] = useState(false);
   const setAProp = setAPropGen(setProp);
   const use_setting_action_n =
     setting_action_n || setting_action_n === 0 ? setting_action_n : 0;
@@ -229,6 +241,7 @@ const ActionSettings = () => {
     step_action_names?.[use_setting_action_n] || "",
     JSON.stringify(configuration?.steps?.[use_setting_action_n]),
   ]);
+  
 
   return (
     <div>
@@ -236,20 +249,19 @@ const ActionSettings = () => {
         <tbody>
           <tr>
             <td>
-              <label>Action</label>
+              <label>{t("Action")}</label>
             </td>
             <td>
               {options.inJestTestingMode ? null : (
                 <Select
                   options={actionOptions}
-                  className="react-select action-selector"
+                  className={builderSelectClassName("react-select action-selector")}
+                  classNamePrefix="builder-select"
                   value={selectedAction}
                   defaultValue={selectedAction}
                   onChange={setAction}
                   menuPortalTarget={document.body}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
-                  }}
+                  styles={reactSelectStyles()}
                 ></Select>
               )}
             </td>
@@ -257,7 +269,7 @@ const ActionSettings = () => {
           {name !== "Clear" && options.mode === "filter" ? (
             <tr>
               <td>
-                <label>Row variable</label>
+                <label>{t("Row variable")}</label>
               </td>
               <td>
                 <select
@@ -290,7 +302,7 @@ const ActionSettings = () => {
           {action_row_variable === "each_matching_row" ? (
             <tr>
               <td>
-                <label>Rows limit</label>
+                <label>{t("Rows limit")}</label>
               </td>
               <td>
                 <input
@@ -306,7 +318,7 @@ const ActionSettings = () => {
           {action_style !== "on_page_load" ? (
             <tr>
               <td colSpan="2">
-                <label>Label (leave blank for default)</label>
+                <label>{t("Label (leave blank for default)")}</label>
                 <OrFormula
                   nodekey="action_label"
                   {...{ setProp, isFormula, node }}
@@ -339,7 +351,7 @@ const ActionSettings = () => {
           checked={confirm}
           onChange={setAProp("confirm", { checked: true })}
         />
-        <label className="form-check-label">User confirmation?</label>
+        <label className="form-check-label">{t("User confirmation?")}</label>
       </div>
       <div className="form-check">
         <input
@@ -349,7 +361,7 @@ const ActionSettings = () => {
           checked={spinner}
           onChange={setAProp("spinner", { checked: true })}
         />
-        <label className="form-check-label">Spinner on click</label>
+        <label className="form-check-label">{t("Spinner on click")}</label>
       </div>
       <div className="form-check">
         <input
@@ -359,7 +371,7 @@ const ActionSettings = () => {
           checked={run_async}
           onChange={setAProp("run_async", { checked: true })}
         />
-        <label className="form-check-label">Run async</label>
+        <label className="form-check-label">{t("Run async")}</label>
       </div>
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
@@ -373,12 +385,12 @@ const ActionSettings = () => {
             checked={is_submit_action}
             onChange={setAProp("is_submit_action", { checked: true })}
           />
-          <label className="form-check-label">This is the submit action</label>
+          <label className="form-check-label">{t("This is the submit action")}</label>
         </div>
       ) : null}
       {name === "Multi-step action" ? (
         <Fragment>
-          <label>Steps</label>
+          <label>{t("Steps")}</label>
 
           <ArrayManager
             node={node}
@@ -392,23 +404,22 @@ const ActionSettings = () => {
             ]}
           ></ArrayManager>
 
-          <label>Action</label>
+          <label>{t("Action")}</label>
           {options.inJestTestingMode ? null : (
             <Select
               options={multiStepActionOptions}
-              className="react-select multistep-action-selector"
+              className={builderSelectClassName("react-select multistep-action-selector")}
+              classNamePrefix="builder-select"
               value={selectedMultiStepAction}
               defaultValue={selectedMultiStepAction}
               onChange={setMultistepAction}
               menuPortalTarget={document.body}
-              styles={{
-                menuPortal: (base) => ({ ...base, zIndex: 19999 }),
-              }}
+              styles={reactSelectStyles()}
             ></Select>
           )}
           {options.mode !== "page" ? (
             <Fragment>
-              <label>Only if... (formula)</label>
+              <label>{t("Only if... (formula)")}</label>
               <input
                 type="text"
                 className="form-control text-to-display"
@@ -427,7 +438,7 @@ const ActionSettings = () => {
           ) : null}
           {stepCfgFields ? (
             <Fragment>
-              Step configuration:
+              {t("Step configuration:")}
               <ConfigForm
                 fields={stepCfgFields}
                 configuration={
@@ -446,16 +457,120 @@ const ActionSettings = () => {
           ) : null}
         </Fragment>
       ) : cfgFields ? (
-        <ConfigForm
-          fields={cfgFields}
-          configuration={configuration}
-          setProp={setProp}
-          node={node}
-        />
+        <Fragment>
+          {name === "run_js_code" && runJsCodeModalOnly ? (
+            <div className="builder-config-field" data-field-name="code">
+              <label>{t("Code")}</label>
+              <button
+                type="button"
+                className="btn btn-secondary btn-sm"
+                onClick={() => setCodeModalOpen(true)}
+              >
+                {t("Open Code Popup")}
+              </button>
+            </div>
+          ) : null}
+          {name === "run_js_code" && !runJsCodeModalOnly ? (
+            <Fragment>
+              <ConfigForm
+                fields={(cfgFields || []).filter((f) => f.name === "code")}
+                configuration={configuration}
+                setProp={setProp}
+                node={node}
+                openPopup={() => setCodeModalOpen(true)}
+              />
+              {/* <div className="builder-config-field mt-2" data-field-name="code-modal-trigger">
+                <button
+                  type="button"
+                  className="btn btn-secondary btn-sm"
+                  onClick={() => setCodeModalOpen(true)}
+                >
+                  {t("Open Code Popup")}
+                </button>
+              </div> */}
+              <ConfigForm
+                fields={cfgFieldsForForm}
+                configuration={configuration}
+                setProp={setProp}
+                node={node}
+              />
+            </Fragment>
+          ) : (
+            <ConfigForm
+              fields={runJsCodeModalOnly ? cfgFieldsForForm : cfgFields}
+              configuration={configuration}
+              setProp={setProp}
+              node={node}
+            />
+          )}
+          {name === "run_js_code" && codeModalOpen ? (
+                <div
+                  className={`modal fade ${codeModalOpen ? "show" : ""}`}
+                  style={{
+                    display: codeModalOpen ? "block" : "none",
+                    zIndex: 1055,
+                  }}
+                  tabIndex={-1}
+                  role="dialog"
+                  aria-labelledby="codeModalLabel"
+                  aria-hidden={!codeModalOpen}
+                >
+                  <div
+                    className="modal-backdrop fade show"
+                    style={{ zIndex: 1050 }}
+                    onClick={() => setCodeModalOpen(false)}
+                    aria-hidden="true"
+                  />
+                  <div
+                    className="modal-dialog modal-dialog-centered modal-lg"
+                    role="document"
+                    style={{ zIndex: 1060 }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="modal-content code-modal">
+                      <div className="modal-header">
+                        <h5 className="modal-title" id="codeModalLabel">
+                          {t("Code")}
+                        </h5>
+                        <button
+                          type="button"
+                          className="btn-close"
+                          aria-label="Close"
+                          onClick={() => setCodeModalOpen(false)}
+                        />
+                      </div>
+                      <div className="modal-body">
+                        <MultiLineCodeEditor
+                          setProp={setProp}
+                          value={configuration?.code ?? ""}
+                          onChange={(code) =>
+                            setProp((prop) => {
+                              if (!prop.configuration)
+                                prop.configuration = {};
+                              prop.configuration.code = code;
+                            })
+                          }
+                          isModalEditor
+                        />
+                      </div>
+                      <div className="modal-footer">
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          onClick={() => setCodeModalOpen(false)}
+                        >
+                          {t("Close")}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+        </Fragment>
       ) : null}
       {cfg_link ? (
         <a className="d-block mt-2" target="_blank" href={cfg_link}>
-          Configure this action
+          {t("Configure this action")}
         </a>
       ) : null}
     </div>

package/src/components/elements/Aggregation.js

@@ -3,14 +3,10 @@
  * @module components/elements/Aggregation
  * @subcategory components / elements
  */
+/* globals validate_expression_elem */
 
-import React, {
-  useContext,
-  useState,
-  useRef,
-  useEffect,
-  Fragment,
-} from "react";
+import React, { Fragment, useState, useContext, useEffect, useRef } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
@@ -59,6 +55,7 @@ export /**
  * @namespace
  */
 const AggregationSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     agg_relation,
@@ -132,7 +129,7 @@ const AggregationSettings = () => {
           {options.mode === "filter" ? null : (
             <tr>
               <td>
-                <label>Relation</label>
+                <label>{t("Relation")}</label>
               </td>
               <td>
                 <select
@@ -160,7 +157,7 @@ const AggregationSettings = () => {
           <tr>
             <td>
               <label>
-                {options.mode === "filter" ? "Field" : "Child table field"}
+                {options.mode === "filter" ? t("Field") : t("Child table field")}
               </label>
             </td>
             <td>
@@ -179,7 +176,7 @@ const AggregationSettings = () => {
           </tr>
           <tr>
             <td>
-              <label>Statistic</label>
+              <label>{t("Statistic")}</label>
             </td>
             <td>
               <select
@@ -190,34 +187,34 @@ const AggregationSettings = () => {
               >
                 {buildOptions(
                   [
-                    "Count",
-                    "CountUnique",
-                    "Avg",
-                    "Sum",
-                    "Max",
-                    "Min",
-                    "Array_Agg",
+                    t("Count"),
+                    t("CountUnique"),
+                    t("Avg"),
+                    t("Sum"),
+                    t("Max"),
+                    t("Min"),
+                    t("Array_Agg"),
                   ],
                   { valAttr: true }
                 )}
                 {targetFieldType === "Bool" ? (
-                  <option value={`Percent true`}>Percent true</option>
+                  <option value={`Percent true`}>{t("Percent true")}</option>
                 ) : null}
                 {targetFieldType === "Bool" ? (
-                  <option value={`Percent false`}>Percent false</option>
+                  <option value={`Percent false`}>{t("Percent false")}</option>
                 ) : null}
                 {(options.agg_field_opts[agg_relation] || [])
                   .filter((f) => f.ftype === "Date")
                   .map((f, ix) => (
                     <option key={ix} value={`Latest ${f.name}`}>
-                      Latest {f.name}
+                      {t("Latest")} {f.name}
                     </option>
                   ))}
                 {(options.agg_field_opts[agg_relation] || [])
                   .filter((f) => f.ftype === "Date")
                   .map((f, ix) => (
                     <option key={ix} value={`Earliest ${f.name}`}>
-                      Earliest {f.name}
+                      {t("Earliest")} {f.name}
                     </option>
                   ))}
               </select>
@@ -226,7 +223,7 @@ const AggregationSettings = () => {
           <tr>
             <td>
               <label>
-                Where
+                {t("Where")}
                 <HelpTopicLink
                   topic="Aggregation where formula"
                   table_name={options.tableName}
@@ -251,7 +248,7 @@ const AggregationSettings = () => {
           {fvs && (
             <tr>
               <td>
-                <label>Field view</label>
+                <label>{t("Field view")}</label>
               </td>
 
               <td>

package/src/components/elements/ArrayManager.js

@@ -5,6 +5,7 @@
  */
 /* globals $, _sc_globalCsrf*/
 import React, { Fragment, useState, useEffect } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -55,7 +56,10 @@ export const ArrayManager = ({
   managedArrays,
   manageContents,
   initialAddProps,
+   contentsKey = "contents",
+  onLayoutChange,
 }) => {
+  const { t } = useTranslation();
   const { actions, query, connectors } = useEditor((state, query) => {
     return {};
   });
@@ -75,13 +79,14 @@ export const ArrayManager = ({
         node.id,
         options
       );
-      layout.contents.splice(rmIx, 1);
+      layout[contentsKey].splice(rmIx, 1);
 
       managedArrays.forEach((arrNm) => {
-        layout[arrNm].splice(rmIx, 1);
+         if (layout[arrNm]) layout[arrNm].splice(rmIx, 1);
       });
       layout[countProp] = node[countProp] - 1;
-      layout[currentProp] = node[currentProp] - 1;
+      layout[currentProp] = Math.max(0, node[currentProp] - 1);
+      if (onLayoutChange) onLayoutChange(layout, "delete");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else {
@@ -117,7 +122,7 @@ export const ArrayManager = ({
         options
       );
 
-      swapElements(layout.contents, curIx, curIx + delta);
+      swapElements(layout[contentsKey], curIx, curIx + delta);
 
       managedArrays.forEach((arrNm) => {
         if (arrNm.includes(".")) {
@@ -128,6 +133,7 @@ export const ArrayManager = ({
           swapElements(layout[arrNm], curIx, curIx + delta);
       });
       layout[currentProp] = node[currentProp] + delta;
+      if (onLayoutChange) onLayoutChange(layout, "move");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else
@@ -154,7 +160,7 @@ export const ArrayManager = ({
         options
       );
 
-      layout.contents.push(null);
+      layout[contentsKey].push(null);
       managedArrays.forEach((arrNm) => {
         if (initialAddProps?.[arrNm])
           layout[arrNm][node[countProp]] = initialAddProps?.[arrNm];
@@ -162,6 +168,7 @@ export const ArrayManager = ({
       layout[currentProp] = +node[countProp];
       layout[countProp] = +node[countProp] + 1;
 
+      if (onLayoutChange) onLayoutChange(layout, "add");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else
@@ -187,7 +194,7 @@ export const ArrayManager = ({
       <ConfigField
         field={{
           name: currentProp,
-          label: "Number of things",
+          label: t("Number of things"),
           type: "btn_select",
           options: ntimes(node[countProp], (i) => ({
             value: i,
@@ -201,7 +208,7 @@ export const ArrayManager = ({
       ></ConfigField>
       <div className="btn-group w-100" role="group">
         <button
-          title="Move left"
+          title={t("Move left")}
           type="button"
           style={{ width: "25%" }}
           className="btn btn-outline-secondary btn-sm"
@@ -211,7 +218,7 @@ export const ArrayManager = ({
           <FontAwesomeIcon icon={faAngleDoubleLeft} />
         </button>
         <button
-          title="Add"
+          title={t("Add")}
           type="button"
           style={{ width: "25%" }}
           className="btn btn-outline-secondary btn-sm"
@@ -220,7 +227,7 @@ export const ArrayManager = ({
           <FontAwesomeIcon icon={faPlus} />
         </button>
         <button
-          title="Delete"
+          title={t("Delete")}
           type="button"
           style={{ width: "25%" }}
           className="btn btn-outline-secondary btn-sm"
@@ -229,7 +236,7 @@ export const ArrayManager = ({
           <FontAwesomeIcon icon={faTrashAlt} />
         </button>
         <button
-          title="Move right"
+          title={t("Move right")}
           type="button"
           disabled={node[currentProp] === node[countProp] - 1}
           style={{ width: "25%" }}