udp-react-enterprise-component-library 25.18.1-beta.3 → 25.18.1-beta.30

package/dist/MyExportsPage-DDCvI2ao.js

@@ -0,0 +1,216 @@
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { i as useHandleAxiosSnackbar } from "./apiHelpers-B_cn3sZo.js";
+import { t as useUser } from "./useUser-wpHGo6jU.js";
+import { r as getSanitizedName } from "./entityUtilities-_8w-Zjs3.js";
+import { t as useAxiosGet } from "./useAxiosGet-vvPjwB4W.js";
+import { i as executeQueryWithParameters } from "./methodUtils-Cwo_kmVX.js";
+import { t as FluentDialog } from "./FluentDialog-B5ZxvX1E.js";
+import { t as ActionsRenderer } from "./ActionsRenderer-B1ImXko3.js";
+import { t as TableContainer } from "./TableContainer-DZTBwhds.js";
+import { t as AmbientAutoComplete } from "./AmbientAutoComplete-PIhfakyF.js";
+import { t as AmbientAlert } from "./AmbientAlert-LVJtZhxz.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-CVeCBelv.js";
+import { t as StatusCellRenderer } from "./StatusCellRenderer-CEjlK_fO.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { DownloadIcon, ErrorIcon, StatusCircleCheckmarkIcon } from "@fluentui/react-icons";
+
+//#region src/udp/export/MyExportsPage.jsx
+const MyExportsPage = (props) => {
+	const { productId } = props;
+	const user = useUser();
+	const [product, setProduct] = useState();
+	const [downloadLinkLoading, setDownloadLinkLoading] = useState(false);
+	const [fileResultData, setFileResultData] = useState();
+	const [downloadOpen, setDownloadOpen] = useState(false);
+	const [noDownloadMethod, setNoDownloadMethod] = useState(false);
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const [{ data: products, loading: productsLoading }] = useAxiosGet(ConfigService.tenantV2ApiUrl, `tenant/products?tenantId=${user?.currentTenantId}&isSubscribable=${!user?.can?.CAN_MANAGE_CATALOGS_FOR_UNSUBSCRIBABLE_PRODUCTS}`, {}, !user);
+	const [{ data: apiCatalog, loading: catalogLoading, error: catalogError }] = useAxiosGet(ConfigService.integrationV1ApiUrl, `tenantProductApiCatalogBase/tenant/${user?.currentTenantId}/product/${productId ? productId : product?.productId}`, {}, !(product || productId), false);
+	const [{ data: udpJobEntity, loading: jobEntityLoading }] = useAxiosGet(ConfigService.integrationV1ApiUrl, `apicatalog/${apiCatalog?.apiCatalogId}/promotedMethodEntities/udpJob/product/${apiCatalog?.productId}?compareSanitizedName=true`, {}, !apiCatalog?.productId || !apiCatalog?.apiCatalogId, false);
+	const refetchfileResultData = useCallback(async (selectedRecord) => {
+		if (udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId) {
+			setDownloadLinkLoading(true);
+			await executeQueryWithParameters({ data: { JobId: selectedRecord?.id } }, udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId).then((res) => {
+				setFileResultData(res.data);
+			}).catch((err) => {});
+			setDownloadLinkLoading(false);
+		} else setNoDownloadMethod(true);
+	}, [udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId]);
+	const handleSelectRecord = useCallback((data) => {
+		refetchfileResultData(data);
+		setDownloadOpen(true);
+	}, [refetchfileResultData]);
+	const getOptionLabel = (val) => {
+		return val?.name;
+	};
+	const handleProductChange = useCallback((val) => {
+		setProduct(val);
+	}, []);
+	const handleFileDownload = useCallback(() => {
+		if (fileResultData?.link) {
+			const link = document.createElement("a");
+			link.href = fileResultData?.link;
+			link.download = "";
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			setDownloadOpen(false);
+			handleSuccessSnackbar("File successfully downloaded");
+		}
+	}, [fileResultData?.link, handleSuccessSnackbar]);
+	const getJobStatus = (value) => {
+		if (value === 1) return null;
+		else if (value === 2) return "info";
+		else if (value === 3) return "success";
+		else if (value === 4) return "error";
+	};
+	const getJobLabel = (value) => {
+		if (value === 1) return "Pending";
+		else if (value === 2) return "Running";
+		else if (value === 3) return "Completed";
+		else if (value === 4) return "Failed";
+	};
+	useEffect(() => {
+		if (catalogError) handleErrorSnackbar("", "Error fetching catalog for the selected product");
+	}, [catalogError, handleErrorSnackbar]);
+	const filterElements = useMemo(() => {
+		return [{
+			searchField: "jobTypeId",
+			searchOperator: "=",
+			searchValue: 2
+		}];
+	}, []);
+	const actionList = useMemo(() => {
+		return [{
+			id: 1,
+			title: "Download",
+			icon: DownloadIcon,
+			onClick: handleSelectRecord,
+			disabled: false,
+			checkDisabled: (value) => value?.statusId !== 3
+		}];
+	}, [handleSelectRecord]);
+	const columnDefs = useMemo(() => [
+		{
+			headerName: "Id",
+			sortable: true,
+			field: "id",
+			suppressMenu: true
+		},
+		{
+			headerName: "Name",
+			sortable: false,
+			field: "name",
+			minWidth: 140,
+			suppressMenu: true,
+			valueFormatter: (data) => getSanitizedName(data.data.name)
+		},
+		{
+			headerName: "Date",
+			sortable: false,
+			valueFormatter: (data) => new Date(data.data.startTime).toLocaleString(),
+			minWidth: 130,
+			suppressMenu: true
+		},
+		{
+			headerName: "Status",
+			field: "statusId",
+			wrapText: true,
+			autoHeight: true,
+			sortable: false,
+			cellRenderer: "statusCellRenderer",
+			cellRendererParams: {
+				getStatus: getJobStatus,
+				getLabel: getJobLabel
+			},
+			minWidth: 130,
+			maxWidth: 130,
+			suppressMenu: true
+		},
+		{
+			headerName: "Actions",
+			filter: false,
+			pinned: "right",
+			cellRenderer: "actionsRenderer",
+			width: 120,
+			maxWidth: 120,
+			cellRendererParams: {
+				actionList,
+				value: (data) => data
+			},
+			suppressMenu: true,
+			sortable: false,
+			cellStyle: {
+				display: "flex",
+				alignItems: "center"
+			}
+		}
+	], [actionList]);
+	return /* @__PURE__ */ React.createElement("div", null, udpJobEntity && !udpJobEntity?.unityBaseSearchMethod?.apiMethodId && /* @__PURE__ */ React.createElement(AmbientAlert, {
+		alertMessage: "UdpJob's search method must be promoted",
+		showAlert: true,
+		alertSeverity: "error"
+	}), !productId && /* @__PURE__ */ React.createElement("div", { style: { margin: "0px 5px 5px 5px" } }, /* @__PURE__ */ React.createElement(AmbientAutoComplete, {
+		isMultiple: false,
+		id: "product",
+		name: "product",
+		label: "Product",
+		onChange: handleProductChange,
+		options: products,
+		size: "small",
+		getOptionLabelFunction: getOptionLabel,
+		value: product,
+		required: true
+	})), /* @__PURE__ */ React.createElement(TableContainer, {
+		loading: productsLoading || catalogLoading || jobEntityLoading,
+		title: `Exports`,
+		isServerSide: true,
+		eagerLoad: false,
+		logicalSearchOperator: 2,
+		promotedEntity: udpJobEntity,
+		filterElements,
+		actionList,
+		customColumnDefs: columnDefs,
+		frameworkComponents: {
+			statusCellRenderer: StatusCellRenderer,
+			actionsRenderer: ActionsRenderer
+		},
+		hideSearchBar: true,
+		hiddenActionButtons: [
+			"saveView",
+			"views",
+			"insights",
+			"importExport",
+			"group",
+			"filter",
+			"columns",
+			"clearFilters",
+			"fitGrid",
+			"expandGrid"
+		],
+		height: "calc(100vh - 167px)",
+		dynamicSizing: true
+	}), /* @__PURE__ */ React.createElement(FluentDialog, {
+		actionOne: handleFileDownload,
+		actionTwo: () => setDownloadOpen(false),
+		labelOne: "Download",
+		labelTwo: "Cancel",
+		open: downloadOpen,
+		handleClose: () => setDownloadOpen(false),
+		disableOne: noDownloadMethod || downloadLinkLoading,
+		progress: downloadLinkLoading,
+		fullWidth: true
+	}, noDownloadMethod ? /* @__PURE__ */ React.createElement(AmbientAlert, {
+		alertMessage: "UdpJob's get file result method must be promoted",
+		showAlert: true,
+		alertSeverity: "error"
+	}) : downloadLinkLoading ? /* @__PURE__ */ React.createElement(EmptyStateDisplay, { primaryText: "Fetching download link..." }) : /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		icon: noDownloadMethod ? ErrorIcon : StatusCircleCheckmarkIcon,
+		primaryText: !noDownloadMethod && "File is ready to download!"
+	})));
+};
+var MyExportsPage_default = MyExportsPage;
+
+//#endregion
+export { MyExportsPage_default as n, MyExportsPage as t };
+//# sourceMappingURL=MyExportsPage-DDCvI2ao.js.map

