procode-vs-template 1.0.0

package/src/Widgets/GridToolBar/Components/AdvancedSearch/TypeBasedWidgetFactory.tsx

@@ -0,0 +1,226 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DropDownList, MultiSelect } from "@progress/kendo-react-dropdowns";
+
+import { FilterTargetType, Operator } from "../../../GridToolBar/enum";
+import {
+  NumericTextBox,
+  RadioGroup,
+  TextBox,
+} from "@progress/kendo-react-inputs";
+import { DatePicker, DateRangePicker } from "@progress/kendo-react-dateinputs";
+import { cloneElement } from "react";
+import {
+  FilterExpressionViewModel,
+  FilterValue,
+} from "../../data/advancedSearch";
+
+const ItemRenderMultiSelect = ({ li, itemProps, selectedValues }: any) => {
+  const itemChildren = (
+    <a className="drLink">
+      <input
+        className="drLink_check"
+        type="checkbox"
+        name={itemProps.dataItem.value}
+        checked={
+          selectedValues?.length > 0
+            ? selectedValues.some(
+                (x: { label: string; value: string }) =>
+                  x.value === itemProps.dataItem.value
+              )
+            : false
+        }
+      />
+      {li.props.children}
+    </a>
+  );
+  return cloneElement(li, li.props, itemChildren);
+};
+
+const MultiSelectRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <MultiSelect
+    data={(filter.allValues || []) as any[]}
+    value={
+      filter.selectedFilter?.value
+        ? (filter.selectedFilter?.value as any[])
+        : undefined
+    }
+    textField="label"
+    className="tmpl-dropdown tmpl-advanced-input"
+    onChange={(e: any) => onFilterValueChange(e.target.value, filter.id)}
+    popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+    itemRender={(li: any, itemProps: any) => (
+      <ItemRenderMultiSelect
+        li={li}
+        itemProps={itemProps}
+        selectedValues={filter.selectedFilter?.value}
+      />
+    )}
+    tags={
+      (filter.selectedFilter?.value as any[])?.length > 0
+        ? [
+            {
+              text: `${
+                (filter.selectedFilter?.value as any[])?.length
+              } selected`,
+              data: [...(filter.selectedFilter?.value as any[])],
+            },
+          ]
+        : []
+    }
+  />
+);
+
+const DropDownListRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <DropDownList
+    data={filter.allValues as any[]}
+    value={filter.selectedFilter?.value || null}
+    textField="label"
+    title="value"
+    defaultItem={{ label: "Select Value...", value: null }}
+    popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+    className="tmpl-dropdown tmpl-advanced-input"
+    onChange={(e: any) => onFilterValueChange(e.target.value, filter.id)}
+  />
+);
+
+const TextBoxRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <TextBox
+    value={filter.selectedFilter?.value?.toString() || undefined}
+    className="tmpl-advanced-input"
+    onBlur={(e: any) => onFilterValueChange(e.target.value || null, filter.id)}
+  />
+);
+
+const NumericTextBoxRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <NumericTextBox
+    value={
+      filter.selectedFilter?.value ? Number(filter.selectedFilter?.value) : null
+    }
+    className="tmpl-advanced-input"
+    onBlur={(e: any) => onFilterValueChange(e.target.value, filter.id)}
+  />
+);
+
+const NumericRangePickerRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <NumericTextBox
+    value={
+      filter.selectedFilter?.value ? Number(filter.selectedFilter?.value) : null
+    }
+    className="tmpl-advanced-input"
+    onBlur={(e: any) => onFilterValueChange(e.target.value, filter.id)}
+  />
+);
+
+const RadioGroupRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <RadioGroup
+    onChange={(e) => onFilterValueChange(e.value, filter.id)}
+    layout="horizontal"
+    data={[
+      { label: "True", value: true },
+      { label: "False", value: false },
+    ]}
+    value={filter.selectedFilter?.value as any}
+    className="tmpl-advanced-input"
+  />
+);
+
+const DatePickerRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <DatePicker
+    onChange={(e: any) => onFilterValueChange(e.target.value, filter.id)}
+    popupSettings={{ popupClass: `tmpl-prvent-outside-click-close` }}
+    value={
+      filter.selectedFilter?.value
+        ? (filter.selectedFilter?.value as Date)
+        : null
+    }
+    className="tmpl-advanced-input"
+  />
+);
+
+const DateRangePickerRenderer: React.FC<{
+  filter: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+}> = ({ filter, onFilterValueChange }) => (
+  <DateRangePicker
+    onChange={(e: any) => onFilterValueChange(e.target.value, filter.id)}
+    startDateInputSettings={{ label: undefined }}
+    endDateInputSettings={{ label: undefined }}
+    popupSettings={{ popupClass: `tmpl-prvent-outside-click-close` }}
+    value={
+      filter.selectedFilter?.value
+        ? (filter.selectedFilter?.value as any)
+        : null
+    }
+    className="tmpl-advanced-input tmpl-advanced-ranged-input"
+  />
+);
+
+const renderers = {
+  [FilterTargetType.LIST]: DropDownListRenderer,
+  [FilterTargetType.LIST + Operator.In]: MultiSelectRenderer,
+  [FilterTargetType.LIST + Operator.NotIn]: MultiSelectRenderer,
+  [FilterTargetType.TEXT]: TextBoxRenderer,
+  [FilterTargetType.NUMBER]: NumericTextBoxRenderer,
+  [FilterTargetType.NUMBER + Operator.Between]: NumericRangePickerRenderer,
+  [FilterTargetType.NUMBER + Operator.NotBetween]: NumericRangePickerRenderer,
+  [FilterTargetType.BOOLEAN]: RadioGroupRenderer,
+  [FilterTargetType.DATE]: DatePickerRenderer,
+  [FilterTargetType.DATE + Operator.Between]: DateRangePickerRenderer,
+  [FilterTargetType.DATE + Operator.NotBetween]: DateRangePickerRenderer,
+};
+
+type TypeBasedWidgetFactoryProps = {
+  filterRow: FilterExpressionViewModel;
+  onFilterValueChange: (value: FilterValue | FilterValue[], id: string) => void;
+};
+
+const TypeBasedWidgetFactory: React.FC<TypeBasedWidgetFactoryProps> = ({
+  filterRow,
+  onFilterValueChange,
+}) => {
+  let Renderer = null;
+  if (
+    filterRow?.selectedFilter?.operator?.value === Operator.In ||
+    filterRow?.selectedFilter?.operator?.value === Operator.NotIn ||
+    filterRow?.selectedFilter?.operator?.value === Operator.Between ||
+    filterRow?.selectedFilter?.operator?.value === Operator.NotBetween
+  ) {
+    Renderer =
+      renderers[
+        filterRow?.selectedFilter?.propertyToFilter?.type +
+          filterRow?.selectedFilter?.operator?.value
+      ];
+  } else {
+    Renderer = renderers[filterRow?.selectedFilter?.propertyToFilter?.type];
+  }
+
+  if (!Renderer) {
+    Renderer = renderers[FilterTargetType.TEXT];
+  }
+  return (
+    <Renderer filter={filterRow} onFilterValueChange={onFilterValueChange} />
+  );
+};
+
+export default TypeBasedWidgetFactory;

