quidproquo-web-admin 0.0.213 → 0.0.215

package/lib/commonjs/components/AdminDialog.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const useAdminDialog: (tabs: string[], defaultTab: string) => {
+    open: boolean;
+    tabs: string[];
+    selectedTab: string;
+    openDialog: () => void;
+    onSelectTab: (tab: string) => void;
+    handleClose: () => void;
+};
+interface AdminDialogProps {
+    open: boolean;
+    handleClose: () => void;
+    title: string;
+    tabs: string[];
+    selectedTab: string;
+    onSelectTab: (tabName: string) => void;
+    buttons: {
+        text: string;
+        onClick: () => Promise<void>;
+        disabled: boolean;
+    }[];
+    children: React.ReactNode;
+}
+export declare const AdminDialog: ({ open, handleClose, title, selectedTab, onSelectTab, tabs, buttons, children }: AdminDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/commonjs/components/AdminDialog.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdminDialog = exports.useAdminDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const useAdminDialog = (tabs, defaultTab) => {
+    const [open, setIsOpen] = (0, react_1.useState)(false);
+    const [selectedTab, setSelectedTab] = (0, react_1.useState)(defaultTab);
+    return {
+        open,
+        tabs,
+        selectedTab,
+        openDialog: () => setIsOpen(true),
+        onSelectTab: (tab) => {
+            setSelectedTab(tab);
+        },
+        handleClose: () => setIsOpen(false),
+    };
+};
+exports.useAdminDialog = useAdminDialog;
+const AdminDialog = ({ open, handleClose, title, selectedTab, onSelectTab, tabs, buttons, children }) => {
+    const selectedTabIndex = tabs.findIndex((t) => t === selectedTab);
+    const handleTabChange = (event, newValue) => {
+        onSelectTab(tabs[newValue]);
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: open, scroll: 'paper', "aria-labelledby": "scroll-dialog-title", "aria-describedby": "scroll-dialog-description", onClose: handleClose, maxWidth: false, fullWidth: true, PaperProps: {
+            style: {
+                width: '90%',
+                height: '90%',
+                maxHeight: '90%',
+                maxWidth: '90%',
+            },
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ id: "scroll-dialog-title" }, { children: title })), tabs.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.AppBar, Object.assign({ position: "sticky", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Tabs, Object.assign({ value: selectedTabIndex, onChange: handleTabChange, textColor: "inherit", indicatorColor: "secondary" }, { children: tabs.map((t) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: t }, t))) })) }))), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ dividers: true, sx: {
+                    minHeight: '150px',
+                    overflowY: 'scroll',
+                } }, { children: children })), buttons.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons.map((b) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: b.disabled, onClick: b.onClick }, { children: b.text }), b.text))) }))] })));
+};
+exports.AdminDialog = AdminDialog;

package/lib/commonjs/components/DataGrid.d.ts

