@solidxai/core-ui 0.1.12-beta.0 → 0.1.12-beta.2

package/dist/routes/pages/admin/core/DatasourcesPage.tsx

@@ -0,0 +1,540 @@
+import { Database, Plus, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { showToast } from "../../../../redux/features/toastSlice";
+import {
+  type CreateDatasourceManagementPayload,
+  type DatasourceManagementRecord,
+  useCreateDatasourceMutation,
+  useGetDatasourcesQuery,
+} from "../../../../redux/api/datasourceManagementApi";
+import {
+  SolidButton,
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogDescription,
+  SolidDialogFooter,
+  SolidDialogHeader,
+  SolidDialogSeparator,
+  SolidDialogTitle,
+  SolidInput,
+  SolidPanel,
+  SolidSelect,
+  SolidSpinner,
+  SolidSwitch,
+} from "../../../../components/shad-cn-ui";
+import "./DatasourcesPage.css";
+
+const providerOptions = [
+  { label: "PostgreSQL", value: "postgres" },
+  { label: "MySQL", value: "mysql" },
+  { label: "MS SQL Server", value: "mssql" },
+] as const;
+
+const defaultFormState: CreateDatasourceManagementPayload = {
+  name: "",
+  displayName: "",
+  type: "postgres",
+  host: "",
+  port: 5432,
+  database: "",
+  username: "",
+  password: "",
+  synchronize: false,
+  logging: false,
+  ssl: false,
+  sslRejectUnauthorized: true,
+  poolMax: 20,
+  connectionTimeoutMs: 60000,
+  idleTimeoutMs: 30000,
+  statementTimeoutMs: 60000,
+  idleInTxTimeoutMs: 60000,
+  retryAttempts: 0,
+  retryDelayMs: 0,
+  encrypt: false,
+  trustServerCertificate: true,
+};
+
+function slugifyDatasourceName(value: string) {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+}
+
+function getDefaultPort(type: CreateDatasourceManagementPayload["type"]) {
+  if (type === "mysql") return 3306;
+  if (type === "mssql") return 1433;
+  return 5432;
+}
+
+function providerLabel(type: string) {
+  return providerOptions.find((option) => option.value === type)?.label || type;
+}
+
+function providerTone(type: string) {
+  if (type === "postgres") return "sdm-provider-mark--postgres";
+  if (type === "mysql") return "sdm-provider-mark--mysql";
+  return "sdm-provider-mark--mssql";
+}
+
+function providerGlyph(type: string) {
+  if (type === "postgres") return "PG";
+  if (type === "mysql") return "MY";
+  return "MS";
+}
+
+function readMutationError(error: any) {
+  return (
+    error?.data?.message
+    || error?.error
+    || error?.message
+    || "Unable to save the datasource."
+  );
+}
+
+function sanitizePayload(formState: CreateDatasourceManagementPayload): CreateDatasourceManagementPayload {
+  const payload: CreateDatasourceManagementPayload = {
+    ...formState,
+    name: slugifyDatasourceName(formState.name),
+  };
+
+  if (payload.type === "mssql") {
+    delete payload.ssl;
+    delete payload.sslRejectUnauthorized;
+    delete payload.statementTimeoutMs;
+    delete payload.idleInTxTimeoutMs;
+  } else {
+    delete payload.encrypt;
+    delete payload.trustServerCertificate;
+  }
+
+  if (payload.type !== "postgres") {
+    delete payload.statementTimeoutMs;
+    delete payload.idleInTxTimeoutMs;
+  }
+
+  return payload;
+}
+
+function DatasourceProviderMark({ type }: { type: string }) {
+  return (
+    <div className={`sdm-provider-mark ${providerTone(type)}`}>
+      <span>{providerGlyph(type)}</span>
+    </div>
+  );
+}
+
+export function DatasourcesPage() {
+  const dispatch = useDispatch();
+  const {
+    data: datasources = [],
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  } = useGetDatasourcesQuery();
+  const [createDatasource, { isLoading: isCreating }] = useCreateDatasourceMutation();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [nameTouched, setNameTouched] = useState(false);
+  const [formState, setFormState] = useState<CreateDatasourceManagementPayload>(defaultFormState);
+
+  useEffect(() => {
+    if (!dialogOpen) {
+      setFormState(defaultFormState);
+      setNameTouched(false);
+    }
+  }, [dialogOpen]);
+
+  const handleFieldChange = <K extends keyof CreateDatasourceManagementPayload>(
+    key: K,
+    value: CreateDatasourceManagementPayload[K],
+  ) => {
+    setFormState((current) => ({
+      ...current,
+      [key]: value,
+    }));
+  };
+
+  const handleDisplayNameChange = (value: string) => {
+    setFormState((current) => ({
+      ...current,
+      displayName: value,
+      name: nameTouched ? current.name : slugifyDatasourceName(value),
+    }));
+  };
+
+  const handleTypeChange = (value: CreateDatasourceManagementPayload["type"]) => {
+    handleFieldChange("type", value);
+    handleFieldChange("port", getDefaultPort(value));
+  };
+
+  const handleSubmit = async () => {
+    if (!formState.name || !formState.host || !formState.database || !formState.username || !formState.password) {
+      dispatch(showToast({
+        severity: "warn",
+        summary: "Missing details",
+        detail: "Fill in the datasource name, host, database, username, and password.",
+      }));
+      return;
+    }
+
+    try {
+      const payload = sanitizePayload(formState);
+      await createDatasource(payload).unwrap();
+      setDialogOpen(false);
+      dispatch(showToast({
+        severity: "success",
+        summary: "Datasource created",
+        detail: `${payload.displayName || payload.name} is now registered in SolidX.`,
+      }));
+    } catch (mutationError: any) {
+      dispatch(showToast({
+        severity: "error",
+        summary: "Datasource creation failed",
+        detail: readMutationError(mutationError),
+      }));
+    }
+  };
+
+  return (
+    <div className="sdm-page">
+      <div className="sdm-header">
+        <div className="sdm-title-block">
+          <h1 className="sdm-title">Datasource Management</h1>
+          <p className="sdm-subtitle">Review and manage the datasources configured for this SolidX application.</p>
+        </div>
+
+        <div className="sdm-header-actions">
+          {isFetching && !isLoading ? (
+            <div className="sdm-inline-status">
+              <SolidSpinner size={16} />
+              <span>Refreshing</span>
+            </div>
+          ) : null}
+
+          <SolidButton
+            className="sdm-icon-button"
+            leftIcon={<Plus size={16} />}
+            onClick={() => setDialogOpen(true)}
+            tooltip="Add datasource"
+            aria-label="Add datasource"
+          />
+
+          <SolidButton
+            className="sdm-icon-button"
+            leftIcon={<RefreshCw size={16} />}
+            onClick={() => void refetch()}
+            tooltip="Refresh"
+            aria-label="Refresh"
+          />
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="sdm-loading">
+          <SolidSpinner size={28} />
+          <p>Loading datasource configuration...</p>
+        </div>
+      ) : error ? (
+        <div className="sdm-error">
+          <span>Unable to load datasource configuration.</span>
+          <SolidButton size="small" variant="outline" onClick={() => void refetch()}>
+            Retry
+          </SolidButton>
+        </div>
+      ) : datasources.length ? (
+        <div className="sdm-grid">
+          {datasources.map((datasource) => (
+            <article key={datasource.name} className="sdm-card">
+              <div className="sdm-card__top">
+                <div className="sdm-card__identity">
+                  <DatasourceProviderMark type={datasource.type} />
+                  <div>
+                    <h3>{datasource.displayName}</h3>
+                    <p>{datasource.name}</p>
+                  </div>
+                </div>
+                <div className="sdm-card__badges">
+                  <span className="sdm-badge sdm-badge--provider">{providerLabel(datasource.type)}</span>
+                  {datasource.isDefault ? <span className="sdm-badge sdm-badge--default">Default</span> : null}
+                </div>
+              </div>
+
+              <div className="sdm-card__facts">
+                <div className="sdm-card__row">
+                  <span>Host</span>
+                  <strong>{datasource.host || "Not configured"}</strong>
+                </div>
+                <div className="sdm-card__row">
+                  <span>Port</span>
+                  <strong>{datasource.port ?? "Not configured"}</strong>
+                </div>
+                <div className="sdm-card__row">
+                  <span>Database</span>
+                  <strong>{datasource.database || "Not configured"}</strong>
+                </div>
+                <div className="sdm-card__row">
+                  <span>User</span>
+                  <strong>{datasource.username || "Not configured"}</strong>
+                </div>
+                <div className="sdm-card__row">
+                  <span>Env prefix</span>
+                  <strong>{datasource.envPrefix}</strong>
+                </div>
+                <div className="sdm-card__row">
+                  <span>Password</span>
+                  <strong>{datasource.passwordConfigured ? "Configured" : "Missing"}</strong>
+                </div>
+              </div>
+
+              <div className="sdm-card__footer">
+                <div className="sdm-meta-pill">sync: {datasource.synchronize === null ? "n/a" : String(datasource.synchronize)}</div>
+                <div className="sdm-meta-pill">logging: {datasource.logging === null ? "n/a" : String(datasource.logging)}</div>
+                {datasource.advanced?.poolMax ? <div className="sdm-meta-pill">pool: {datasource.advanced.poolMax}</div> : null}
+              </div>
+            </article>
+          ))}
+        </div>
+      ) : (
+        <div className="sdm-empty">
+          <Database size={22} />
+          <div>
+            <h3>No datasources configured</h3>
+            <p>Create one here and SolidX will wire the module and environment variables for you.</p>
+          </div>
+          <SolidButton size="small" onClick={() => setDialogOpen(true)} leftIcon={<Plus size={14} />}>
+            Add datasource
+          </SolidButton>
+        </div>
+      )}
+
+      <SolidDialog open={dialogOpen} onOpenChange={setDialogOpen} style={{ width: "min(860px, calc(100vw - 32px))" }}>
+        <SolidDialogHeader>
+          <div>
+            <SolidDialogTitle>Add datasource</SolidDialogTitle>
+            <SolidDialogDescription>
+              Create a new datasource module, register it in `app.module.ts`, and persist its env variables to disk.
+            </SolidDialogDescription>
+          </div>
+        </SolidDialogHeader>
+        <SolidDialogSeparator />
+        <SolidDialogBody>
+          <div className="sdm-form-grid">
+            <label className="sdm-form-field">
+              <span>Display name</span>
+              <SolidInput
+                value={formState.displayName || ""}
+                placeholder="Applications"
+                onChange={(event) => handleDisplayNameChange(event.target.value)}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Datasource key</span>
+              <SolidInput
+                value={formState.name}
+                placeholder="applications"
+                onChange={(event) => {
+                  setNameTouched(true);
+                  handleFieldChange("name", slugifyDatasourceName(event.target.value));
+                }}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Provider</span>
+              <SolidSelect
+                value={formState.type}
+                options={providerOptions as any}
+                onChange={(event) => handleTypeChange(event.value)}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Port</span>
+              <SolidInput
+                type="number"
+                value={formState.port}
+                onChange={(event) => handleFieldChange("port", Number(event.target.value) || getDefaultPort(formState.type))}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Host</span>
+              <SolidInput
+                value={formState.host}
+                placeholder="localhost"
+                onChange={(event) => handleFieldChange("host", event.target.value)}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Database</span>
+              <SolidInput
+                value={formState.database}
+                placeholder="solidx_app"
+                onChange={(event) => handleFieldChange("database", event.target.value)}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Username</span>
+              <SolidInput
+                value={formState.username}
+                placeholder="postgres"
+                onChange={(event) => handleFieldChange("username", event.target.value)}
+              />
+            </label>
+
+            <label className="sdm-form-field">
+              <span>Password</span>
+              <SolidInput
+                type="password"
+                value={formState.password}
+                onChange={(event) => handleFieldChange("password", event.target.value)}
+              />
+            </label>
+          </div>
+
+          <div className="sdm-switch-row">
+            <label className="sdm-switch-field">
+              <div>
+                <strong>Synchronize</strong>
+                <span>Write `*_DATABASE_SYNCHRONIZE` for this datasource.</span>
+              </div>
+              <SolidSwitch checked={!!formState.synchronize} onChange={(checked) => handleFieldChange("synchronize", checked)} />
+            </label>
+
+            <label className="sdm-switch-field">
+              <div>
+                <strong>Logging</strong>
+                <span>Enable TypeORM logging through the generated datasource module.</span>
+              </div>
+              <SolidSwitch checked={!!formState.logging} onChange={(checked) => handleFieldChange("logging", checked)} />
+            </label>
+          </div>
+
+          <SolidPanel header="Advanced options" toggleable className="solid-column-panel sdm-advanced-panel">
+            <div className="sdm-advanced-grid">
+              {formState.type === "mssql" ? (
+                <>
+                  <label className="sdm-switch-field sdm-switch-field--inline">
+                    <div>
+                      <strong>Encrypt</strong>
+                      <span>MSSQL connection option.</span>
+                    </div>
+                    <SolidSwitch checked={!!formState.encrypt} onChange={(checked) => handleFieldChange("encrypt", checked)} />
+                  </label>
+
+                  <label className="sdm-switch-field sdm-switch-field--inline">
+                    <div>
+                      <strong>Trust certificate</strong>
+                      <span>Allow self-signed development certificates.</span>
+                    </div>
+                    <SolidSwitch checked={!!formState.trustServerCertificate} onChange={(checked) => handleFieldChange("trustServerCertificate", checked)} />
+                  </label>
+                </>
+              ) : (
+                <>
+                  <label className="sdm-switch-field sdm-switch-field--inline">
+                    <div>
+                      <strong>SSL</strong>
+                      <span>Enable SSL for PostgreSQL or MySQL.</span>
+                    </div>
+                    <SolidSwitch checked={!!formState.ssl} onChange={(checked) => handleFieldChange("ssl", checked)} />
+                  </label>
+
+                  <label className="sdm-switch-field sdm-switch-field--inline">
+                    <div>
+                      <strong>Reject unauthorized</strong>
+                      <span>Keep certificate validation strict when SSL is enabled.</span>
+                    </div>
+                    <SolidSwitch checked={!!formState.sslRejectUnauthorized} onChange={(checked) => handleFieldChange("sslRejectUnauthorized", checked)} />
+                  </label>
+                </>
+              )}
+
+              <label className="sdm-form-field">
+                <span>Pool max</span>
+                <SolidInput
+                  type="number"
+                  value={formState.poolMax ?? ""}
+                  onChange={(event) => handleFieldChange("poolMax", Number(event.target.value) || 0)}
+                />
+              </label>
+
+              <label className="sdm-form-field">
+                <span>Connection timeout (ms)</span>
+                <SolidInput
+                  type="number"
+                  value={formState.connectionTimeoutMs ?? ""}
+                  onChange={(event) => handleFieldChange("connectionTimeoutMs", Number(event.target.value) || 0)}
+                />
+              </label>
+
+              <label className="sdm-form-field">
+                <span>Idle timeout (ms)</span>
+                <SolidInput
+                  type="number"
+                  value={formState.idleTimeoutMs ?? ""}
+                  onChange={(event) => handleFieldChange("idleTimeoutMs", Number(event.target.value) || 0)}
+                />
+              </label>
+
+              {formState.type === "postgres" ? (
+                <>
+                  <label className="sdm-form-field">
+                    <span>Statement timeout (ms)</span>
+                    <SolidInput
+                      type="number"
+                      value={formState.statementTimeoutMs ?? ""}
+                      onChange={(event) => handleFieldChange("statementTimeoutMs", Number(event.target.value) || 0)}
+                    />
+                  </label>
+
+                  <label className="sdm-form-field">
+                    <span>Idle in transaction timeout (ms)</span>
+                    <SolidInput
+                      type="number"
+                      value={formState.idleInTxTimeoutMs ?? ""}
+                      onChange={(event) => handleFieldChange("idleInTxTimeoutMs", Number(event.target.value) || 0)}
+                    />
+                  </label>
+                </>
+              ) : null}
+
+              <label className="sdm-form-field">
+                <span>Retry attempts</span>
+                <SolidInput
+                  type="number"
+                  value={formState.retryAttempts ?? ""}
+                  onChange={(event) => handleFieldChange("retryAttempts", Number(event.target.value) || 0)}
+                />
+              </label>
+
+              <label className="sdm-form-field">
+                <span>Retry delay (ms)</span>
+                <SolidInput
+                  type="number"
+                  value={formState.retryDelayMs ?? ""}
+                  onChange={(event) => handleFieldChange("retryDelayMs", Number(event.target.value) || 0)}
+                />
+              </label>
+            </div>
+          </SolidPanel>
+        </SolidDialogBody>
+        <SolidDialogFooter>
+          <SolidButton variant="outline" onClick={() => setDialogOpen(false)}>
+            Cancel
+          </SolidButton>
+          <SolidButton onClick={() => void handleSubmit()} loading={isCreating}>
+            Create datasource
+          </SolidButton>
+        </SolidDialogFooter>
+      </SolidDialog>
+    </div>
+  );
+}

