rez-table-listing-mui 1.0.32 → 1.0.34

package/src/components/index-table.tsx

@@ -34,6 +34,7 @@ function TableWrapper<T>({
   // styleOptions,
   shouldHideColumn,
   emptyListComponent,
+  filterOptions,
 }: CraftTableProps<T>) {
   if (!Array.isArray(data)) {
     throw new Error("data must be an array of objects.");
@@ -242,80 +243,103 @@ function TableWrapper<T>({
   //   className: "ts__table__wrapper",
   // };
 
+  const showFilterCondition = filterOptions?.show;
+
   return (
-    <div className="ts__table__container" ref={tableRef}>
-      {enableTopbar && (
-        <Topbar
-          table={table}
-          topbarOptions={craftTopbarOptions}
-          isCompactTable={isCompactTable}
-          setIsCompactTable={setIsCompactTable}
-          isFullscreen={isFullscreen}
-          fullscreenToggle={handleFullscreenToggle}
-          paginationComponent={
-            craftPaginationOptions?.showPagination === true &&
-            craftPaginationOptions?.paginationPosition === "top" ? (
-              <DefaultPagination
-                table={table}
-                rowsPerPageArray={rowsPerPageArray}
-                paginationOptions={craftPaginationOptions}
-              />
-            ) : null
-          }
-          // searchValue={searchValue} // 👈 new
-          // onSearchChange={onSearchChange}
-          tableStates={tableStates}
-        />
-      )}
-
-      {isLoading ? (
-        loadingComponent ?? (
-          <div className="ts__loader">
-            <LoaderAnimation />
-            {loaderText && <p>{loaderText}</p>}
-          </div>
-        )
-      ) : !isLoading && data.length === 0 && emptyListComponent ? (
-        emptyListComponent
-      ) : (
+    <div className="ts__table__container">
+      <div
+        className={`ts__table__layout ${
+          showFilterCondition ? "has-filter" : ""
+        }`}
+      >
+        {/* Main Table Area */}
         <div
-          // {...tableWrapperProps}
-          className={`ts__table__wrapper ${
-            isFullscreen ? "is-fullscreen" : ""
-          }`}
+          className={`ts__table__main ${isFullscreen ? "is-fullscreen" : ""}`}
+          ref={tableRef}
         >
-          {enableColumnReordering ? (
-            <TableDND
+          {enableTopbar && (
+            <Topbar
               table={table}
-              columnOrder={columnOrder}
-              featureOptions={craftFeatureOptions}
-              NestedComponent={nestedComponent}
-              setColumnOrder={setColumnOrder}
+              topbarOptions={craftTopbarOptions}
               isCompactTable={isCompactTable}
+              setIsCompactTable={setIsCompactTable}
+              isFullscreen={isFullscreen}
+              fullscreenToggle={handleFullscreenToggle}
+              paginationComponent={
+                craftPaginationOptions?.showPagination === true &&
+                craftPaginationOptions?.paginationPosition === "top" ? (
+                  <DefaultPagination
+                    table={table}
+                    rowsPerPageArray={rowsPerPageArray}
+                    paginationOptions={craftPaginationOptions}
+                  />
+                ) : null
+              }
+              // searchValue={searchValue} // 👈 new
+              // onSearchChange={onSearchChange}
               tableStates={tableStates}
+              onFilterButtonClick={topbarOptions?.onFilterButtonClick}
             />
+          )}
+
+          {isLoading ? (
+            loadingComponent ?? (
+              <div className="ts__loader">
+                <LoaderAnimation />
+                {loaderText && <p>{loaderText}</p>}
+              </div>
+            )
+          ) : !isLoading && data.length === 0 && emptyListComponent ? (
+            emptyListComponent
           ) : (
-            <Table
+            <div
+              // {...tableWrapperProps}
+              className={`ts__table__wrapper ${
+                isFullscreen ? "is-fullscreen" : ""
+              }`}
+            >
+              {enableColumnReordering ? (
+                <TableDND
+                  table={table}
+                  columnOrder={columnOrder}
+                  featureOptions={craftFeatureOptions}
+                  NestedComponent={nestedComponent}
+                  setColumnOrder={setColumnOrder}
+                  isCompactTable={isCompactTable}
+                  tableStates={tableStates}
+                />
+              ) : (
+                <Table
+                  table={table}
+                  featureOptions={craftFeatureOptions}
+                  NestedComponent={nestedComponent}
+                  columnOrder={columnOrder}
+                  setColumnOrder={setColumnOrder}
+                  isCompactTable={isCompactTable}
+                  tableStates={tableStates}
+                />
+              )}
+            </div>
+          )}
+
+          {craftPaginationOptions?.showPagination === true &&
+          craftPaginationOptions?.paginationPosition === "bottom" ? (
+            <DefaultPagination
               table={table}
-              featureOptions={craftFeatureOptions}
-              NestedComponent={nestedComponent}
-              columnOrder={columnOrder}
-              setColumnOrder={setColumnOrder}
-              isCompactTable={isCompactTable}
-              tableStates={tableStates}
+              rowsPerPageArray={rowsPerPageArray}
+              paginationOptions={craftPaginationOptions}
             />
-          )}
+          ) : null}
+        </div>
+
+        <div
+          className={`ts__table__filter ${
+            showFilterCondition ? "show" : ""
+          }`.trim()}
+        >
+          {filterOptions?.component && filterOptions?.component}
         </div>
-      )}
-
-      {craftPaginationOptions?.showPagination === true &&
-      craftPaginationOptions?.paginationPosition === "bottom" ? (
-        <DefaultPagination
-          table={table}
-          rowsPerPageArray={rowsPerPageArray}
-          paginationOptions={craftPaginationOptions}
-        />
-      ) : null}
+      </div>
     </div>
   );
 }

package/src/components/index.scss

@@ -8,6 +8,7 @@
   --grey-600: #bbbbbd;
   --grey-700: #77787b;
   --grey-900: #414042;
+  --filter-width: 24rem;
 
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -17,6 +18,38 @@
     box-sizing: border-box;
   }
 
+  .ts__table__layout {
+    display: flex;
+    width: calc(100% - var(--filter-width));
+    transition: all 0.4s ease-in-out;
+
+    .ts__table__filter {
+      width: 0rem;
+      opacity: 0;
+      margin-right: calc(-1 * var(--filter-width));
+      transition: all 0.4s ease-in-out;
+      max-height: calc(100vh - 50px);
+    }
+    .ts__table__filter.show {
+      transition: all 0.4s ease-in-out;
+      opacity: 1;
+      width: var(--filter-width);
+      max-width: var(--filter-width);
+      margin-left: 1.25rem;
+      margin-right: 0rem;
+      min-height: calc(100vh - 50px);
+    }
+  }
+
+  .ts__table__layout.has-filter {
+    width: 100%;
+  }
+
+  .ts__table__main {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
   .ts__loader {
     display: flex;
     flex-direction: column;

package/src/components/topbar/index.tsx

@@ -17,7 +17,6 @@ import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
 import TableSearch from "../search/index.tsx";
-import FilterDrawer from "../filter/index.tsx";
 
 interface TopbarProps<T> {
   table: Table<T>;
@@ -32,6 +31,7 @@ interface TopbarProps<T> {
   tableStates: CraftTableOptionsProps;
   searchValue?: string;
   onSearchChange?: (val: string) => void;
+  onFilterButtonClick?: () => void;
 }
 
 function Topbar<T>({
@@ -43,6 +43,7 @@ function Topbar<T>({
   paginationComponent,
   topbarOptions,
   tableStates,
+  onFilterButtonClick,
 }: TopbarProps<T>) {
   const [isFullscreenState, setIsFullscreenState] = useState(isFullscreen);
   const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
@@ -61,7 +62,7 @@ function Topbar<T>({
   );
 
   //Filter
-  const [showFilterInput, setShowFilterInput] = useState(false);
+  // const [showFilterInput, setShowFilterInput] = useState(false);
 
   // search
   const [showSearchInput, setShowSearchInput] = useState(false);
@@ -83,17 +84,6 @@ function Topbar<T>({
     showSearch,
     searchValue,
     onSearchChange,
-    filterOptions = {
-      columnsData: {
-        column_list: [],
-        operation_list: {},
-        saved_filter: [],
-      },
-      onDeleteFilter: () => {},
-      onSaveFilter: () => {},
-      dropdownData: [],
-      onUpdateFilter: () => {},
-    },
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -118,9 +108,9 @@ function Topbar<T>({
     handler: () => setShowSearchInput(false),
   });
 
-  const handleFilterDrawer = () => {
-    setShowFilterInput((prev) => !prev);
-  };
+  // const handleFilterDrawer = () => {
+  //   setShowFilterInput((prev) => !prev);
+  // };
 
   return (
     <div className="ts-topbar">
@@ -152,12 +142,6 @@ function Topbar<T>({
               onClose={() => setLayoutAnchorEl(null)}
               anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
               container={fullscreenContainer}
-              // transformOrigin={{ vertical: "top", horizontal: "left" }}
-              // PaperProps={{
-              //   sx: {
-              //     mt: 2,
-              //   },
-              // }}
               sx={{
                 mt: 2.2,
               }}
@@ -214,19 +198,9 @@ function Topbar<T>({
           <div
             className="filter ts--button"
             title="Filter"
-            onClick={() => setShowFilterInput(true)}
+            onClick={onFilterButtonClick && onFilterButtonClick}
           >
             <FilterationIcon />
-            <FilterDrawer
-              tableStates={tableStates}
-              open={showFilterInput}
-              onClose={handleFilterDrawer}
-              onDeleteFilter={filterOptions?.onDeleteFilter}
-              columnsData={filterOptions.columnsData} // @ts-ignore
-              onSaveFilter={filterOptions?.onSaveFilter}
-              dropdownData={filterOptions.dropdownData}
-              onUpdateFilter={filterOptions?.onUpdateFilter}
-            />
           </div>
         )}
 

package/src/index.ts

@@ -1,5 +1,7 @@
 export { default as TableWrapper } from "./components/index-table";
 export { useCraftTable } from "./libs/hooks/useCraftTable";
 export { TableTabs as CraftTableTabs } from "./components/tabs";
+export { TableFilter as CraftTableFilter } from "./components/filter";
+
 export * from "./types/table";
 export * from "./types/table-options";

package/src/libs/utils/common.ts

@@ -101,4 +101,4 @@ api.interceptors.request.use(
   }
 );
 
-export const ENTITY_TYPE = "NTM";
+export const ENTITY_TYPE = "UPR";

package/src/types/filter.ts

@@ -19,6 +19,7 @@ export type FilterInputDataTypes =
   | "select"
   | "multiselect"
   | "date"
+  | "year"
   | "number";
 
 export interface FilterColumnsListProps {

package/src/types/table.ts

@@ -10,7 +10,6 @@ import {
   CraftTableOptionsProps,
 } from "./table-options";
 import React from "react";
-import { FilterDrawerProps } from "./filter";
 
 export interface CraftTablePaginationProps {
   totalRows?: number;
@@ -39,7 +38,7 @@ export interface TopbarOptionsProps {
   showFilterToggle?: boolean;
   searchValue?: string;
   onSearchChange?: (val: string) => void;
-  filterOptions?: FilterDrawerProps;
+  onFilterButtonClick?: () => void;
 }
 
 export interface CustomRenderContext<T> {
@@ -66,6 +65,11 @@ interface CraftTableStyleProps {
   wrapperStyle?: React.CSSProperties;
 }
 
+interface FilterOptionsProps {
+  show?: boolean;
+  component: React.ReactNode;
+}
+
 export interface CraftTableProps<T> {
   data: T[];
   columns: CustomColumnDef<T>[];
@@ -79,6 +83,7 @@ export interface CraftTableProps<T> {
   shouldHideColumn?: (accessorKey?: string) => boolean;
   styleOptions?: CraftTableStyleProps;
   emptyListComponent?: React.ReactNode;
+  filterOptions?: FilterOptionsProps;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;

package/src/components/filter/components/forms/components/Attributes-select.tsx

@@ -1,192 +0,0 @@
-import {
-  Box,
-  FormControl,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  Radio,
-  RadioGroup,
-  FormControlLabel,
-} from "@mui/material";
-import {
-  AttributesFilterSelectProps,
-  FilterMasterStateProps,
-} from "../../../../../types/filter";
-import { useMemo } from "react";
-import CustomSearch from "../../search";
-
-const SelectAttribute = ({
-  columnsData,
-  tableStates,
-  dropdownData,
-  searchTerm = "",
-  setSearchTerm,
-  tabValue,
-}: AttributesFilterSelectProps) => {
-  const { filterMaster, setFilterMaster, filters, setFilters } = tableStates;
-
-  const selectedAttribute = filterMaster?.attributes?.selected;
-
-  // Get the current filter value to set radio button state
-  const currentFilterValue = useMemo(() => {
-    if (!selectedAttribute) return "";
-
-    const matchingColumn = columnsData.column_list.find(
-      (column) => column.datasource_list === selectedAttribute
-    );
-
-    if (!matchingColumn) return "";
-
-    const existingFilter = filters.find(
-      (filter) => filter.filter_attribute === matchingColumn.attribute_key
-    );
-
-    return existingFilter?.filter_value || "";
-  }, [selectedAttribute, filters, columnsData]);
-
-  const handleSelectChange = (event: SelectChangeEvent) => {
-    const attributeKey = event.target.value as string;
-
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          attributes: {
-            ...prev?.attributes,
-            selected: attributeKey,
-            radio: "", // Reset radio selection when changing attribute
-          },
-        } as FilterMasterStateProps)
-    );
-  };
-
-  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
-
-    const selectedValue = event.target.value;
-
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          attributes: {
-            ...prev?.attributes,
-            radio: selectedValue,
-          },
-          activeFilterTabIndex: tabValue,
-        } as FilterMasterStateProps)
-    );
-
-    const selectedAttribute = filterMaster?.attributes.selected;
-    if (selectedAttribute) {
-      const matchingColumn = columnsData.column_list.find(
-        (column) => column.datasource_list === selectedAttribute
-      );
-      if (matchingColumn) {
-        const defaultOperator =
-          columnsData.operation_list[matchingColumn.data_type]?.[0]?.value ||
-          "equals";
-        const newFilter = {
-          filter_attribute: matchingColumn.attribute_key,
-          filter_operator: defaultOperator,
-          filter_value: selectedValue,
-        };
-
-        setFilters([newFilter]);
-      }
-    }
-  };
-
-  const selectedAttributeOptions = useMemo(() => {
-    const selected = columnsData.column_list.find(
-      (col) => col.datasource_list === selectedAttribute
-    )?.attribute_key;
-
-    return selected ? dropdownData[selected] : [];
-  }, [selectedAttribute, dropdownData]);
-
-  return (
-    <Box sx={{ mt: 2 }}>
-      <FormControl fullWidth size="small">
-        <Select
-          value={selectedAttribute || ""}
-          onChange={handleSelectChange}
-          displayEmpty
-          renderValue={(selected) => {
-            if (!selected) {
-              return <span>Select Attribute</span>;
-            }
-            return columnsData?.column_list?.find(
-              (col) => col.datasource_list === selected
-            )?.name;
-          }}
-          sx={{
-            "& .MuiOutlinedInput-root": {
-              borderRadius: "6px",
-              fontSize: "14px",
-              bgcolor: "#fafafa",
-              "& fieldset": {
-                borderColor: "#7a5af8 !important",
-              },
-              "&:hover fieldset": {
-                borderColor: "#7a5af8 !important",
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: "#7a5af8 !important",
-                boxShadow: "none",
-              },
-            },
-            "& .MuiSelect-select": {
-              padding: "8px 14px",
-            },
-          }}
-        >
-          {columnsData?.column_list
-            ?.filter((column) => column.data_type.includes("select"))
-            .map((column, index) => (
-              <MenuItem
-                key={index}
-                value={column.datasource_list}
-                disabled={column.datasource_list === selectedAttribute}
-              >
-                {column.name}
-              </MenuItem>
-            ))}
-        </Select>
-        {selectedAttribute && (
-          <CustomSearch value={searchTerm} onChange={setSearchTerm} />
-        )}
-      </FormControl>
-
-      {dropdownData && (
-        <Box sx={{ mt: 2 }}>
-          <FormControl>
-            <RadioGroup
-              onChange={handleRadioChange}
-              value={currentFilterValue} // Set the value from current filter
-            >
-              {selectedAttributeOptions
-                ?.filter((option) => {
-                  if (!searchTerm) return true;
-
-                  return option.label
-                    .toLowerCase()
-                    .includes(searchTerm.toLowerCase());
-                })
-                .map((option) => (
-                  <FormControlLabel
-                    key={option.value}
-                    value={option.value}
-                    control={<Radio />}
-                    label={option.label}
-                  />
-                ))}
-            </RadioGroup>
-          </FormControl>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export default SelectAttribute;