package/src/Widgets/GridToolBar/Components/AdvancedSearch/constant.ts

@@ -0,0 +1,55 @@
+import { FilterTargetType, Operator } from "../../enum";
+
+export const typeBasedOperators = [
+  {
+    operators: [
+      { label: "Equal", value: Operator.Equal },
+      { label: "Not Equal", value: Operator.NotEqual },
+      { label: "Includes", value: Operator.Like },
+      { label: "Not Includes", value: Operator.NotLike },
+    ],
+    type: FilterTargetType.TEXT,
+  },
+  {
+    operators: [
+      { label: "Equal", value: Operator.Equal },
+      { label: "Not Equal", value: Operator.NotEqual },
+      { label: "Is Greater Than", value: Operator.GreaterThan },
+      { label: "Is Greater Than Equal", value: Operator.GreaterThanOrEqual },
+      { label: "Is Less Than", value: Operator.LessThan },
+      { label: "Is Less Than Equal", value: Operator.LessThanOrEqual },
+      { label: "Between", value: Operator.Between },
+      { label: "Not Between", value: Operator.NotBetween },
+    ],
+    type: FilterTargetType.NUMBER,
+  },
+  {
+    operators: [
+      { label: "Equal", value: Operator.Equal },
+      { label: "Not Equal", value: Operator.NotEqual },
+      { label: "Is Greater Than", value: Operator.GreaterThan },
+      { label: "Is Greater Than Equal", value: Operator.GreaterThanOrEqual },
+      { label: "Is Less Than", value: Operator.LessThan },
+      { label: "Is Less Than Equal", value: Operator.LessThanOrEqual },
+      { label: "Between", value: Operator.Between },
+      { label: "Not Between", value: Operator.NotBetween },
+    ],
+    type: FilterTargetType.DATE,
+  },
+  {
+    operators: [
+      { label: "Equal", value: Operator.Equal },
+      { label: "Not Equal", value: Operator.NotEqual },
+    ],
+    type: FilterTargetType.BOOLEAN,
+  },
+  {
+    operators: [
+      { label: "Equal", value: Operator.Equal },
+      { label: "Not Equal", value: Operator.NotEqual },
+      { label: "In The List", value: Operator.In },
+      { label: "Not In The List", value: Operator.NotIn },
+    ],
+    type: FilterTargetType.LIST,
+  },
+];

