@webiny/app-admin-ui 0.0.0-unstable.0156a4c312

package/Dashboard/components/layout/StaticColumns.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { collapseColumns } from "./collapseColumns.js";
+import { DASHBOARD_MAX_WIDTH } from "./layoutConstants.js";
+const StaticColumns = ({ columns, visibleCount, slots })=>{
+    const collapsed = collapseColumns(columns, visibleCount);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-lg",
+        style: {
+            maxWidth: DASHBOARD_MAX_WIDTH
+        }
+    }, collapsed.map((names, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: index,
+            className: "flex flex-1 flex-col gap-lg"
+        }, names.map((name)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+                key: name
+            }, slots.get(name))))));
+};
+export { StaticColumns };
+
+//# sourceMappingURL=StaticColumns.js.map

package/Dashboard/components/layout/StaticColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/StaticColumns.js","sources":["../../../../src/Dashboard/components/layout/StaticColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { collapseColumns } from \"./collapseColumns.js\";\nimport { DASHBOARD_MAX_WIDTH } from \"./layoutConstants.js\";\n\ninterface StaticColumnsProps {\n    columns: string[][];\n    // How many columns fit on screen; fewer than `columns.length` folds them together.\n    visibleCount: number;\n    slots: Map<string, React.ReactElement>;\n}\n\n// The everyday dashboard: widgets laid out in their columns, nothing to drag.\nexport const StaticColumns = ({ columns, visibleCount, slots }: StaticColumnsProps) => {\n    const collapsed = collapseColumns(columns, visibleCount);\n    return (\n        <div className={\"flex gap-lg\"} style={{ maxWidth: DASHBOARD_MAX_WIDTH }}>\n            {collapsed.map((names, index) => (\n                <div key={index} className={\"flex flex-1 flex-col gap-lg\"}>\n                    {names.map(name => (\n                        <React.Fragment key={name}>{slots.get(name)}</React.Fragment>\n                    ))}\n                </div>\n            ))}\n        </div>\n    );\n};\n"],"names":["StaticColumns","columns","visibleCount","slots","collapsed","collapseColumns","DASHBOARD_MAX_WIDTH","names","index","name","React"],"mappings":";;;AAYO,MAAMA,gBAAgB,CAAC,EAAEC,OAAO,EAAEC,YAAY,EAAEC,KAAK,EAAsB;IAC9E,MAAMC,YAAYC,gBAAgBJ,SAASC;IAC3C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;QAAe,OAAO;YAAE,UAAUI;QAAoB;OACjEF,UAAU,GAAG,CAAC,CAACG,OAAOC,QAAAA,WAAAA,GACnB,oBAAC;YAAI,KAAKA;YAAO,WAAW;WACvBD,MAAM,GAAG,CAACE,CAAAA,OAAAA,WAAAA,GACP,oBAACC,MAAAA,QAAc;gBAAC,KAAKD;eAAON,MAAM,GAAG,CAACM;AAM9D"}

package/Dashboard/components/layout/collapseColumns.d.ts

@@ -0,0 +1 @@
+export declare const collapseColumns: (columns: string[][], count: number) => string[][];

package/Dashboard/components/layout/collapseColumns.js

@@ -0,0 +1,16 @@
+const collapseColumns = (columns, count)=>{
+    const result = Array.from({
+        length: count
+    }, ()=>[]);
+    const perColumn = Math.ceil(columns.length / count);
+    const groupSize = Math.max(1, perColumn);
+    columns.forEach((column, index)=>{
+        const group = Math.floor(index / groupSize);
+        const target = Math.min(group, count - 1);
+        result[target].push(...column);
+    });
+    return result;
+};
+export { collapseColumns };
+
+//# sourceMappingURL=collapseColumns.js.map

package/Dashboard/components/layout/collapseColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/collapseColumns.js","sources":["../../../../src/Dashboard/components/layout/collapseColumns.ts"],"sourcesContent":["// Folds `columns` into `count` visual columns, keeping neighbors together and reading order intact.\nexport const collapseColumns = (columns: string[][], count: number): string[][] => {\n    const result: string[][] = Array.from({ length: count }, () => []);\n    const perColumn = Math.ceil(columns.length / count);\n    const groupSize = Math.max(1, perColumn);\n    columns.forEach((column, index) => {\n        const group = Math.floor(index / groupSize);\n        const target = Math.min(group, count - 1);\n        result[target].push(...column);\n    });\n    return result;\n};\n"],"names":["collapseColumns","columns","count","result","Array","perColumn","Math","groupSize","column","index","group","target"],"mappings":"AACO,MAAMA,kBAAkB,CAACC,SAAqBC;IACjD,MAAMC,SAAqBC,MAAM,IAAI,CAAC;QAAE,QAAQF;IAAM,GAAG,IAAM,EAAE;IACjE,MAAMG,YAAYC,KAAK,IAAI,CAACL,QAAQ,MAAM,GAAGC;IAC7C,MAAMK,YAAYD,KAAK,GAAG,CAAC,GAAGD;IAC9BJ,QAAQ,OAAO,CAAC,CAACO,QAAQC;QACrB,MAAMC,QAAQJ,KAAK,KAAK,CAACG,QAAQF;QACjC,MAAMI,SAASL,KAAK,GAAG,CAACI,OAAOR,QAAQ;QACvCC,MAAM,CAACQ,OAAO,CAAC,IAAI,IAAIH;IAC3B;IACA,OAAOL;AACX"}