package/dist/MyExportsPage-DDCvI2ao.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyExportsPage-DDCvI2ao.js","names":[],"sources":["../src/udp/export/MyExportsPage.jsx"],"sourcesContent":["import React, { useMemo, useState, useCallback, useEffect } from 'react';\nimport {\n  StatusCircleCheckmarkIcon,\n  ErrorIcon,\n  DownloadIcon\n} from '@fluentui/react-icons';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\nimport { FluentDialog } from '../../UI/feedback/FluentDialog';\nimport { EmptyStateDisplay } from '../../UI/dataDisplay/EmptyStateDisplay';\nimport { useAxiosGet } from '../../utilities/useAxiosGet';\nimport { ActionsRenderer } from '../../UI/templates/ui/renderers/ActionsRenderer';\nimport { AmbientAlert } from '../../UI/feedback/AmbientAlert';\nimport { TableContainer } from '../../maintenanceEngine/tableBrowser/TableContainer';\nimport { StatusCellRenderer } from '../../UI/templates/ui/renderers/StatusCellRenderer';\nimport { useUser } from '../../utilities/auth/useUser';\nimport { AmbientAutoComplete } from '../../UI/inputs/textField/AmbientAutoComplete';\nimport { executeQueryWithParameters } from '../utilities/methodUtils';\nimport { useHandleAxiosSnackbar } from '../../utilities/apiHelpers';\nimport { ConfigService } from '../../configService';\n\nexport const MyExportsPage = (props) => {\n  const { productId } = props;\n  const user = useUser();\n  const [product, setProduct] = useState();\n  const [downloadLinkLoading, setDownloadLinkLoading] = useState(false);\n  const [fileResultData, setFileResultData] = useState();\n  const [downloadOpen, setDownloadOpen] = useState(false);\n  const [noDownloadMethod, setNoDownloadMethod] = useState(false);\n\n  const { handleErrorSnackbar, handleSuccessSnackbar } =\n    useHandleAxiosSnackbar();\n\n  const [{ data: products, loading: productsLoading }] = useAxiosGet(\n    ConfigService.tenantV2ApiUrl,\n    `tenant/products?tenantId=${user?.currentTenantId}&isSubscribable=${!user\n      ?.can?.CAN_MANAGE_CATALOGS_FOR_UNSUBSCRIBABLE_PRODUCTS}`,\n    {},\n    !user\n  );\n\n  const [{ data: apiCatalog, loading: catalogLoading, error: catalogError }] =\n    useAxiosGet(\n      ConfigService.integrationV1ApiUrl,\n      `tenantProductApiCatalogBase/tenant/${user?.currentTenantId}/product/${\n        productId ? productId : product?.productId\n      }`,\n      {},\n      !(product || productId),\n      false\n    );\n\n  const [{ data: udpJobEntity, loading: jobEntityLoading }] = useAxiosGet(\n    ConfigService.integrationV1ApiUrl,\n    `apicatalog/${apiCatalog?.apiCatalogId}/promotedMethodEntities/udpJob/product/${apiCatalog?.productId}?compareSanitizedName=true`,\n    {},\n    !apiCatalog?.productId || !apiCatalog?.apiCatalogId,\n    false\n  );\n\n  const refetchfileResultData = useCallback(\n    async (selectedRecord) => {\n      if (udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId) {\n        setDownloadLinkLoading(true);\n        await executeQueryWithParameters(\n          {\n            data: { JobId: selectedRecord?.id }\n          },\n          udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n        )\n          .then((res) => {\n            setFileResultData(res.data);\n          })\n          .catch((err) => {});\n        setDownloadLinkLoading(false);\n      } else {\n        setNoDownloadMethod(true);\n      }\n    },\n    [udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId]\n  );\n\n  const handleSelectRecord = useCallback(\n    (data) => {\n      refetchfileResultData(data);\n      setDownloadOpen(true);\n    },\n    [refetchfileResultData]\n  );\n\n  const getOptionLabel = (val) => {\n    return val?.name;\n  };\n\n  const handleProductChange = useCallback((val) => {\n    setProduct(val);\n  }, []);\n\n  const handleFileDownload = useCallback(() => {\n    if (fileResultData?.link) {\n      const link = document.createElement('a');\n      link.href = fileResultData?.link;\n      link.download = '';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n      setDownloadOpen(false);\n      handleSuccessSnackbar('File successfully downloaded');\n    }\n  }, [fileResultData?.link, handleSuccessSnackbar]);\n\n  const getJobStatus = (value) => {\n    if (value === 1) {\n      return null;\n    } else if (value === 2) {\n      return 'info';\n    } else if (value === 3) {\n      return 'success';\n    } else if (value === 4) {\n      return 'error';\n    }\n  };\n\n  const getJobLabel = (value) => {\n    if (value === 1) {\n      return 'Pending';\n    } else if (value === 2) {\n      return 'Running';\n    } else if (value === 3) {\n      return 'Completed';\n    } else if (value === 4) {\n      return 'Failed';\n    }\n  };\n\n  useEffect(() => {\n    if (catalogError) {\n      handleErrorSnackbar(\n        '',\n        'Error fetching catalog for the selected product'\n      );\n    }\n  }, [catalogError, handleErrorSnackbar]);\n\n  const filterElements = useMemo(() => {\n    return [\n      {\n        searchField: 'jobTypeId',\n        searchOperator: '=',\n        searchValue: 2\n      }\n    ];\n  }, []);\n\n  const actionList = useMemo(() => {\n    return [\n      {\n        id: 1,\n        title: 'Download',\n        icon: DownloadIcon,\n        onClick: handleSelectRecord,\n        disabled: false,\n        checkDisabled: (value) => value?.statusId !== 3\n      }\n    ];\n  }, [handleSelectRecord]);\n\n  const columnDefs = useMemo(\n    () => [\n      {\n        headerName: 'Id',\n        sortable: true,\n        field: 'id',\n        suppressMenu: true\n      },\n      {\n        headerName: 'Name',\n        sortable: false,\n        field: 'name',\n        minWidth: 140,\n        suppressMenu: true,\n        valueFormatter: (data) => getSanitizedName(data.data.name)\n      },\n      {\n        headerName: 'Date',\n        sortable: false,\n        valueFormatter: (data) =>\n          new Date(data.data.startTime).toLocaleString(),\n        minWidth: 130,\n        suppressMenu: true\n        //sort: 'desc',\n      },\n      {\n        headerName: 'Status',\n        field: 'statusId',\n        wrapText: true,\n        autoHeight: true,\n        sortable: false,\n        cellRenderer: 'statusCellRenderer',\n        cellRendererParams: { getStatus: getJobStatus, getLabel: getJobLabel },\n        minWidth: 130,\n        maxWidth: 130,\n        suppressMenu: true\n      },\n\n      {\n        headerName: 'Actions',\n        filter: false,\n        pinned: 'right',\n        cellRenderer: 'actionsRenderer',\n        width: 120,\n        maxWidth: 120,\n        cellRendererParams: {\n          actionList: actionList,\n          value: (data) => data\n        },\n        suppressMenu: true,\n        sortable: false,\n        cellStyle: { display: 'flex', alignItems: 'center' }\n      }\n    ],\n    [actionList]\n  );\n\n  return (\n    <div>\n      {udpJobEntity && !udpJobEntity?.unityBaseSearchMethod?.apiMethodId && (\n        <AmbientAlert\n          alertMessage={\"UdpJob's search method must be promoted\"}\n          showAlert={true}\n          alertSeverity={'error'}\n        />\n      )}\n\n      {!productId && (\n        <div style={{ margin: '0px 5px 5px 5px' }}>\n          <AmbientAutoComplete\n            isMultiple={false}\n            id={'product'}\n            name={'product'}\n            label='Product'\n            onChange={handleProductChange}\n            options={products}\n            size='small'\n            getOptionLabelFunction={getOptionLabel}\n            value={product}\n            required\n          />\n        </div>\n      )}\n      <TableContainer\n        loading={productsLoading || catalogLoading || jobEntityLoading}\n        title={`Exports`}\n        isServerSide={true}\n        eagerLoad={false}\n        logicalSearchOperator={2}\n        promotedEntity={udpJobEntity}\n        filterElements={filterElements}\n        actionList={actionList}\n        customColumnDefs={columnDefs}\n        frameworkComponents={{\n          statusCellRenderer: StatusCellRenderer,\n          actionsRenderer: ActionsRenderer\n        }}\n        hideSearchBar\n        hiddenActionButtons={[\n          'saveView',\n          'views',\n          'insights',\n          'importExport',\n          'group',\n          'filter',\n          'columns',\n          'clearFilters',\n          'fitGrid',\n          'expandGrid'\n        ]}\n        height={'calc(100vh - 167px)'}\n        dynamicSizing\n      />\n      <FluentDialog\n        actionOne={handleFileDownload}\n        actionTwo={() => setDownloadOpen(false)}\n        labelOne='Download'\n        labelTwo='Cancel'\n        open={downloadOpen}\n        handleClose={() => setDownloadOpen(false)}\n        disableOne={noDownloadMethod || downloadLinkLoading}\n        progress={downloadLinkLoading}\n        fullWidth\n      >\n        {noDownloadMethod ? (\n          <AmbientAlert\n            alertMessage={\"UdpJob's get file result method must be promoted\"}\n            showAlert={true}\n            alertSeverity={'error'}\n          />\n        ) : downloadLinkLoading ? (\n          <EmptyStateDisplay primaryText={'Fetching download link...'} />\n        ) : (\n          <EmptyStateDisplay\n            icon={noDownloadMethod ? ErrorIcon : StatusCircleCheckmarkIcon}\n            primaryText={!noDownloadMethod && 'File is ready to download!'}\n          />\n        )}\n      </FluentDialog>\n    </div>\n  );\n};\n\nexport default MyExportsPage;\n"],"mappings":"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"}

package/dist/MyExportsPage-N_ulPphl.js

@@ -0,0 +1,3 @@
+import { n as MyExportsPage_default, t as MyExportsPage } from "./MyExportsPage-DDCvI2ao.js";
+
+export { MyExportsPage, MyExportsPage_default as default };

package/dist/NestedGrid-DfQ6g71t.js

@@ -0,0 +1,84 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import React, { Fragment } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { CalculatorMultiplyIcon, PaddingLeftIcon, PaddingRightIcon, TimerIcon } from "@fluentui/react-icons";
+
+//#region src/UI/surfaces/NestedGrid/NestedGrid.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { marginTop: 32 },
+	nestedWrapper: { display: "grid" },
+	columnAdornment: {
+		borderLeft: `4px solid ${theme.palette.secondary.main}`,
+		borderTop: `4px solid ${theme.palette.secondary.main}`
+	},
+	detailHeader: {
+		padding: theme.spacing(1),
+		color: "white",
+		background: theme.palette.grey.dark
+	},
+	detailHeaderActive: { background: theme.palette.secondary.main },
+	columnHeaderWrapper: { display: "flex" },
+	columnTitle: {
+		flex: 1,
+		display: "flex",
+		paddingTop: theme.spacing(1)
+	},
+	icon: { color: theme.palette.common.white },
+	expandIcon: {
+		marginLeft: theme.spacing(2),
+		marginTop: theme.spacing(-1)
+	}
+}));
+const NestParent = ({ parentTitle, children, showDetail }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, showDetail && /* @__PURE__ */ React.createElement("div", { className: classes.detailHeader }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", parentTitle, " ")), children);
+};
+const NestWrapper = ({ children, columnFr }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.nestedWrapper,
+		style: { gridTemplateColumns: `1fr ${columnFr}fr` }
+	}, children);
+};
+const toggleHeader = (type, setShowDetail, setColumnFr) => {
+	if (type === "open") {
+		setShowDetail(true);
+		setColumnFr(4);
+	} else {
+		setShowDetail(false);
+		setColumnFr(0);
+	}
+};
+const NestedGrid = ({ children, setShowDetail, setColumnFr, columnFr, childTitle, showDetail }) => {
+	const classes = useStyles();
+	const toggleHeader$1 = (type) => {
+		if (type === "open") {
+			setShowDetail(true);
+			setColumnFr(4);
+		} else {
+			setShowDetail(false);
+			setColumnFr(0);
+		}
+	};
+	const toggleWide = () => {
+		if (columnFr === 4) setColumnFr(1);
+		else setColumnFr(4);
+	};
+	return /* @__PURE__ */ React.createElement(Fragment, null, showDetail && /* @__PURE__ */ React.createElement("div", { className: classes.columnAdornment }, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.detailHeader, classes.detailHeaderActive) }, /* @__PURE__ */ React.createElement("div", { className: classes.columnHeaderWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.columnTitle }, /* @__PURE__ */ React.createElement(TimerIcon, { style: { marginRight: 8 } }), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, childTitle), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: clsx(classes.icon, classes.expandIcon),
+		icon: columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon,
+		onClick: toggleWide
+	}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		style: {
+			color: "white",
+			marginRight: 8
+		},
+		icon: CalculatorMultiplyIcon,
+		onClick: () => toggleHeader$1("close")
+	})))), children));
+};
+
+//#endregion
+export { toggleHeader as i, NestWrapper as n, NestedGrid as r, NestParent as t };
+//# sourceMappingURL=NestedGrid-DfQ6g71t.js.map

