@itwin/grouping-mapping-widget 0.2.0

package/lib/cjs/widget/components/Grouping.js

@@ -0,0 +1,214 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Groupings = void 0;
+const appui_react_1 = require("@itwin/appui-react");
+const react_1 = __importStar(require("react"));
+const reportingClient_1 = require("../../api/reportingClient");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const DeleteModal_1 = __importDefault(require("./DeleteModal"));
+require("./Grouping.scss");
+const PropertyMenu_1 = require("./PropertyMenu");
+const viewerUtils_1 = require("./viewerUtils");
+const utils_1 = require("./utils");
+const GroupAction_1 = __importDefault(require("./GroupAction"));
+var GroupsView;
+(function (GroupsView) {
+    GroupsView["GROUPS"] = "groups";
+    GroupsView["MODIFYING"] = "modifying";
+    GroupsView["ADD"] = "ADD";
+    GroupsView["PROPERTIES"] = "properties";
+})(GroupsView || (GroupsView = {}));
+const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading) => {
+    var _a;
+    try {
+        setIsLoading(true);
+        const groups = await reportingClient_1.reportingClientApi.getGroups(iModelId, mappingId);
+        setGroups((_a = groups.groups) !== null && _a !== void 0 ? _a : []);
+    }
+    catch {
+    }
+    finally {
+        setIsLoading(false);
+    }
+};
+const useFetchGroups = (iModelId, mappingId, setIsLoading) => {
+    const [groups, setGroups] = react_1.useState([]);
+    react_1.useEffect(() => {
+        void fetchGroups(setGroups, iModelId, mappingId, setIsLoading);
+    }, [iModelId, mappingId, setIsLoading]);
+    return [groups, setGroups];
+};
+const Groupings = ({ mapping, goBack }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const iModelConnection = appui_react_1.useActiveIModelConnection();
+    const iModelId = (_a = appui_react_1.useActiveIModelConnection()) === null || _a === void 0 ? void 0 : _a.iModelId;
+    const [showDeleteModal, setShowDeleteModal] = react_1.useState(false);
+    const [isLoading, setIsLoading] = react_1.useState(true);
+    const [groupsView, setGroupsView] = react_1.useState(GroupsView.GROUPS);
+    const [selectedGroup, setSelectedGroup] = react_1.useState(undefined);
+    const [groups, setGroups] = useFetchGroups(iModelId, (_b = mapping.id) !== null && _b !== void 0 ? _b : "", setIsLoading);
+    const hilitedElements = react_1.useRef(new Map());
+    const [isLoadingQuery, setLoadingQuery] = react_1.useState(false);
+    const refresh = react_1.useCallback(async () => {
+        var _a;
+        setGroupsView(GroupsView.GROUPS);
+        setSelectedGroup(undefined);
+        setGroups([]);
+        await fetchGroups(setGroups, iModelId, (_a = mapping.id) !== null && _a !== void 0 ? _a : "", setIsLoading);
+    }, [iModelId, mapping.id, setGroups]);
+    const addGroup = () => {
+        // TODO Retain selection in view without emphasizes. Goal is to make it so we can distinguish
+        // hilited elements from regular elements without emphasis due to it blocking selection. For now clearing
+        // selection.
+        viewerUtils_1.clearEmphasizedElements();
+        setGroupsView(GroupsView.ADD);
+    };
+    const onModify = react_1.useCallback((value) => {
+        viewerUtils_1.clearEmphasizedElements();
+        setSelectedGroup(value.row.original);
+        setGroupsView(GroupsView.MODIFYING);
+    }, []);
+    const openProperties = react_1.useCallback((value) => {
+        viewerUtils_1.clearEmphasizedElements();
+        setSelectedGroup(value.row.original);
+        setGroupsView(GroupsView.PROPERTIES);
+    }, []);
+    const groupsColumns = react_1.useMemo(() => [
+        {
+            Header: "Table",
+            columns: [
+                {
+                    id: "groupName",
+                    Header: "Group",
+                    accessor: "groupName",
+                    Cell: (value) => (react_1.default.createElement(react_1.default.Fragment, null, isLoadingQuery ? (value.row.original.groupName) : (react_1.default.createElement("div", { className: 'iui-anchor', onClick: (e) => {
+                            e.stopPropagation();
+                            openProperties(value);
+                        } }, value.row.original.groupName)))),
+                },
+                {
+                    id: "description",
+                    Header: "Description",
+                    accessor: "description",
+                },
+                {
+                    id: "dropdown",
+                    Header: "",
+                    width: 80,
+                    Cell: (value) => {
+                        return (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
+                            react_1.default.createElement(itwinui_react_1.DropdownMenu, { disabled: isLoadingQuery, menuItems: (close) => [
+                                    react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, onClick: () => onModify(value), icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null) }, "Modify"),
+                                    react_1.default.createElement(itwinui_react_1.MenuItem, { key: 1, onClick: () => openProperties(value), icon: react_1.default.createElement(itwinui_icons_react_1.SvgList, null) }, "Properties"),
+                                    react_1.default.createElement(itwinui_react_1.MenuItem, { key: 2, onClick: () => {
+                                            setSelectedGroup(value.row.original);
+                                            setShowDeleteModal(true);
+                                            close();
+                                        }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null) }, "Remove"),
+                                ] },
+                                react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless' },
+                                    react_1.default.createElement(itwinui_icons_react_1.SvgMore, { style: {
+                                            width: "16px",
+                                            height: "16px",
+                                        } })))));
+                    },
+                },
+            ],
+        },
+    ], [isLoadingQuery, onModify, openProperties]);
+    // Temp
+    const stringToColor = function (str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        let colour = "#";
+        for (let i = 0; i < 3; i++) {
+            const value = (hash >> (i * 8)) & 0xff;
+            colour += (`00${value.toString(16)}`).substr(-2);
+        }
+        return colour;
+    };
+    const onSelect = react_1.useCallback(async (selectedData) => {
+        var _a, _b, _c, _d, _e, _f;
+        viewerUtils_1.clearEmphasizedElements();
+        if (selectedData && selectedData.length > 0) {
+            setLoadingQuery(true);
+            let allIds = [];
+            for (const row of selectedData) {
+                const query = (_a = row.query) !== null && _a !== void 0 ? _a : "";
+                if (hilitedElements.current.has(query)) {
+                    const hilitedIds = (_b = hilitedElements.current.get(query)) !== null && _b !== void 0 ? _b : [];
+                    viewerUtils_1.visualizeElements(hilitedIds, stringToColor((_c = row.id) !== null && _c !== void 0 ? _c : ""));
+                    allIds = allIds.concat(hilitedIds);
+                }
+                else {
+                    const ids = await utils_1.fetchIdsFromQuery((_d = row.query) !== null && _d !== void 0 ? _d : "", iModelConnection);
+                    const hiliteIds = await viewerUtils_1.visualizeElementsById(ids, stringToColor((_e = row.id) !== null && _e !== void 0 ? _e : ""), iModelConnection);
+                    hilitedElements.current.set((_f = row.query) !== null && _f !== void 0 ? _f : "", hiliteIds);
+                    allIds = allIds.concat(ids);
+                }
+            }
+            await viewerUtils_1.zoomToElements(allIds);
+            setLoadingQuery(false);
+        }
+    }, [iModelConnection]);
+    switch (groupsView) {
+        case GroupsView.ADD:
+            return (react_1.default.createElement(GroupAction_1.default, { iModelId: iModelId, mappingId: (_c = mapping.id) !== null && _c !== void 0 ? _c : "", goBack: async () => {
+                    viewerUtils_1.clearEmphasizedElements();
+                    setGroupsView(GroupsView.GROUPS);
+                    await refresh();
+                } }));
+        case GroupsView.MODIFYING:
+            return selectedGroup ? (react_1.default.createElement(GroupAction_1.default, { iModelId: iModelId, mappingId: (_d = mapping.id) !== null && _d !== void 0 ? _d : "", group: selectedGroup, goBack: async () => {
+                    viewerUtils_1.clearEmphasizedElements();
+                    setGroupsView(GroupsView.GROUPS);
+                    await refresh();
+                } })) : null;
+        case GroupsView.PROPERTIES:
+            return selectedGroup ? (react_1.default.createElement(PropertyMenu_1.PropertyMenu, { iModelId: iModelId, mappingId: (_e = mapping.id) !== null && _e !== void 0 ? _e : "", group: selectedGroup, goBack: async () => {
+                    viewerUtils_1.clearEmphasizedElements();
+                    setGroupsView(GroupsView.GROUPS);
+                    await refresh();
+                } })) : null;
+        default:
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(utils_1.WidgetHeader, { title: (_f = mapping.mappingName) !== null && _f !== void 0 ? _f : "", disabled: isLoading || isLoadingQuery, returnFn: async () => {
+                        viewerUtils_1.clearEmphasizedElements();
+                        await goBack();
+                    } }),
+                react_1.default.createElement("div", { className: 'groups-container' },
+                    react_1.default.createElement(itwinui_react_1.Button, { startIcon: isLoadingQuery ? react_1.default.createElement(itwinui_react_1.ProgressRadial, { size: "small", indeterminate: true }) : react_1.default.createElement(itwinui_icons_react_1.SvgAdd, null), styleType: 'high-visibility', disabled: isLoadingQuery, onClick: () => addGroup() }, isLoadingQuery ? "Loading Group(s)" : "Add Group"),
+                    react_1.default.createElement(itwinui_react_1.Table, { data: groups, density: 'extra-condensed', columns: groupsColumns, emptyTableContent: 'No Groups available.', isSortable: true, isSelectable: true, onSelect: onSelect, isLoading: isLoading, isRowDisabled: () => isLoadingQuery })),
+                react_1.default.createElement(DeleteModal_1.default, { entityName: (_g = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.groupName) !== null && _g !== void 0 ? _g : "", show: showDeleteModal, setShow: setShowDeleteModal, onDelete: async () => {
+                        var _a, _b;
+                        await reportingClient_1.reportingClientApi.deleteGroup(iModelId, (_a = mapping.id) !== null && _a !== void 0 ? _a : "", (_b = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.id) !== null && _b !== void 0 ? _b : "");
+                    }, refresh: refresh })));
+    }
+};
+exports.Groupings = Groupings;
+//# sourceMappingURL=Grouping.js.map