package/Dashboard/components/layout/layoutConstants.d.ts

@@ -0,0 +1,2 @@
+export declare const DASHBOARD_MAX_WIDTH = 1600;
+export declare const MIN_COLUMN_WIDTH = 360;

package/Dashboard/components/layout/layoutConstants.js

@@ -0,0 +1,5 @@
+const DASHBOARD_MAX_WIDTH = 1600;
+const MIN_COLUMN_WIDTH = 360;
+export { DASHBOARD_MAX_WIDTH, MIN_COLUMN_WIDTH };
+
+//# sourceMappingURL=layoutConstants.js.map

package/Dashboard/components/layout/layoutConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/layoutConstants.js","sources":["../../../../src/Dashboard/components/layout/layoutConstants.ts"],"sourcesContent":["// One width for every column count, so switching columns doesn't move the toolbar or the cards.\nexport const DASHBOARD_MAX_WIDTH = 1600;\n\n// Minimum width a column needs before the dashboard folds into fewer columns.\nexport const MIN_COLUMN_WIDTH = 360;\n"],"names":["DASHBOARD_MAX_WIDTH","MIN_COLUMN_WIDTH"],"mappings":"AACO,MAAMA,sBAAsB;AAG5B,MAAMC,mBAAmB"}

package/Dashboard/components/layout/useColumnsThatFit.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const useColumnsThatFit: (columnCount: number) => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    visibleCount: number;
+    allFit: boolean;
+};

package/Dashboard/components/layout/useColumnsThatFit.js

@@ -0,0 +1,30 @@
+import react, { useEffect, useState } from "react";
+import { MIN_COLUMN_WIDTH } from "./layoutConstants.js";
+const useColumnsThatFit = (columnCount)=>{
+    const ref = react.useRef(null);
+    const [width, setWidth] = useState(0);
+    useEffect(()=>{
+        const node = ref.current;
+        if (!node) return;
+        setWidth(node.clientWidth);
+        const observer = new ResizeObserver((entries)=>{
+            setWidth(entries[0].contentRect.width);
+        });
+        observer.observe(node);
+        return ()=>observer.disconnect();
+    }, []);
+    let fitCount = columnCount;
+    if (width > 0) {
+        const columnsThatFit = Math.floor(width / MIN_COLUMN_WIDTH);
+        fitCount = Math.max(1, columnsThatFit);
+    }
+    const visibleCount = Math.min(columnCount, fitCount);
+    return {
+        ref,
+        visibleCount,
+        allFit: visibleCount === columnCount
+    };
+};
+export { useColumnsThatFit };
+
+//# sourceMappingURL=useColumnsThatFit.js.map

package/Dashboard/components/layout/useColumnsThatFit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/useColumnsThatFit.js","sources":["../../../../src/Dashboard/components/layout/useColumnsThatFit.ts"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useState } from \"react\";\nimport { MIN_COLUMN_WIDTH } from \"./layoutConstants.js\";\n\n/*\n * Measures the dashboard and works out how many of the chosen columns fit. When fewer fit, the\n * dashboard shows `visibleCount` columns and `allFit` is false (Customize mode needs all of them).\n */\nexport const useColumnsThatFit = (columnCount: number) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [width, setWidth] = useState(0);\n\n    useEffect(() => {\n        const node = ref.current;\n        if (!node) {\n            return;\n        }\n        setWidth(node.clientWidth);\n        const observer = new ResizeObserver(entries => {\n            setWidth(entries[0].contentRect.width);\n        });\n        observer.observe(node);\n        return () => observer.disconnect();\n    }, []);\n\n    let fitCount = columnCount;\n    if (width > 0) {\n        const columnsThatFit = Math.floor(width / MIN_COLUMN_WIDTH);\n        fitCount = Math.max(1, columnsThatFit);\n    }\n    const visibleCount = Math.min(columnCount, fitCount);\n\n    return { ref, visibleCount, allFit: visibleCount === columnCount };\n};\n"],"names":["useColumnsThatFit","columnCount","ref","React","width","setWidth","useState","useEffect","node","observer","ResizeObserver","entries","fitCount","columnsThatFit","Math","MIN_COLUMN_WIDTH","visibleCount"],"mappings":";;AASO,MAAMA,oBAAoB,CAACC;IAC9B,MAAMC,MAAMC,MAAAA,MAAY,CAAiB;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QACN,MAAMC,OAAON,IAAI,OAAO;QACxB,IAAI,CAACM,MACD;QAEJH,SAASG,KAAK,WAAW;QACzB,MAAMC,WAAW,IAAIC,eAAeC,CAAAA;YAChCN,SAASM,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK;QACzC;QACAF,SAAS,OAAO,CAACD;QACjB,OAAO,IAAMC,SAAS,UAAU;IACpC,GAAG,EAAE;IAEL,IAAIG,WAAWX;IACf,IAAIG,QAAQ,GAAG;QACX,MAAMS,iBAAiBC,KAAK,KAAK,CAACV,QAAQW;QAC1CH,WAAWE,KAAK,GAAG,CAAC,GAAGD;IAC3B;IACA,MAAMG,eAAeF,KAAK,GAAG,CAACb,aAAaW;IAE3C,OAAO;QAAEV;QAAKc;QAAc,QAAQA,iBAAiBf;IAAY;AACrE"}

