procode-vs-template 1.0.0

package/src/Widgets/GridToolBar/GridToolBar.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect } from "react";
+import GridToolBarView from "./GridToolBarView";
+import { SYSTEM_DEFAULT } from "../../constant";
+import { BaseProps } from "../../Factory/BaseType";
+
+import { ActionProps, ToolbarOptions } from "./type";
+import { saveSystemDefaultInSession } from "./Components/ScreenView/helpers/saveSystemDefaultInSession";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export type GridToolBarProps = BaseProps &
+  ActionProps & {
+    toolBarOptions: ToolbarOptions;
+  };
+
+const GridToolBar: React.FC<GridToolBarProps> = ({
+  config,
+  targetScreenDataField,
+  uiElementGroupData,
+  widgetStyle,
+  toolBarOptions,
+  loadTemplateSupportiveData,
+  onExport,
+  onExportDelete,
+  onExportList,
+  onExportDownload,
+  onModelUpdate,
+  onScreenDataLoad,
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const targetUiElementGroupId = location.state?.targetUiElementGroupId;
+
+  const resultHandler = (response: any) => {
+    onModelUpdate?.(null, targetScreenDataField ?? "", response);
+  };
+
+  const saveInSession = () => {
+    if (
+      uiElementGroupData?.userView?.selectedView?.id === SYSTEM_DEFAULT &&
+      toolBarOptions.userView.enableDefaultSaveInSession
+    ) {
+      saveSystemDefaultInSession(config.uiElementGroupId, uiElementGroupData);
+    }
+  };
+
+  useEffect(() => {
+    onModelUpdate(null, config.uiElementGroupId, {
+      ...uiElementGroupData,
+      setting: {
+        activeDataWidgetType: toolBarOptions.setting.activeDataWidgetType,
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      saveInSession();
+    };
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (
+      location.state?.enableHotReload &&
+      targetUiElementGroupId &&
+      targetUiElementGroupId === config.uiElementGroupId
+    ) {
+      if (targetUiElementGroupId) {
+        const rest = { ...location.state };
+        delete rest.targetUiElementGroupId;
+        delete rest.enableHotReload;
+        navigate(location.pathname, { state: rest, replace: true });
+      }
+      onScreenDataLoad?.(resultHandler);
+    }
+  }, [targetUiElementGroupId]);
+
+  useEffect(() => {
+    if (uiElementGroupData?.enableDataLoading) {
+      onScreenDataLoad?.(resultHandler);
+    }
+  }, [
+    JSON.stringify(uiElementGroupData?.globalSearch?.appliedQuery),
+    JSON.stringify(uiElementGroupData?.advancedSearch?.appliedQuery),
+    JSON.stringify(uiElementGroupData?.quickFilter?.appliedQuery),
+    JSON.stringify(uiElementGroupData?.groupedBy?.appliedGroups),
+    JSON.stringify(uiElementGroupData?.pagination),
+    JSON.stringify(uiElementGroupData?.sort),
+    JSON.stringify(uiElementGroupData?.localSearch),
+    uiElementGroupData?.enableDataLoading,
+  ]);
+
+  return (
+    <GridToolBarView
+      widgetStyle={widgetStyle}
+      toolBarOptions={toolBarOptions}
+      config={config}
+      uiElementGroupData={uiElementGroupData}
+      loadTemplateSupportiveData={loadTemplateSupportiveData}
+      onModelUpdate={onModelUpdate}
+      onExport={onExport}
+      onExportDelete={onExportDelete}
+      onExportList={onExportList}
+      onExportDownload={onExportDownload}
+    />
+  );
+};
+
+export default GridToolBar;

package/src/Widgets/GridToolBar/GridToolBarView.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import AdvancedSearch from "./Components/AdvancedSearch/AdvancedSearch";
+import GlobalSearch from "./Components/GlobalSearch/GlobalSearch";
+import QuickFilter from "./Components/QuickFilter";
+import GroupBy from "./Components/GroupBy";
+import Reset from "./Components/Reset";
+import Setting from "./Components/Setting/Setting";
+import Export from "./Components/Export/Export";
+import UserView from "./Components/ScreenView/UserView";
+import { ToolbarOptions } from "./type";
+import { ExportType } from "./Components/Export/type";
+
+interface GridToolBarViewProps {
+  widgetStyle?: {
+    id?: string;
+    className?: string;
+    inline?: React.CSSProperties;
+  };
+  toolBarOptions: ToolbarOptions;
+  config: { uiElementGroupId: string };
+  uiElementGroupData: Record<string, any>;
+  loadTemplateSupportiveData?: (
+    callBack: (args: any) => void,
+    supportiveKeys: any
+  ) => Promise<any>;
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+  onExport?: (
+    callBack: ((args: any) => void) | null,
+    exportType: ExportType
+  ) => 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;
+}
+
+const GridToolBarView = ({
+  widgetStyle,
+  toolBarOptions,
+  config,
+  uiElementGroupData,
+  loadTemplateSupportiveData,
+  onModelUpdate,
+  onExport,
+  onExportDelete,
+  onExportList,
+  onExportDownload
+}: GridToolBarViewProps) => {
+  return (
+    <div
+      id={widgetStyle?.id || ""}
+      className={`tmpl-grid-toolbar-container ${widgetStyle?.className || ""}`}
+      style={{ ...(widgetStyle?.inline || {}) }}
+    >
+      <GlobalSearch
+        visible={toolBarOptions.globalSearch.visible}
+        disabled={toolBarOptions.globalSearch.disabled}
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+      />
+      <AdvancedSearch
+        visible={toolBarOptions.advancedSearch.visible}
+        disabled={toolBarOptions.advancedSearch.disabled}
+        filterableFields={toolBarOptions.advancedSearch.filterableFields}
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+        loadTemplateSupportiveData={loadTemplateSupportiveData}
+      />
+      <QuickFilter
+        visible={toolBarOptions.quickFilter.visible}
+        disabled={toolBarOptions.quickFilter.disabled}
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+        loadTemplateSupportiveData={loadTemplateSupportiveData}
+      />
+      <GroupBy
+        visible={toolBarOptions.groupBy.visible}
+        disabled={toolBarOptions.groupBy.disabled}
+        groupableFields={toolBarOptions.groupBy.groupableFields}
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+      />
+      <Reset
+        visible={toolBarOptions.reset.visible}
+        disabled={toolBarOptions.reset.disabled}
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+      />
+      <Setting
+        visible={toolBarOptions.setting.visible}
+        disabled={toolBarOptions.setting.disabled}
+        disableColumnChooser={toolBarOptions.setting.disableColumnChooser}
+        columns={toolBarOptions.setting.columns}
+        disabledDisplayWidgetType={
+          toolBarOptions.setting.disabledDisplayWidgetType
+        }
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+      />
+      <UserView
+        visible={toolBarOptions.userView.visible}
+        disabled={toolBarOptions.userView.disabled}
+        enableDefaultSaveInSession={
+          toolBarOptions.userView.enableDefaultSaveInSession
+        }
+        advancedFilterableFields={
+          toolBarOptions.advancedSearch.filterableFields
+        }
+        quickFilterRows={toolBarOptions.quickFilter.filterRows}
+        activeDataWidgetType={toolBarOptions.setting.activeDataWidgetType}
+        columns={toolBarOptions.setting.columns}
+        config={config}
+        uiElementGroupData={uiElementGroupData}
+        onModelUpdate={onModelUpdate}
+      />
+      <Export
+        visible={toolBarOptions.export.visible}
+        disabled={toolBarOptions.export.disabled}
+        config={config}
+        onExport={onExport}
+        onExportDelete={onExportDelete}
+        onExportList={onExportList}
+        onExportDownload={onExportDownload}
+      />
+    </div>
+  );
+};
+
+export default GridToolBarView;

package/src/Widgets/GridToolBar/data/advancedSearch/index.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FilterTargetType, Operator, OperatorCreiteria } from "../../enum";
+import { ValueLoadType } from "../../type";
+
+export type AdvancedSearchData = {
+  appliedQuery: { criteria: string; filters: FilterExpression[] };
+  filterRows: FilterExpressionViewModel[];
+  criteria: string;
+};
+
+export type FilterExpression = {
+  id: string;
+  propertyToFilter: FilterTarget;
+  operator: { label: string; value: Operator | null };
+  value?: FilterValue | FilterValue[];
+  selectedCriteria: OperatorCreiteria;
+};
+
+export type FilterTarget = {
+  label: string;
+  value: any;
+  apiPropertyName: string;
+  dataProvider?: {
+    key?: string;
+    value?: FilterValue | FilterValue[];
+    valueLoadType: ValueLoadType;
+  };
+  type: FilterTargetType;
+};
+
+export type FilterValue =
+  | { label: string; value: any }
+  | string
+  | number
+  | Date
+  | boolean;
+
+export type FilterExpressionViewModel = {
+  id: string;
+  idLabel: string;
+  allPropertieseToFilter: FilterTarget[];
+  alloperators: { label: string; value: Operator | null }[];
+  allValues?: FilterValue[] | FilterValue;
+  selectedFilter: FilterExpression;
+};

package/src/Widgets/GridToolBar/data/globalSearch/index.ts

@@ -0,0 +1,4 @@
+export type GlobalSearchData = {
+  filterQuery: string;
+  appliedQuery: string;
+};

package/src/Widgets/GridToolBar/data/groupBy/index.ts

@@ -0,0 +1,3 @@
+export type GroupedByData = {
+  appliedGroups: { label: string; value: string }[];
+};

package/src/Widgets/GridToolBar/data/index.ts

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import _ from "lodash";
+import { getAdvancedSearchIntitialFilterRow } from "../Components/AdvancedSearch/helper/AdvancedSearchFunctions";
+import { _defaultView } from "../Components/ScreenView/UserView";
+import { DataWidgetType } from "../Components/Setting/Setting";
+import { OperatorCreiteria } from "../enum";
+import { AdvancedSearchData } from "./advancedSearch";
+import { GlobalSearchData } from "./globalSearch";
+import { GroupedByData } from "./groupBy";
+import { QuickFilterData } from "./quickFilter";
+import { SettingData } from "./setting";
+import { UserViewData } from "./userView";
+
+export type ToolbarData = {
+  globalSearch: GlobalSearchData;
+  advancedSearch: AdvancedSearchData;
+  quickFilter: QuickFilterData;
+  groupedBy: GroupedByData;
+  setting: SettingData;
+  reset: number;
+  lazyLoad?: boolean;
+  globalFilters?: { pattern: string; filters: any[] };
+  localSearch?: { id: string; field: string; value: any }[];
+  sort?: { field: string; dir: string }[];
+  defaultSort?: { field: string; dir: string }[];
+  pagination?: { skip: number; take: number };
+  defaultPagination?: { skip: number; take: number };
+  userView: UserViewData;
+  processing?: boolean;
+  enableDataLoading: boolean;
+  defaultGroups?: { field: string; dir: string }[];
+  defaultColumns?: any[];
+};
+
+export const getInitialData = (): ToolbarData => {
+  const defaultAdvancedFilterRow = _.cloneDeep(
+    getAdvancedSearchIntitialFilterRow()
+  );
+  const initialState: ToolbarData = {
+    globalSearch: { filterQuery: "", appliedQuery: "" },
+    advancedSearch: {
+      appliedQuery: { criteria: "", filters: [] },
+      filterRows: [defaultAdvancedFilterRow],
+      criteria: defaultAdvancedFilterRow.idLabel,
+    },
+    quickFilter: {
+      appliedQuery: {
+        criteria: "",
+        filterRows: [],
+        joinCriteria: OperatorCreiteria.AND,
+      },
+      filterRows: [],
+    },
+    groupedBy: {
+      appliedGroups: [],
+    },
+
+    setting: {
+      activeDataWidgetType: DataWidgetType.GRID,
+      columnChooser: {
+        appliedColumns: [],
+        allColumns: [],
+        selectedColumns: [],
+      },
+    },
+    reset: 0,
+    userView: {
+      selectedView: undefined,
+      allViews: [_.cloneDeep(_defaultView)],
+    },
+    enableDataLoading: false,
+  };
+  return initialState;
+};

package/src/Widgets/GridToolBar/data/quickFilter/index.ts

@@ -0,0 +1,37 @@
+import { FilterTargetType, OperatorCreiteria } from "../../enum";
+import { ValueLoadType } from "../../type";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type QuickFilterData = {
+  appliedQuery: {
+    criteria: string;
+    filterRows: FilterExpression[];
+    joinCriteria: OperatorCreiteria;
+  };
+  filterRows: FilterExpression[];
+};
+
+export type FilterExpression = {
+  id: string;
+  propertyToFilter: FilterTarget;
+  allValues?: FilterValue[];
+  value?: FilterValue | FilterValue[];
+};
+
+export type FilterTarget = {
+  label: string;
+  apiPropertyName: string;
+  dataProvider?: {
+    key?: string;
+    value?: FilterValue | FilterValue[];
+    valueLoadType: ValueLoadType;
+  };
+  type: FilterTargetType;
+};
+
+export type FilterValue =
+  | { label: string; value: any }
+  | string
+  | number
+  | Date
+  | boolean;

package/src/Widgets/GridToolBar/data/setting/index.ts

@@ -0,0 +1,23 @@
+import { DataWidgetType } from "../../Components/Setting/Setting";
+
+export type SettingData = {
+  activeDataWidgetType: DataWidgetType;
+  columnChooser: ColumnChooserData;
+};
+
+export type ColumnChooserData = {
+  appliedColumns: ChooserColumn[];
+  allColumns: ChooserColumn[];
+  selectedColumns: ChooserColumn[];
+};
+export type ChooserColumn = {
+  id: number;
+  label: string;
+  field: string;
+  selected: boolean;
+  includeInCard: boolean;
+  isFreezed: boolean;
+  order: number;
+  width?: number;
+  primary: boolean;
+};

package/src/Widgets/GridToolBar/data/userView/index.ts

@@ -0,0 +1,11 @@
+export type UserViewData = {
+  selectedView?: View;
+  allViews: View[];
+};
+
+export type View = {
+  id: string;
+  name: string;
+  isDefault: boolean;
+  isSelected: boolean;
+};

package/src/Widgets/GridToolBar/enum/index.ts

@@ -0,0 +1,29 @@
+export enum OperatorCreiteria {
+  AND = "AND",
+  OR = "OR",
+}
+
+export enum FilterTargetType {
+  TEXT = "TEXT",
+  DATE = "DATE",
+  NUMBER = "NUMBER",
+  LIST = "LIST",
+  BOOLEAN = "BOOLEAN",
+}
+
+export enum Operator {
+  Equal,
+  NotEqual,
+  Like,
+  NotLike,
+  In,
+  NotIn,
+  LessThan,
+  LessThanOrEqual,
+  GreaterThan,
+  GreaterThanOrEqual,
+  Between,
+  NotBetween,
+  IsNull,
+  IsNotNull,
+}

package/src/Widgets/GridToolBar/helper/getUniqueId.ts

@@ -0,0 +1,2 @@
+import { v4 as uniqueKey } from "uuid";
+export const getUniqueId = () => uniqueKey();