4bnode 4.0.3 → 4.0.5

package/skeleton/.4bnode/assets/js/pages/RoutesPage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { LuCheck, LuCopy, LuPlug, LuShare2 } from "react-icons/lu";
-import { html, api, Icons } from "../lib.js";
+import { html, api, Icons, copyToClipboard } from "../lib.js";
 import { useApp } from "../context.js";
 
 export function RoutesPage() {
@@ -162,7 +162,7 @@ export function RoutesPage() {
   }
 
   function copyShareMarkdown() {
-    navigator.clipboard.writeText(generateShareMarkdown());
+    copyToClipboard(generateShareMarkdown());
     setShareCopied(true);
     toast('Copied to clipboard', 'success');
     setTimeout(() => setShareCopied(false), 2000);
@@ -986,11 +986,11 @@ function CreateRoutePanel({ onCreated }) {
           registerFields:
             routeType === "register" ? registerFields : undefined,
           selectedFields:
-            routeType === "methods" && selectedFields.length > 0
+            (routeType === "methods" || routeType === "crud") && selectedFields.length > 0
               ? selectedFields
               : undefined,
           customFields:
-            routeType === "methods" && customFields.length > 0
+            (routeType === "methods" || routeType === "crud") && customFields.length > 0
               ? customFields
               : undefined,
         },
@@ -1132,95 +1132,194 @@ function CreateRoutePanel({ onCreated }) {
           )}
         </div>
       </div>`}
-      ${routeType === "methods" &&
+      ${routeType === "crud" &&
       html`<div className="form-group">
         <label className="form-label"
-          >Fields from Model
+          >CRUD Methods
           <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
-            >(optional — select fields to destructure from
-            request)</span
+            >(select which operations to include)</span
           ></label
         >
-        ${data.models?.length > 0
-          ? html`<select
-                className="form-select"
-                style=${{ marginBottom: "8px" }}
-                value=${modelName}
-                onChange=${(e) => {
-                  setModelName(e.target.value);
-                  setSelectedFields([]);
+        <div className="flex gap-2">
+          ${["get", "post", "put", "patch", "delete"].map((m) => {
+            const labels = {
+              get: "READ",
+              post: "CREATE",
+              put: "UPDATE",
+              patch: "PATCH",
+              delete: "DELETE",
+            };
+            return html`<button
+              key=${m}
+              className=${`route-method ${m}`}
+              style=${{
+                cursor: "pointer",
+                border: methods.includes(m)
+                  ? "2px solid " + methodColors[m]
+                  : "2px solid transparent",
+                padding: "6px 12px",
+                fontSize: "11px",
+                opacity: methods.includes(m) ? 1 : 0.35,
+                borderRadius: "6px",
+                transition: "all 0.15s",
+              }}
+              onClick=${() => toggleMethod(m)}
+            >
+              ${labels[m]}
+            </button>`;
+          })}
+        </div>
+      </div>`}
+      ${isAuthType &&
+      html`<div className="form-group">
+        <label className="form-label">Model</label>
+        <select
+          className="form-select"
+          value=${modelName}
+          onChange=${(e) => {
+            setModelName(e.target.value);
+            setLoginField("");
+            setPasswordField("");
+            setRegisterFields([]);
+            setSelectedFields([]);
+          }}
+        >
+          <option value="">Select a model...</option>
+          ${(data.models || []).map(
+            (m) =>
+              html`<option key=${m.name} value=${m.name}>
+                ${m.name}
+              </option>`,
+          )}
+        </select>
+        ${!data.models?.length &&
+        html`<div
+          style=${{
+            fontSize: "11px",
+            color: "var(--warning)",
+            marginTop: "4px",
+          }}
+        >
+          No models found. Create a schema first.
+        </div>`}
+      </div>`}
+      ${(routeType === "methods" || routeType === "crud") &&
+      html`<div className="form-group">
+        <label className="form-label"
+          >Model Fields
+          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
+            >(select fields to include in request)</span
+          ></label
+        >
+        <select
+          className="form-select"
+          style=${{ marginBottom: "8px" }}
+          value=${modelName}
+          onChange=${(e) => {
+            setModelName(e.target.value);
+            setSelectedFields([]);
+          }}
+        >
+          <option value="">Select a model...</option>
+          ${(data.models || []).map(
+            (m) =>
+              html`<option key=${m.name} value=${m.name}>
+                ${m.name}
+              </option>`,
+          )}
+        </select>
+        ${modelName &&
+        modelFields.length > 0 &&
+        html`<div>
+          <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+            ${modelFields.map((f) => {
+              const active = selectedFields.includes(f.name);
+              return html`<button
+                key=${f.name}
+                style=${{
+                  padding: "5px 12px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  border: active
+                    ? "1.5px solid var(--accent)"
+                    : "1.5px solid var(--border)",
+                  background: active
+                    ? "var(--accent-glow)"
+                    : "var(--bg-input)",
+                  color: active
+                    ? "var(--accent-light)"
+                    : "var(--text-secondary)",
+                  fontWeight: active ? 600 : 400,
+                  transition: "all 0.15s",
                 }}
+                onClick=${() =>
+                  setSelectedFields((prev) =>
+                    active
+                      ? prev.filter((x) => x !== f.name)
+                      : [...prev, f.name],
+                  )}
               >
-                <option value="">Select a model...</option>
-                ${data.models.map(
-                  (m) =>
-                    html`<option key=${m.name} value=${m.name}>
-                      ${m.name}
-                    </option>`,
-                )}
-              </select>
-              ${modelName &&
-              modelFields.length > 0 &&
-              html`<div
-                className="flex gap-2"
-                style=${{ flexWrap: "wrap" }}
-              >
-                ${modelFields.map((f) => {
-                  const active = selectedFields.includes(f.name);
-                  return html`<button
-                    key=${f.name}
-                    style=${{
-                      padding: "5px 12px",
-                      borderRadius: "6px",
-                      fontSize: "12px",
-                      cursor: "pointer",
-                      border: active
-                        ? "1.5px solid var(--accent)"
-                        : "1.5px solid var(--border)",
-                      background: active
-                        ? "var(--accent-glow)"
-                        : "var(--bg-input)",
-                      color: active
-                        ? "var(--accent-light)"
-                        : "var(--text-secondary)",
-                      fontWeight: active ? 600 : 400,
-                      transition: "all 0.15s",
-                    }}
-                    onClick=${() =>
-                      setSelectedFields((prev) =>
-                        active
-                          ? prev.filter((x) => x !== f.name)
-                          : [...prev, f.name],
-                      )}
-                  >
-                    ${f.name}
-                    <span
-                      style=${{
-                        fontSize: "10px",
-                        color: "var(--text-muted)",
-                        marginLeft: "4px",
-                      }}
-                      >${f.type}</span
-                    >
-                  </button>`;
-                })}
-              </div>`}`
-          : html`<div
+                ${f.name}
+                <span
+                  style=${{
+                    fontSize: "10px",
+                    color: "var(--text-muted)",
+                    marginLeft: "4px",
+                  }}
+                  >${f.type}</span
+                >
+              </button>`;
+            })}
+          </div>
+          <div style=${{ display: "flex", gap: "8px", marginTop: "8px" }}>
+            <button
               style=${{
-                fontSize: "11px",
+                padding: "3px 10px",
+                fontSize: "10px",
+                borderRadius: "4px",
+                border: "1px solid var(--border)",
+                background: "transparent",
+                color: "var(--accent)",
+                cursor: "pointer",
+              }}
+              onClick=${() => setSelectedFields(modelFields.map((f) => f.name))}
+            >
+              Select All
+            </button>
+            <button
+              style=${{
+                padding: "3px 10px",
+                fontSize: "10px",
+                borderRadius: "4px",
+                border: "1px solid var(--border)",
+                background: "transparent",
                 color: "var(--text-muted)",
-                marginTop: "4px",
+                cursor: "pointer",
               }}
+              onClick=${() => setSelectedFields([])}
             >
-              No models found. You can still add custom fields below.
-            </div>`}
+              Clear
+            </button>
+          </div>
+        </div>`}
+        ${!data.models?.length &&
+        html`<div
+          style=${{
+            fontSize: "11px",
+            color: "var(--text-muted)",
+            marginTop: "4px",
+          }}
+        >
+          No models found. You can still add custom fields below.
+        </div>`}
       </div>`}
-      ${routeType === "methods" &&
+      ${(routeType === "methods" || routeType === "crud") &&
       html`<div className="form-group">
         <label className="form-label"
           >Custom Fields
           <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
-            >(add fields received from client)</span
+            >(add extra fields received from client)</span
           ></label
         >
         ${customFields.length > 0 &&
@@ -1338,76 +1437,6 @@ function CreateRoutePanel({ onCreated }) {
           </button>
         </div>
       </div>`}
-      ${routeType === "crud" &&
-      html`<div className="form-group">
-        <label className="form-label"
-          >CRUD Methods
-          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
-            >(select which operations to include)</span
-          ></label
-        >
-        <div className="flex gap-2">
-          ${["get", "post", "put", "patch", "delete"].map((m) => {
-            const labels = {
-              get: "READ",
-              post: "CREATE",
-              put: "UPDATE",
-              patch: "PATCH",
-              delete: "DELETE",
-            };
-            return html`<button
-              key=${m}
-              className=${`route-method ${m}`}
-              style=${{
-                cursor: "pointer",
-                border: methods.includes(m)
-                  ? "2px solid " + methodColors[m]
-                  : "2px solid transparent",
-                padding: "6px 12px",
-                fontSize: "11px",
-                opacity: methods.includes(m) ? 1 : 0.35,
-                borderRadius: "6px",
-                transition: "all 0.15s",
-              }}
-              onClick=${() => toggleMethod(m)}
-            >
-              ${labels[m]}
-            </button>`;
-          })}
-        </div>
-      </div>`}
-      ${needsModel &&
-      html`<div className="form-group">
-        <label className="form-label">Model</label>
-        <select
-          className="form-select"
-          value=${modelName}
-          onChange=${(e) => {
-            setModelName(e.target.value);
-            setLoginField("");
-            setPasswordField("");
-            setRegisterFields([]);
-          }}
-        >
-          <option value="">Select a model...</option>
-          ${(data.models || []).map(
-            (m) =>
-              html`<option key=${m.name} value=${m.name}>
-                ${m.name}
-              </option>`,
-          )}
-        </select>
-        ${!data.models?.length &&
-        html`<div
-          style=${{
-            fontSize: "11px",
-            color: "var(--warning)",
-            marginTop: "4px",
-          }}
-        >
-          No models found. Create a schema first.
-        </div>`}
-      </div>`}
       ${routeType === "login" &&
       modelName &&
       modelFields.length > 0 &&

package/skeleton/.4bnode/assets/js/pages/SchemasPage.js

@@ -341,7 +341,7 @@ function SchemaDetailPanel({ model, reqCount, uniqCount, onEdit, onDelete }) {
         </div>
       </div>
       <div className="flex gap-3">
-        ${[['Fields', model.fields?.length || 0, null], ['Required', reqCount, reqCount > 0 ? 'var(--success)' : null], ['Unique', uniqCount, uniqCount > 0 ? 'var(--warning)' : null]].map(([label, count, color]) =>
+        ${[['Fields', model.fields?.length || 0, null], ['Required', reqCount, reqCount > 0 ? 'var(--success)' : null], ['Unique', uniqCount, uniqCount > 0 ? 'var(--warning)' : null], ['Indexes', (model.fields?.filter(f => f.index).length || 0) + (model.indexes?.length || 0), ((model.fields?.filter(f => f.index).length || 0) + (model.indexes?.length || 0)) > 0 ? 'var(--info)' : null]].map(([label, count, color]) =>
           html`<div key=${label} style=${{ padding: '8px 14px', background: 'var(--bg-input)', borderRadius: 'var(--radius)', fontSize: '13px' }}>
             <span style=${{ color: 'var(--text-muted)' }}>${label} </span>
             <span style=${{ fontWeight: 600, color: color || 'var(--text-secondary)' }}>${count}</span>
@@ -379,7 +379,8 @@ function SchemaDetailPanel({ model, reqCount, uniqCount, onEdit, onDelete }) {
               <td style=${tdStyle}><div className="flex gap-1">
                 ${f.required && html`<span className="badge badge-success" style=${{ fontSize: '10px' }}>required</span>`}
                 ${f.unique && html`<span className="badge badge-warning" style=${{ fontSize: '10px' }}>unique</span>`}
-                ${!f.required && !f.unique && html`<span style=${{ fontSize: '12px', color: 'var(--text-muted)' }}>—</span>`}
+                ${f.index && html`<span className="badge badge-info" style=${{ fontSize: '10px' }}>indexed</span>`}
+                ${!f.required && !f.unique && !f.index && html`<span style=${{ fontSize: '12px', color: 'var(--text-muted)' }}>—</span>`}
               </div></td>
             </tr>`)}
           </tbody>
@@ -485,6 +486,11 @@ function SchemaBuilderPanel({ model, onDone }) {
   const [freq, setFreq] = useState(false);
   const [funiq, setFuniq] = useState(false);
   const [fref, setFref] = useState("");
+  const [findex, setFindex] = useState(false);
+  const [indexes, setIndexes] = useState(model?.indexes || []);
+  const [idxFields, setIdxFields] = useState([]);
+  const [idxType, setIdxType] = useState('compound');
+  const [idxUnique, setIdxUnique] = useState(false);
   const nameRef = useRef(null);
   const fieldNameRef = useRef(null);
 
@@ -516,6 +522,7 @@ function SchemaBuilderPanel({ model, onDone }) {
     setFreq(false);
     setFuniq(false);
     setFref("");
+    setFindex(false);
     setEditIndex(null);
   }
 
@@ -528,6 +535,7 @@ function SchemaBuilderPanel({ model, onDone }) {
       unique: funiq,
     };
     if (ftype === "ObjectId" && fref) fieldData.ref = fref;
+    if (findex) fieldData.index = true;
 
     if (editIndex !== null) {
       setFields((prev) =>
@@ -549,6 +557,7 @@ function SchemaBuilderPanel({ model, onDone }) {
     setFreq(!!f.required);
     setFuniq(!!f.unique);
     setFref(f.ref || "");
+    setFindex(!!f.index);
     setEditIndex(index);
     setTimeout(() => fieldNameRef.current?.focus(), 50);
   }
@@ -573,13 +582,13 @@ function SchemaBuilderPanel({ model, onDone }) {
       if (isEdit) {
         await api("/models/" + model.name, {
           method: "PUT",
-          body: { fields },
+          body: { fields, indexes },
         });
         toast('Model "' + model.name + '" updated', "success");
       } else {
         await api("/models", {
           method: "POST",
-          body: { name: name.trim(), fields },
+          body: { name: name.trim(), fields, indexes },
         });
         toast('Model "' + name.trim() + '" created', "success");
       }
@@ -732,6 +741,25 @@ function SchemaBuilderPanel({ model, onDone }) {
             </div>
             Unique
           </label>
+          <label
+            className="flex items-center gap-2"
+            style=${{
+              cursor: "pointer",
+              fontSize: "12px",
+              whiteSpace: "nowrap",
+              color: findex ? "var(--info)" : "var(--text-muted)",
+            }}
+          >
+            <div className="form-toggle">
+              <input
+                type="checkbox"
+                checked=${findex}
+                onChange=${(e) => setFindex(e.target.checked)}
+              />
+              <span className="slider" />
+            </div>
+            Index
+          </label>
         </div>
         ${editIndex !== null &&
         html`<button
@@ -858,6 +886,18 @@ function SchemaBuilderPanel({ model, onDone }) {
                 }}
                 >UNQ</span
               >`}
+              ${f.index &&
+              html`<span
+                style=${{
+                  fontSize: "9px",
+                  padding: "2px 6px",
+                  borderRadius: "4px",
+                  background: "rgba(59,130,246,0.15)",
+                  color: "var(--info)",
+                  fontWeight: 600,
+                }}
+                >IDX</span
+              >`}
               <button
                 className="btn btn-ghost btn-sm btn-icon"
                 onClick=${() => startEdit(i)}
@@ -897,5 +937,92 @@ function SchemaBuilderPanel({ model, onDone }) {
         Add fields above to define your schema
       </div>
     </div>`}
+
+    <div className="card mb-4" style=${{ padding: '16px' }}>
+      <div style=${{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: '12px' }}>
+        Compound Indexes
+      </div>
+
+      <div className="flex items-center gap-3 mb-3" style=${{ flexWrap: 'wrap' }}>
+        <select className="form-select" value=${idxType}
+          onChange=${(e) => setIdxType(e.target.value)}
+          style=${{ fontSize: '13px', width: '120px' }}>
+          <option value="compound">Compound</option>
+          <option value="text">Text</option>
+        </select>
+
+        ${idxType === 'compound' && html`<label className="flex items-center gap-2" style=${{ cursor: 'pointer', fontSize: '12px', color: idxUnique ? 'var(--warning)' : 'var(--text-muted)' }}>
+          <div className="form-toggle">
+            <input type="checkbox" checked=${idxUnique} onChange=${(e) => setIdxUnique(e.target.checked)} />
+            <span className="slider" />
+          </div>
+          Unique
+        </label>`}
+
+        <button className="btn btn-primary btn-sm"
+          disabled=${idxFields.length < (idxType === 'text' ? 1 : 2)}
+          onClick=${() => {
+            const newIdx = {
+              fields: idxFields.map(f => ({ field: f.field, direction: idxType === 'text' ? 'text' : f.direction })),
+              unique: idxType === 'compound' ? idxUnique : false,
+              type: idxType,
+            };
+            setIndexes(prev => [...prev, newIdx]);
+            setIdxFields([]);
+            setIdxUnique(false);
+            setSaved(false);
+          }}>
+          Add Index
+        </button>
+      </div>
+
+      <div className="flex gap-2 mb-3" style=${{ flexWrap: 'wrap' }}>
+        ${fields.map(f => {
+          const selected = idxFields.find(i => i.field === f.name);
+          return html`<button key=${f.name}
+            onClick=${() => {
+              if (selected) {
+                if (idxType !== 'text') {
+                  if (selected.direction === 1) {
+                    setIdxFields(prev => prev.map(i => i.field === f.name ? { ...i, direction: -1 } : i));
+                  } else {
+                    setIdxFields(prev => prev.filter(i => i.field !== f.name));
+                  }
+                } else {
+                  setIdxFields(prev => prev.filter(i => i.field !== f.name));
+                }
+              } else {
+                setIdxFields(prev => [...prev, { field: f.name, direction: 1 }]);
+              }
+            }}
+            style=${{ padding: '4px 10px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--border)', cursor: 'pointer', fontFamily: 'monospace',
+              background: selected ? 'var(--accent-glow)' : 'transparent',
+              color: selected ? 'var(--accent-light)' : 'var(--text-muted)' }}>
+            ${f.name}${selected && idxType !== 'text' ? (selected.direction === 1 ? ' ASC' : ' DESC') : ''}
+          </button>`;
+        })}
+      </div>
+      ${idxFields.length > 0 && html`<div style=${{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '8px' }}>
+        ${idxType === 'text' ? 'Click to select/deselect fields' : 'Click once = ASC, twice = DESC, third = remove'}
+      </div>`}
+
+      ${indexes.length > 0 && html`<div style=${{ marginTop: '12px' }}>
+        ${indexes.map((idx, i) => html`<div key=${i} className="flex items-center gap-2" style=${{ padding: '6px 12px', background: 'var(--bg-input)', borderRadius: '6px', marginBottom: '4px', fontSize: '12px' }}>
+          <span style=${{ fontSize: '9px', padding: '2px 6px', borderRadius: '4px', fontWeight: 600,
+            background: idx.type === 'text' ? 'rgba(59,130,246,0.15)' : 'rgba(124,58,237,0.15)',
+            color: idx.type === 'text' ? 'var(--info)' : 'var(--accent-light)' }}>
+            ${idx.type === 'text' ? 'TEXT' : 'COMPOUND'}
+          </span>
+          <span style=${{ fontFamily: 'monospace', flex: 1 }}>
+            { ${idx.fields.map(f => f.field + ': ' + (f.direction === 'text' ? "'text'" : f.direction)).join(', ')} }
+          </span>
+          ${idx.unique && html`<span style=${{ fontSize: '9px', padding: '2px 6px', borderRadius: '4px', background: 'var(--warning-glow)', color: 'var(--warning)', fontWeight: 600 }}>UNIQUE</span>`}
+          <button className="btn btn-ghost btn-sm btn-icon" onClick=${() => { setIndexes(prev => prev.filter((_, j) => j !== i)); setSaved(false); }}
+            style=${{ color: 'var(--error)', opacity: 0.5, padding: '4px' }}>
+            ${Icons.trash}
+          </button>
+        </div>`)}
+      </div>`}
+    </div>
   </div>`;
 }