package/Dashboard/components/layout/useWidgetPortals.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const useWidgetPortals: (placed: string[], elements: Map<string, React.ReactElement>) => {
+    slots: Map<string, React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>;
+    portals: React.ReactNode[];
+};

package/Dashboard/components/layout/useWidgetPortals.js

@@ -0,0 +1,26 @@
+import react from "react";
+import { createPortal } from "react-dom";
+import { WidgetSlot } from "../dnd/WidgetSlot.js";
+import { useWidgetHosts } from "../dnd/useWidgetHosts.js";
+const useWidgetPortals = (placed, elements)=>{
+    const getHost = useWidgetHosts();
+    const slots = new Map();
+    const portals = [];
+    for (const name of placed){
+        const element = elements.get(name);
+        if (!element) continue;
+        const host = getHost(name);
+        slots.set(name, /*#__PURE__*/ react.createElement(WidgetSlot, {
+            host: host
+        }));
+        const portal = /*#__PURE__*/ createPortal(element, host, name);
+        portals.push(portal);
+    }
+    return {
+        slots,
+        portals
+    };
+};
+export { useWidgetPortals };
+
+//# sourceMappingURL=useWidgetPortals.js.map

package/Dashboard/components/layout/useWidgetPortals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/useWidgetPortals.js","sources":["../../../../src/Dashboard/components/layout/useWidgetPortals.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { WidgetSlot } from \"../dnd/WidgetSlot.js\";\nimport { useWidgetHosts } from \"../dnd/useWidgetHosts.js\";\n\n/*\n * Renders every placed widget once, into its own container, and returns a slot per widget for the\n * layouts to place. Moving a slot moves the widget without remounting it; see `useWidgetHosts`.\n * Render `portals` once, anywhere stable; render `slots.get(name)` wherever the widget goes.\n */\nexport const useWidgetPortals = (placed: string[], elements: Map<string, React.ReactElement>) => {\n    const getHost = useWidgetHosts();\n    const slots = new Map<string, React.ReactElement>();\n    const portals: React.ReactNode[] = [];\n\n    for (const name of placed) {\n        const element = elements.get(name);\n        if (!element) {\n            continue;\n        }\n        const host = getHost(name);\n        slots.set(name, <WidgetSlot host={host} />);\n        const portal = createPortal(element, host, name);\n        portals.push(portal);\n    }\n\n    return { slots, portals };\n};\n"],"names":["useWidgetPortals","placed","elements","getHost","useWidgetHosts","slots","Map","portals","name","element","host","WidgetSlot","portal","createPortal"],"mappings":";;;;AAUO,MAAMA,mBAAmB,CAACC,QAAkBC;IAC/C,MAAMC,UAAUC;IAChB,MAAMC,QAAQ,IAAIC;IAClB,MAAMC,UAA6B,EAAE;IAErC,KAAK,MAAMC,QAAQP,OAAQ;QACvB,MAAMQ,UAAUP,SAAS,GAAG,CAACM;QAC7B,IAAI,CAACC,SACD;QAEJ,MAAMC,OAAOP,QAAQK;QACrBH,MAAM,GAAG,CAACG,MAAM,WAANA,GAAM,oBAACG,YAAUA;YAAC,MAAMD;;QAClC,MAAME,SAAS,WAATA,GAASC,aAAaJ,SAASC,MAAMF;QAC3CD,QAAQ,IAAI,CAACK;IACjB;IAEA,OAAO;QAAEP;QAAOE;IAAQ;AAC5B"}

package/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.d.ts

