@saltcorn/builder 0.7.4 → 0.8.0-beta.1

package/src/components/elements/ViewLink.js

@@ -37,48 +37,49 @@ export /**
  * @subcategory components
  * @namespace
  */
-const ViewLink = ({
-  name,
-  block,
-  minRole,
-  link_style,
-  link_size,
-  link_icon,
-  inModal,
-  label,
-  textStyle,
-  link_bgcol,
-  link_bordercol,
-  link_textcol,
-}) => {
-  const {
-    selected,
-    connectors: { connect, drag },
-  } = useNode((node) => ({ selected: node.events.selected }));
-  const names = name.split(":");
-  const displabel = label || (names.length > 1 ? names[1] : names[0]);
-  return (
-    <span
-      className={`${textStyle} ${inModal ? "btn btn-secondary btn-sm" : ""} ${
-        selected ? "selected-node" : "is-builder-link"
-      } ${link_style} ${link_size}`}
-      {...blockProps(block)}
-      ref={(dom) => connect(drag(dom))}
-      style={
-        link_style === "btn btn-custom-color"
-          ? {
+  const ViewLink = ({
+    name,
+    block,
+    view_name,
+    minRole,
+    link_style,
+    link_size,
+    link_icon,
+    inModal,
+    label,
+    textStyle,
+    link_bgcol,
+    link_bordercol,
+    link_textcol,
+  }) => {
+    const {
+      selected,
+      connectors: { connect, drag },
+    } = useNode((node) => ({ selected: node.events.selected }));
+    const names = name.split(":");
+
+    const displabel = label || view_name || (names.length > 1 ? names[1] : names[0]);
+    return (
+      <span
+        className={`${textStyle} ${inModal ? "btn btn-secondary btn-sm" : ""} ${selected ? "selected-node" : "is-builder-link"
+          } ${link_style} ${link_size}`}
+        {...blockProps(block)}
+        ref={(dom) => connect(drag(dom))}
+        style={
+          link_style === "btn btn-custom-color"
+            ? {
               backgroundColor: link_bgcol || "#000000",
               borderColor: link_bordercol || "#000000",
               color: link_textcol || "#000000",
             }
-          : {}
-      }
-    >
-      {link_icon ? <i className={`${link_icon} me-1`}></i> : ""}
-      {displabel}
-    </span>
-  );
-};
+            : {}
+        }
+      >
+        {link_icon ? <i className={`${link_icon} me-1`}></i> : ""}
+        {displabel}
+      </span>
+    );
+  };
 
 export /**
  * @returns {div}
@@ -86,122 +87,165 @@ export /**
  * @subcategory components
  * @namespace
  */
-const ViewLinkSettings = () => {
-  const node = useNode((node) => ({
-    name: node.data.props.name,
-    block: node.data.props.block,
-    minRole: node.data.props.minRole,
-    isFormula: node.data.props.isFormula,
-    label: node.data.props.label,
-    inModal: node.data.props.inModal,
-    link_style: node.data.props.link_style,
-    link_size: node.data.props.link_size,
-    link_icon: node.data.props.link_icon,
-    textStyle: node.data.props.textStyle,
-    link_bgcol: node.data.props.link_bgcol,
-    link_bordercol: node.data.props.link_bordercol,
-    link_textcol: node.data.props.link_textcol,
-    extra_state_fml: node.data.props.extra_state_fml,
-  }));
-  const {
-    actions: { setProp },
-    name,
-    block,
-    minRole,
-    label,
-    isFormula,
-    inModal,
-    textStyle,
-    extra_state_fml,
-  } = node;
-  const options = useContext(optionsCtx);
-  let errorString = false;
-  try {
-    Function("return " + extra_state_fml);
-  } catch (error) {
-    errorString = error.message;
-  }
-  const setAProp = setAPropGen(setProp);
-
-  return (
-    <div>
-      <table className="w-100">
-        <tbody>
-          <tr>
-            <td colSpan="2">
-              <label>View to link to</label>
-              <select
-                value={name}
-                className="form-control form-select"
-                onChange={setAProp("name")}
-              >
-                {options.link_view_opts.map((f, ix) => (
-                  <option key={ix} value={f.name}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td colSpan="2">
-              <label>Label (leave blank for default)</label>
-              <OrFormula nodekey="label" {...{ setProp, isFormula, node }}>
+  const ViewLinkSettings = () => {
+    const node = useNode((node) => ({
+      name: node.data.props.name,
+      block: node.data.props.block,
+      minRole: node.data.props.minRole,
+      isFormula: node.data.props.isFormula,
+      label: node.data.props.label,
+      inModal: node.data.props.inModal,
+      link_target_blank: node.data.props.link_target_blank,
+      link_style: node.data.props.link_style,
+      link_size: node.data.props.link_size,
+      link_icon: node.data.props.link_icon,
+      textStyle: node.data.props.textStyle,
+      link_bgcol: node.data.props.link_bgcol,
+      link_bordercol: node.data.props.link_bordercol,
+      link_textcol: node.data.props.link_textcol,
+      extra_state_fml: node.data.props.extra_state_fml,
+      view_name: node.data.props.view_name,
+    }));
+    const {
+      actions: { setProp },
+      name,
+      block,
+      minRole,
+      label,
+      isFormula,
+      inModal,
+      textStyle,
+      extra_state_fml,
+      view_name,
+      link_target_blank
+    } = node;
+    const options = useContext(optionsCtx);
+    let errorString = false;
+    try {
+      Function("return " + extra_state_fml);
+    } catch (error) {
+      errorString = error.message;
+    }
+    const setAProp = setAPropGen(setProp);
+    //legacy values
+    const use_view_name
+      = view_name || (name && (names => names.length > 1 ? names[1] : names[0])(name.split(":")))
+    const set_view_name = (e) => {
+      if (e.target) {
+        const target_value = e.target.value;
+        setProp((prop) => (prop.view_name = target_value));
+        if (target_value !== use_view_name) {
+          setProp((prop) => (prop.name = options.view_relation_opts[target_value][0].value));
+        }
+      }
+    };
+    return (
+      <div>
+        <table className="w-100">
+          <tbody>
+            <tr>
+              <td colSpan="2">
+                <label>View to link to</label>
+                <select
+                  value={use_view_name}
+                  className="form-control form-select"
+                  onChange={set_view_name}
+                  onBlur={set_view_name}
+                >
+                  {options.view_name_opts.map((f, ix) => (
+                    <option key={ix} value={f.name}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td colSpan="2">
+                <label>Relation</label>
+                <select
+                  value={name}
+                  className="form-control form-select"
+                  onChange={setAProp("name")}
+                  onBlur={setAProp("name")}
+                >
+                  {(options.view_relation_opts[use_view_name] || []).map((f, ix) => (
+                    <option key={ix} value={f.value}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td colSpan="2">
+                <label>Label (leave blank for default)</label>
+                <OrFormula nodekey="label" {...{ setProp, isFormula, node }}>
+                  <input
+                    type="text"
+                    className="viewlink-label form-control"
+                    value={label}
+                    onChange={setAProp("label")}
+                  />
+                </OrFormula>
+              </td>
+            </tr>
+            <tr>
+              <td colSpan="2">
+                <label>Extra state Formula <FormulaTooltip /></label>
                 <input
                   type="text"
                   className="viewlink-label form-control"
-                  value={label}
-                  onChange={setAProp("label")}
+                  value={extra_state_fml}
+                  onChange={setAProp("extra_state_fml")}
                 />
-              </OrFormula>
-            </td>
-          </tr>
-          <tr>
-            <td colSpan="2">
-              <label>Extra state Formula <FormulaTooltip /></label>
-              <input
-                type="text"
-                className="viewlink-label form-control"
-                value={extra_state_fml}
-                onChange={setAProp("extra_state_fml")}
-              />
-              {errorString ? (
-                <small className="text-danger font-monospace d-block">
-                  {errorString}
-                </small>
-              ) : null}
-            </td>
-          </tr>
+                {errorString ? (
+                  <small className="text-danger font-monospace d-block">
+                    {errorString}
+                  </small>
+                ) : null}
+              </td>
+            </tr>
 
-          <ButtonOrLinkSettingsRows
-            setProp={setProp}
-            keyPrefix="link_"
-            btnClass="btn"
-            values={node}
-            linkFirst={true}
+            <ButtonOrLinkSettingsRows
+              setProp={setProp}
+              keyPrefix="link_"
+              btnClass="btn"
+              values={node}
+              linkFirst={true}
+            />
+          </tbody>
+        </table>
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            name="block"
+            type="checkbox"
+            checked={link_target_blank}
+            onChange={setAProp("link_target_blank", { checked: true })}
           />
-        </tbody>
-      </table>
-      <div className="form-check">
-        <input
-          className="form-check-input"
-          name="block"
-          type="checkbox"
-          checked={inModal}
-          onChange={setAProp("inModal", { checked: true })}
-        />
-        <label className="form-check-label">Open in popup modal?</label>
+          <label className="form-check-label">Open in new tab</label>
+        </div>
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            name="block"
+            type="checkbox"
+            checked={inModal}
+            onChange={setAProp("inModal", { checked: true })}
+          />
+          <label className="form-check-label">Open in popup modal?</label>
+        </div>
+        <BlockSetting block={block} setProp={setProp} />
+        <TextStyleSetting textStyle={textStyle} setProp={setProp} />
+        <table>
+          <tbody>
+            <MinRoleSettingRow minRole={minRole} setProp={setProp} />
+          </tbody>
+        </table>
       </div>
-      <BlockSetting block={block} setProp={setProp} />
-      <TextStyleSetting textStyle={textStyle} setProp={setProp} />
-      <table>
-        <tbody>
-          <MinRoleSettingRow minRole={minRole} setProp={setProp} />
-        </tbody>
-      </table>
-    </div>
-  );
-};
+    );
+  };
 
 /**
  * @type {object}
@@ -223,8 +267,10 @@ ViewLink.craft = {
       { name: "inModal", segment_name: "in_modal", column_name: "in_modal" },
       "minRole",
       "link_style",
+      "view_name",
       "link_icon",
       "link_size",
+      "link_target_blank",
       "link_bgcol",
       "link_bordercol",
       "link_textcol",

package/src/components/elements/utils.js

@@ -80,11 +80,10 @@ export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
 
 export const FormulaTooltip = () => {
   const { fields } = useContext(optionsCtx);
-  console.log(fields);
   return <Tooltip>
     <div>Formulae in Saltcorn are JavaScript expressions based on the current database row.</div>
     {fields ? <Fragment> Variables in scope: &nbsp;
-      {fields.map((f, ix) => <Fragment><code key={ix}>{f.name}</code>{" "}</Fragment>)}</Fragment> : null}
+      {fields.map((f, ix) => <Fragment key={ix}><code>{f.name}</code>{" "}</Fragment>)}</Fragment> : null}
 
     <a className="d-block" href="https://wiki.saltcorn.com/view/ShowPage/formulas">Wiki page on formulas</a>
   </Tooltip>
@@ -700,6 +699,7 @@ export /**
               className="form-control form-select"
               value={value || ""}
               onChange={(e) => e.target && myOnChange(e.target.value)}
+              onBlur={(e) => e.target && myOnChange(e.target.value)}
             >
               {options.map((o, ix) => (
                 <option
@@ -726,6 +726,7 @@ export /**
           className="form-control form-select"
           value={value || ""}
           onChange={(e) => e.target && myOnChange(e.target.value)}
+          onBlur={(e) => e.target && myOnChange(e.target.value)}
         >
           <option value={""}></option>
           {Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
@@ -790,6 +791,7 @@ export /**
           className="form-control form-select"
           value={value || ""}
           onChange={(e) => e.target && myOnChange(e.target.value)}
+          onBlur={(e) => e.target && myOnChange(e.target.value)}
         >
           {field.options.map((o, ix) => (
             <option key={ix}>{o}</option>