@saltcorn/builder 0.0.1-beta.1

package/src/components/elements/ToggleFilter.js

@@ -0,0 +1,243 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/ToggleFilter
+ * @subcategory components / elements
+ */
+
+import React, { useContext, Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import { blockProps, BlockSetting, TextStyleRow } from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {*} props.name
+ * @param {string} [props.value]
+ * @param {string} [props.preset_value]
+ * @param {boolean} props.block
+ * @param {string} [props.label]
+ * @param {string} props.size
+ * @param {string} props.style
+ * @returns {table}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const ToggleFilter = ({
+  name,
+  value,
+  preset_value,
+  block,
+  label,
+  size,
+  style,
+}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <span
+      className={selected ? "selected-node" : ""}
+      {...blockProps(block)}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <button className={`btn btn-outline-${style || "primary"} ${size}`}>
+        {label || value || preset_value || "Set label"}
+      </button>
+    </span>
+  );
+};
+
+export /**
+ * @returns {table}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const ToggleFilterSettings = () => {
+  const {
+    actions: { setProp },
+    name,
+    value,
+    block,
+    preset_value,
+    label,
+    size,
+    style,
+  } = useNode((node) => ({
+    name: node.data.props.name,
+    value: node.data.props.value,
+    preset_value: node.data.props.preset_value,
+    block: node.data.props.block,
+    label: node.data.props.label,
+    size: node.data.props.size,
+    style: node.data.props.style,
+  }));
+  const options = useContext(optionsCtx);
+  const field = options.fields.find((f) => f.name === name);
+  const preset_options = field.preset_options;
+  const isBool = field && field.type.name === "Bool";
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
+  return (
+    <table className="w-100">
+      <tbody>
+        <tr>
+          <td>
+            <label>Field</label>
+          </td>
+          <td>
+            <select
+              value={name}
+              className="form-control form-select"
+              onChange={(e) => {
+                setProp((prop) => (prop.name = e.target.value));
+                const field = options.fields.find(
+                  (f) => f.name === e.target.value
+                );
+                const isBool = field && field.type.name === "Bool";
+                if (isBool) setProp((prop) => (prop.value = "on"));
+                setProp((prop) => (prop.preset_value = ""));
+              }}
+            >
+              {options.fields.map((f, ix) => (
+                <option key={ix} value={f.name}>
+                  {f.label}
+                </option>
+              ))}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Value</label>
+          </td>
+          <td>
+            {isBool ? (
+              <select
+                value={value}
+                className="w-100 form-select"
+                onChange={setAProp("value")}
+              >
+                <option value="on">True</option>
+                <option value="off">False</option>
+                <option value="?">Both</option>
+              </select>
+            ) : (
+              <input
+                value={value}
+                className="w-100"
+                onChange={setAProp("value")}
+              />
+            )}
+          </td>
+        </tr>
+        {preset_options && preset_options.length > 0 ? (
+          <tr>
+            <td>
+              <label>Preset</label>
+            </td>
+            <td>
+              <select
+                value={preset_value}
+                className="form-control form-select"
+                onChange={setAProp("preset_value")}
+              >
+                <option value=""></option>
+                {preset_options.map((po, ix) => (
+                  <option key={ix} value={po}>
+                    {po}
+                  </option>
+                ))}
+              </select>
+            </td>
+          </tr>
+        ) : null}
+        <tr>
+          <td>
+            <label>Label</label>
+          </td>
+          <td>
+            <input
+              value={label}
+              className="w-100"
+              onChange={setAProp("label")}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Button size</label>
+          </td>
+          <td>
+            <select
+              className="form-control form-select"
+              value={size}
+              onChange={setAProp("size")}
+            >
+              <option value="">Standard</option>
+              <option value="btn-lg">Large</option>
+              <option value="btn-sm">Small</option>
+              <option value="btn-block">Block</option>
+              <option value="btn-block btn-lg">Large block</option>
+              <option value="btn-block btn-sm">Small block</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Button style</label>
+          </td>
+          <td>
+            <select
+              className="form-control form-select"
+              value={style}
+              onChange={setAProp("style")}
+            >
+              <option value="primary">Primary</option>
+              <option value="secondary">Secondary</option>
+              <option value="success">Success</option>
+              <option value="danger">Danger</option>
+              <option value="warning">Warning</option>
+              <option value="info">Info</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>
+            <BlockSetting block={block} setProp={setProp} />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+/**
+ * @type {object}
+ */
+ToggleFilter.craft = {
+  displayName: "ToggleFilter",
+  related: {
+    settings: ToggleFilterSettings,
+    segment_type: "toggle_filter",
+    column_type: "ToggleFilter",
+    fields: [
+      { name: "name", segment_name: "field_name", column_name: "field_name" },
+      "value",
+      "preset_value",
+      "block",
+      "label",
+      "size",
+      "style",
+    ],
+  },
+};