@@ -0,0 +1,12 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { FetchDashboardLayoutUseCase as UseCaseAbstraction } from "./abstractions.js";
+import type { DashboardLayoutData } from "../types.js";
+declare class FetchDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {
+    private repository;
+    constructor(repository: DashboardLayoutRepository.Interface);
+    execute(userId: string): Promise<DashboardLayoutData | null>;
+}
+export declare const FetchDashboardLayoutUseCase: typeof FetchDashboardLayoutUseCaseImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IFetchDashboardLayoutUseCase>;
+};
+export {};

package/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.js

@@ -0,0 +1,19 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { FetchDashboardLayoutUseCase } from "./abstractions.js";
+class FetchDashboardLayoutUseCaseImpl {
+    constructor(repository){
+        this.repository = repository;
+    }
+    async execute(userId) {
+        return await this.repository.fetch(userId);
+    }
+}
+const FetchDashboardLayoutUseCase_FetchDashboardLayoutUseCase = FetchDashboardLayoutUseCase.createImplementation({
+    implementation: FetchDashboardLayoutUseCaseImpl,
+    dependencies: [
+        DashboardLayoutRepository
+    ]
+});
+export { FetchDashboardLayoutUseCase_FetchDashboardLayoutUseCase as FetchDashboardLayoutUseCase };
+
+//# sourceMappingURL=FetchDashboardLayoutUseCase.js.map

package/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.ts"],"sourcesContent":["import { DashboardLayoutRepository } from \"../repository/abstractions.js\";\nimport { FetchDashboardLayoutUseCase as UseCaseAbstraction } from \"./abstractions.js\";\nimport type { DashboardLayoutData } from \"../types.js\";\n\nclass FetchDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {\n    constructor(private repository: DashboardLayoutRepository.Interface) {}\n\n    async execute(userId: string): Promise<DashboardLayoutData | null> {\n        return await this.repository.fetch(userId);\n    }\n}\n\nexport const FetchDashboardLayoutUseCase = UseCaseAbstraction.createImplementation({\n    implementation: FetchDashboardLayoutUseCaseImpl,\n    dependencies: [DashboardLayoutRepository]\n});\n"],"names":["FetchDashboardLayoutUseCaseImpl","repository","userId","FetchDashboardLayoutUseCase","UseCaseAbstraction","DashboardLayoutRepository"],"mappings":";;AAIA,MAAMA;IACF,YAAoBC,UAA+C,CAAE;aAAjDA,UAAU,GAAVA;IAAkD;IAEtE,MAAM,QAAQC,MAAc,EAAuC;QAC/D,OAAO,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAACA;IACvC;AACJ;AAEO,MAAMC,0DAA8BC,4BAAAA,oBAAuC,CAAC;IAC/E,gBAAgBJ;IAChB,cAAc;QAACK;KAA0B;AAC7C"}

package/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.d.ts

@@ -0,0 +1,12 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { GetCachedDashboardLayoutUseCase as UseCaseAbstraction } from "./abstractions.js";
+import type { DashboardLayoutData } from "../types.js";
+declare class GetCachedDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {
+    private repository;
+    constructor(repository: DashboardLayoutRepository.Interface);
+    execute(userId: string): DashboardLayoutData | null;
+}
+export declare const GetCachedDashboardLayoutUseCase: typeof GetCachedDashboardLayoutUseCaseImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IGetCachedDashboardLayoutUseCase>;
+};
+export {};

package/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.js

@@ -0,0 +1,19 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { GetCachedDashboardLayoutUseCase } from "./abstractions.js";
+class GetCachedDashboardLayoutUseCaseImpl {
+    constructor(repository){
+        this.repository = repository;
+    }
+    execute(userId) {
+        return this.repository.getCached(userId);
+    }
+}
+const GetCachedDashboardLayoutUseCase_GetCachedDashboardLayoutUseCase = GetCachedDashboardLayoutUseCase.createImplementation({
+    implementation: GetCachedDashboardLayoutUseCaseImpl,
+    dependencies: [
+        DashboardLayoutRepository
+    ]
+});
+export { GetCachedDashboardLayoutUseCase_GetCachedDashboardLayoutUseCase as GetCachedDashboardLayoutUseCase };
+
+//# sourceMappingURL=GetCachedDashboardLayoutUseCase.js.map

package/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.ts"],"sourcesContent":["import { DashboardLayoutRepository } from \"../repository/abstractions.js\";\nimport { GetCachedDashboardLayoutUseCase as UseCaseAbstraction } from \"./abstractions.js\";\nimport type { DashboardLayoutData } from \"../types.js\";\n\nclass GetCachedDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {\n    constructor(private repository: DashboardLayoutRepository.Interface) {}\n\n    execute(userId: string): DashboardLayoutData | null {\n        return this.repository.getCached(userId);\n    }\n}\n\nexport const GetCachedDashboardLayoutUseCase = UseCaseAbstraction.createImplementation({\n    implementation: GetCachedDashboardLayoutUseCaseImpl,\n    dependencies: [DashboardLayoutRepository]\n});\n"],"names":["GetCachedDashboardLayoutUseCaseImpl","repository","userId","GetCachedDashboardLayoutUseCase","UseCaseAbstraction","DashboardLayoutRepository"],"mappings":";;AAIA,MAAMA;IACF,YAAoBC,UAA+C,CAAE;aAAjDA,UAAU,GAAVA;IAAkD;IAEtE,QAAQC,MAAc,EAA8B;QAChD,OAAO,IAAI,CAAC,UAAU,CAAC,SAAS,CAACA;IACrC;AACJ;AAEO,MAAMC,kEAAkCC,gCAAAA,oBAAuC,CAAC;IACnF,gBAAgBJ;IAChB,cAAc;QAACK;KAA0B;AAC7C"}