package/lib/cjs/widget/components/Grouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grouping.js","sourceRoot":"","sources":["../../../../src/widget/components/Grouping.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { CellProps } from \"react-table\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { GroupReportingAPI, MappingReportingAPI } from \"../../api/generated/api\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport {\n  Button,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n  ProgressRadial,\n  Table,\n} from \"@itwin/itwinui-react\";\nimport {\n  SvgAdd,\n  SvgDelete,\n  SvgEdit,\n  SvgList,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport DeleteModal from \"./DeleteModal\";\nimport \"./Grouping.scss\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport { PropertyMenu } from \"./PropertyMenu\";\nimport {\n  clearEmphasizedElements,\n  visualizeElements,\n  visualizeElementsById,\n  zoomToElements,\n} from \"./viewerUtils\";\nimport { fetchIdsFromQuery, WidgetHeader } from \"./utils\";\nimport GroupAction from \"./GroupAction\";\n\nexport type Group = CreateTypeFromInterface<GroupReportingAPI>;\n\nenum GroupsView {\n  GROUPS = \"groups\",\n  MODIFYING = \"modifying\",\n  ADD = \"ADD\",\n  PROPERTIES = \"properties\",\n}\n\ninterface GroupsTreeProps {\n  mapping: MappingReportingAPI;\n  goBack: () => Promise<void>;\n}\n\nconst fetchGroups = async (\n  setGroups: React.Dispatch<React.SetStateAction<Group[]>>,\n  iModelId: string,\n  mappingId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  try {\n    setIsLoading(true);\n    const groups = await reportingClientApi.getGroups(iModelId, mappingId);\n    setGroups(groups.groups ?? []);\n  } catch {\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nconst useFetchGroups = (\n  iModelId: string,\n  mappingId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n): [Group[], React.Dispatch<React.SetStateAction<Group[]>>] => {\n  const [groups, setGroups] = useState<GroupReportingAPI[]>([]);\n\n  useEffect(() => {\n    void fetchGroups(setGroups, iModelId, mappingId, setIsLoading);\n  }, [iModelId, mappingId, setIsLoading]);\n\n  return [groups, setGroups];\n};\n\nexport const Groupings = ({ mapping, goBack }: GroupsTreeProps) => {\n  const iModelConnection = useActiveIModelConnection() as IModelConnection;\n  const iModelId = useActiveIModelConnection()?.iModelId as string;\n  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [groupsView, setGroupsView] = useState<GroupsView>(GroupsView.GROUPS);\n  const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(\n    undefined,\n  );\n  const [groups, setGroups] = useFetchGroups(\n    iModelId,\n    mapping.id ?? \"\",\n    setIsLoading,\n  );\n  const hilitedElements = useRef<Map<string, string[]>>(new Map());\n  const [isLoadingQuery, setLoadingQuery] = useState<boolean>(false);\n\n  const refresh = useCallback(async () => {\n    setGroupsView(GroupsView.GROUPS);\n    setSelectedGroup(undefined);\n    setGroups([]);\n    await fetchGroups(setGroups, iModelId, mapping.id ?? \"\", setIsLoading);\n  }, [iModelId, mapping.id, setGroups]);\n\n  const addGroup = () => {\n    // TODO Retain selection in view without emphasizes. Goal is to make it so we can distinguish\n    // hilited elements from regular elements without emphasis due to it blocking selection. For now clearing\n    // selection.\n    clearEmphasizedElements();\n    setGroupsView(GroupsView.ADD);\n  };\n\n  const onModify = useCallback((value) => {\n    clearEmphasizedElements();\n    setSelectedGroup(value.row.original);\n    setGroupsView(GroupsView.MODIFYING);\n  }, []);\n\n  const openProperties = useCallback((value) => {\n    clearEmphasizedElements();\n    setSelectedGroup(value.row.original);\n    setGroupsView(GroupsView.PROPERTIES);\n  }, []);\n\n  const groupsColumns = useMemo(\n    () => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"groupName\",\n            Header: \"Group\",\n            accessor: \"groupName\",\n            Cell: (value: CellProps<Group>) => (\n              <>\n                {isLoadingQuery ? (\n                  value.row.original.groupName\n                ) : (\n                  <div\n                    className='iui-anchor'\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      openProperties(value);\n                    }}\n                  >\n                    {value.row.original.groupName}\n                  </div>\n                )}\n              </>\n            ),\n          },\n          {\n            id: \"description\",\n            Header: \"Description\",\n            accessor: \"description\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<Group>) => {\n              return (\n                <div onClick={(e) => e.stopPropagation()}>\n                  <DropdownMenu\n                    disabled={isLoadingQuery}\n                    menuItems={(close: () => void) => [\n                      <MenuItem\n                        key={0}\n                        onClick={() => onModify(value)}\n                        icon={<SvgEdit />}\n                      >\n                        Modify\n                      </MenuItem>,\n                      <MenuItem\n                        key={1}\n                        onClick={() => openProperties(value)}\n                        icon={<SvgList />}\n                      >\n                        Properties\n                      </MenuItem>,\n                      <MenuItem\n                        key={2}\n                        onClick={() => {\n                          setSelectedGroup(value.row.original);\n                          setShowDeleteModal(true);\n                          close();\n                        }}\n                        icon={<SvgDelete />}\n                      >\n                        Remove\n                      </MenuItem>,\n                    ]}\n                  >\n                    <IconButton\n                      disabled={isLoadingQuery}\n                      styleType='borderless'\n                    >\n                      <SvgMore\n                        style={{\n                          width: \"16px\",\n                          height: \"16px\",\n                        }}\n                      />\n                    </IconButton>\n                  </DropdownMenu>\n                </div>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    [isLoadingQuery, onModify, openProperties],\n  );\n\n  // Temp\n  const stringToColor = function (str: string) {\n    let hash = 0;\n    for (let i = 0; i < str.length; i++) {\n      hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    }\n    let colour = \"#\";\n    for (let i = 0; i < 3; i++) {\n      const value = (hash >> (i * 8)) & 0xff;\n      colour += (`00${value.toString(16)}`).substr(-2);\n    }\n    return colour;\n  };\n\n  const onSelect = useCallback(\n    async (selectedData: Group[] | undefined) => {\n      clearEmphasizedElements();\n      if (selectedData && selectedData.length > 0) {\n        setLoadingQuery(true);\n        let allIds: string[] = [];\n        for (const row of selectedData) {\n          const query = row.query ?? \"\";\n          if (hilitedElements.current.has(query)) {\n            const hilitedIds = hilitedElements.current.get(query) ?? [];\n            visualizeElements(hilitedIds, stringToColor(row.id ?? \"\"));\n            allIds = allIds.concat(hilitedIds);\n          } else {\n            const ids: string[] = await fetchIdsFromQuery(\n              row.query ?? \"\",\n              iModelConnection,\n            );\n            const hiliteIds = await visualizeElementsById(\n              ids,\n              stringToColor(row.id ?? \"\"),\n              iModelConnection,\n            );\n            hilitedElements.current.set(row.query ?? \"\", hiliteIds);\n\n            allIds = allIds.concat(ids);\n          }\n        }\n        await zoomToElements(allIds);\n        setLoadingQuery(false);\n      }\n    },\n    [iModelConnection],\n  );\n\n  switch (groupsView) {\n    case GroupsView.ADD:\n      return (\n        <GroupAction\n          iModelId={iModelId}\n          mappingId={mapping.id ?? \"\"}\n          goBack={async () => {\n            clearEmphasizedElements();\n            setGroupsView(GroupsView.GROUPS);\n            await refresh();\n          }}\n        />\n      );\n    case GroupsView.MODIFYING:\n      return selectedGroup ? (\n        <GroupAction\n          iModelId={iModelId}\n          mappingId={mapping.id ?? \"\"}\n          group={selectedGroup}\n          goBack={async () => {\n            clearEmphasizedElements();\n            setGroupsView(GroupsView.GROUPS);\n            await refresh();\n          }}\n        />\n      ) : null;\n    case GroupsView.PROPERTIES:\n      return selectedGroup ? (\n        <PropertyMenu\n          iModelId={iModelId}\n          mappingId={mapping.id ?? \"\"}\n          group={selectedGroup}\n          goBack={async () => {\n            clearEmphasizedElements();\n            setGroupsView(GroupsView.GROUPS);\n            await refresh();\n          }}\n        />\n      ) : null;\n    default:\n      return (\n        <>\n          <WidgetHeader\n            title={mapping.mappingName ?? \"\"}\n            disabled={isLoading || isLoadingQuery}\n            returnFn={async () => {\n              clearEmphasizedElements();\n              await goBack();\n            }}\n          />\n          <div className='groups-container'>\n            <Button\n              startIcon={\n                isLoadingQuery ? <ProgressRadial size=\"small\" indeterminate /> : <SvgAdd />\n              }\n              styleType='high-visibility'\n              disabled={isLoadingQuery}\n              onClick={() => addGroup()}\n            >\n              {isLoadingQuery ? \"Loading Group(s)\" : \"Add Group\"}\n            </Button>\n            <Table<Group>\n              data={groups}\n              density='extra-condensed'\n              columns={groupsColumns}\n              emptyTableContent='No Groups available.'\n              isSortable\n              isSelectable\n              onSelect={onSelect}\n              isLoading={isLoading}\n              isRowDisabled={() => isLoadingQuery}\n            />\n          </div>\n          <DeleteModal\n            entityName={selectedGroup?.groupName ?? \"\"}\n            show={showDeleteModal}\n            setShow={setShowDeleteModal}\n            onDelete={async () => {\n              await reportingClientApi.deleteGroup(\n                iModelId,\n                mapping.id ?? \"\",\n                selectedGroup?.id ?? \"\",\n              );\n            }}\n            refresh={refresh}\n          />\n        </>\n      );\n  }\n};\n"]}