package/dist/NestedGrid-DfQ6g71t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedGrid-DfQ6g71t.js","names":["toggleHeader"],"sources":["../src/UI/surfaces/NestedGrid/NestedGrid.jsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport clsx from 'clsx'\nimport {\n  CalculatorMultiplyIcon,\n  TimerIcon,\n  PaddingRightIcon,\n  PaddingLeftIcon\n} from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: 32\n  },\n  nestedWrapper: {\n    display: 'grid'\n  },\n  columnAdornment: {\n    borderLeft: `4px solid ${theme.palette.secondary.main}`,\n    borderTop: `4px solid ${theme.palette.secondary.main}`\n  },\n  detailHeader: {\n    padding: theme.spacing(1),\n    color: 'white',\n    background: theme.palette.grey.dark\n  },\n  detailHeaderActive: {\n    background: theme.palette.secondary.main\n  },\n  columnHeaderWrapper: {\n    display: 'flex'\n  },\n  columnTitle: {\n    flex: 1,\n    display: 'flex',\n    paddingTop: theme.spacing(1)\n  },\n  icon: {\n    color: theme.palette.common.white\n  },\n  expandIcon: {\n    marginLeft: theme.spacing(2),\n    marginTop: theme.spacing(-1)\n  }\n}))\n\nexport const NestParent = ({ parentTitle, children, showDetail }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.root}>\n      {showDetail && (\n        <div className={classes.detailHeader}>\n          <Typography variant='subtitle2'> {parentTitle} </Typography>\n        </div>\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport const NestWrapper = ({ children, columnFr }) => {\n  const classes = useStyles()\n  return (\n    <div\n      className={classes.nestedWrapper}\n      style={{ gridTemplateColumns: `1fr ${columnFr}fr` }}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const toggleHeader = (\n  type,\n  setShowDetail,\n  setColumnFr\n  // setSplitGrid\n) => {\n  if (type === 'open') {\n    setShowDetail(true)\n    setColumnFr(4)\n    // setSplitGrid(true)\n  } else {\n    setShowDetail(false)\n    setColumnFr(0)\n  }\n}\n\nexport const NestedGrid = ({\n  children,\n  setShowDetail,\n  setColumnFr,\n  // setSplitGrid,\n  columnFr,\n  childTitle,\n  showDetail\n}) => {\n  const classes = useStyles()\n  const toggleHeader = (type) => {\n    if (type === 'open') {\n      setShowDetail(true)\n      setColumnFr(4)\n      // setSplitGrid(true)\n    } else {\n      setShowDetail(false)\n      setColumnFr(0)\n    }\n  }\n\n  const toggleWide = () => {\n    if (columnFr === 4) {\n      setColumnFr(1)\n    } else {\n      setColumnFr(4)\n    }\n  }\n\n  return (\n    <Fragment>\n      {showDetail && (\n        <div className={classes.columnAdornment}>\n          <div\n            className={clsx(classes.detailHeader, classes.detailHeaderActive)}\n          >\n            <div className={classes.columnHeaderWrapper}>\n              <div className={classes.columnTitle}>\n                <TimerIcon style={{ marginRight: 8 }} />\n                <Typography variant='subtitle2'>{childTitle}</Typography>\n                <div>\n                  <FluentIconButton\n                    className={clsx(classes.icon, classes.expandIcon)}\n                    icon={columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon}\n                    onClick={toggleWide}\n                  />\n                </div>\n              </div>\n              <div>\n                <FluentIconButton\n                  style={{ color: 'white', marginRight: 8 }}\n                  icon={CalculatorMultiplyIcon}\n                  onClick={() => toggleHeader('close')}\n                />\n              </div>\n            </div>\n          </div>\n          {children}\n        </div>\n      )}\n    </Fragment>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,WAAW,IACZ;CACD,eAAe,EACb,SAAS,QACV;CACD,iBAAiB;EACf,YAAY,aAAa,MAAM,QAAQ,UAAU;EACjD,WAAW,aAAa,MAAM,QAAQ,UAAU;EACjD;CACD,cAAc;EACZ,SAAS,MAAM,QAAQ,EAAE;EACzB,OAAO;EACP,YAAY,MAAM,QAAQ,KAAK;EAChC;CACD,oBAAoB,EAClB,YAAY,MAAM,QAAQ,UAAU,MACrC;CACD,qBAAqB,EACnB,SAAS,QACV;CACD,aAAa;EACX,MAAM;EACN,SAAS;EACT,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,MAAM,EACJ,OAAO,MAAM,QAAQ,OAAO,OAC7B;CACD,YAAY;EACV,YAAY,MAAM,QAAQ,EAAE;EAC5B,WAAW,MAAM,QAAQ,GAAG;EAC7B;CACF,EAAE;AAEH,MAAa,cAAc,EAAE,aAAa,UAAU,iBAAiB;CACnE,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACrB,cACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,cAAW,SAAQ,eAAY,KAAE,aAAY,IAAc,CACxD,EAEP,SACG;;AAIV,MAAa,eAAe,EAAE,UAAU,eAAe;CACrD,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EAAE,qBAAqB,OAAO,SAAS,KAAK;IAElD,SACG;;AAIV,MAAa,gBACX,MACA,eACA,gBAEG;AACH,KAAI,SAAS,QAAQ;AACnB,gBAAc,KAAK;AACnB,cAAY,EAAE;QAET;AACL,gBAAc,MAAM;AACpB,cAAY,EAAE;;;AAIlB,MAAa,cAAc,EACzB,UACA,eACA,aAEA,UACA,YACA,iBACI;CACJ,MAAM,UAAU,WAAW;CAC3B,MAAMA,kBAAgB,SAAS;AAC7B,MAAI,SAAS,QAAQ;AACnB,iBAAc,KAAK;AACnB,eAAY,EAAE;SAET;AACL,iBAAc,MAAM;AACpB,eAAY,EAAE;;;CAIlB,MAAM,mBAAmB;AACvB,MAAI,aAAa,EACf,aAAY,EAAE;MAEd,aAAY,EAAE;;AAIlB,QACE,oCAAC,gBACE,cACC,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC,SACC,WAAW,KAAK,QAAQ,cAAc,QAAQ,mBAAmB,IAEjE,oCAAC,SAAI,WAAW,QAAQ,uBACtB,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC,aAAU,OAAO,EAAE,aAAa,GAAG,GAAI,EACxC,oCAAC,cAAW,SAAQ,eAAa,WAAwB,EACzD,oCAAC,aACC,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,WAAW;EACjD,MAAM,aAAa,IAAI,mBAAmB;EAC1C,SAAS;GACT,CACE,CACF,EACN,oCAAC,aACC,oCAAC;EACC,OAAO;GAAE,OAAO;GAAS,aAAa;GAAG;EACzC,MAAM;EACN,eAAeA,eAAa,QAAQ;GACpC,CACE,CACF,CACF,EACL,SACG,CAEC"}

package/dist/NewsCard-BBh7InGE.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Collapse, Divider, Typography, makeStyles } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/surfaces/cards/newsCard/NewsCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { "&:hover": {
+		backgroundColor: theme.palette.secondary.main,
+		color: theme?.palette?.getContrastText(theme.palette.secondary.main)
+	} },
+	title: {
+		lineHeight: 1.2,
+		marginBottom: theme.spacing(1.5)
+	},
+	number: {
+		marginRight: 16,
+		paddingLeft: 16
+	},
+	divider: {
+		width: "100%",
+		marginTop: 16
+	}
+}));
+const NewsCard = ({ number, title, summary, width, component = "h2" }) => {
+	const [expanded, setExpanded] = useState(false);
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.root,
+		style: { cursor: summary.length > 56 && "pointer" },
+		onClick: () => setExpanded(!expanded)
+	}, /* @__PURE__ */ React.createElement("div", { style: {
+		width: width === "double" ? 560 : 260,
+		display: "flex",
+		marginTop: 16,
+		paddingRight: 16
+	} }, /* @__PURE__ */ React.createElement("div", { className: classes.number }, /* @__PURE__ */ React.createElement(Typography, { variant: "h2" }, number)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		component,
+		className: classes.title
+	}, title), /* @__PURE__ */ React.createElement(Typography, { style: { minHeight: width !== "double" && 40 } }, summary.slice(0, 57), " ", summary.length > 56 && !expanded && "...")), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expanded,
+		timeout: "auto",
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, null, summary.slice(57)))))), /* @__PURE__ */ React.createElement(Divider, { className: classes.divider }));
+};
+NewsCard.propTypes = {
+	number: PropTypes.number.isRequired,
+	title: PropTypes.string.isRequired,
+	component: PropTypes.string,
+	summary: PropTypes.string.isRequired,
+	width: PropTypes.string
+};
+NewsCard.defaultProps = { component: "h2" };
+
+//#endregion
+export { NewsCard as t };
+//# sourceMappingURL=NewsCard-BBh7InGE.js.map