package/Dashboard/dashboardLayout/loadLayout/abstractions.d.ts

@@ -0,0 +1,15 @@
+import type { DashboardLayoutData } from "../types.js";
+export interface IGetCachedDashboardLayoutUseCase {
+    execute(userId: string): DashboardLayoutData | null;
+}
+export declare const GetCachedDashboardLayoutUseCase: import("@webiny/di").Abstraction<IGetCachedDashboardLayoutUseCase>;
+export declare namespace GetCachedDashboardLayoutUseCase {
+    type Interface = IGetCachedDashboardLayoutUseCase;
+}
+export interface IFetchDashboardLayoutUseCase {
+    execute(userId: string): Promise<DashboardLayoutData | null>;
+}
+export declare const FetchDashboardLayoutUseCase: import("@webiny/di").Abstraction<IFetchDashboardLayoutUseCase>;
+export declare namespace FetchDashboardLayoutUseCase {
+    type Interface = IFetchDashboardLayoutUseCase;
+}

package/Dashboard/dashboardLayout/loadLayout/abstractions.js

@@ -0,0 +1,6 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const GetCachedDashboardLayoutUseCase = createAbstraction("GetCachedDashboardLayoutUseCase");
+const FetchDashboardLayoutUseCase = createAbstraction("FetchDashboardLayoutUseCase");
+export { FetchDashboardLayoutUseCase, GetCachedDashboardLayoutUseCase };
+
+//# sourceMappingURL=abstractions.js.map

package/Dashboard/dashboardLayout/loadLayout/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/abstractions.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { DashboardLayoutData } from \"../types.js\";\n\n// Returns the cached layout without a request, so the dashboard can render it straight away.\nexport interface IGetCachedDashboardLayoutUseCase {\n    execute(userId: string): DashboardLayoutData | null;\n}\n\nexport const GetCachedDashboardLayoutUseCase = createAbstraction<IGetCachedDashboardLayoutUseCase>(\n    \"GetCachedDashboardLayoutUseCase\"\n);\n\nexport namespace GetCachedDashboardLayoutUseCase {\n    export type Interface = IGetCachedDashboardLayoutUseCase;\n}\n\n// Fetches the stored layout from the API. `null` means the user never customized their dashboard.\nexport interface IFetchDashboardLayoutUseCase {\n    execute(userId: string): Promise<DashboardLayoutData | null>;\n}\n\nexport const FetchDashboardLayoutUseCase = createAbstraction<IFetchDashboardLayoutUseCase>(\n    \"FetchDashboardLayoutUseCase\"\n);\n\nexport namespace FetchDashboardLayoutUseCase {\n    export type Interface = IFetchDashboardLayoutUseCase;\n}\n"],"names":["GetCachedDashboardLayoutUseCase","createAbstraction","FetchDashboardLayoutUseCase"],"mappings":";AAQO,MAAMA,kCAAkCC,kBAC3C;AAYG,MAAMC,8BAA8BD,kBACvC"}

package/Dashboard/dashboardLayout/loadLayout/feature.d.ts

@@ -0,0 +1 @@
+export declare const LoadDashboardLayoutFeature: import("@webiny/feature/admin").FeatureDefinition<any, []>;

package/Dashboard/dashboardLayout/loadLayout/feature.js

@@ -0,0 +1,13 @@
+import { createFeature } from "@webiny/feature/admin";
+import { GetCachedDashboardLayoutUseCase } from "./GetCachedDashboardLayoutUseCase.js";
+import { FetchDashboardLayoutUseCase } from "./FetchDashboardLayoutUseCase.js";
+const LoadDashboardLayoutFeature = createFeature({
+    name: "AdminUI/LoadDashboardLayout",
+    register (container) {
+        container.register(GetCachedDashboardLayoutUseCase);
+        container.register(FetchDashboardLayoutUseCase);
+    }
+});
+export { LoadDashboardLayoutFeature };
+
+//# sourceMappingURL=feature.js.map