package/lib/cjs/widget/components/Grouping.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import '~@itwin/itwinui-css/scss/variables';
+
+.groups-container {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+
+  button {
+    align-self: flex-start;
+  }
+}

package/lib/cjs/widget/components/GroupingMapping.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./GroupingMapping.scss";
+declare const GroupingMapping: () => JSX.Element;
+export default GroupingMapping;
+//# sourceMappingURL=GroupingMapping.d.ts.map

package/lib/cjs/widget/components/GroupingMapping.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const Mapping_1 = require("./Mapping");
+require("./GroupingMapping.scss");
+const GroupingMapping = () => {
+    return (React.createElement("div", { className: 'group-mapping-container' },
+        React.createElement(Mapping_1.Mappings, null)));
+};
+exports.default = GroupingMapping;
+//# sourceMappingURL=GroupingMapping.js.map

package/lib/cjs/widget/components/GroupingMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMapping.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMapping.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,uCAAqC;AACrC,kCAAgC;AAEhC,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,oBAAC,kBAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { Mappings } from \"./Mapping\";\nimport \"./GroupingMapping.scss\";\n\nconst GroupingMapping = () => {\n  return (\n    <div className='group-mapping-container'>\n      <Mappings />\n    </div>\n  );\n};\n\nexport default GroupingMapping;\n"]}

