Merge pull request #14 from salino3/add-filter-numbers-13

Add filter numbers 13
salino3 · Jul 6, 2024 · cdcdb7a · cdcdb7a
2 parents 43de2a4 + 7a72581
commit cdcdb7a
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 76 deletions.
diff --git a/src/common/table/components/input-text/input-text.component.tsx b/src/common/table/components/input-text/input-text.component.tsx
@@ -22,6 +22,7 @@ export const CustomInputText: React.FC<PropsInput> = ({
     <div className={`table_x02_rootCustomInputText ${Styles}`}>
       <div className="table_x02_containerInput">
         <input
+          autoFocus
           type={type}
           id={name}
           className="table_x02_inputText"

diff --git a/src/common/table/table.component.tsx b/src/common/table/table.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
@@ -16,7 +16,6 @@ interface TableProps {
   page?: number;
   pageSize?: number;
   setFlag?: React.Dispatch<React.SetStateAction<boolean>>;
-  flag?: boolean;
   setPage?: React.Dispatch<React.SetStateAction<number>>;
   setPageSize?: React.Dispatch<React.SetStateAction<number>>;
   rowPerPages?: number[];
@@ -29,7 +28,6 @@ export const TableComponet: React.FC<TableProps> = ({
   uniqueKey,
   page = 1,
   pageSize = 10,
-  flag = false,
   setFlag,
   setPage,
   setPageSize,
@@ -38,6 +36,8 @@ export const TableComponet: React.FC<TableProps> = ({
   // const keysToFilter = row.map((r, index) => r?.key || index);
   const keysToFilter = row.map((r) => r.key);
 
+  const popupRefs = useRef<any[]>([]);
+
   const [filtersTable, setFiltersTable] = useState<any>(
     row.map((r, index) => {
       return {
@@ -83,11 +83,11 @@ export const TableComponet: React.FC<TableProps> = ({
     console.log("here3", filtersTable);
     // Update the filters in the parent component
     filtersTable.forEach((filter: any) => {
-      if (filter.setFilter) {
-        filter.setFilter(filter.filter);
+      if (filter?.setFilter) {
+        filter?.setFilter(filter.filter);
       }
     });
-    setFlag && setFlag(!flag);
+    setFlag && setFlag((prev) => !prev);
   };
 
   const handleChange = (
@@ -103,9 +103,39 @@ export const TableComponet: React.FC<TableProps> = ({
     console.log("handleChange");
   };
 
+  const handleReset = (index: number) => {
+    setFiltersTable((prevFilters: any[]) =>
+      prevFilters.map((filter: any, i: number) =>
+        i === index ? { ...filter, filter: "" } : filter
+      )
+    );
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      popupRefs.current.forEach((ref, index) => {
+        if (ref && !ref.contains(event.target as Node)) {
+          setFiltersTable((prevFilters: any[]) => {
+            return prevFilters.map((filter: any, i: number) =>
+              i === index ? { ...filter, open: false } : filter
+            );
+          });
+        }
+      });
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <div className="table_x02_rootTableComponet">
       <div className="table_x02_containerTable">
+        <span className="table_x02_totalResults">
+          Total results: {totalData || "No data"}
+        </span>
         <table className="table">
           <thead>
             <tr>
@@ -115,13 +145,16 @@ export const TableComponet: React.FC<TableProps> = ({
                   <th
                     key={uniqueKey && r[uniqueKey] ? r[uniqueKey] : index}
                     scope="col"
-                    className={`table_x02_${r?.title}_${
+                    className={`table_x02_thHeader  table_x02_${r?.title}_${
                       uniqueKey && r[uniqueKey] ? r[uniqueKey] : index
                     }`}
                   >
                     {/* start Filter Pop up */}
                     {r?.typeFilter && filtersTable[index]?.open && (
-                      <div className="table_x02_containerFormFilter">
+                      <div
+                        className="table_x02_containerFormFilter"
+                        ref={(el) => (popupRefs.current[index] = el)}
+                      >
                         <form onSubmit={handleSubmit} id="table_x02_formFilter">
                           <span onClick={() => toggleFilterOpen(index)}>
                             <CancelIcon
@@ -133,38 +166,47 @@ export const TableComponet: React.FC<TableProps> = ({
 
                           <CustomInputText
                             handleChange={(event) => handleChange(event, index)}
-                            // handleChange={(event) =>
-                            //   setFiltersTable({
-                            //     ...filtersTable,
-                            //     [event?.target?.name]:
-                            //       filtersTable[index]?.filter,
-                            //   })
-                            // }
                             lbl={r?.typeFilter == "date" ? null : r?.title}
                             Styles="table_x02_inputFilter"
                             type={r?.typeFilter || "text"}
                             inputValue={filtersTable[index]?.filter}
                             name={r?.title}
                           />
-                          <button
-                            type="submit"
-                            className="btn btn-primary table_x02_btnFilter"
-                          >
-                            Confirm
-                          </button>
+                          <div className="table_x02_btnsContainer">
+                            <button
+                              type="submit"
+                              className="btn btn-primary table_x02_btnFilter"
+                            >
+                              Confirm
+                            </button>
+                            <button
+                              type="reset"
+                              onClick={() => handleReset(index)}
+                              className="btn btn-secondary table_x02_btnFilter"
+                            >
+                              Cancel
+                            </button>
+                          </div>
                         </form>
                       </div>
                     )}
                     {/* end Filter Pop up */}
-                    {r?.title}
+                    <span className="table_x02_spanTitleIcon">
+                      {r?.title}
 
-                    {r?.typeFilter && (
-                      <SearchIcon
-                        className="table_x02_iconSearchIcon"
-                        onClick={() => toggleFilterOpen(index)}
-                        style={{ cursor: "pointer" }}
-                      />
-                    )}
+                      {r?.typeFilter && (
+                        <SearchIcon
+                          className="table_x02_iconSearchIcon"
+                          onClick={() => toggleFilterOpen(index)}
+                          style={{
+                            cursor: "pointer",
+                            color: filtersTable[index]?.filter
+                              ? "var(--color-one)"
+                              : "",
+                          }}
+                        />
+                      )}
+                    </span>
                   </th>
                 ))}
             </tr>
@@ -270,7 +312,7 @@ export const TableComponet: React.FC<TableProps> = ({
                 className="table_x02_iconPagination"
               />
               <div className="table_x02_infoPagination">
-                {startRow} - {endRow} of {totalData || "No data"}
+                {startRow} - {endRow}
               </div>
               <KeyboardArrowRightIcon
                 style={{

diff --git a/src/common/table/table.styles.scss b/src/common/table/table.styles.scss
@@ -11,6 +11,15 @@
     justify-content: center;
     align-items: stretch;
 
+    .table_x02_totalResults {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      font-weight: bold;
+      font-size: 20px;
+      min-width: max-content;
+    }
+
     .table {
       thead th:first-child {
         border-radius: 12px 0 0 0 !important;
@@ -41,45 +50,61 @@
       thead th {
         position: relative;
       }
-      .table_x02_iconSearchIcon {
-        position: absolute;
-        left: 50px;
-      }
-      thead {
-        position: relative;
-        //* Form
-        .table_x02_containerFormFilter {
-          z-index: 999999;
-          min-height: 110px;
-          box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
-            rgba(0, 0, 0, 0.22) 0px 15px 12px;
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          background-color: var(--color-three);
-          padding: 0 0.25rem 0.5rem;
-          border-radius: 1rem;
 
-          #table_x02_formFilter {
+      thead {
+        .table_x02_thHeader {
+          //* Form
+          .table_x02_containerFormFilter {
+            z-index: 999999;
+            min-height: 110px;
+            box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
+              rgba(0, 0, 0, 0.22) 0px 15px 12px;
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
-            justify-content: center;
-            align-items: stretch;
-            span {
-              align-self: end;
-              cursor: pointer;
-            }
-            .table_x02_inputFilter {
-            }
-            .table_x02_btnFilter {
+            position: absolute;
+            background-color: var(--color-three);
+            padding: 0 0.25rem 0.5rem;
+            border-radius: 1rem;
+
+            #table_x02_formFilter {
               display: flex;
               flex-direction: column;
+              gap: 0.5rem;
               justify-content: center;
-              align-items: center;
-              height: 2.2rem;
-              font-size: 1.2rem;
-              letter-spacing: 2px;
+              align-items: stretch;
+              span {
+                align-self: end;
+                cursor: pointer;
+              }
+              .table_x02_inputFilter {
+              }
+              .table_x02_btnsContainer {
+                display: flex;
+                flex-direction: row;
+                gap: 1rem;
+                justify-content: space-between;
+                align-items: center;
+
+                .table_x02_btnFilter {
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                  height: 2.2rem;
+                  font-size: 1.2rem;
+                  letter-spacing: 1px;
+                  width: 5.5rem;
+                }
+              }
+            }
+          }
+
+          .table_x02_spanTitleIcon {
+            display: flex;
+            flex-direction: row;
+            gap: 0.5rem;
+            width: fit-content;
+            .table_x02_iconSearchIcon {
             }
           }
         }
@@ -125,7 +150,6 @@
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;
-        border: solid 1px;
         border-radius: 1rem;
         padding: 0.1rem 0.5rem;
         width: fit-content;

diff --git a/src/core/mock-data.tsx b/src/core/mock-data.tsx
@@ -47,7 +47,7 @@ export const mockPaginationData: Pagination = {
       id: 1,
       name: "Arianna",
       city: "Berlin",
-      email: "arianna@gmail.com",
+      email: "arianna@gmail.es",
       age: 32,
       gender: Gender.Female,
       employee: true,