package/dist/NewsCard-BBh7InGE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsCard-BBh7InGE.js","names":[],"sources":["../src/UI/surfaces/cards/newsCard/NewsCard.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Typography, makeStyles, Collapse, Divider } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&:hover': {\n      backgroundColor: theme.palette.secondary.main,\n      color: theme?.palette?.getContrastText(theme.palette.secondary.main)\n    }\n  },\n  title: {\n    lineHeight: 1.2,\n    marginBottom: theme.spacing(1.5)\n  },\n  number: {\n    marginRight: 16,\n    paddingLeft: 16\n  },\n  divider: {\n    width: '100%',\n    marginTop: 16\n  }\n}))\n\nexport const NewsCard = ({\n  number,\n  title,\n  summary,\n  width,\n  component = 'h2'\n}) => {\n  const [expanded, setExpanded] = useState(false)\n\n  const classes = useStyles()\n\n  return (\n    <div\n      className={classes.root}\n      style={{ cursor: summary.length > 56 && 'pointer' }}\n      onClick={() => setExpanded(!expanded)}\n    >\n      <div\n        style={{\n          width: width === 'double' ? 560 : 260,\n          display: 'flex',\n          marginTop: 16,\n          paddingRight: 16\n        }}\n      >\n        <div className={classes.number}>\n          <Typography variant='h2'>{number}</Typography>\n        </div>\n\n        <div>\n          <div>\n            <Typography\n              variant='subtitle2'\n              component={component}\n              className={classes.title}\n            >\n              {title}\n            </Typography>\n            <Typography style={{ minHeight: width !== 'double' && 40 }}>\n              {summary.slice(0, 57)} {summary.length > 56 && !expanded && '...'}\n            </Typography>\n          </div>\n          <Collapse in={expanded} timeout='auto' unmountOnExit>\n            <div>\n              <Typography>{summary.slice(57)}</Typography>\n            </div>\n          </Collapse>\n        </div>\n      </div>\n      <Divider className={classes.divider} />\n    </div>\n  )\n}\nNewsCard.propTypes = {\n  /**\n   * Number listed by news item\n   */\n  number: PropTypes.number.isRequired,\n  /**\n   * Title of news item\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Header Tag override. Defaults to H2\n   */\n  component: PropTypes.string,\n  /**\n   * Summary of news item (overflow beyond 56 characters is sent to expanded content area)\n   */\n  summary: PropTypes.string.isRequired,\n  /**\n   * Optional width flag. width === double will set the card to full width\n   */\n  width: PropTypes.string\n}\n\nNewsCard.defaultProps = {\n  component: 'h2'\n}\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,WAAW;EACT,iBAAiB,MAAM,QAAQ,UAAU;EACzC,OAAO,OAAO,SAAS,gBAAgB,MAAM,QAAQ,UAAU,KAAK;EACrE,EACF;CACD,OAAO;EACL,YAAY;EACZ,cAAc,MAAM,QAAQ,IAAI;EACjC;CACD,QAAQ;EACN,aAAa;EACb,aAAa;EACd;CACD,SAAS;EACP,OAAO;EACP,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,YAAY,EACvB,QACA,OACA,SACA,OACA,YAAY,WACR;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EAAE,QAAQ,QAAQ,SAAS,MAAM,WAAW;EACnD,eAAe,YAAY,CAAC,SAAS;IAErC,oCAAC,SACC,OAAO;EACL,OAAO,UAAU,WAAW,MAAM;EAClC,SAAS;EACT,WAAW;EACX,cAAc;EACf,IAED,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,cAAW,SAAQ,QAAM,OAAoB,CAC1C,EAEN,oCAAC,aACC,oCAAC,aACC,oCAAC;EACC,SAAQ;EACG;EACX,WAAW,QAAQ;IAElB,MACU,EACb,oCAAC,cAAW,OAAO,EAAE,WAAW,UAAU,YAAY,IAAI,IACvD,QAAQ,MAAM,GAAG,GAAG,EAAC,KAAE,QAAQ,SAAS,MAAM,CAAC,YAAY,MACjD,CACT,EACN,oCAAC;EAAS,IAAI;EAAU,SAAQ;EAAO;IACrC,oCAAC,aACC,oCAAC,kBAAY,QAAQ,MAAM,GAAG,CAAc,CACxC,CACG,CACP,CACF,EACN,oCAAC,WAAQ,WAAW,QAAQ,UAAW,CACnC;;AAGV,SAAS,YAAY;CAInB,QAAQ,UAAU,OAAO;CAIzB,OAAO,UAAU,OAAO;CAIxB,WAAW,UAAU;CAIrB,SAAS,UAAU,OAAO;CAI1B,OAAO,UAAU;CAClB;AAED,SAAS,eAAe,EACtB,WAAW,MACZ"}