package/lib/cjs/widget/components/GroupingMapping.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import '~@itwin/itwinui-css/scss/variables';
+
+// Widgets by default don't get horizontal scrollbars...
+/* stylelint-disable-next-line selector-class-pattern */
+.nz-widget-contentRenderer {
+  width: 100%;
+}
+
+.group-mapping-container {
+  display: flex;
+  flex-direction: column;
+  padding: $iui-baseline $iui-m;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+}
+
+.field-legend {
+  color: $iui-color-system-gray;
+}

package/lib/cjs/widget/components/Mapping.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MappingReportingAPI } from "../../api/generated/api";
+import type { CreateTypeFromInterface } from "../utils";
+import "./Mapping.scss";
+export declare type Mapping = CreateTypeFromInterface<MappingReportingAPI>;
+export declare const Mappings: () => JSX.Element;
+//# sourceMappingURL=Mapping.d.ts.map

package/lib/cjs/widget/components/Mapping.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mappings = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const presentation_frontend_1 = require("@itwin/presentation-frontend");
+const appui_react_1 = require("@itwin/appui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
+require("./Mapping.scss");
+const reportingClient_1 = require("../../api/reportingClient");
+const DeleteModal_1 = __importDefault(require("./DeleteModal"));
+const Grouping_1 = require("./Grouping");
+const MappingAction_1 = __importDefault(require("./MappingAction"));
+const MappingImportWizardModal_1 = require("./MappingImportWizardModal");
+var MappingView;
+(function (MappingView) {
+    MappingView["MAPPINGS"] = "mappings";
+    MappingView["GROUPS"] = "groups";
+    MappingView["ADDING"] = "adding";
+    MappingView["MODIFYING"] = "modifying";
+    MappingView["IMPORT"] = "import";
+})(MappingView || (MappingView = {}));
+const fetchMappings = async (setMappings, iModelId, setIsLoading) => {
+    try {
+        setIsLoading(true);
+        const mappings = await reportingClient_1.reportingClientApi.getMappings(iModelId);
+        setMappings(mappings);
+    }
+    catch {
+    }
+    finally {
+        setIsLoading(false);
+    }
+};
+const useFetchMappings = (iModelId, setIsLoading) => {
+    const [mappings, setMappings] = react_1.useState([]);
+    react_1.useEffect(() => {
+        void fetchMappings(setMappings, iModelId, setIsLoading);
+    }, [iModelId, setIsLoading]);
+    return [mappings, setMappings];
+};
+const Mappings = () => {
+    var _a, _b;
+    const iModelId = (_a = appui_react_1.useActiveIModelConnection()) === null || _a === void 0 ? void 0 : _a.iModelId;
+    const [showDeleteModal, setShowDeleteModal] = react_1.useState(false);
+    const [showImportModal, setShowImportModal] = react_1.useState(false);
+    const [mappingView, setMappingView] = react_1.useState(MappingView.MAPPINGS);
+    const [selectedMapping, setSelectedMapping] = react_1.useState(undefined);
+    const [isLoading, setIsLoading] = react_1.useState(true);
+    const [mappings, setMappings] = useFetchMappings(iModelId, setIsLoading);
+    react_1.useEffect(() => {
+        const removeListener = presentation_frontend_1.Presentation.selection.selectionChange.addListener(utils_1.onSelectionChanged);
+        return () => {
+            removeListener();
+        };
+    }, []);
+    const refresh = react_1.useCallback(async () => {
+        setMappingView(MappingView.MAPPINGS);
+        setSelectedMapping(undefined);
+        setMappings([]);
+        await fetchMappings(setMappings, iModelId, setIsLoading);
+    }, [iModelId, setMappings]);
+    const addMapping = async () => {
+        setMappingView(MappingView.ADDING);
+    };
+    const mappingsColumns = react_1.useMemo(() => [
+        {
+            Header: "Table",
+            columns: [
+                {
+                    id: "mappingName",
+                    Header: "Mapping Name",
+                    accessor: "mappingName",
+                    Cell: (value) => (react_1.default.createElement("div", { className: "iui-anchor", onClick: () => {
+                            setSelectedMapping(value.row.original);
+                            setMappingView(MappingView.GROUPS);
+                        } }, value.row.original.mappingName)),
+                },
+                {
+                    id: "description",
+                    Header: "Description",
+                    accessor: "description",
+                },
+                {
+                    id: "dropdown",
+                    Header: "",
+                    width: 80,
+                    Cell: (value) => {
+                        return (react_1.default.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => [
+                                react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, onClick: () => {
+                                        setSelectedMapping(value.row.original);
+                                        setMappingView(MappingView.MODIFYING);
+                                    }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null) }, "Modify"),
+                                react_1.default.createElement(itwinui_react_1.MenuItem, { key: 1, onClick: () => {
+                                        setSelectedMapping(value.row.original);
+                                        setShowDeleteModal(true);
+                                        close();
+                                    }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null) }, "Remove"),
+                            ] },
+                            react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless" },
+                                react_1.default.createElement(itwinui_icons_react_1.SvgMore, { style: {
+                                        width: "16px",
+                                        height: "16px",
+                                    } }))));
+                    },
+                },
+            ],
+        },
+    ], []);
+    switch (mappingView) {
+        case MappingView.ADDING:
+            return react_1.default.createElement(MappingAction_1.default, { iModelId: iModelId, returnFn: refresh });
+        case MappingView.MODIFYING:
+            return (react_1.default.createElement(MappingAction_1.default, { iModelId: iModelId, mapping: selectedMapping, returnFn: refresh }));
+        case MappingView.GROUPS:
+            return (react_1.default.createElement(Grouping_1.Groupings, { mapping: selectedMapping, goBack: refresh }));
+        default:
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(utils_1.WidgetHeader, { title: "Mappings" }),
+                react_1.default.createElement("div", { className: "mappings-container" },
+                    react_1.default.createElement("div", { className: "table-toolbar" },
+                        react_1.default.createElement(itwinui_react_1.Button, { startIcon: react_1.default.createElement(itwinui_icons_react_1.SvgAdd, null), onClick: async () => addMapping(), styleType: "high-visibility" }, "New"),
+                        react_1.default.createElement(itwinui_react_1.ButtonGroup, { onClick: () => setShowImportModal(true) },
+                            react_1.default.createElement(itwinui_react_1.IconButton, { title: "Import Mappings" },
+                                react_1.default.createElement(itwinui_icons_react_1.SvgImport, null)))),
+                    react_1.default.createElement(itwinui_react_1.Table, { data: mappings, density: "extra-condensed", columns: mappingsColumns, emptyTableContent: "No Mappings available.", isSortable: true, isLoading: isLoading })),
+                react_1.default.createElement(DeleteModal_1.default, { entityName: (_b = selectedMapping === null || selectedMapping === void 0 ? void 0 : selectedMapping.mappingName) !== null && _b !== void 0 ? _b : "", show: showDeleteModal, setShow: setShowDeleteModal, onDelete: async () => {
+                        var _a;
+                        await reportingClient_1.reportingClientApi.deleteMapping(iModelId, (_a = selectedMapping === null || selectedMapping === void 0 ? void 0 : selectedMapping.id) !== null && _a !== void 0 ? _a : "");
+                    }, refresh: refresh }),
+                react_1.default.createElement(MappingImportWizardModal_1.MappingImportWizardModal, { show: showImportModal, setShow: setShowImportModal, onFinish: refresh })));
+    }
+};
+exports.Mappings = Mappings;
+//# sourceMappingURL=Mapping.js.map

