procode-vs-template 1.0.0

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

@@ -0,0 +1,21 @@
+import FactoryRenderer from "../../../../Renderer";
+
+export type GroupByViewProps = {
+  disabled: boolean;
+  onPopupToggle: () => void;
+};
+
+const GroupByView = (props: GroupByViewProps) => {
+  return (
+    <FactoryRenderer
+      onClick={props.onPopupToggle}
+      title="Group By"
+      rootStyle={{ className: "tmpl-groupby" }}
+      widgetStyle={{ className: "tmpl-button" }}
+      uiElementType="WIDGET"
+      widgetType="BUTTON"
+      disabled={props.disabled}
+    />
+  );
+};
+export default GroupByView;

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

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from "react";
+import GroupByView from "./GroupByView";
+import GroupByPopUp from "./GroupByPopUp";
+import _ from "lodash";
+
+export type GroupByProps = {
+  visible: boolean;
+  disabled: boolean;
+  groupableFields: { label: string; value: string }[];
+  uiElementGroupData: Record<string, any>;
+  config: { uiElementGroupId: string };
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+};
+
+const GroupBy = (props: GroupByProps) => {
+  const [togglePopup, setTogglePopup] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (togglePopup) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [togglePopup]);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      popupRef.current &&
+      !popupRef.current.contains(event.target as Node) &&
+      (event.target as any)?.offsetParent?.className !== "k-list-content"
+    ) {
+      setTogglePopup(false);
+    }
+  };
+
+  const onGroupApply = (groupFields: { label: string; value: string }[]) => {
+    const updatedGroupedBy = {
+      ...props.uiElementGroupData.groupedBy,
+      appliedGroups: _.cloneDeep(groupFields),
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      groupedBy: updatedGroupedBy,
+    };
+    setTogglePopup(false);
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onPopupToggle = () => {
+    setTogglePopup((prevToggle) => !prevToggle);
+  };
+  return props.visible ? (
+    <div className="tmpl-group-filter-container" ref={popupRef}>
+      <GroupByView disabled={props.disabled} onPopupToggle={onPopupToggle} />
+      {togglePopup && !props.disabled && (
+        <GroupByPopUp
+          selectedGroups={
+            props.uiElementGroupData?.groupedBy?.appliedGroups ?? []
+          }
+          groupableFields={props.groupableFields}
+          onPopupToggle={onPopupToggle}
+          onGroupApply={onGroupApply}
+        />
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+};
+export default GroupBy;

package/src/Widgets/GridToolBar/Components/QuickFilter/FilterPopup.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import FactoryRenderer from "../../../../Renderer";
+import { FilterExpression } from "../../data/quickFilter";
+
+interface FilterPopupProps {
+  filterRows: FilterExpression[];
+  onQuickFilterApply: (
+    id: string,
+    value: { label: string; value: any }
+  ) => void;
+}
+
+const FilterPopup = (props: FilterPopupProps) => {
+  return (
+    <div className="tmpl-quick-filter-popup">
+      {props.filterRows?.map((filterRow) => {
+        return (
+          <div className="tmpl-dropdown-container" key={filterRow.id}>
+            <span>{filterRow.propertyToFilter.label}</span>
+            <FactoryRenderer
+              value={filterRow.value}
+              textField="label"
+              listData={filterRow.allValues ?? []}
+              title="Filter"
+              defaultItem={{ label: "Select...", value: null }}
+              widgetStyle={{ className: "tmpl-dropdown" }}
+              rootStyle={{ className: "tmpl-dropdown-container" }}
+              popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+              onChange={(callBack: any, fieldName: string, e: any) =>
+                props.onQuickFilterApply(filterRow.id, e)
+              }
+              uiElementType="WIDGET"
+              widgetType="DROPDOWN"
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+export default FilterPopup;

package/src/Widgets/GridToolBar/Components/QuickFilter/QuickFilterView.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import FactoryRenderer from "../../../../Renderer";
+
+export type QuickFilterViewProps = {
+  disabled: boolean;
+  onPopupToggle: () => void;
+};
+
+const QuickFilterView = (props: QuickFilterViewProps) => {
+  return (
+    <FactoryRenderer
+      onClick={props.onPopupToggle}
+      rootStyle={{ className: "tmpl-quick-filter", inline: { width: "32px" } }}
+      widgetStyle={{ className: "tmpl-button", inline: { width: "100%" } }}
+      uiElementType="WIDGET"
+      widgetType="ICON"
+      name="filter"
+      fillMode=""
+      disabled={props.disabled}
+    />
+  );
+};
+export default QuickFilterView;

package/src/Widgets/GridToolBar/Components/QuickFilter/index.tsx

@@ -0,0 +1,199 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from "react";
+import QuickFilterView from "./QuickFilterView";
+import { FilterExpression, FilterValue } from "../../data/quickFilter";
+import { ValueLoadType } from "../../type";
+import FilterPopup from "./FilterPopup";
+import _ from "lodash";
+import { FilterTargetType, OperatorCreiteria } from "../../enum";
+
+export type QuickFilterProps = {
+  visible: boolean;
+  disabled: boolean;
+  uiElementGroupData: Record<string, any>;
+  config: { uiElementGroupId: string };
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+  loadTemplateSupportiveData?: (
+    callBack: (args: any) => void,
+    supportiveKeys: any
+  ) => Promise<any>;
+};
+
+const QuickFilter = (props: QuickFilterProps) => {
+  const [togglePopup, setTogglePopup] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (props.uiElementGroupData?.quickFilter?.filterRows?.length > 0) {
+      loadFilterValues();
+    }
+  }, [
+    props.uiElementGroupData?.quickFilter?.filterRows?.length,
+    props.uiElementGroupData?.reset,
+  ]);
+
+  useEffect(() => {
+    if (togglePopup) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [togglePopup]);
+
+  const updateQuickFilterSupportiveData = (result: Record<string, any[]>) => {
+    const filterRows = props.uiElementGroupData?.quickFilter?.filterRows.map(
+      (f: FilterExpression) => {
+        const filterRow = { ...f };
+        if (
+          filterRow.propertyToFilter?.dataProvider?.valueLoadType ===
+          ValueLoadType.API
+        ) {
+          filterRow.allValues =
+            result[filterRow.propertyToFilter?.dataProvider.key ?? ""];
+        } else if (
+          filterRow.propertyToFilter?.dataProvider?.valueLoadType ===
+          ValueLoadType.SELF
+        ) {
+          filterRow.allValues = filterRow.propertyToFilter?.dataProvider
+            .value as FilterValue[];
+        }
+        return filterRow;
+      }
+    );
+
+    const updatedQuickFilter = {
+      ...props.uiElementGroupData.quickFilter,
+      filterRows: filterRows,
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      quickFilter: updatedQuickFilter,
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const loadFilterValues = () => {
+    const dataProviderKeys: string[] = [];
+    props.uiElementGroupData?.quickFilter?.filterRows?.map(
+      (filterRow: FilterExpression) => {
+        if (
+          filterRow.propertyToFilter?.dataProvider?.valueLoadType ===
+          ValueLoadType.API
+        ) {
+          dataProviderKeys.push(
+            filterRow.propertyToFilter?.dataProvider.key ?? ""
+          );
+        }
+      }
+    );
+
+    if (dataProviderKeys.length > 0) {
+      props.loadTemplateSupportiveData?.(
+        updateQuickFilterSupportiveData,
+        dataProviderKeys
+      );
+    } else {
+      updateQuickFilterSupportiveData({});
+    }
+  };
+  const onQuickFilterApply = (
+    id: string,
+    value: FilterValue | FilterValue[]
+  ) => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData?.quickFilter?.filterRows
+    );
+    const filterRowIndex = filterRows.findIndex(
+      (filterRow: FilterExpression) => filterRow.id === id
+    );
+
+    filterRows[filterRowIndex].value = value;
+    const appliedFilterRows = _.cloneDeep(filterRows).filter(
+      (row: FilterExpression) => {
+        if (row.propertyToFilter.type === FilterTargetType.LIST)
+          return (
+            (row.value as { label: string; value: any })?.value !== undefined &&
+            (row.value as { label: string; value: any })?.value !== null
+          );
+        return row.value;
+      }
+    );
+
+    const updatedQuickFilter = {
+      ...props.uiElementGroupData.quickFilter,
+      filterRows: filterRows,
+      appliedQuery: {
+        criteria: "",
+        filterRows: _.cloneDeep(appliedFilterRows),
+        joinCriteria: OperatorCreiteria.AND,
+      },
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      quickFilter: updatedQuickFilter,
+      pagination: { ...props.uiElementGroupData.pagination, skip: 0 },
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+    setTogglePopup(false);
+  };
+
+  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
+    ) {
+      setTogglePopup(false);
+    }
+  };
+
+  const onPopupToggle = () => {
+    if (popupRef.current && togglePopup) {
+      popupRef.current.classList.add("tmpl-popup-animation-reverse");
+      setTimeout(() => {
+        setTogglePopup((prevToggle) => !prevToggle);
+      }, 200);
+    } else {
+      setTogglePopup((prevToggle) => !prevToggle);
+    }
+  };
+  return props.visible ? (
+    <div className="tmpl-quick-filter-container" ref={popupRef}>
+      <QuickFilterView
+        disabled={props.disabled}
+        onPopupToggle={onPopupToggle}
+      />
+      {togglePopup && !props.disabled && (
+        <FilterPopup
+          filterRows={props.uiElementGroupData?.quickFilter?.filterRows ?? []}
+          onQuickFilterApply={onQuickFilterApply}
+        />
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+};
+export default QuickFilter;

package/src/Widgets/GridToolBar/Components/Reset/ResetView.tsx

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

package/src/Widgets/GridToolBar/Components/Reset/index.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SYSTEM_DEFAULT } from "../../../../constant";
+import ResetView from "./ResetView";
+
+export type ResetProps = {
+  visible: boolean;
+  disabled: boolean;
+  uiElementGroupData: Record<string, any>;
+  config: { uiElementGroupId: string };
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+};
+
+const Reset = (props: ResetProps) => {
+  const onReset = () => {
+    if (props.uiElementGroupData.userView.selectedView?.id === SYSTEM_DEFAULT) {
+      const defaultScreenViewId = `${props.config.uiElementGroupId}_${SYSTEM_DEFAULT}`;
+      sessionStorage.removeItem(defaultScreenViewId);
+    }
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      reset: (props.uiElementGroupData.reset ?? 0) + 1,
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+  return props.visible ? (
+    <ResetView disabled={props.disabled} onReset={onReset} />
+  ) : (
+    <></>
+  );
+};
+export default Reset;

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

@@ -0,0 +1,88 @@
+import { Button } from "@progress/kendo-react-buttons";
+import { useEffect, useRef, useState } from "react";
+import { TextBox, TextBoxChangeEvent } from "@progress/kendo-react-inputs";
+import FactoryRenderer from "../../../../Renderer";
+
+interface CreateScreenPopupProps {
+  onViewToggle: () => void;
+  create: (viewName: string) => Promise<void>;
+}
+
+const CreateScreenPopup = (props: CreateScreenPopupProps) => {
+  const [screenName, setScreenName] = useState("");
+  const [isValid, setIsValid] = useState(true);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node)
+      ) {
+        popupRef.current.classList.add("tmpl-popup-animation-2-reverse");
+        setTimeout(props.onViewToggle, 200);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleCreate = () => {
+    if (!screenName.trim()) {
+      setIsValid(false);
+      return;
+    }
+    props.create(screenName.trim());
+  };
+
+  const onScreenNameChange = (e: TextBoxChangeEvent) => {
+    setScreenName(e.target.value?.toString() || "");
+    setIsValid(true);
+  };
+  return (
+    <div className="tmpl-screen-creater-popup" ref={popupRef}>
+      <div className="tmpl-screen-creater-popup-header">
+        <div>
+          <h2>Create New View</h2>
+        </div>
+        <FactoryRenderer
+          widgetStyle={{
+            className: "tmpl-button-sm",
+          }}
+          name="close"
+          fillMode="clear"
+          onClick={props.onViewToggle}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          title=""
+        />
+      </div>
+      <div className="tmpl-screen-creater-popup-body">
+        <div className="tmpl-dropdown-container">
+          <span>View Name</span>
+          <TextBox
+            value={screenName}
+            className="tmpl-input"
+            placeholder="Type Here..."
+            onChange={onScreenNameChange}
+          />
+          {!isValid && <span>Required</span>}
+        </div>
+        <div className="tmpl-screen-creater-popup-footer">
+          <Button
+            title="Create View"
+            className="tmpl-button"
+            onClick={handleCreate}
+          >
+            Create
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CreateScreenPopup;