@saltcorn/builder 0.7.4 → 0.8.0-beta.1

package/src/components/elements/View.js

@@ -29,46 +29,45 @@ export /**
  * @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,
+  const View = ({ name, view, configuration, state }) => {
+    const {
+      selected,
       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>
-  );
-};
+      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"} ${selected ? "selected-node" : ""
+          }`}
+      >
+        {myPreview ? (
+          <div
+            className="d-inline"
+            dangerouslySetInnerHTML={{ __html: myPreview }}
+          ></div>
+        ) : (
+          `View: ${label}`
+        )}
+      </div>
+    );
+  };
 
 export /**
  * @returns {div}
@@ -76,115 +75,161 @@ export /**
  * @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 ViewSettings = () => {
+    const node = useNode((node) => ({
+      view_name: node.data.props.view_name,
+      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 {
+      actions: { setProp },
+      name,
+      view,
+      state,
+      node_id,
+      configuration,
+      extra_state_fml,
+      view_name,
+    } = 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 = setAPropGen(setProp);
-  let errorString = false;
-  try {
-    Function("return " + extra_state_fml);
-  } catch (error) {
-    errorString = error.message;
-  }
-  let viewname = view;
-  if (viewname && viewname.includes(":")) viewname = viewname.split(":")[1];
-  if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
+    const setAProp = setAPropGen(setProp);
+    let errorString = false;
+    try {
+      Function("return " + extra_state_fml);
+    } catch (error) {
+      errorString = error.message;
+    }
+    let viewname = view_name || view;
+    if (viewname && viewname.includes(":")) viewname = viewname.split(":")[1];
+    if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
+    const set_view_name = (e) => {
+      if (e.target) {
+        const target_value = e.target.value;
+        setProp((prop) => (prop.view_name = target_value));
+        if (target_value !== viewname) {
+          setProp((prop) => (prop.view = options.view_relation_opts[target_value][0].value));
 
-  return (
-    <div>
+        }
+      }
+    };
+    return (
       <div>
-        <label>View to {options.mode === "show" ? "embed" : "show"}</label>
-        <select
-          value={view}
-          className="form-control form-select"
-          onChange={setAProp("view")}
-        >
-          {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>
+        {options.view_name_opts
+          ? <Fragment>
+            <div>
+              <label>View to {options.mode === "show" ? "embed" : "show"}</label>
+              <select
+                value={viewname}
+                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>
+            </div>
+            <div>
+              <label>Relation</label>
+              <select
+                value={view}
+                className="form-control form-select"
+                onChange={setAProp("view")}
+                onBlur={setAProp("view")}
+              >
+                {(options.view_relation_opts[viewname] || []).map((f, ix) => (
+                  <option key={ix} value={f.value}>
+                    {f.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </Fragment>
+          : <div>
+            <label>View to {options.mode === "show" ? "embed" : "show"}</label>
             <select
-              value={state}
+              value={view}
               className="form-control form-select"
-              onChange={setAProp("state")}
+              onChange={setAProp("view")}
+              onBlur={setAProp("view")}
             >
-              <option value="shared">Shared</option>
-              <option value="fixed">Fixed</option>
+              {views.map((f, ix) => (
+                <option key={ix} value={f.name}>
+                  {f.label || f.name}
+                </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 <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}
-        </Fragment>
-      )}
-      {view ? (
-        <a
-          className="d-block mt-2"
-          target="_blank"
-          href={`/viewedit/config/${viewname}`}
-        >
-          Configure this view
-        </a>
-      ) : null}
-    </div>
-  );
-};
+          </div>}
+        {options.mode === "page" && (
+          <Fragment>
+            <div>
+              <label>State</label>
+              <select
+                value={state}
+                className="form-control form-select"
+                onChange={setAProp("state")}
+                onBlur={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 <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}
+          </Fragment>
+        )}
+        {view ? (
+          <a
+            className="d-block mt-2"
+            target="_blank"
+            href={`/viewedit/config/${viewname}`}
+          >
+            Configure this view
+          </a>
+        ) : null}
+      </div>
+    );
+  };
 
 /**
  * @type {object}