package/Dashboard/dashboardLayout/loadLayout/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/feature.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { GetCachedDashboardLayoutUseCase } from \"./GetCachedDashboardLayoutUseCase.js\";\nimport { FetchDashboardLayoutUseCase } from \"./FetchDashboardLayoutUseCase.js\";\n\nexport const LoadDashboardLayoutFeature = createFeature({\n    name: \"AdminUI/LoadDashboardLayout\",\n    register(container) {\n        container.register(GetCachedDashboardLayoutUseCase);\n        container.register(FetchDashboardLayoutUseCase);\n    }\n});\n"],"names":["LoadDashboardLayoutFeature","createFeature","container","GetCachedDashboardLayoutUseCase","FetchDashboardLayoutUseCase"],"mappings":";;;AAIO,MAAMA,6BAA6BC,cAAc;IACpD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;IACvB;AACJ"}

package/Dashboard/dashboardLayout/presenter/DashboardLayoutPresenter.d.ts

@@ -0,0 +1,56 @@
+import { GetCachedDashboardLayoutUseCase } from "../loadLayout/abstractions.js";
+import { FetchDashboardLayoutUseCase } from "../loadLayout/abstractions.js";
+import { SaveDashboardLayoutUseCase } from "../saveLayout/abstractions.js";
+import type { DashboardLayoutData } from "../types.js";
+import { DashboardLayoutPresenter as Abstraction } from "./abstractions.js";
+import type { DashboardWidgetInput } from "./abstractions.js";
+declare class DashboardLayoutPresenterImpl implements Abstraction.Interface {
+    private getCachedDashboardLayoutUseCase;
+    private fetchDashboardLayoutUseCase;
+    private saveDashboardLayoutUseCase;
+    private _userId;
+    private _columns;
+    private _columnCount;
+    private _hidden;
+    private _draggingName;
+    private _dropColumn;
+    private _dropBeforeName;
+    private _editing;
+    private _defaultColumns;
+    private _widgets;
+    private _changed;
+    private _saving;
+    private _pendingSave;
+    constructor(getCachedDashboardLayoutUseCase: GetCachedDashboardLayoutUseCase.Interface, fetchDashboardLayoutUseCase: FetchDashboardLayoutUseCase.Interface, saveDashboardLayoutUseCase: SaveDashboardLayoutUseCase.Interface);
+    get vm(): Abstraction.ViewModel;
+    init(userId: string, widgets: DashboardWidgetInput[]): void;
+    beginDrag: (name: string) => void;
+    hoverSlot: (column: number, beforeName: string | null) => void;
+    drop: () => void;
+    endDrag: () => void;
+    removeWidget: (name: string) => void;
+    addWidget: (name: string, column?: number) => void;
+    setColumnCount: (count: number) => void;
+    removeColumn: (index: number) => void;
+    startEditing: () => void;
+    stopEditing: () => void;
+    dispose: () => void;
+    resetToDefault: () => void;
+    applyFetchedLayout: (userId: string, fetched: DashboardLayoutData | null) => void;
+    /**
+     * Rebuild the columns and hidden list from a base state, keeping only currently registered
+     * widgets. Widgets neither placed nor hidden are treated as newly registered and appended to
+     * their default column.
+     */
+    private applyOrder;
+    /** Pure computation of the resulting columns if `name` were dropped before `beforeName`. */
+    private computeMove;
+    private clampColumn;
+    private revalidate;
+    private persist;
+    private flushSaves;
+}
+export declare const DashboardLayoutPresenter: typeof DashboardLayoutPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IDashboardLayoutPresenter>;
+};
+export {};

package/Dashboard/dashboardLayout/presenter/DashboardLayoutPresenter.js

