@saltcorn/builder 0.8.8-beta.4 → 0.8.8-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.8.8-beta.4",
+  "version": "0.8.8-beta.5",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/elements/RelationPicker.js

@@ -178,32 +178,54 @@ export const RelationPicker = ({ options, viewname, update }) => {
                 `${inboundKey.name}_${inboundKey.table}_${level.table}_${reclevel}`
               );
               return hasSubLevels ? (
-                <li
-                  key={`${identifier}_inboundkey_key`}
-                  className={`dropdown-item ${identifier}_inbound_item item_level_${reclevel} ${
-                    reclevel < 5 ? "dropstart" : "dropdown"
-                  }`}
-                  role="button"
-                >
-                  <div
-                    className={`dropdown-toggle ${identifier}_inbound_toggle dropdown_level_${reclevel}`}
+                <div key={`${identifier}_inboundkey_key_div`}>
+                  <li
+                    key={`${identifier}_inboundkey_key`}
+                    className={`dropdown-item ${identifier}_inbound_item item_level_${reclevel} ${
+                      reclevel < 5 ? "dropstart" : "dropdown"
+                    }`}
                     role="button"
-                    aria-expanded="false"
-                    onClick={() => {
-                      $(
-                        `.${identifier}_inbound_toggle,${levelClasses(
-                          reclevel
-                        )}`
-                      ).dropdown("toggle");
-                      if (reclevel > maxRecLevel) setMaxRecLevel(reclevel);
-                      $(activeClasses(reclevel)).removeClass("active");
-                      $(`.${identifier}_inbound_item`).addClass(() => "active");
-                    }}
                   >
-                    {inboundKey.name} (from {inboundKey.table})
-                  </div>
-                  {buildPicker(inboundKey, reclevel + 1)}
-                </li>
+                    <div
+                      className={`dropdown-toggle ${identifier}_inbound_toggle dropdown_level_${reclevel}`}
+                      role="button"
+                      aria-expanded="false"
+                      onClick={() => {
+                        $(
+                          `.${identifier}_inbound_toggle,${levelClasses(
+                            reclevel
+                          )}`
+                        ).dropdown("toggle");
+                        if (reclevel > maxRecLevel) setMaxRecLevel(reclevel);
+                        $(activeClasses(reclevel)).removeClass("active");
+                        $(`.${identifier}_inbound_item`).addClass(
+                          () => "active"
+                        );
+                      }}
+                    >
+                      {inboundKey.name} (from {inboundKey.table})
+                    </div>
+                    {buildPicker(inboundKey, reclevel + 1)}
+                  </li>
+                  {/* it's a level and a direct link */}
+                  {inboundKey.relPath ? (
+                    <li
+                      key={`${identifier}_inboundkey_key_direct`}
+                      className="dropdown-item"
+                      role="button"
+                      onClick={() => {
+                        update(inboundKey.relPath);
+                        $(".dropdown-item.active").removeClass("active");
+                        $(`${levelClasses(0)}`).dropdown("toggle");
+                        setMaxRecLevel(maxRecLevelDefault);
+                      }}
+                    >
+                      {inboundKey.name} (from {inboundKey.table})
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                </div>
               ) : (
                 <li
                   key={`${identifier}_inboundkey_key`}

package/src/components/elements/SearchBar.js

@@ -89,9 +89,11 @@ const SearchBarSettings = () => {
     actions: { setProp },
     has_dropdown,
     show_badges,
+    autofocus,
   } = useNode((node) => ({
     has_dropdown: node.data.props.has_dropdown,
     show_badges: node.data.props.show_badges,
+    autofocus: node.data.props.autofocus,
   }));
   const setAProp = setAPropGen(setProp);
 
@@ -117,6 +119,16 @@ const SearchBarSettings = () => {
         />
         <label className="form-check-label">Show current state badges</label>
       </div>
+      <div className="form-check">
+        <input
+          className="form-check-input"
+          name="block"
+          type="checkbox"
+          checked={autofocus}
+          onChange={setAProp("autofocus", { checked: true })}
+        />
+        <label className="form-check-label">Autofocus</label>
+      </div>
     </div>
   );
 };
@@ -129,11 +141,12 @@ SearchBar.craft = {
   props: {
     has_dropdown: false,
     show_badges: false,
+    autofocus: false,
   },
   related: {
     settings: SearchBarSettings,
     segment_type: "search_bar",
     hasContents: true,
-    fields: ["has_dropdown", "show_badges"],
+    fields: ["has_dropdown", "show_badges", "autofocus"],
   },
 };

package/src/components/elements/View.js

@@ -197,7 +197,7 @@ const ViewSettings = () => {
           </select>
         </div>
       )}
-      {options.mode === "page" && (
+      {options.mode !== "edit" && (
         <Fragment>
           <div>
             <label>State</label>
@@ -207,10 +207,17 @@ const ViewSettings = () => {
               onChange={setAProp("state")}
               onBlur={setAProp("state")}
             >
-              {buildOptions(["shared", "fixed", "local"], {
-                valAttr: true,
-                capitalize: true,
-              })}
+              {buildOptions(
+                [
+                  "shared",
+                  ...(options.mode === "page" ? ["fixed"] : []),
+                  "local",
+                ],
+                {
+                  valAttr: true,
+                  capitalize: true,
+                }
+              )}
             </select>
           </div>
           {state === "fixed" &&