@@ -1,14 +1,17 @@
-export interface DataGridColumDefinitions<T> {
-    field: string;
+/// <reference types="react" />
+export type DataGridColumDefinitions<T extends object> = {
     headerName: string;
     widthScale?: number;
     sortable?: boolean;
-    valueGetter?: (i: T) => any;
-}
-interface DataGridProps<T> {
+    renderCell?: (i: T, params?: any) => React.ReactNode;
+} & ({
+    field: keyof T;
+} | {
+    valueGetter: (i: T, params?: any) => any;
+});
+export interface DataGridProps<T extends object> {
     items: T[];
     columns: DataGridColumDefinitions<T>[];
-    onRowClick?: (item: T) => void;
+    onRowClick?: (row: T) => void;
 }
-export declare const DataGrid: <T>({ items, columns, onRowClick }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const DataGrid: <T extends object>({ items, columns, onRowClick }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/commonjs/components/DataGrid.js

@@ -6,16 +6,15 @@ const x_data_grid_1 = require("@mui/x-data-grid");
 const material_1 = require("@mui/material");
 const DataGrid = ({ items, columns, onRowClick }) => {
     const handleRowClick = ({ row }) => {
-        () => {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
-        };
+        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
     };
-    const muiColumns = columns.map((col) => ({
-        field: col.field,
+    const muiColumns = columns.map((col, index) => ({
         headerName: col.headerName,
         flex: col.widthScale,
         sortable: col.sortable !== undefined ? col.sortable : true,
-        valueGetter: col.valueGetter ? (item) => { var _a; return (_a = col.valueGetter) === null || _a === void 0 ? void 0 : _a.call(col, item.row); } : undefined,
+        field: 'field' in col ? col.field : `_dynamicField${index}`,
+        valueGetter: 'valueGetter' in col ? (params) => col.valueGetter(params.row, params) : undefined,
+        renderCell: (params) => { var _a; return (_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, params.row, params); },
     }));
     return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { height: '100%', width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rows: items, columns: muiColumns, onRowClick: handleRowClick }) })));
 };

package/lib/commonjs/components/DateCell/DateCell.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-interface DateCellProps {
+type DateCellProps = {
     isoDateTime: string;
-}
+} | {
+    unixTimestampMs: number;
+};
 export declare const DateCell: React.FC<DateCellProps>;
 export {};

package/lib/commonjs/components/DateCell/DateCell.js

@@ -7,8 +7,8 @@ exports.DateCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const LastSeen_1 = __importDefault(require("../LastSeen/LastSeen"));
-const DateCell = ({ isoDateTime }) => {
-    const date = new Date(isoDateTime);
+const DateCell = (props) => {
+    let date = 'isoDateTime' in props ? new Date(props.isoDateTime) : new Date(props.unixTimestampMs);
     const formattedTime = date.toLocaleTimeString('en-AU', {
         hour: '2-digit',
         minute: '2-digit',
@@ -18,6 +18,6 @@ const DateCell = ({ isoDateTime }) => {
         month: '2-digit',
         year: '2-digit',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, Object.assign({ variant: "body2", component: "span" }, { children: [formattedDate, " ", formattedTime] })), (0, jsx_runtime_1.jsx)(LastSeen_1.default, { isoTime: isoDateTime, timeStyle: "twitter" })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, Object.assign({ variant: "body2", component: "span" }, { children: [formattedDate, " ", formattedTime] })), (0, jsx_runtime_1.jsx)(LastSeen_1.default, { isoTime: date.toISOString(), timeStyle: "twitter" })] })));
 };
 exports.DateCell = DateCell;

package/lib/commonjs/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface LoadingSpinnerProps {
+    isLoading: boolean;
+    size?: number;
+    children?: ReactNode;
+}
+export declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;
+export {};

package/lib/commonjs/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSpinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const LoadingSpinner = ({ isLoading, size = 200, children }) => {
+    const sx = (0, react_1.useMemo)(() => ({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: `${size}px`,
+        width: '100%',
+        p: 2,
+    }), [size]);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: sx }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: size / 2 }) })));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.LoadingSpinner = LoadingSpinner;

package/lib/commonjs/components/LoadingSpinner/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingSpinner';

package/lib/commonjs/components/LoadingSpinner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LoadingSpinner"), exports);

package/lib/commonjs/components/index.d.ts

@@ -10,3 +10,5 @@ export * from './GridItem';
 export * from './TextInput';
 export * from './DataGrid';
 export * from './AutocompleteInput';
+export * from './AdminDialog';
+export * from './LoadingSpinner';

package/lib/commonjs/components/index.js

@@ -26,3 +26,5 @@ __exportStar(require("./GridItem"), exports);
 __exportStar(require("./TextInput"), exports);
 __exportStar(require("./DataGrid"), exports);
 __exportStar(require("./AutocompleteInput"), exports);
+__exportStar(require("./AdminDialog"), exports);
+__exportStar(require("./LoadingSpinner"), exports);

package/lib/commonjs/useFederatedAddon.js

@@ -44,7 +44,7 @@ function useFederatedAddon() {
             ], { force: true });
             // Load the remote
             console.log(`Loading remote: [${manifest.id}]`);
