procode-vs-template 1.0.0

package/src/Widgets/GridToolBar/Components/Export/ExportPopup.tsx

@@ -0,0 +1,388 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from "react";
+import { ExportType } from "./type";
+import { DropDownList } from "@progress/kendo-react-dropdowns";
+import { Button } from "@progress/kendo-react-buttons";
+import {
+  downloadIcon,
+  fileErrorIcon,
+  arrowRightIcon,
+  trashIcon,
+} from "@progress/kendo-svg-icons";
+import { getUniqueId } from "../../helper/getUniqueId";
+import _ from "lodash";
+import FactoryRenderer from "../../../../Renderer";
+
+interface ExportPopupProps {
+  setTogglePopup: React.Dispatch<React.SetStateAction<boolean>>;
+  onExport: (callBack: () => void, type: ExportViewModel[]) => void;
+  onExportDelete: (callBack: ((args: any) => void) | null, id: string) => void;
+  onExportList: (callBack: ((args: any) => void) | null) => void;
+  onExportDownload: (
+    callBack: ((args: any) => void) | null,
+    id: string
+  ) => void;
+}
+
+export type ExportViewModel = {
+  id?: string;
+  exportType?: ExportType | null;
+  exportDataScope?: string | null;
+  validation: { exportType: string; exportDataScope: string };
+};
+
+enum Status {
+  IN_PROGRESS = "InProcess",
+  COMPLETED = "Success",
+  FAILED = "Error",
+  SCHEDULED = "Scheduled",
+}
+
+type ExportHistoryViewModel = {
+  id: string;
+  fileName: string;
+  exportType: ExportType;
+  exportDataScope: string;
+  date: string;
+  status: string;
+  src: string;
+  referenceId: string;
+};
+
+/* const sampleData = [
+  {
+    id: "1",
+    fileName: "Export1",
+    date: "2023-10-01",
+    status: Status.COMPLETED,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "2",
+    fileName: "Export2",
+    date: "2023-10-02",
+    status: Status.IN_PROGRESS,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "3",
+    fileName: "Export3",
+    date: "2023-10-03",
+    status: Status.FAILED,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "1",
+    fileName: "Export1",
+    date: "2023-10-01",
+    status: Status.COMPLETED,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "2",
+    fileName: "Export2",
+    date: "2023-10-02",
+    status: Status.IN_PROGRESS,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "3",
+    fileName: "Export3",
+    date: "2023-10-03",
+    status: Status.FAILED,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "1",
+    fileName: "Export1",
+    date: "2023-10-01",
+    status: Status.COMPLETED,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "2",
+    fileName: "Export2",
+    date: "2023-10-02",
+    status: Status.IN_PROGRESS,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+  {
+    id: "3",
+    fileName: "Export3",
+    date: "2023-10-03",
+    status: Status.FAILED,
+    exportType: ExportType.XLS,
+    exportDataScope: "Header List",
+    src: "",
+  },
+]; */
+
+const defaultExport: ExportViewModel = {
+  id: undefined,
+  exportType: undefined,
+  exportDataScope: undefined,
+  validation: { exportType: "", exportDataScope: "" },
+};
+
+const ExportPopup = (props: ExportPopupProps) => {
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  const [tempExport, setTempExport] = useState<ExportViewModel>(
+    _.cloneDeep(defaultExport)
+  );
+
+  const [exportViewModels, setExportViewModels] = useState<ExportViewModel[]>(
+    []
+  );
+  const [exporHistoryList, setExporHistoryList] = useState<
+    ExportHistoryViewModel[]
+  >([]);
+
+  useEffect(() => {
+    props.onExportList((list: ExportHistoryViewModel[]) => {
+      setExporHistoryList(list);
+    });
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const isInsideMyPopup = target.closest(
+        `.tmpl-prvent-outside-click-close`
+      );
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node) &&
+        !isInsideMyPopup
+      ) {
+        popupRef.current.classList.add("tmpl-popup-animation-reverse");
+        setTimeout(() => {
+          props.setTogglePopup ? props.setTogglePopup(false) : null;
+        }, 200);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const onAddExport = () => {
+    if (!tempExport?.exportType) {
+      tempExport.validation.exportType = "required";
+      setTempExport({ ...tempExport });
+      return;
+    }
+    if (!tempExport?.exportDataScope) {
+      tempExport.validation.exportDataScope = "required";
+      setTempExport({ ...tempExport });
+      return;
+    }
+
+    const currents = { ...tempExport, id: getUniqueId() };
+    setExportViewModels([...exportViewModels, _.cloneDeep(currents)]);
+    setTempExport(_.cloneDeep(defaultExport));
+  };
+
+  const onRemoveExport = (id: string) => {
+    setExportViewModels(exportViewModels.filter((item) => item.id !== id));
+  };
+
+  const downloadResultHandler = (response: any, fileName: string) => {
+    const blob = new Blob([response]);
+    const downloadUrl = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = downloadUrl;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    window.URL.revokeObjectURL(downloadUrl);
+    document.body.removeChild(link);
+  };
+
+  const handleDownload = async (fileUrl: string, fileName: string) => {
+    try {
+      props.onExportDownload(
+        (res) => downloadResultHandler(res, fileName),
+        fileUrl
+      );
+    } catch (error) {
+      console.error("Download failed:", error);
+    }
+  };
+
+  return (
+    <div className="tmpl-export-popup" ref={popupRef}>
+      <div className="tmpl-export-popup-header">
+        <div style={{ width: "150px" }}>
+          <DropDownList
+            style={{ width: "100%" }}
+            data={Object.values(ExportType)}
+            defaultItem={"Select..."}
+            value={tempExport?.exportType ?? null}
+            popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+            onChange={(e) => {
+              setTempExport((prev) => ({
+                ...prev,
+                exportType: e.target.value,
+                validation: { ...prev.validation, exportType: "" },
+              }));
+            }}
+          />
+          <label className="qo-validation qo-font-xxs" htmlFor="">
+            {tempExport.validation.exportType}
+          </label>
+        </div>
+        <div style={{ width: "120px" }}>
+          <DropDownList
+            data={["Header List", "Line Items"]}
+            defaultItem={"Select..."}
+            value={tempExport?.exportDataScope ?? null}
+            popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+            onChange={(e) => {
+              setTempExport((prev) => ({
+                ...prev,
+                exportDataScope: e.target.value,
+                validation: { ...prev.validation, exportDataScope: "" },
+              }));
+            }}
+          />
+          <label className="qo-validation qo-font-xxs" htmlFor="">
+            {tempExport.validation.exportDataScope}
+          </label>
+        </div>
+
+        <FactoryRenderer
+          widgetStyle={{
+            className: "tmpl-button-sm",
+          }}
+          name="plus"
+          fillMode="clear"
+          onClick={onAddExport}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          title="Add"
+        />
+      </div>
+      <div className="tmpl-export-item-container">
+        {exportViewModels.map((exportViewModel, index) => {
+          return (
+            <div className="tmpl-export-item" key={exportViewModel.id}>
+              <div>
+                <span>{index + 1}.</span>
+                <span>{exportViewModel.exportType}</span>{" "}
+                <Button
+                  svgIcon={arrowRightIcon}
+                  type="button"
+                  fillMode={"clear"}
+                />
+                <span>{exportViewModel.exportDataScope}</span>
+              </div>
+
+              <Button
+                svgIcon={trashIcon}
+                type="button"
+                fillMode={"clear"}
+                onClick={() => onRemoveExport(exportViewModel.id ?? "")}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <div className="tmpl-export-divider">
+        <Button
+          disabled={!exportViewModels.length}
+          className="qo-btn qo-btn-xs qo-btn-primary"
+          onClick={() => {
+            props.onExport(() => {
+              props.onExportList((list: ExportHistoryViewModel[]) => {
+                setExporHistoryList(list);
+              });
+            }, exportViewModels);
+          }}
+        >
+          Export All
+        </Button>
+      </div>
+      <h4>Previous Exports</h4>
+      <div className="tmpl-export-history-items-container">
+        {exporHistoryList.map((exportHistoryViewModel) => {
+          return (
+            <div
+              className="tmpl-export-history-item"
+              key={exportHistoryViewModel.id}
+            >
+              <div className="tmpl-export-history-item-info">
+                <p>{exportHistoryViewModel.fileName}</p>
+                <p>{exportHistoryViewModel.date}</p>
+              </div>
+              <div className="tmpl-export-history-item-action">
+                {exportHistoryViewModel.status === Status.COMPLETED ? (
+                  <Button
+                    svgIcon={downloadIcon}
+                    type="button"
+                    fillMode={"clear"}
+                    onClick={() =>
+                      handleDownload(
+                        exportHistoryViewModel.referenceId,
+                        exportHistoryViewModel.fileName
+                      )
+                    }
+                  />
+                ) : exportHistoryViewModel.status === Status.FAILED ? (
+                  <Button
+                    svgIcon={fileErrorIcon}
+                    type="button"
+                    fillMode={"clear"}
+                  />
+                ) : (
+                  <FactoryRenderer
+                    name="load"
+                    uiElementType="WIDGET"
+                    widgetType="ICON"
+                    fillMode="clear"
+                    title=""
+                  />
+                  /*  <span className={exportHistoryViewModel.status}>
+                    {exportHistoryViewModel.status}
+                  </span> */
+                )}
+                <Button
+                  svgIcon={trashIcon}
+                  type="button"
+                  fillMode={"clear"}
+                  onClick={() =>
+                    props.onExportDelete(() => {
+                      props.onExportList((list: ExportHistoryViewModel[]) => {
+                        setExporHistoryList(list);
+                      });
+                    }, exportHistoryViewModel.id)
+                  }
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export default ExportPopup;

package/src/Widgets/GridToolBar/Components/Export/ExportView.tsx

@@ -0,0 +1,21 @@
+import FactoryRenderer from "../../../../Renderer";
+
+export type ExportViewProps = {
+  disabled: boolean;
+  onClick: () => void;
+};
+const ExportView = (props: ExportViewProps) => {
+  return (
+    <FactoryRenderer
+      onClick={props.onClick}
+      title="Export"
+      rootStyle={{ className: "tmpl-export" }}
+      widgetStyle={{ className: "tmpl-button", inline: { width: "100%" } }}
+      uiElementType="WIDGET"
+      widgetType="ICON"
+      name="download"
+      disabled={props.disabled}
+    />
+  );
+};
+export default ExportView;

package/src/Widgets/GridToolBar/Components/Export/type.ts

@@ -0,0 +1,4 @@
+export enum ExportType {
+  XLS = "XLS",
+  CSV = "CSV",
+}

package/src/Widgets/GridToolBar/Components/GlobalSearch/GlobalSearch.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from "react";
+import GlobalSearchView from "./GlobalSearchView";
+
+export type GlobalSearchProps = {
+  uiElementGroupData: Record<string, any>;
+  visible: boolean;
+  disabled: boolean;
+  config: { uiElementGroupId: string };
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+};
+
+const GlobalSearch = (props: GlobalSearchProps) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  useEffect(() => {
+    if (props.uiElementGroupData?.globalSearch?.filterQuery !== searchValue) {
+      setSearchValue(props.uiElementGroupData?.globalSearch?.filterQuery);
+    }
+    setSearchValue(props.uiElementGroupData?.globalSearch?.filterQuery);
+  }, [props.uiElementGroupData?.globalSearch?.filterQuery]);
+
+  const onSearch = () => {
+    if (props.uiElementGroupData.globalSearch.filterQuery) {
+      const updatedUiElementGroupData = {
+        ...props.uiElementGroupData,
+        globalSearch: {
+          ...props.uiElementGroupData.globalSearch,
+          appliedQuery: props.uiElementGroupData.globalSearch.filterQuery,
+        },
+        pagination: { ...props.uiElementGroupData.pagination, skip: 0 },
+      };
+
+      props.onModelUpdate(
+        null,
+        props.config.uiElementGroupId,
+        updatedUiElementGroupData
+      );
+    }
+  };
+
+  const onClearSearch = () => {
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      globalSearch: {
+        ...props.uiElementGroupData.globalSearch,
+        filterQuery: "",
+        appliedQuery: "",
+      },
+      pagination: { ...props.uiElementGroupData.pagination, skip: 0 },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onSearchChange = (searchKey: string | undefined) => {
+    if (props.uiElementGroupData.globalSearch.filterQuery && !searchKey) {
+      onClearSearch();
+    } else if (searchKey) {
+      const updatedColumnChooser = {
+        ...props.uiElementGroupData,
+        globalSearch: {
+          ...props.uiElementGroupData.globalSearch,
+          filterQuery: searchKey,
+        },
+      };
+
+      props.onModelUpdate(
+        null,
+        props.config.uiElementGroupId,
+        updatedColumnChooser
+      );
+    }
+  };
+
+  return props.visible ? (
+    <GlobalSearchView
+      disabled={props.disabled}
+      value={searchValue}
+      onSearchChange={onSearchChange}
+      onClearSearch={onClearSearch}
+      onSearch={onSearch}
+    />
+  ) : (
+    <></>
+  );
+};
+export default GlobalSearch;

package/src/Widgets/GridToolBar/Components/GlobalSearch/GlobalSearchView.tsx

@@ -0,0 +1,65 @@
+import {
+  InputClearValue,
+  InputSeparator,
+  TextBox,
+} from "@progress/kendo-react-inputs";
+import FactoryRenderer from "../../../../Renderer";
+export type GlobalSearchViewProps = {
+  disabled: boolean;
+  value: string | undefined;
+  onSearchChange: (searchKey: string | undefined) => void;
+  onClearSearch: () => void;
+  onSearch: () => void;
+};
+
+const GlobalSearchView = (props: GlobalSearchViewProps) => {
+  return (
+    <TextBox
+      disabled={props.disabled}
+      value={props.value}
+      className="tmpl-global-search tmpl-input"
+      placeholder="Type here to search . . ."
+      onKeyUp={(e) => {
+        if (e.key === "Enter" || e.code === "Enter") {
+          props.onSearch();
+        }
+      }}
+      onChange={(e) => {
+        props.onSearchChange(e.target.value as string);
+      }}
+      suffix={() =>
+        props.value ? (
+          <>
+            <InputSeparator />
+            <InputClearValue onClick={props.onClearSearch}>
+              <FactoryRenderer
+                name="close"
+                uiElementType="WIDGET"
+                widgetType="ICON"
+                fillMode="clear"
+                title=""
+              />
+            </InputClearValue>
+          </>
+        ) : (
+          <></>
+        )
+      }
+      prefix={() => (
+        <>
+          <InputClearValue onClick={props.onSearch}>
+            <FactoryRenderer
+              name="search"
+              uiElementType="WIDGET"
+              widgetType="ICON"
+              fillMode="clear"
+              title=""
+            />
+          </InputClearValue>
+          <InputSeparator />
+        </>
+      )}
+    />
+  );
+};
+export default GlobalSearchView;

package/src/Widgets/GridToolBar/Components/GroupBy/GroupByPopUp.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { cloneElement, useEffect, useState } from "react";
+import { MultiSelect } from "@progress/kendo-react-dropdowns";
+import _ from "lodash";
+import FactoryRenderer from "../../../../Renderer";
+
+const ItemRenderMultiSelect = ({ li, itemProps, selectedGroups }: any) => {
+  const itemChildren = (
+    <a className="drLink">
+      <input
+        className="drLink_check"
+        type="checkbox"
+        name={itemProps.dataItem.value}
+        checked={
+          selectedGroups.length > 0
+            ? selectedGroups.some(
+                (x: { label: string; value: string }) =>
+                  x.value === itemProps.dataItem.value
+              )
+            : false
+        }
+      />
+      {li.props.children}
+    </a>
+  );
+  return cloneElement(li, li.props, itemChildren);
+};
+
+interface GroupByPopUpProps {
+  selectedGroups: { label: string; value: string }[];
+  groupableFields: { label: string; value: string }[];
+  onPopupToggle: () => void;
+  onGroupApply: (groupField: { label: string; value: string }[]) => void;
+}
+
+const GroupByPopUp = (props: GroupByPopUpProps) => {
+  const [groupFields, setGroupFields] = useState(props.selectedGroups);
+
+  useEffect(() => {
+    setGroupFields(props.selectedGroups);
+  }, [JSON.stringify(props.selectedGroups)]);
+
+  const onGroupChange = (e: any) => {
+    const grouped = _.groupBy(e.value, "value");
+    const duplicateValues = Object.values(grouped)
+      .filter((group) => group.length > 1)
+      .flat();
+    const groups = e.value.filter(
+      (f: any) => !duplicateValues.some((d) => d.value === f.value)
+    );
+    setGroupFields(groups);
+  };
+
+  return (
+    <div className="tmpl-group-filter-popup">
+      <div className="tmpl-group-filter-popup-header">
+        <div>
+          <h2>Select a new group</h2>
+          <p>
+            This option would allow you to select from existing set of pre-built
+            groups
+          </p>
+        </div>
+        <FactoryRenderer
+          onClick={props.onPopupToggle}
+          widgetStyle={{ className: "tmpl-button" }}
+          name="close"
+          uiElementType="WIDGET"
+          fillMode="clear"
+          widgetType="ICON"
+          title=""
+        />
+      </div>
+      <div className="tmpl-group-filter-popup-body">
+        <div className="tmpl-dropdown-container">
+          <span>Group By</span>
+          <MultiSelect
+            onChange={onGroupChange}
+            textField="label"
+            data={props.groupableFields}
+            itemRender={(li: any, itemProps: any) => (
+              <ItemRenderMultiSelect
+                li={li}
+                itemProps={itemProps}
+                selectedGroups={groupFields}
+              />
+            )}
+            className="tmpl-dropdown"
+            value={groupFields}
+            tags={
+              groupFields.length > 0
+                ? [
+                    {
+                      text: `${groupFields.length} selected`,
+                      data: [...groupFields],
+                    },
+                  ]
+                : []
+            }
+          />
+        </div>
+        <div className="tmpl-group-filter-popup-footer">
+          <FactoryRenderer
+            onClick={() => props.onGroupApply(groupFields)}
+            widgetStyle={{ className: "tmpl-button" }}
+            uiElementType="WIDGET"
+            widgetType="BUTTON"
+            title="Save And Continue"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default GroupByPopUp;