package/dist/routes/pages/admin/core/KanbanPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/KanbanPage.tsx"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,4CAKzB"}
+{"version":3,"file":"KanbanPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/KanbanPage.tsx"],"names":[],"mappings":"AAQA,wBAAgB,UAAU,4CAczB"}

package/dist/routes/pages/admin/core/KanbanPage.js

@@ -12,11 +12,22 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SolidKanbanView } from "../../../../components/core/kanban/SolidKanbanView";
 import { camelCase } from "lodash";
+import { useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { storeCurrentModelViewContext } from "../../../../helpers/modelViewPersistence";
+import { usePathname } from "../../../../hooks/usePathname";
+import { useSearchParams } from "../../../../hooks/useSearchParams";
 export function KanbanPage() {
     var params = useParams();
+    var pathname = usePathname();
+    var searchParams = useSearchParams();
+    var search = searchParams.toString();
     var moduleName = params.moduleName || "";
     var modelName = params.modelName ? camelCase(params.modelName) : "";
+    useEffect(function () {
+        var currentUrl = search ? "".concat(pathname, "?").concat(search) : pathname;
+        storeCurrentModelViewContext(currentUrl);
+    }, [pathname, search]);
     return _jsx(SolidKanbanView, __assign({}, params, { embeded: false, moduleName: moduleName, modelName: modelName }));
 }
 //# sourceMappingURL=KanbanPage.js.map

package/dist/routes/pages/admin/core/KanbanPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanPage.js","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/KanbanPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,UAAU,UAAU;IACxB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;IAC3C,IAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtE,OAAO,KAAC,eAAe,eAAK,MAAM,IAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,IAAI,CAAC;AACvG,CAAC","sourcesContent":["import { SolidKanbanView } from \"../../../../components/core/kanban/SolidKanbanView\";\nimport { camelCase } from \"lodash\";\nimport { useParams } from \"react-router-dom\";\n\nexport function KanbanPage() {\n  const params = useParams();\n  const moduleName = params.moduleName || \"\";\n  const modelName = params.modelName ? camelCase(params.modelName) : \"\";\n  return <SolidKanbanView {...params} embeded={false} moduleName={moduleName} modelName={modelName} />;\n}\n"]}
+{"version":3,"file":"KanbanPage.js","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/KanbanPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,MAAM,UAAU,UAAU;IACxB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAM,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;IACvC,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;IAC3C,IAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtE,SAAS,CAAC;QACR,IAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,cAAI,MAAM,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/D,4BAA4B,CAAC,UAAU,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAEvB,OAAO,KAAC,eAAe,eAAK,MAAM,IAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,IAAI,CAAC;AACvG,CAAC","sourcesContent":["import { SolidKanbanView } from \"../../../../components/core/kanban/SolidKanbanView\";\nimport { camelCase } from \"lodash\";\nimport { useEffect } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { storeCurrentModelViewContext } from \"../../../../helpers/modelViewPersistence\";\nimport { usePathname } from \"../../../../hooks/usePathname\";\nimport { useSearchParams } from \"../../../../hooks/useSearchParams\";\n\nexport function KanbanPage() {\n  const params = useParams();\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  const search = searchParams.toString();\n  const moduleName = params.moduleName || \"\";\n  const modelName = params.modelName ? camelCase(params.modelName) : \"\";\n\n  useEffect(() => {\n    const currentUrl = search ? `${pathname}?${search}` : pathname;\n    storeCurrentModelViewContext(currentUrl);\n  }, [pathname, search]);\n\n  return <SolidKanbanView {...params} embeded={false} moduleName={moduleName} modelName={modelName} />;\n}\n"]}