package/dist/Notes-BEga_Q4I.js

@@ -0,0 +1,63 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as TrimForAvatar } from "./TrimForAvatar-BnH-TI_i.js";
+import { t as AvatarAlphabet } from "./AvatarAlphabet-wbHcpayy.js";
+import React from "react";
+import { CardContent, Paper, Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { DeleteIcon } from "@fluentui/react-icons";
+import TimeAgo from "timeago-react";
+
+//#region src/UI/dataDisplay/notes/Note.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		width: "100%",
+		display: "flex"
+	},
+	avatar: { marginRight: theme.spacing(2) },
+	message: { width: "100%" },
+	noteWrapper: { display: "flex" },
+	note: { flex: 1 },
+	date: { marginTop: theme.spacing(2) }
+}));
+const Note = ({ children, author, date, className, onClick }) => {
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement("div", { className: classes.avatar }, /* @__PURE__ */ React.createElement(AvatarAlphabet, { avatarCharacter: TrimForAvatar(author) })), /* @__PURE__ */ React.createElement(Paper, {
+		elevation: 0,
+		className: classes.message
+	}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.noteWrapper }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		className: classes.note
+	}, children), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: DeleteIcon,
+		onClick
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.date }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, /* @__PURE__ */ React.createElement(TimeAgo, { datetime: date }))))));
+};
+
+//#endregion
+//#region src/UI/dataDisplay/notes/Notes.jsx
+const useStyles = makeStyles((theme) => ({ root: {
+	display: "flex",
+	flexDirection: "column",
+	alignContent: "space-around"
+} }));
+/**
+* @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<Theme, {}, string>>}
+*/
+const Notes = ({ data, key, handleClick }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, data && data.map((item) => {
+		return /* @__PURE__ */ React.createElement("div", {
+			style: { marginBottom: 20 },
+			key
+		}, /* @__PURE__ */ React.createElement(Note, {
+			author: item.author,
+			date: item.date.toString(),
+			onClick: () => handleClick(item.id)
+		}, item.note));
+	}));
+};
+
+//#endregion
+export { useStyles as n, Note as r, Notes as t };
+//# sourceMappingURL=Notes-BEga_Q4I.js.map