@@ -0,0 +1,308 @@
+import { makeAutoObservable } from "mobx";
+import { FetchDashboardLayoutUseCase, GetCachedDashboardLayoutUseCase } from "../loadLayout/abstractions.js";
+import { SaveDashboardLayoutUseCase } from "../saveLayout/abstractions.js";
+import { DEFAULT_COLUMN_COUNT, MAX_COLUMN_COUNT, MIN_COLUMN_COUNT } from "../types.js";
+import { DashboardLayoutPresenter } from "./abstractions.js";
+class DashboardLayoutPresenterImpl {
+    constructor(getCachedDashboardLayoutUseCase, fetchDashboardLayoutUseCase, saveDashboardLayoutUseCase){
+        this.getCachedDashboardLayoutUseCase = getCachedDashboardLayoutUseCase;
+        this.fetchDashboardLayoutUseCase = fetchDashboardLayoutUseCase;
+        this.saveDashboardLayoutUseCase = saveDashboardLayoutUseCase;
+        this._userId = null;
+        this._columns = [];
+        this._columnCount = DEFAULT_COLUMN_COUNT;
+        this._hidden = [];
+        this._draggingName = null;
+        this._dropColumn = null;
+        this._dropBeforeName = null;
+        this._editing = false;
+        this._defaultColumns = new Map();
+        this._widgets = [];
+        this._changed = false;
+        this._saving = false;
+        this._pendingSave = null;
+        this.beginDrag = (name)=>{
+            this._draggingName = name;
+        };
+        this.hoverSlot = (column, beforeName)=>{
+            if (null === this._draggingName) return;
+            const moved = this.computeMove(this._draggingName, column, beforeName);
+            if (columnsEqual(moved, this._columns)) {
+                if (null !== this._dropColumn) {
+                    this._dropColumn = null;
+                    this._dropBeforeName = null;
+                }
+                return;
+            }
+            if (this._dropColumn === column && this._dropBeforeName === beforeName) return;
+            this._dropColumn = column;
+            this._dropBeforeName = beforeName;
+        };
+        this.drop = ()=>{
+            if (null !== this._draggingName && null !== this._dropColumn) {
+                this._columns = this.computeMove(this._draggingName, this._dropColumn, this._dropBeforeName);
+                this.persist();
+            }
+            this.endDrag();
+        };
+        this.endDrag = ()=>{
+            this._draggingName = null;
+            this._dropColumn = null;
+            this._dropBeforeName = null;
+        };
+        this.removeWidget = (name)=>{
+            this._columns = this._columns.map((column)=>column.filter((n)=>n !== name));
+            if (!this._hidden.includes(name)) this._hidden = [
+                ...this._hidden,
+                name
+            ];
+            this.persist();
+        };
+        this.addWidget = (name, column)=>{
+            if (!this._hidden.includes(name)) return;
+            this._hidden = this._hidden.filter((n)=>n !== name);
+            const requested = column ?? this._defaultColumns.get(name) ?? 0;
+            const target = this.clampColumn(requested);
+            this._columns = this._columns.map((names, index)=>{
+                if (index !== target || names.includes(name)) return names;
+                return [
+                    ...names,
+                    name
+                ];
+            });
+            this.persist();
+        };
+        this.setColumnCount = (count)=>{
+            const next = clamp(count, MIN_COLUMN_COUNT, MAX_COLUMN_COUNT);
+            if (next === this._columnCount) return;
+            this._columns = resizeColumns(this._columns, next);
+            this._columnCount = next;
+            this.persist();
+        };
+        this.removeColumn = (index)=>{
+            if (this._columnCount <= MIN_COLUMN_COUNT || index < 0 || index >= this._columns.length) return;
+            const removed = this._columns[index];
+            const columns = this._columns.filter((_, i)=>i !== index);
+            if (removed.length > 0) {
+                const target = Math.max(0, index - 1);
+                columns[target] = [
+                    ...columns[target],
+                    ...removed
+                ];
+            }
+            this._columns = columns;
+            this._columnCount = columns.length;
+            this.persist();
+        };
+        this.startEditing = ()=>{
+            this._editing = true;
+        };
+        this.stopEditing = ()=>{
+            this._editing = false;
+            this.endDrag();
+        };
+        this.dispose = ()=>{
+            this.stopEditing();
+        };
+        this.resetToDefault = ()=>{
+            this._columnCount = DEFAULT_COLUMN_COUNT;
+            const columns = Array.from({
+                length: this._columnCount
+            }, ()=>[]);
+            for (const [name, column] of this._defaultColumns)columns[clamp(column, 0, this._columnCount - 1)].push(name);
+            this._columns = columns;
+            this._hidden = [];
+            this.persist();
+        };
+        this.applyFetchedLayout = (userId, fetched)=>{
+            if (this._userId !== userId || this._changed || null !== this._draggingName) return;
+            const layout = normalizeLayout(fetched);
+            this.applyOrder(this._widgets, layout);
+        };
+        makeAutoObservable(this, {
+            getCachedDashboardLayoutUseCase: false,
+            fetchDashboardLayoutUseCase: false,
+            saveDashboardLayoutUseCase: false,
+            _defaultColumns: false,
+            _widgets: false,
+            _changed: false,
+            _saving: false,
+            _pendingSave: false,
+            revalidate: false,
+            flushSaves: false
+        });
+    }
+    get vm() {
+        let dropTarget = null;
+        if (null !== this._dropColumn) dropTarget = {
+            column: this._dropColumn,
+            beforeName: this._dropBeforeName
+        };
+        return {
+            columns: this._columns.map((column)=>[
+                    ...column
+                ]),
+            columnCount: this._columnCount,
+            hidden: [
+                ...this._hidden
+            ],
+            draggingName: this._draggingName,
+            dropTarget,
+            editing: this._editing
+        };
+    }
+    init(userId, widgets) {
+        this._widgets = widgets;
+        if (this._userId !== userId) {
+            this._userId = userId;
+            this._pendingSave = null;
+            this._changed = false;
+            this._editing = false;
+            this.endDrag();
+            const cached = this.getCachedDashboardLayoutUseCase.execute(userId);
+            const layout = normalizeLayout(cached);
+            this.applyOrder(widgets, layout);
+            this.revalidate(userId);
+            return;
+        }
+        this.applyOrder(widgets, {
+            columns: this._columns,
+            hidden: this._hidden,
+            columnCount: this._columnCount
+        });
+    }
+    applyOrder(widgets, base) {
+        const names = widgets.map((w)=>w.name);
+        const registered = new Set(names);
+        const placed = new Set();
+        const columnCount = clamp(base.columnCount, MIN_COLUMN_COUNT, MAX_COLUMN_COUNT);
+        this._columnCount = columnCount;
+        const defaults = widgets.map((w)=>[
+                w.name,
+                clamp(w.column, 0, columnCount - 1)
+            ]);
+        this._defaultColumns = new Map(defaults);
+        const columns = Array.from({
+            length: columnCount
+        }, ()=>[]);
+        base.columns.forEach((column, index)=>{
+            const target = Math.min(index, columnCount - 1);
+            for (const name of column)if (registered.has(name) && !placed.has(name)) {
+                columns[target].push(name);
+                placed.add(name);
+            }
+        });
+        const hidden = [];
+        for (const name of base.hidden)if (registered.has(name) && !placed.has(name)) {
+            hidden.push(name);
+            placed.add(name);
+        }
+        for (const widget of widgets)if (!placed.has(widget.name)) {
+            columns[clamp(widget.column, 0, columnCount - 1)].push(widget.name);
+            placed.add(widget.name);
+        }
+        this._columns = columns;
+        this._hidden = hidden;
+    }
+    computeMove(name, column, beforeName) {
+        if (beforeName === name) return this._columns.map((c)=>[
+                ...c
+            ]);
+        const columns = this._columns.map((c)=>c.filter((n)=>n !== name));
+        const target = columns[this.clampColumn(column)];
+        if (null === beforeName) target.push(name);
+        else {
+            const index = target.indexOf(beforeName);
+            if (index < 0) target.push(name);
+            else target.splice(index, 0, name);
+        }
+        return columns;
+    }
+    clampColumn(column) {
+        return clamp(column, 0, this._columnCount - 1);
+    }
+    async revalidate(userId) {
+        let fetched;
+        try {
+            fetched = await this.fetchDashboardLayoutUseCase.execute(userId);
+        } catch  {
+            return;
+        }
+        this.applyFetchedLayout(userId, fetched);
+    }
+    persist() {
+        if (null === this._userId) return;
+        this._changed = true;
+        this._pendingSave = {
+            userId: this._userId,
+            layout: {
+                columns: this._columns,
+                hidden: this._hidden,
+                columnCount: this._columnCount
+            }
+        };
+        if (!this._saving) this.flushSaves();
+    }
+    async flushSaves() {
+        this._saving = true;
+        while(this._pendingSave){
+            const { userId, layout } = this._pendingSave;
+            this._pendingSave = null;
+            try {
+                await this.saveDashboardLayoutUseCase.execute(userId, layout);
+            } catch  {}
+        }
+        this._saving = false;
+    }
+}
+function clamp(value, min, max) {
+    const upperBounded = Math.min(value, max);
+    return Math.max(min, upperBounded);
+}
+function columnsEqual(a, b) {
+    if (a.length !== b.length) return false;
+    return a.every((column, index)=>{
+        const other = b[index];
+        return column.length === other.length && column.every((v, i)=>v === other[i]);
+    });
+}
+function resizeColumns(columns, count) {
+    if (count >= columns.length) {
+        const next = columns.map((c)=>[
+                ...c
+            ]);
+        while(next.length < count)next.push([]);
+        return next;
+    }
+    const next = columns.slice(0, count).map((c)=>[
+            ...c
+        ]);
+    for(let i = count; i < columns.length; i++)next[count - 1].push(...columns[i]);
+    return next;
+}
+function normalizeLayout(layout) {
+    if (!layout) return {
+        columns: [],
+        hidden: [],
+        columnCount: DEFAULT_COLUMN_COUNT
+    };
+    const columns = layout.columns ?? [];
+    const requestedCount = layout.columnCount ?? columns.length;
+    const columnCount = clamp(requestedCount, MIN_COLUMN_COUNT, MAX_COLUMN_COUNT);
+    return {
+        columns,
+        hidden: layout.hidden ?? [],
+        columnCount
+    };
+}
+const DashboardLayoutPresenter_DashboardLayoutPresenter = DashboardLayoutPresenter.createImplementation({
+    implementation: DashboardLayoutPresenterImpl,
+    dependencies: [
+        GetCachedDashboardLayoutUseCase,
+        FetchDashboardLayoutUseCase,
+        SaveDashboardLayoutUseCase
+    ]
+});
+export { DashboardLayoutPresenter_DashboardLayoutPresenter as DashboardLayoutPresenter };
+
+//# sourceMappingURL=DashboardLayoutPresenter.js.map