package/dist/routes/pages/admin/core/KanbanPage.tsx

@@ -1,10 +1,23 @@
 import { SolidKanbanView } from "../../../../components/core/kanban/SolidKanbanView";
 import { camelCase } from "lodash";
+import { useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { storeCurrentModelViewContext } from "../../../../helpers/modelViewPersistence";
+import { usePathname } from "../../../../hooks/usePathname";
+import { useSearchParams } from "../../../../hooks/useSearchParams";
 
 export function KanbanPage() {
   const params = useParams();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const search = searchParams.toString();
   const moduleName = params.moduleName || "";
   const modelName = params.modelName ? camelCase(params.modelName) : "";
+
+  useEffect(() => {
+    const currentUrl = search ? `${pathname}?${search}` : pathname;
+    storeCurrentModelViewContext(currentUrl);
+  }, [pathname, search]);
+
   return <SolidKanbanView {...params} embeded={false} moduleName={moduleName} modelName={modelName} />;
 }

package/dist/routes/pages/admin/core/ListPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/ListPage.tsx"],"names":[],"mappings":"AAOA,wBAAgB,QAAQ,4CAuBvB"}
+{"version":3,"file":"ListPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/ListPage.tsx"],"names":[],"mappings":"AAUA,wBAAgB,QAAQ,4CA+CvB"}