-            const remote = yield (0, runtime_1.loadRemote)(`${manifest.id}/qpqAdminAddon`, {
+            const remote = yield (0, runtime_1.loadRemote)(`${manifest.id}/shared`, {
                 from: 'runtime',
             });
             if (remote && typeof remote === 'object') {

package/lib/esm/components/AdminDialog.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const useAdminDialog: (tabs: string[], defaultTab: string) => {
+    open: boolean;
+    tabs: string[];
+    selectedTab: string;
+    openDialog: () => void;
+    onSelectTab: (tab: string) => void;
+    handleClose: () => void;
+};
+interface AdminDialogProps {
+    open: boolean;
+    handleClose: () => void;
+    title: string;
+    tabs: string[];
+    selectedTab: string;
+    onSelectTab: (tabName: string) => void;
+    buttons: {
+        text: string;
+        onClick: () => Promise<void>;
+        disabled: boolean;
+    }[];
+    children: React.ReactNode;
+}
+export declare const AdminDialog: ({ open, handleClose, title, selectedTab, onSelectTab, tabs, buttons, children }: AdminDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/components/AdminDialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Tabs, Tab, AppBar } from '@mui/material';
+import { useState } from 'react';
+export const useAdminDialog = (tabs, defaultTab) => {
+    const [open, setIsOpen] = useState(false);
+    const [selectedTab, setSelectedTab] = useState(defaultTab);
+    return {
+        open,
+        tabs,
+        selectedTab,
+        openDialog: () => setIsOpen(true),
+        onSelectTab: (tab) => {
+            setSelectedTab(tab);
+        },
+        handleClose: () => setIsOpen(false),
+    };
+};
+export const AdminDialog = ({ open, handleClose, title, selectedTab, onSelectTab, tabs, buttons, children }) => {
+    const selectedTabIndex = tabs.findIndex((t) => t === selectedTab);
+    const handleTabChange = (event, newValue) => {
+        onSelectTab(tabs[newValue]);
+    };
+    return (_jsxs(Dialog, { open: open, scroll: 'paper', "aria-labelledby": "scroll-dialog-title", "aria-describedby": "scroll-dialog-description", onClose: handleClose, maxWidth: false, fullWidth: true, PaperProps: {
+            style: {
+                width: '90%',
+                height: '90%',
+                maxHeight: '90%',
+                maxWidth: '90%',
+            },
+        }, children: [_jsx(DialogTitle, { id: "scroll-dialog-title", children: title }), tabs.length > 0 && (_jsx(AppBar, { position: "sticky", color: "primary", children: _jsx(Tabs, { value: selectedTabIndex, onChange: handleTabChange, textColor: "inherit", indicatorColor: "secondary", children: tabs.map((t) => (_jsx(Tab, { label: t }, t))) }) })), _jsx(DialogContent, { dividers: true, sx: {
+                    minHeight: '150px',
+                    overflowY: 'scroll',
+                }, children: children }), buttons.length > 0 && (_jsx(DialogActions, { children: buttons.map((b) => (_jsx(Button, { disabled: b.disabled, onClick: b.onClick, children: b.text }, b.text))) }))] }));
+};

package/lib/esm/components/DataGrid.d.ts

@@ -1,14 +1,17 @@
-export interface DataGridColumDefinitions<T> {
-    field: string;
+/// <reference types="react" />
+export type DataGridColumDefinitions<T extends object> = {
     headerName: string;
     widthScale?: number;
     sortable?: boolean;
-    valueGetter?: (i: T) => any;
-}
-interface DataGridProps<T> {
+    renderCell?: (i: T, params?: any) => React.ReactNode;
+} & ({
+    field: keyof T;
+} | {
+    valueGetter: (i: T, params?: any) => any;
+});
+export interface DataGridProps<T extends object> {
     items: T[];
     columns: DataGridColumDefinitions<T>[];
-    onRowClick?: (item: T) => void;
+    onRowClick?: (row: T) => void;
 }
-export declare const DataGrid: <T>({ items, columns, onRowClick }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const DataGrid: <T extends object>({ items, columns, onRowClick }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/DataGrid.js

@@ -3,16 +3,15 @@ import { DataGrid as MuiDataGrid } from '@mui/x-data-grid';
 import { Box } from '@mui/material';
 export const DataGrid = ({ items, columns, onRowClick }) => {
     const handleRowClick = ({ row }) => {
-        () => {
-            onRowClick?.(row);
-        };
+        onRowClick?.(row);
     };
-    const muiColumns = columns.map((col) => ({
-        field: col.field,
+    const muiColumns = columns.map((col, index) => ({
         headerName: col.headerName,
         flex: col.widthScale,
         sortable: col.sortable !== undefined ? col.sortable : true,
-        valueGetter: col.valueGetter ? (item) => col.valueGetter?.(item.row) : undefined,
+        field: 'field' in col ? col.field : `_dynamicField${index}`,
+        valueGetter: 'valueGetter' in col ? (params) => col.valueGetter(params.row, params) : undefined,
+        renderCell: (params) => col.renderCell?.(params.row, params),
     }));
     return (_jsx(Box, { sx: { height: '100%', width: '100%' }, children: _jsx(MuiDataGrid, { rows: items, columns: muiColumns, onRowClick: handleRowClick }) }));
 };

package/lib/esm/components/DateCell/DateCell.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-interface DateCellProps {
+type DateCellProps = {
     isoDateTime: string;
-}
+} | {
+    unixTimestampMs: number;
+};
 export declare const DateCell: React.FC<DateCellProps>;
 export {};

package/lib/esm/components/DateCell/DateCell.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import Typography from '@mui/material/Typography';
 import LastSeen from '../LastSeen/LastSeen';
-export const DateCell = ({ isoDateTime }) => {
-    const date = new Date(isoDateTime);
+export const DateCell = (props) => {
+    let date = 'isoDateTime' in props ? new Date(props.isoDateTime) : new Date(props.unixTimestampMs);
     const formattedTime = date.toLocaleTimeString('en-AU', {
         hour: '2-digit',
         minute: '2-digit',
@@ -12,5 +12,5 @@ export const DateCell = ({ isoDateTime }) => {
         month: '2-digit',
         year: '2-digit',
     });
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(Typography, { variant: "body2", component: "span", children: [formattedDate, " ", formattedTime] }), _jsx(LastSeen, { isoTime: isoDateTime, timeStyle: "twitter" })] }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(Typography, { variant: "body2", component: "span", children: [formattedDate, " ", formattedTime] }), _jsx(LastSeen, { isoTime: date.toISOString(), timeStyle: "twitter" })] }));
 };

package/lib/esm/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface LoadingSpinnerProps {
+    isLoading: boolean;
+    size?: number;
+    children?: ReactNode;
+}
+export declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;
+export {};

package/lib/esm/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, CircularProgress } from '@mui/material';
+export const LoadingSpinner = ({ isLoading, size = 200, children }) => {
+    const sx = useMemo(() => ({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: `${size}px`,
+        width: '100%',
+        p: 2,
+    }), [size]);
+    if (isLoading) {
+        return (_jsx(Box, { sx: sx, children: _jsx(CircularProgress, { size: size / 2 }) }));
+    }
+    return _jsx(_Fragment, { children: children });
+};

package/lib/esm/components/LoadingSpinner/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingSpinner';

package/lib/esm/components/LoadingSpinner/index.js

@@ -0,0 +1 @@
+export * from './LoadingSpinner';

package/lib/esm/components/index.d.ts

@@ -10,3 +10,5 @@ export * from './GridItem';
 export * from './TextInput';
 export * from './DataGrid';
 export * from './AutocompleteInput';
+export * from './AdminDialog';
+export * from './LoadingSpinner';

package/lib/esm/components/index.js

@@ -10,3 +10,5 @@ export * from './GridItem';
 export * from './TextInput';
 export * from './DataGrid';
 export * from './AutocompleteInput';
+export * from './AdminDialog';
+export * from './LoadingSpinner';

package/lib/esm/useFederatedAddon.js

@@ -32,7 +32,7 @@ export function useFederatedAddon() {
             ], { force: true });
             // Load the remote
             console.log(`Loading remote: [${manifest.id}]`);
-            const remote = await loadRemote(`${manifest.id}/qpqAdminAddon`, {
+            const remote = await loadRemote(`${manifest.id}/shared`, {
                 from: 'runtime',
             });
             if (remote && typeof remote === 'object') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-admin",
-  "version": "0.0.213",
+  "version": "0.0.215",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -42,11 +42,11 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "javascript-time-ago": "^2.5.9",
-    "quidproquo-core": "0.0.213",
-    "quidproquo-web": "0.0.213",
-    "quidproquo-webserver": "0.0.213",
-    "quidproquo-tsconfig": "0.0.213",
-    "quidproquo-web-react": "0.0.213",
+    "quidproquo-core": "0.0.215",
+    "quidproquo-web": "0.0.215",
+    "quidproquo-webserver": "0.0.215",
+    "quidproquo-tsconfig": "0.0.215",
+    "quidproquo-web-react": "0.0.215",
     "react": "18.3.1",
     "react-d3-tree": "^3.6.0",
     "react-dom": "18.3.1",