package/lib/cjs/widget/components/Mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mapping.js","sourceRoot":"","sources":["../../../../src/widget/components/Mapping.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport {\n  SvgAdd,\n  SvgDelete,\n  SvgEdit,\n  SvgImport,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  Button,\n  ButtonGroup,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n  Table,\n} from \"@itwin/itwinui-react\";\nimport type { CellProps } from \"react-table\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { MappingReportingAPI } from \"../../api/generated/api\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport { onSelectionChanged, WidgetHeader } from \"./utils\";\nimport \"./Mapping.scss\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport DeleteModal from \"./DeleteModal\";\nimport { Groupings } from \"./Grouping\";\nimport MappingAction from \"./MappingAction\";\nimport { MappingImportWizardModal } from \"./MappingImportWizardModal\";\n\nexport type Mapping = CreateTypeFromInterface<MappingReportingAPI>;\n\nenum MappingView {\n  MAPPINGS = \"mappings\",\n  GROUPS = \"groups\",\n  ADDING = \"adding\",\n  MODIFYING = \"modifying\",\n  IMPORT = \"import\",\n}\n\nconst fetchMappings = async (\n  setMappings: React.Dispatch<React.SetStateAction<MappingReportingAPI[]>>,\n  iModelId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>\n) => {\n  try {\n    setIsLoading(true);\n    const mappings = await reportingClientApi.getMappings(iModelId);\n    setMappings(mappings);\n  } catch {\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nconst useFetchMappings = (\n  iModelId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>\n): [\n  MappingReportingAPI[],\n  React.Dispatch<React.SetStateAction<MappingReportingAPI[]>>\n] => {\n  const [mappings, setMappings] = useState<MappingReportingAPI[]>([]);\n  useEffect(() => {\n    void fetchMappings(setMappings, iModelId, setIsLoading);\n  }, [iModelId, setIsLoading]);\n\n  return [mappings, setMappings];\n};\n\nexport const Mappings = () => {\n  const iModelId = useActiveIModelConnection()?.iModelId as string;\n  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);\n  const [showImportModal, setShowImportModal] = useState<boolean>(false);\n  const [mappingView, setMappingView] = useState<MappingView>(\n    MappingView.MAPPINGS\n  );\n  const [selectedMapping, setSelectedMapping] = useState<\n  MappingReportingAPI | undefined\n  >(undefined);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [mappings, setMappings] = useFetchMappings(iModelId, setIsLoading);\n\n  useEffect(() => {\n    const removeListener =\n      Presentation.selection.selectionChange.addListener(onSelectionChanged);\n    return () => {\n      removeListener();\n    };\n  }, []);\n\n  const refresh = useCallback(async () => {\n    setMappingView(MappingView.MAPPINGS);\n    setSelectedMapping(undefined);\n    setMappings([]);\n    await fetchMappings(setMappings, iModelId, setIsLoading);\n  }, [iModelId, setMappings]);\n\n  const addMapping = async () => {\n    setMappingView(MappingView.ADDING);\n  };\n\n  const mappingsColumns = useMemo(\n    () => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"mappingName\",\n            Header: \"Mapping Name\",\n            accessor: \"mappingName\",\n            Cell: (value: CellProps<{ mappingName: string }>) => (\n              <div\n                className=\"iui-anchor\"\n                onClick={() => {\n                  setSelectedMapping(value.row.original);\n                  setMappingView(MappingView.GROUPS);\n                }}\n              >\n                {value.row.original.mappingName}\n              </div>\n            ),\n          },\n          {\n            id: \"description\",\n            Header: \"Description\",\n            accessor: \"description\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<Mapping>) => {\n              return (\n                <DropdownMenu\n                  menuItems={(close: () => void) => [\n                    <MenuItem\n                      key={0}\n                      onClick={() => {\n                        setSelectedMapping(value.row.original);\n                        setMappingView(MappingView.MODIFYING);\n                      }}\n                      icon={<SvgEdit />}\n                    >\n                      Modify\n                    </MenuItem>,\n\n                    <MenuItem\n                      key={1}\n                      onClick={() => {\n                        setSelectedMapping(value.row.original);\n                        setShowDeleteModal(true);\n                        close();\n                      }}\n                      icon={<SvgDelete />}\n                    >\n                      Remove\n                    </MenuItem>,\n                  ]}\n                >\n                  <IconButton styleType=\"borderless\">\n                    <SvgMore\n                      style={{\n                        width: \"16px\",\n                        height: \"16px\",\n                      }}\n                    />\n                  </IconButton>\n                </DropdownMenu>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    []\n  );\n\n  switch (mappingView) {\n    case MappingView.ADDING:\n      return <MappingAction iModelId={iModelId} returnFn={refresh} />;\n    case MappingView.MODIFYING:\n      return (\n        <MappingAction\n          iModelId={iModelId}\n          mapping={selectedMapping}\n          returnFn={refresh}\n        />\n      );\n    case MappingView.GROUPS:\n      return (\n        <Groupings\n          mapping={selectedMapping as MappingReportingAPI}\n          goBack={refresh}\n        />\n      );\n    default:\n      return (\n        <>\n          <WidgetHeader title=\"Mappings\" />\n          <div className=\"mappings-container\">\n            <div className=\"table-toolbar\">\n              <Button\n                startIcon={<SvgAdd />}\n                onClick={async () => addMapping()}\n                styleType=\"high-visibility\"\n              >\n                New\n              </Button>\n              <ButtonGroup onClick={() => setShowImportModal(true)}>\n                <IconButton title=\"Import Mappings\">\n                  <SvgImport />\n                </IconButton>\n              </ButtonGroup>\n            </div>\n            <Table<Mapping>\n              data={mappings}\n              density=\"extra-condensed\"\n              columns={mappingsColumns}\n              emptyTableContent=\"No Mappings available.\"\n              isSortable\n              isLoading={isLoading}\n            />\n          </div>\n          <DeleteModal\n            entityName={selectedMapping?.mappingName ?? \"\"}\n            show={showDeleteModal}\n            setShow={setShowDeleteModal}\n            onDelete={async () => {\n              await reportingClientApi.deleteMapping(\n                iModelId,\n                selectedMapping?.id ?? \"\"\n              );\n            }}\n            refresh={refresh}\n          />\n          <MappingImportWizardModal\n            show={showImportModal}\n            setShow={setShowImportModal}\n            onFinish={refresh}\n          />\n        </>\n      );\n  }\n};\n"]}

package/lib/cjs/widget/components/Mapping.scss

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import '~@itwin/itwinui-css/scss/variables';
+
+.mappings-container {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+
+  .table-toolbar {
+    display: flex;
+    gap: $iui-s;
+  }
+
+  button {
+    align-self: flex-start;
+  }
+}
+
+.action-panel {
+  display: flex;
+  justify-content: right;
+  column-gap: $iui-s;
+}

package/lib/cjs/widget/components/MappingAction.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { MappingReportingAPI } from "../../api/generated/api";
+import "./MappingAction.scss";
+interface MappingActionProps {
+    iModelId: string;
+    mapping?: MappingReportingAPI;
+    returnFn: () => Promise<void>;
+}
+declare const MappingAction: ({ iModelId, mapping, returnFn }: MappingActionProps) => JSX.Element;
+export default MappingAction;
+//# sourceMappingURL=MappingAction.d.ts.map