procode-vs-template 1.0.0

package/src/Widgets/GridToolBar/Components/ScreenView/UserView.tsx

@@ -0,0 +1,266 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import UserViewView from "./UserViewView";
+import { useEffect, useState } from "react";
+import { SYSTEM_DEFAULT } from "../../../../constant";
+import _ from "lodash";
+import CreateScreenPopup from "./CreateScreenPopup";
+import { View } from "../../data/userView";
+import { loadScreensAction } from "./actions";
+import { saveSystemDefaultInSession } from "./helpers/saveSystemDefaultInSession";
+import getSavedSystemDefault from "./helpers/getSavedSystemDefault";
+import { getInitialData } from "../../data";
+import { FilterTarget } from "../../data/advancedSearch";
+import {
+  FilterExpression,
+  FilterTarget as FilterTargetQuick,
+} from "../../data/quickFilter";
+import { DataWidgetType } from "../Setting/Setting";
+import { ChooserColumn } from "../../data/setting";
+import { getUniqueId } from "../../helper/getUniqueId";
+import { globalSearchHandler } from "./helpers/uiElementHandler/globalSearchHandler";
+import { advancedSearchHandler } from "./helpers/uiElementHandler/advancedSearchHandler";
+import { groupByHandler } from "./helpers/uiElementHandler/groupByHandler";
+import { quickFilterHandler } from "./helpers/uiElementHandler/quickFilterHandler";
+import { settingHandler } from "./helpers/uiElementHandler/settingHandler";
+import { sortHandler } from "./helpers/uiElementHandler/sortHandler";
+import { paginationHandler } from "./helpers/uiElementHandler/paginationHandler";
+import { localSearch } from "./helpers/uiElementHandler/localSearchHandler";
+
+export const _defaultView = {
+  id: SYSTEM_DEFAULT,
+  isDefault: false,
+  name: "System Default",
+  isSelected: false,
+};
+
+export type UserViewProps = {
+  visible: boolean;
+  disabled: boolean;
+  enableDefaultSaveInSession: boolean;
+  advancedFilterableFields: FilterTarget[];
+  quickFilterRows: FilterTargetQuick[];
+  activeDataWidgetType: DataWidgetType;
+  columns: ChooserColumn[];
+  config: { uiElementGroupId: string };
+  uiElementGroupData: Record<string, any>;
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+};
+
+const UserView = (props: UserViewProps) => {
+  const [togglePopup, setTogglePopup] = useState(false);
+
+  useEffect(() => {
+    if (props.uiElementGroupData?.processing === false) {
+      loadUserViews();
+    }
+  }, [props.uiElementGroupData?.processing]);
+
+  useEffect(() => {
+    //call custom view service and get saved data related to default custom view
+    if (props.uiElementGroupData?.reset > 0) {
+      const selectedView: View =
+        props.uiElementGroupData?.userView?.selectedView;
+
+      initScreenData(
+        props.uiElementGroupData?.userView?.allViews ?? [],
+        selectedView,
+        true
+      );
+    }
+  }, [props.uiElementGroupData?.reset]);
+
+  const initScreenData = async (
+    allScreens: View[],
+    selectedScreen: View,
+    isReset?: boolean
+  ) => {
+    const initialData = getInitialData();
+    initialData.advancedSearch.filterRows[0].allPropertieseToFilter =
+      _.cloneDeep(props.advancedFilterableFields);
+    initialData.enableDataLoading = true;
+    initialData.quickFilter.filterRows = props.quickFilterRows.map(
+      (filterRow) => {
+        const filterExpression: FilterExpression = {
+          id: "QUFS__" + getUniqueId(),
+          propertyToFilter: _.cloneDeep(filterRow),
+          allValues: [],
+          value: undefined,
+        };
+        return filterExpression;
+      }
+    );
+    initialData.setting.activeDataWidgetType =
+      props.uiElementGroupData?.setting?.activeDataWidgetType ??
+      props.activeDataWidgetType;
+    initialData.setting.columnChooser.allColumns = _.cloneDeep(props.columns);
+    initialData.setting.columnChooser.appliedColumns = _.cloneDeep(
+      props.columns.filter((c) => c.selected)
+    );
+    initialData.setting.columnChooser.selectedColumns = _.cloneDeep(
+      props.columns.filter((c) => c.selected)?.sort((a, b) => a.order - b.order)
+    );
+    initialData.userView.allViews = allScreens;
+    initialData.userView.selectedView = selectedScreen;
+
+    const mergedInitialData = {
+      ...props.uiElementGroupData,
+      ...initialData,
+    };
+    if (isReset) {
+      mergedInitialData.localSearch = [];
+      mergedInitialData.sort = mergedInitialData.defaultSort;
+      mergedInitialData.pagination = mergedInitialData.defaultPagination;
+    }
+
+    if (selectedScreen)
+      await loadSelectedViewData(selectedScreen, mergedInitialData);
+
+    props.onModelUpdate(null, props.config.uiElementGroupId, mergedInitialData);
+  };
+
+  const loadUserViews = async () => {
+    const screens = await loadScreensAction(props.config.uiElementGroupId);
+
+    const defaultPosition = screens.findIndex((s) => s.isDefault === true);
+    const defaultView = _.cloneDeep(_defaultView);
+
+    if (defaultPosition < 0) {
+      defaultView.isDefault = true;
+      defaultView.isSelected = true;
+    }
+
+    const deserializedScreens: View[] = [defaultView, ...screens];
+    const selectedScreen = deserializedScreens.find(
+      (view: View) => view.isSelected === true
+    );
+    if (selectedScreen) initScreenData(deserializedScreens, selectedScreen);
+  };
+
+  const loadSelectedViewData = async (selectedView: View, initialData: any) => {
+    let savedFilters;
+    if (
+      selectedView.id === SYSTEM_DEFAULT &&
+      props.enableDefaultSaveInSession
+    ) {
+      const elementId = `${props.config.uiElementGroupId}_${SYSTEM_DEFAULT}`;
+      savedFilters = getSavedSystemDefault(elementId);
+    } else {
+      //TODO: Load data from server
+    }
+    if (savedFilters) {
+      globalSearchHandler(savedFilters.globalSearch, initialData);
+      advancedSearchHandler(savedFilters.advancedSearch, initialData);
+      groupByHandler(savedFilters?.groupedBy, initialData);
+      quickFilterHandler(savedFilters?.quickFilter, initialData);
+      settingHandler(savedFilters?.setting, initialData);
+      sortHandler(savedFilters?.sort, initialData);
+      paginationHandler(savedFilters?.pagination, initialData);
+      localSearch(savedFilters, initialData);
+    }
+  };
+
+  const createUserView = async (screenName: string) => {
+    const deserializedScreens: View[] = [
+      ...props.uiElementGroupData.userView.allViews,
+      { id: screenName, isDefault: false, name: screenName, isSelected: false },
+    ];
+    //TODO: CALL THE SERVICE AND SAVE THE NEW CUSTOM VIEW
+    props.uiElementGroupData.userView.allViews = deserializedScreens;
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      props.uiElementGroupData
+    );
+    onViewToggle();
+  };
+
+  const saveUserView = () => {};
+
+  const deleteUserView = (id: string) => {};
+
+  const setViewAsDefault = (id: string) => {
+    props.uiElementGroupData.userView.allViews =
+      props.uiElementGroupData.userView.allViews.map((view: View) => {
+        if (view.id === id) {
+          view.isDefault = true;
+        } else {
+          view.isDefault = false;
+        }
+        return view;
+      });
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      props.uiElementGroupData
+    );
+  };
+
+  const markAsSelected = (view: View) => {
+    props.uiElementGroupData.userView.allViews =
+      props.uiElementGroupData.userView.allViews.map((v: View) => {
+        v.isSelected = v.id === view.id;
+        return v;
+      });
+    props.uiElementGroupData.userView.selectedView = view;
+    if (
+      props.uiElementGroupData.userView.selectedView?.id === SYSTEM_DEFAULT &&
+      props.enableDefaultSaveInSession
+    ) {
+      saveSystemDefaultInSession(
+        props.config.uiElementGroupId,
+        props.uiElementGroupData
+      );
+    }
+
+    let savedFilters = null;
+
+    if (view.id === SYSTEM_DEFAULT && props.enableDefaultSaveInSession) {
+      const elementId = `${props.config.uiElementGroupId}_${SYSTEM_DEFAULT}`;
+      savedFilters = getSavedSystemDefault(elementId);
+    } else if (view.id !== SYSTEM_DEFAULT) {
+      // savedFilters = customViewFilters ::setup custom view filters
+    }
+
+    if (savedFilters) {
+      //TODO: handleUpdateStateWithSavedViewFilters
+    }
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      props.uiElementGroupData
+    );
+  };
+
+  const onViewToggle = () => {
+    setTogglePopup((prevToggle) => !prevToggle);
+  };
+
+  return props.visible ? (
+    <div className="tmpl-screen-view-container">
+      <UserViewView
+        selectedView={props.uiElementGroupData?.userView?.selectedView}
+        allViews={props.uiElementGroupData?.userView?.allViews ?? []}
+        disabled={props.disabled}
+        onViewToggle={onViewToggle}
+        onDelete={deleteUserView}
+        setDefault={setViewAsDefault}
+        onSave={saveUserView}
+        markAsSelected={markAsSelected}
+      />
+      {togglePopup && !props.disabled && (
+        <CreateScreenPopup
+          create={createUserView}
+          onViewToggle={onViewToggle}
+        />
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+};
+export default UserView;

package/src/Widgets/GridToolBar/Components/ScreenView/UserViewView.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { cloneElement } from "react";
+import ViewItem from "./ViewItem";
+import { DropDownList } from "@progress/kendo-react-dropdowns";
+import { Button } from "@progress/kendo-react-buttons";
+import { View } from "../../data/userView";
+
+export type UserViewViewProps = {
+  selectedView?: View;
+  allViews: View[];
+  disabled: boolean;
+  onViewToggle: () => void;
+  setDefault: (id: string) => void;
+  onDelete: (id: string) => void;
+  onSave: () => void;
+  markAsSelected: (view: View) => void;
+};
+
+const UserViewView = ({
+  selectedView,
+  allViews,
+  disabled,
+  onViewToggle,
+  setDefault,
+  onDelete,
+  onSave,
+  markAsSelected,
+}: UserViewViewProps) => {
+  return (
+    <DropDownList
+      disabled={disabled}
+      data={allViews}
+      textField="name"
+      dataItemKey="id"
+      value={selectedView}
+      title="Screen View"
+      className="tmpl-screen-view tmpl-dropdown"
+      footer={
+        <div className="tmpl-screen-view-footer" onClick={onViewToggle}>
+          <Button size="small" themeColor="primary" title="Create View">
+            + Create View
+          </Button>
+        </div>
+      }
+      itemRender={(li, itemProp: any) =>
+        cloneElement(
+          li,
+          li.props,
+          <ViewItem
+            view={itemProp.dataItem as View}
+            selectedView={selectedView}
+            markAsSelected={markAsSelected}
+            onDelete={onDelete}
+            setDefault={setDefault}
+            onSave={onSave}
+          />
+        )
+      }
+      fillMode={"flat"}
+      popupSettings={{
+        popupClass: "tmpl-button-popup",
+      }}
+    />
+  );
+};
+
+export default UserViewView;

package/src/Widgets/GridToolBar/Components/ScreenView/ViewItem.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SYSTEM_DEFAULT } from "../../../../constant";
+import { View } from "../../data/userView";
+import FactoryRenderer from "../../../../Renderer";
+
+type ViewItem = {
+  view: View;
+  selectedView?: View;
+  onDelete: (id: string) => void;
+  onSave: () => void;
+  markAsSelected: (view: View) => void;
+  setDefault: (id: string) => void;
+};
+
+const ViewItem = ({
+  view,
+  selectedView,
+  onDelete,
+  onSave,
+  markAsSelected,
+  setDefault,
+}: ViewItem) => {
+  const isSelected = view.id === selectedView?.id;
+  const isDefault = view.id === SYSTEM_DEFAULT;
+
+  const handleDelete = (e: React.MouseEvent) => {
+    onDelete(view.id);
+    e.stopPropagation();
+  };
+
+  const handleSave = (e: React.MouseEvent) => {
+    onSave();
+    e.stopPropagation();
+  };
+
+  const handleSetDefault = (e: React.MouseEvent) => {
+    setDefault(view.id);
+    e.stopPropagation();
+  };
+
+  return (
+    <div
+      className={`tmpl-screen-view-item ${
+        isSelected ? "tmpl-view-item-heighlight" : ""
+      }`}
+      onClick={() => markAsSelected(view)}
+    >
+      <p className="tmpl-screen-view-name">{view.name}</p>
+      {!isDefault && (
+        <FactoryRenderer
+          widgetStyle={{
+            className: "tmpl-button-sm tmpl-delete-icon",
+          }}
+          name="delete"
+          fillMode="clear"
+          onClick={handleDelete}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          title="Delete"
+        />
+      )}
+      {!isDefault && isSelected && (
+        <FactoryRenderer
+          widgetStyle={{
+            className: "tmpl-button-sm tmpl-delete-icon",
+          }}
+          name="save"
+          fillMode="clear"
+          onClick={handleSave}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          title="Save"
+        />
+      )}
+      {view.isDefault ? (
+        <label>Default</label>
+      ) : (
+        <FactoryRenderer
+          widgetStyle={{
+            className: "tmpl-button-sm tmpl-set-default",
+          }}
+          name="star"
+          fillMode="clear"
+          onClick={handleSetDefault}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          title="Set Default"
+        />
+      )}
+    </div>
+  );
+};
+
+export default ViewItem;

package/src/Widgets/GridToolBar/Components/ScreenView/actions/index.ts

@@ -0,0 +1,20 @@
+import { getDeserializedScreenViewList } from "../helpers/deserializedScreenView";
+import { loadScreenService } from "../services";
+
+export type ScreenViewProps = {
+  id: string;
+  viewName: string;
+  selected: boolean;
+};
+export const loadScreensAction = async (targetEntity: string) => {
+  //TODO: CALL THE SERVICE AND GET ALL CUSTOM VIEWS
+  loadScreenService(targetEntity);
+
+  const screens: ScreenViewProps[] = [
+    { id: "Test_01", selected: false, viewName: "Test 1" },
+    { id: "Test_02", selected: false, viewName: "Test 2" },
+  ];
+  return getDeserializedScreenViewList(screens);
+};
+export const createScreenAction = () => {};
+export const deleteScreenAction = () => {};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/deserializedScreenView.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { View } from "../../../data/userView";
+import { ScreenViewProps } from "../actions";
+
+export const deserializedScreenView = (screenData: ScreenViewProps): View => {
+  return {
+    id: screenData.id,
+    name: screenData.viewName,
+    isDefault: screenData.selected,
+    isSelected: screenData.selected,
+  };
+};
+
+export const getDeserializedScreenViewList = (
+  screenData: ScreenViewProps[]
+): View[] => {
+  return screenData.map((s) => deserializedScreenView(s));
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/getSavedSystemDefault.ts

@@ -0,0 +1,18 @@
+import { SYSTEM_DEFAULT } from "../../../../../constant";
+
+const getSavedSystemDefault = (uiElementGroupId: string) => {
+  try {
+    const session = sessionStorage.getItem(
+      `${uiElementGroupId}_${SYSTEM_DEFAULT}`
+    );
+    if (session) {
+      return JSON.parse(session);
+    }
+    return null;
+  } catch (error) {
+    console.error("Error parsing session data:", error);
+  }
+  return null;
+};
+
+export default getSavedSystemDefault;

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/saveSystemDefaultInSession.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SYSTEM_DEFAULT } from "../../../../../constant";
+
+export const saveSystemDefaultInSession = (
+  uiElementGroupId: string,
+  uiElementGroupData?: Record<string, any>
+) => {
+  sessionStorage.setItem(
+    `${uiElementGroupId}_${SYSTEM_DEFAULT}`,
+    JSON.stringify(uiElementGroupData)
+  );
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/advancedSearchHandler.ts

@@ -0,0 +1,32 @@
+import _ from "lodash";
+import {
+  FilterExpression,
+  FilterExpressionViewModel,
+} from "../../../../data/advancedSearch";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const advancedSearchHandler = (
+  advancedSearch: any,
+  initialData: any
+) => {
+  if (advancedSearch?.appliedQuery.criteria) {
+    initialData.advancedSearch.appliedQuery = _.cloneDeep(
+      advancedSearch?.appliedQuery
+    );
+    initialData.advancedSearch.criteria = advancedSearch?.appliedQuery.criteria;
+
+    const filterExpressionViewModel: FilterExpressionViewModel =
+      initialData.advancedSearch.filterRows[0];
+
+    initialData.advancedSearch.filterRows = _.cloneDeep(
+      advancedSearch?.appliedQuery?.filters.map(
+        (filter: FilterExpression, index: number) => {
+          const filterRow = _.cloneDeep(filterExpressionViewModel);
+          filterRow.id = filter.id;
+          filterRow.idLabel = index.toString();
+          filterRow.selectedFilter = filter;
+        }
+      )
+    );
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/globalSearchHandler.ts

@@ -0,0 +1,13 @@
+import _ from "lodash";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const globalSearchHandler = (globalSearch: any, initialData: any) => {
+  if (globalSearch?.appliedQuery) {
+    initialData.globalSearch.appliedQuery = _.cloneDeep(
+      globalSearch?.appliedQuery
+    );
+    initialData.globalSearch.filterQuery = _.cloneDeep(
+      globalSearch?.appliedQuery
+    );
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/groupByHandler.ts

@@ -0,0 +1,8 @@
+import _ from "lodash";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const groupByHandler = (groupedBy: any, initialData: any) => {
+  if (groupedBy?.appliedGroups) {
+    initialData.groupedBy.appliedGroups = _.cloneDeep(groupedBy?.appliedGroups);
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/localSearchHandler.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const localSearch = (localSearch: any, initialData: any) => {
+  if (localSearch) {
+    initialData.localSearch = localSearch;
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/paginationHandler.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const paginationHandler = (pagination: any, initialData: any) => {
+  if (pagination) {
+    initialData.pagination = pagination;
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/quickFilterHandler.ts

@@ -0,0 +1,13 @@
+import _ from "lodash";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const quickFilterHandler = (quickFilter: any, initialData: any) => {
+  if (quickFilter?.filterRows) {
+    initialData.quickFilter.filterRows = _.cloneDeep(quickFilter?.filterRows);
+  }
+  if (quickFilter?.appliedQuery) {
+    initialData.quickFilter.appliedQuery = _.cloneDeep(
+      quickFilter?.appliedQuery
+    );
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/settingHandler.ts

@@ -0,0 +1,19 @@
+import _ from "lodash";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const settingHandler = (setting: any, initialData: any) => {
+  if (setting?.activeDataWidgetType) {
+    initialData.setting.activeDataWidgetType = setting?.activeDataWidgetType;
+  }
+  if (setting?.columnChooser?.appliedColumns) {
+    initialData.setting.columnChooser.allColumns = _.cloneDeep(
+      setting?.columnChooser?.allColumns
+    );
+    initialData.setting.columnChooser.appliedColumns = _.cloneDeep(
+      setting?.columnChooser?.appliedColumns
+    );
+    initialData.setting.columnChooser.selectedColumns = _.cloneDeep(
+      setting?.columnChooser?.selectedColumns
+    );
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/helpers/uiElementHandler/sortHandler.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const sortHandler = (sort: any, initialData: any) => {
+  if (sort) {
+    initialData.sort = sort;
+  }
+};

package/src/Widgets/GridToolBar/Components/ScreenView/services/index.ts

@@ -0,0 +1,63 @@
+import axios from "axios";
+
+/* eslint-disable no-empty */
+const getHeader = (): HeadersInit => {
+  return {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+};
+
+const createService = async ({
+  screenName,
+  targetEntity,
+}: {
+  screenName: string;
+  targetEntity: string;
+}) => {
+  try {
+    const response = await fetch(
+      "https://gwtsession-1226.appspot.com/userScreenService/saveView",
+      {
+        method: "POST",
+        headers: getHeader(),
+        body: JSON.stringify({
+          userId: "13494",
+          organizationId: "5958",
+          screenId: targetEntity,
+          viewName: screenName,
+          columnChooser: null,
+          advanceFilter: null,
+          groupBy: null,
+          gridMetaData: null,
+        }),
+      }
+    );
+    return response;
+  } catch (error) {
+    console.error("Error creating service:", error);
+    throw error;
+  }
+};
+
+const loadScreenService = async (targetEntity: string) => {
+  if (!targetEntity) {
+    console.error("Target entity is required to load screen service.");
+    return;
+  }
+  try {
+    await axios.post(
+      "https://gwtsession-1226.appspot.com/userScreenService/getViewList",
+      {
+        organizationId: "5958",
+        screenId: targetEntity,
+        userId: "13494",
+        applicationCode: "ECOMERP",
+      }
+    );
+  } catch (error) {
+    console.error("Error loading service:", error);
+  }
+};
+
+export { loadScreenService, createService };