package/src/Widgets/GridToolBar/Components/AdvancedSearch/helper/AdvancedSearchFunctions.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FilterExpressionViewModel } from "../../../data/advancedSearch";
+import { FilterTargetType, OperatorCreiteria } from "../../../enum";
+import { getUniqueId } from "../../../helper/getUniqueId";
+import { typeBasedOperators } from "../constant";
+
+export const getTypeBasedOperators = (type: FilterTargetType) => {
+  const operatorList = typeBasedOperators.find(
+    (operator) => operator.type === type
+  );
+  return operatorList ? operatorList?.operators : [];
+};
+
+export const getAdvancedSearchIntitialFilterRow = () => {
+  const id = "ADVS__" + getUniqueId();
+  const defaultAdvanceSearch: FilterExpressionViewModel = {
+    id,
+    idLabel: "(1)",
+    allPropertieseToFilter: [],
+    alloperators: [],
+    allValues: [],
+    selectedFilter: {
+      id,
+      propertyToFilter: {
+        label: "Select Filter...",
+        apiPropertyName: "",
+        type: FilterTargetType.TEXT,
+        value: null,
+      },
+      operator: { label: "Select Operator...", value: null },
+      value: undefined,
+      selectedCriteria: OperatorCreiteria.AND,
+    },
+  };
+  return defaultAdvanceSearch;
+};

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

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import ExportView from "./ExportView";
+import ExportPopup, { ExportViewModel } from "./ExportPopup";
+import { ExportType } from "./type";
+
+export type ExportProps = {
+  visible: boolean;
+  disabled: boolean;
+  config: { uiElementGroupId: string };
+  onExport?: (
+    callBack: ((args: any) => void) | null,
+    exportType: ExportType,
+    exportDataScope: string
+  ) => 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 Export = (props: ExportProps) => {
+  const [togglePopup, setTogglePopup] = useState(false);
+
+  const onClick = () => {
+    setTogglePopup(!togglePopup);
+  };
+
+  const onExport = (
+    callBack: () => void,
+    exportViewModels: ExportViewModel[]
+  ) => {
+    exportViewModels.forEach((vm) => {
+      if (vm.exportType) {
+        props.onExport?.(callBack, vm.exportType, vm.exportDataScope ?? "");
+      }
+    });
+  };
+  
+
+  return props.visible ? (
+    <div className="tmpl-export-container">
+      <ExportView disabled={props.disabled} onClick={onClick} />
+      {togglePopup && !props.disabled && (
+        <ExportPopup
+          setTogglePopup={setTogglePopup}
+          onExport={onExport}
+          onExportList={props.onExportList}
+          onExportDownload={props.onExportDownload}
+          onExportDelete={props.onExportDelete}
+        />
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+};
+export default Export;