procode-vs-template 1.0.0

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

@@ -0,0 +1,437 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import FilterPopupView from "./FilterPopupView";
+import { Operator, OperatorCreiteria } from "../../enum";
+import {
+  FilterExpression,
+  FilterExpressionViewModel,
+  FilterTarget,
+} from "../../data/advancedSearch";
+import { getAdvancedSearchIntitialFilterRow } from "./helper/AdvancedSearchFunctions";
+import _ from "lodash";
+
+interface FilterPopupProps {
+  uiElementGroupData: Record<string, any>;
+  filterableFields: FilterTarget[];
+  config: { uiElementGroupId: string };
+  handlePopupShow: () => void;
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+  loadTemplateSupportiveData?: (
+    callBack: (args: any) => void,
+    supportiveKeys: any
+  ) => Promise<any>;
+}
+
+const FilterPopup = (props: FilterPopupProps) => {
+  const onAdvancedSearchFilterTargetChange = (
+    value: FilterTarget,
+    id: string
+  ) => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+
+    const filterRow = filterRows.find(
+      (filterRow: FilterExpressionViewModel) => filterRow.id === id
+    );
+
+    if (filterRow) {
+      filterRow.selectedFilter.propertyToFilter = value;
+      filterRow.selectedFilter.value = undefined;
+      filterRow.selectedFilter.operator = {
+        label: "Select Operator...",
+        value: null,
+      };
+    }
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: filterRows,
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchOperatorChange = (
+    value: {
+      label: string;
+      value: Operator | null;
+    },
+    id: string
+  ) => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+    const filterRow = filterRows.find(
+      (filterRow: FilterExpressionViewModel) => filterRow.id === id
+    );
+    if (filterRow) {
+      filterRow.selectedFilter.operator = value;
+      filterRow.selectedFilter.value = undefined;
+    }
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: filterRows,
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchFilterValueChange = (value: any, id: string) => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+    const filterRow = filterRows.find(
+      (filterRow: FilterExpressionViewModel) => filterRow.id === id
+    );
+    if (filterRow) {
+      filterRow.selectedFilter.value = value;
+    }
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: filterRows,
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchCriteriaToggle = (id: string) => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+    const filterRow = filterRows.find(
+      (filterRow: FilterExpressionViewModel) => filterRow.id === id
+    );
+    if (filterRow) {
+      filterRow.selectedFilter.selectedCriteria =
+        filterRow.selectedFilter.selectedCriteria === OperatorCreiteria.AND
+          ? OperatorCreiteria.OR
+          : OperatorCreiteria.AND;
+    }
+    let criteria = "";
+    filterRows.map((filterRow: any, index: number) => {
+      criteria += `${filterRow.idLabel}`;
+      if (filterRows?.length - 1 !== index) {
+        criteria += ` ${filterRow?.selectedFilter?.selectedCriteria} `;
+      }
+    });
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: filterRows,
+        criteria,
+      },
+    };
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchFilterAdd = (id: string) => {
+    const idPosition =
+      props.uiElementGroupData.advancedSearch.filterRows.findIndex(
+        (filterRow: FilterExpressionViewModel) => filterRow.id === id
+      );
+
+    const initialFilterRow = _.cloneDeep(getAdvancedSearchIntitialFilterRow());
+    initialFilterRow.allPropertieseToFilter = props.filterableFields;
+
+    let updatedFilterRows = [
+      ...props.uiElementGroupData.advancedSearch.filterRows.slice(
+        0,
+        idPosition + 1
+      ),
+      initialFilterRow,
+      ...props.uiElementGroupData.advancedSearch.filterRows.slice(
+        idPosition + 1
+      ),
+    ];
+    let criteria = "";
+    updatedFilterRows = _.cloneDeep(updatedFilterRows).map((row, index) => {
+      row.idLabel = `(${index + 1})`;
+      criteria += `${row.idLabel}`;
+      if (updatedFilterRows?.length - 1 !== index) {
+        criteria += ` ${row?.selectedFilter?.selectedCriteria} `;
+      }
+
+      return row;
+    });
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: updatedFilterRows,
+        criteria: criteria?.trim(),
+      },
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchFilterDelete = (id: string) => {
+    let filterRows = props.uiElementGroupData.advancedSearch.filterRows.filter(
+      (filterRow: FilterExpressionViewModel) => filterRow.id !== id
+    );
+
+    let criteriaExpression = "";
+
+    filterRows = _.cloneDeep(filterRows)?.map(
+      (filterRow: FilterExpressionViewModel, index: number) => {
+        filterRow.idLabel = `(${index + 1})`;
+        criteriaExpression += filterRow.idLabel;
+        if (filterRows?.length - 1 !== index) {
+          criteriaExpression += ` ${filterRow.selectedFilter.selectedCriteria} `;
+        }
+        return filterRow;
+      }
+    );
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: filterRows,
+        criteria: criteriaExpression,
+      },
+      pagination: { ...props.uiElementGroupData.pagination, skip: 0 },
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchClear = () => {
+    const initialFilterRow = _.cloneDeep(getAdvancedSearchIntitialFilterRow());
+    initialFilterRow.allPropertieseToFilter = props.filterableFields;
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: [initialFilterRow],
+        criteria: "01",
+        appliedQuery: {
+          criteria: "",
+          filters: [],
+        },
+      },
+    };
+    props.handlePopupShow();
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onCriteriaApplied = () => {
+    const criteriaExpression = document.getElementById(
+      "tmpl-criteria-input-" + (props.config.uiElementGroupId ?? "")
+    )?.innerText;
+    const operators = [...(criteriaExpression?.matchAll(/AND|OR/gi) ?? [])].map(
+      (match) => match[0]
+    );
+
+    let filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+
+    filterRows = filterRows.map((filterRow: any, index: number) => {
+      if (filterRows?.length - 1 !== index) {
+        filterRow.selectedFilter.selectedCriteria = operators[index];
+      }
+
+      return filterRow;
+    });
+
+    const updatedAdvancedSearch = {
+      ...props.uiElementGroupData.advancedSearch,
+      filterRows: filterRows,
+      criteria: criteriaExpression ?? "",
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: updatedAdvancedSearch,
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onCopyToClipboard = async () => {
+    const criteria = document.getElementById(
+      "tmpl-criteria-input-" + (props.config.uiElementGroupId ?? "")
+    )?.innerText;
+    try {
+      await navigator.clipboard.writeText(criteria || "");
+    } catch (err) {
+      console.error("Unable to copy to clipboard", err);
+    }
+  };
+
+  const onAdvancedSearchCancel = () => {
+    const clonedFilterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+    const filterRows: FilterExpressionViewModel[] = [];
+    let criteria =
+      props.uiElementGroupData.advancedSearch.appliedQuery.criteria;
+
+    props.uiElementGroupData.advancedSearch.appliedQuery?.filters?.map(
+      (filter: any, index: number) => {
+        const clonedFilterRow = clonedFilterRows?.find(
+          (row: any) => row.id === filter.id
+        );
+
+        const filterRow: FilterExpressionViewModel = {
+          id: filter.id,
+          idLabel: `(${(index + 1).toString()})`,
+          selectedFilter: _.cloneDeep(filter),
+          allPropertieseToFilter: props.filterableFields,
+          alloperators: clonedFilterRow?.alloperators ?? [],
+          allValues: clonedFilterRow ? clonedFilterRow?.allValues : undefined,
+        };
+        criteria = criteria.replace(filter.id, filterRow.idLabel);
+        filterRows.push(filterRow);
+      }
+    );
+
+    const updatedAdvancedSearch = {
+      ...props.uiElementGroupData.advancedSearch,
+      filterRows: _.cloneDeep(filterRows),
+      criteria,
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: updatedAdvancedSearch,
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const onAdvancedSearchApply = () => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+
+    const selectedFilters: FilterExpression[] = [];
+    let criteria = props.uiElementGroupData?.advancedSearch?.criteria ?? "";
+
+    filterRows?.map((filterRow: FilterExpressionViewModel) => {
+      selectedFilters.push(filterRow.selectedFilter);
+      criteria = criteria.replace(filterRow.idLabel, filterRow.id);
+    });
+
+    const appliedQuery = {
+      criteria,
+      filters: selectedFilters,
+    };
+
+    const updatedAdvancedSearch = {
+      ...props.uiElementGroupData.advancedSearch,
+      appliedQuery: _.cloneDeep(appliedQuery),
+    };
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: updatedAdvancedSearch,
+      pagination: { ...props.uiElementGroupData.pagination, skip: 0 },
+    };
+    props.handlePopupShow();
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  const handleFilterAllValues = (result: any, id: string) => {
+    const filterRows = _.cloneDeep(
+      props.uiElementGroupData.advancedSearch.filterRows
+    );
+
+    const filterRow: FilterExpressionViewModel = filterRows.find(
+      (filterRow: FilterExpressionViewModel) => filterRow.id === id
+    );
+    if (filterRow) {
+      filterRow.allValues = result;
+    }
+
+    const updatedUiElementGroupData = {
+      ...props.uiElementGroupData,
+      advancedSearch: {
+        ...props.uiElementGroupData.advancedSearch,
+        filterRows: filterRows,
+      },
+    };
+
+    props.onModelUpdate(
+      null,
+      props.config.uiElementGroupId,
+      updatedUiElementGroupData
+    );
+  };
+
+  return (
+    <FilterPopupView
+      uiElementGroupId={props.config.uiElementGroupId}
+      filterRows={props.uiElementGroupData?.advancedSearch?.filterRows ?? []}
+      criteria={props.uiElementGroupData?.advancedSearch?.criteria ?? ""}
+      loadTemplateSupportiveData={props.loadTemplateSupportiveData}
+      onFilterTargetChange={onAdvancedSearchFilterTargetChange}
+      onOperatorChange={onAdvancedSearchOperatorChange}
+      onFilterValueChange={onAdvancedSearchFilterValueChange}
+      onCriteriaToggle={onAdvancedSearchCriteriaToggle}
+      onAddFilter={onAdvancedSearchFilterAdd}
+      onDeleteFilter={onAdvancedSearchFilterDelete}
+      onClear={onAdvancedSearchClear}
+      onCriteriaApplied={onCriteriaApplied}
+      onCopyToClipboard={onCopyToClipboard}
+      onCancel={onAdvancedSearchCancel}
+      onApply={onAdvancedSearchApply}
+      handleFilterAllValues={handleFilterAllValues}
+    />
+  );
+};
+
+export default FilterPopup;

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

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import FactoryRenderer from "../../../../Renderer";
+import {
+  FilterExpressionViewModel,
+  FilterTarget,
+} from "../../data/advancedSearch";
+import { Operator } from "../../enum";
+import Filter from "./Filter";
+
+interface FilterPopupViewProps {
+  uiElementGroupId: string;
+  filterRows: FilterExpressionViewModel[];
+  criteria: string;
+  loadTemplateSupportiveData?: (
+    callBack: (args: any) => void,
+    supportiveKeys: any
+  ) => Promise<any>;
+  onFilterTargetChange: (value: FilterTarget, id: string) => void;
+  onOperatorChange: (
+    value: { label: string; value: Operator | null },
+    id: string
+  ) => void;
+  onFilterValueChange: (value: any, id: string) => void;
+  onCriteriaToggle: (id: string) => void;
+  onAddFilter: (id: string) => void;
+  onDeleteFilter: (id: string) => void;
+  onClear: () => void;
+  onCriteriaApplied: () => void;
+  onCopyToClipboard: () => void;
+  onCancel: () => void;
+  onApply: () => void;
+  handleFilterAllValues: (result: any, id: string) => void;
+}
+
+const FilterPopupView = (props: FilterPopupViewProps) => {
+  return (
+    <>
+      <div className="tmpl-filter-container">
+        <div className="tmpl-filter">
+          <div className="tmpl-header-title">Filter</div>
+          <div className="tmpl-header-title">Operator</div>
+          <div className="tmpl-header-title">Value</div>
+          <div className="tmpl-header-title"></div>
+          <div className="tmpl-header-title"></div>
+        </div>
+        {props.filterRows?.map((filterRow: FilterExpressionViewModel) => (
+          <Filter
+            key={filterRow.id}
+            uiElementGroupId={props.uiElementGroupId}
+            filterRow={filterRow}
+            appliedfilterCount={props.filterRows.length}
+            loadTemplateSupportiveData={props.loadTemplateSupportiveData}
+            onFilterTargetChange={props.onFilterTargetChange}
+            onOperatorChange={props.onOperatorChange}
+            onFilterValueChange={props.onFilterValueChange}
+            onCriteriaToggle={props.onCriteriaToggle}
+            onAddFilter={props.onAddFilter}
+            onDeleteFilter={props.onDeleteFilter}
+            handleFilterAllValues={props.handleFilterAllValues}
+          />
+        ))}
+      </div>
+      <div className="tmpl-action-container">
+        <FactoryRenderer
+          title="Clear Filter"
+          onClick={props.onClear}
+          uiElementType="WIDGET"
+          widgetType="BUTTON"
+          widgetStyle={{ className: "tmpl-button" }}
+        />
+        <div className="tmpl-criteria-input-container" title={props.criteria}>
+          <p
+            id={`tmpl-criteria-input-${props.uiElementGroupId ?? ""}`}
+            className="tmpl-criteria-input"
+            contentEditable={true}
+          >
+            {props.criteria}
+          </p>
+          <FactoryRenderer
+            name="right"
+            widgetStyle={{ className: "tmpl-criteria-input-icon" }}
+            onClick={props.onCriteriaApplied}
+            uiElementType="WIDGET"
+            widgetType="ICON"
+          />
+          <FactoryRenderer
+            onClick={props.onCopyToClipboard}
+            widgetStyle={{ className: "tmpl-criteria-input-icon" }}
+            name="copy"
+            uiElementType="WIDGET"
+            widgetType="ICON"
+          />
+        </div>
+        <div>
+          <span className="tmpl-cancel-action" onClick={props.onCancel}>
+            Cancel
+          </span>
+          <FactoryRenderer
+            widgetStyle={{ className: "tmpl-button" }}
+            onClick={props.onApply}
+            uiElementType="WIDGET"
+            widgetType="BUTTON"
+            title="Apply Filter"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FilterPopupView;