package/src/components/elements/View.js

@@ -0,0 +1,189 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/View
+ * @subcategory components / elements
+ */
+
+import React, { Fragment, useContext, useEffect } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import previewCtx from "../preview_context";
+
+import {
+  blockProps,
+  BlockSetting,
+  MinRoleSetting,
+  fetchViewPreview,
+  ConfigForm,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {*} props.name
+ * @param {string} props.view
+ * @param {*} props.state
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const View = ({ name, view, configuration, state }) => {
+  const {
+    selected,
+    node_id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
+  const options = useContext(optionsCtx);
+
+  const views = options.views;
+  const theview = views.find((v) => v.name === view);
+  const label = theview ? theview.label : view;
+  const { previews, setPreviews } = useContext(previewCtx);
+  const myPreview = previews[node_id];
+  useEffect(() => {
+    fetchViewPreview({
+      options,
+      view,
+      setPreviews,
+      configuration,
+      node_id,
+    })();
+  }, [view, configuration, state]);
+  return (
+    <div
+      ref={(dom) => connect(drag(dom))}
+      className={`${myPreview ? "" : "builder-embed-view"} text-center ${
+        selected ? "selected-node" : ""
+      }`}
+    >
+      {myPreview ? (
+        <div
+          className="d-inline"
+          dangerouslySetInnerHTML={{ __html: myPreview }}
+        ></div>
+      ) : (
+        `View: ${label}`
+      )}
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ViewSettings = () => {
+  const node = useNode((node) => ({
+    name: node.data.props.name,
+    view: node.data.props.view,
+    state: node.data.props.state,
+    extra_state_fml: node.data.props.extra_state_fml,
+    configuration: node.data.props.configuration, // fixed states
+    node_id: node.id,
+  }));
+
+  const {
+    actions: { setProp },
+    name,
+    view,
+    state,
+    node_id,
+    configuration,
+    extra_state_fml,
+  } = node;
+  const options = useContext(optionsCtx);
+  const views = options.views;
+  const fixed_state_fields =
+    options.fixed_state_fields && options.fixed_state_fields[view];
+  const { setPreviews } = useContext(previewCtx);
+
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
+  return (
+    <div>
+      <div>
+        <label>View to {options.mode === "show" ? "embed" : "show"}</label>
+        <select
+          value={view}
+          className="form-control form-select"
+          onChange={(e) => {
+            setProp((prop) => (prop.view = e.target.value));
+          }}
+        >
+          {views.map((f, ix) => (
+            <option key={ix} value={f.name}>
+              {f.label || f.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      {options.mode === "page" && (
+        <Fragment>
+          <div>
+            <label>State</label>
+            <select
+              value={state}
+              className="form-control form-select"
+              onChange={setAProp("state")}
+            >
+              <option value="shared">Shared</option>
+              <option value="fixed">Fixed</option>
+            </select>
+          </div>
+          {state === "fixed" &&
+            fixed_state_fields &&
+            fixed_state_fields.length > 0 && (
+              <Fragment>
+                <h6>View state fields</h6>
+                <ConfigForm
+                  fields={fixed_state_fields}
+                  configuration={configuration || {}}
+                  setProp={setProp}
+                  node={node}
+                />
+              </Fragment>
+            )}
+        </Fragment>
+      )}
+      {(state === "shared" || options.mode === "page") && (
+        <Fragment>
+          {" "}
+          <label>Extra state Formula</label>
+          <input
+            type="text"
+            className="viewlink-label form-control"
+            value={extra_state_fml}
+            onChange={(e) =>
+              setProp((prop) => (prop.extra_state_fml = e.target.value))
+            }
+          />
+        </Fragment>
+      )}
+      {view ? (
+        <a
+          className="d-block mt-2"
+          target="_blank"
+          href={`/viewedit/config/${view}`}
+        >
+          Configure this view
+        </a>
+      ) : null}
+    </div>
+  );
+};
+
+/**
+ * @type {object}
+ */
+View.craft = {
+  displayName: "View",
+  related: {
+    settings: ViewSettings,
+  },
+};

package/src/components/elements/ViewLink.js

@@ -0,0 +1,225 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/ViewLink
+ * @subcategory components / elements
+ */
+
+import React, { useContext } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import {
+  blockProps,
+  BlockSetting,
+  MinRoleSettingRow,
+  OrFormula,
+  TextStyleSetting,
+  ButtonOrLinkSettingsRows,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {string} props.name
+ * @param {boolean} props.block
+ * @param {*} props.minRole
+ * @param {string} props.link_style
+ * @param {string} props.link_size
+ * @param {string} [props.link_icon]
+ * @param {boolean} props.inModal
+ * @param {string} [props.label]
+ * @param {string} props.textStyle
+ * @param {string} [props.link_bgcol]
+ * @param {string} [props.link_bordercol]
+ * @param {string} [props.link_textcol]
+ * @returns {tr}
+ * @category saltcorn-builder
+ * @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"
+          ? {
+              backgroundColor: link_bgcol || "#000000",
+              borderColor: link_bordercol || "#000000",
+              color: link_textcol || "#000000",
+            }
+          : {}
+      }
+    >
+      {link_icon ? <i className={`${link_icon} me-1`}></i> : ""}
+      {displabel}
+    </span>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @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);
+  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={(e) =>
+                  setProp((prop) => (prop.name = e.target.value))
+                }
+              >
+                {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 }}>
+                <input
+                  type="text"
+                  className="viewlink-label form-control"
+                  value={label}
+                  onChange={(e) =>
+                    setProp((prop) => (prop.label = e.target.value))
+                  }
+                />
+              </OrFormula>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan="2">
+              <label>Extra state Formula</label>
+              <input
+                type="text"
+                className="viewlink-label form-control"
+                value={extra_state_fml}
+                onChange={(e) =>
+                  setProp((prop) => (prop.extra_state_fml = e.target.value))
+                }
+              />
+            </td>
+          </tr>
+
+          <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={inModal}
+          onChange={(e) => setProp((prop) => (prop.inModal = e.target.checked))}
+        />
+        <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>
+  );
+};
+
+/**
+ * @type {object}
+ */
+ViewLink.craft = {
+  displayName: "ViewLink",
+  defaultProps: {
+    isFormula: {},
+  },
+  related: {
+    settings: ViewLinkSettings,
+    segment_type: "view_link",
+    column_type: "ViewLink",
+    fields: [
+      { name: "name", segment_name: "view", column_name: "view" },
+      { name: "label", segment_name: "view_label", canBeFormula: true },
+      "block",
+      "textStyle",
+      { name: "inModal", segment_name: "in_modal", column_name: "in_modal" },
+      "minRole",
+      "link_style",
+      "link_icon",
+      "link_size",
+      "link_bgcol",
+      "link_bordercol",
+      "link_textcol",
+      "extra_state_fml",
+    ],
+  },
+};