package/dist/routes/pages/admin/core/ListPage.js

@@ -12,12 +12,18 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SolidListView } from "../../../../components/core/list/SolidListView";
 import { camelCase } from "lodash";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 import { registerListView, unregisterListView } from "../../../../components/core/list/listViewRegistry";
+import { usePathname } from "../../../../hooks/usePathname";
+import { useRouter } from "../../../../hooks/useRouter";
+import { resolveRetainedModelViewRoute, storeCurrentModelViewContext } from "../../../../helpers/modelViewPersistence";
 export function ListPage() {
     var params = useParams();
-    var _a = useSearchParams(), searchParams = _a[0], setSearchParams = _a[1];
+    var searchParams = useSearchParams()[0];
+    var pathname = usePathname();
+    var router = useRouter();
+    var search = searchParams.toString();
     var moduleName = params.moduleName || "";
     var modelName = params.modelName ? camelCase(params.modelName) : "";
     var menuItemId = searchParams.get("menuItemId") || "";
@@ -32,6 +38,23 @@ export function ListPage() {
         }
         unregisterListView(listId);
     }, [listId]);
+    useEffect(function () {
+        var currentUrl = search ? "".concat(pathname, "?").concat(search) : pathname;
+        var hasSavedQuery = searchParams.has("savedQuery");
+        if (!hasSavedQuery) {
+            var retainedUrl = resolveRetainedModelViewRoute(currentUrl);
+            if (retainedUrl !== currentUrl) {
+                router.replace(retainedUrl);
+                return;
+            }
+        }
+        // savedQuery strip karke store karo
+        var params = new URLSearchParams(search);
+        params.delete("savedQuery");
+        var cleanSearch = params.toString();
+        var urlToStore = cleanSearch ? "".concat(pathname, "?").concat(cleanSearch) : pathname;
+        storeCurrentModelViewContext(urlToStore);
+    }, [pathname, search]);
     return _jsx(SolidListView, __assign({ ref: setListRef }, params, { embeded: false, moduleName: moduleName, modelName: modelName }), listId);
 }
 //# sourceMappingURL=ListPage.js.map