package/dist/Notes-BEga_Q4I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notes-BEga_Q4I.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/notes/Note.jsx","../src/UI/dataDisplay/notes/Notes.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Paper, CardContent, Typography } from '@material-ui/core'\nimport { AvatarAlphabet } from '../AvatarAlphabet'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { DeleteIcon } from '@fluentui/react-icons'\nimport { TrimForAvatar } from '../../../utilities/TrimForAvatar'\nimport TimeAgo from 'timeago-react'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    display: 'flex'\n  },\n  avatar: {\n    marginRight: theme.spacing(2)\n  },\n  message: {\n    width: '100%'\n  },\n  noteWrapper: {\n    display: 'flex'\n  },\n  note: {\n    flex: 1\n  },\n  date: {\n    marginTop: theme.spacing(2)\n  }\n}))\n\nexport const Note = ({ children, author, date, className, onClick }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div className={classes.avatar}>\n        <AvatarAlphabet avatarCharacter={TrimForAvatar(author)} />\n      </div>\n\n      <Paper elevation={0} className={classes.message}>\n        <CardContent>\n          <div className={classes.noteWrapper}>\n            <Typography variant='body2' className={classes.note}>\n              {children}\n            </Typography>\n            <div>\n              <FluentIconButton\n                color='primary'\n                icon={DeleteIcon}\n                onClick={onClick}\n              />\n            </div>\n          </div>\n          <div className={classes.date}>\n            <Typography variant='caption'>\n              <TimeAgo datetime={date} />\n            </Typography>\n          </div>\n        </CardContent>\n      </Paper>\n    </div>\n  )\n}\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { Note } from './Note'\n\nexport const useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around'\n  }\n}))\n\n/**\n * @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<Theme, {}, string>>}\n */\n\nexport const Notes = ({ data, key, handleClick }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      {data &&\n        data.map((item) => {\n          return (\n            <div style={{ marginBottom: 20 }} key={key}>\n              <Note\n                author={item.author}\n                date={item.date.toString()}\n                onClick={() => handleClick(item.id)}\n              >\n                {item.note}\n              </Note>\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,SAAS;EACV;CACD,QAAQ,EACN,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,SAAS,EACP,OAAO,QACR;CACD,aAAa,EACX,SAAS,QACV;CACD,MAAM,EACJ,MAAM,GACP;CACD,MAAM,EACJ,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;AAEH,MAAa,QAAQ,EAAE,UAAU,QAAQ,MAAM,WAAW,cAAc;CACtE,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAC3C,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,kBAAe,iBAAiB,cAAc,OAAO,GAAI,CACtD,EAEN,oCAAC;EAAM,WAAW;EAAG,WAAW,QAAQ;IACtC,oCAAC,mBACC,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC5C,SACU,EACb,oCAAC,aACC,oCAAC;EACC,OAAM;EACN,MAAM;EACG;GACT,CACE,CACF,EACN,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,cAAW,SAAQ,aAClB,oCAAC,WAAQ,UAAU,OAAQ,CAChB,CACT,CACM,CACR,CACJ;;;;;ACzDV,MAAa,YAAY,YAAY,WAAW,EAC9C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,cAAc;CACf,EACF,EAAE;;;;AAMH,MAAa,SAAS,EAAE,MAAM,KAAK,kBAAkB;CACnD,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACrB,QACC,KAAK,KAAK,SAAS;AACjB,SACE,oCAAC;GAAI,OAAO,EAAE,cAAc,IAAI;GAAO;KACrC,oCAAC;GACC,QAAQ,KAAK;GACb,MAAM,KAAK,KAAK,UAAU;GAC1B,eAAe,YAAY,KAAK,GAAG;KAElC,KAAK,KACD,CACH;GAER,CACA"}