package/dist/routes/pages/admin/core/ListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListPage.js","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/ListPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AAEzG,MAAM,UAAU,QAAQ;IACtB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IACrB,IAAA,KAAkC,eAAe,EAAE,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAC;IAE1D,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;IAC3C,IAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtE,IAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IACxD,IAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAC5D,IAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACpD,IAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAExD,IAAM,MAAM,GAAG,eAAQ,UAAU,cAAI,SAAS,cAAI,UAAU,cAAI,YAAY,cAAI,QAAQ,cAAI,UAAU,CAAE,CAAC;IAEzG,IAAM,UAAU,GAAG,WAAW,CAAC,UAAC,MAAkC;QAChE,IAAI,MAAM,EAAE;YACV,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjC,OAAO;SACR;QACD,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,KAAC,aAAa,aAAC,GAAG,EAAE,UAAU,IAAmB,MAAM,IAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAAhF,MAAM,CAA8E,CAAC;AACnI,CAAC","sourcesContent":["import { SolidListView } from \"../../../../components/core/list/SolidListView\";\nimport { camelCase } from \"lodash\";\nimport { useCallback } from \"react\";\nimport { useParams, useSearchParams } from \"react-router-dom\";\nimport type { SolidListViewHandle } from \"../../../../components/core/list/SolidListView\";\nimport { registerListView, unregisterListView } from \"../../../../components/core/list/listViewRegistry\";\n\nexport function ListPage() {\n  const params = useParams();\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  const moduleName = params.moduleName || \"\";\n  const modelName = params.modelName ? camelCase(params.modelName) : \"\";\n\n  const menuItemId = searchParams.get(\"menuItemId\") || \"\";\n  const menuItemName = searchParams.get(\"menuItemName\") || \"\";\n  const actionId = searchParams.get(\"actionId\") || \"\";\n  const actionName = searchParams.get(\"actionName\") || \"\";\n\n  const listId = `page:${moduleName}:${modelName}:${menuItemId}:${menuItemName}:${actionId}:${actionName}`;\n\n  const setListRef = useCallback((handle: SolidListViewHandle | null) => {\n    if (handle) {\n      registerListView(listId, handle);\n      return;\n    }\n    unregisterListView(listId);\n  }, [listId]);\n\n  return <SolidListView ref={setListRef} key={listId} {...params} embeded={false} moduleName={moduleName} modelName={modelName} />;\n}\n"]}
+{"version":3,"file":"ListPage.js","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/ListPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SolidListView } from \"../../../../components/core/list/SolidListView\";\nimport { camelCase } from \"lodash\";\nimport { useCallback, useEffect } from \"react\";\nimport { useParams, useSearchParams } from \"react-router-dom\";\nimport type { SolidListViewHandle } from \"../../../../components/core/list/SolidListView\";\nimport { registerListView, unregisterListView } from \"../../../../components/core/list/listViewRegistry\";\nimport { usePathname } from \"../../../../hooks/usePathname\";\nimport { useRouter } from \"../../../../hooks/useRouter\";\nimport { resolveRetainedModelViewRoute, storeCurrentModelViewContext } from \"../../../../helpers/modelViewPersistence\";\n\nexport function ListPage() {\n  const params = useParams();\n  const [searchParams] = useSearchParams();\n  const pathname = usePathname();\n  const router = useRouter();\n  const search = searchParams.toString();\n\n  const moduleName = params.moduleName || \"\";\n  const modelName = params.modelName ? camelCase(params.modelName) : \"\";\n\n  const menuItemId = searchParams.get(\"menuItemId\") || \"\";\n  const menuItemName = searchParams.get(\"menuItemName\") || \"\";\n  const actionId = searchParams.get(\"actionId\") || \"\";\n  const actionName = searchParams.get(\"actionName\") || \"\";\n\n  const listId = `page:${moduleName}:${modelName}:${menuItemId}:${menuItemName}:${actionId}:${actionName}`;\n\n  const setListRef = useCallback((handle: SolidListViewHandle | null) => {\n    if (handle) {\n      registerListView(listId, handle);\n      return;\n    }\n    unregisterListView(listId);\n  }, [listId]);\n\n  useEffect(() => {\n    const currentUrl = search ? `${pathname}?${search}` : pathname;\n    const hasSavedQuery = searchParams.has(\"savedQuery\");\n\n    if (!hasSavedQuery) {\n      const retainedUrl = resolveRetainedModelViewRoute(currentUrl);\n      if (retainedUrl !== currentUrl) {\n        router.replace(retainedUrl);\n        return;\n      }\n    }\n\n    // savedQuery strip karke store karo\n    const params = new URLSearchParams(search);\n    params.delete(\"savedQuery\");\n    const cleanSearch = params.toString();\n    const urlToStore = cleanSearch ? `${pathname}?${cleanSearch}` : pathname;\n\n    storeCurrentModelViewContext(urlToStore);\n  }, [pathname, search]);\n\n  return <SolidListView ref={setListRef} key={listId} {...params} embeded={false} moduleName={moduleName} modelName={modelName} />;\n}\n"]}