From b1979d7351cd27a1e2ad95f74b1fe6d410f834b7 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Sat, 4 Nov 2023 19:49:25 -0300
Subject: [PATCH] Add a clear button that reset the filters values.

---
 src/assets/style/utils.css                   | 101 +++++++++++------
 src/components/Inputs/SelectInput.module.css |   6 +-
 src/components/Inputs/SelectInput.tsx        |  17 ++-
 src/components/Table/Table.tsx               | 110 +++++++++----------
 src/pages/games/index.astro                  |   6 +-
 5 files changed, 143 insertions(+), 97 deletions(-)

diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css
index 3b9c47e..58dda64 100644
--- a/src/assets/style/utils.css
+++ b/src/assets/style/utils.css
@@ -120,110 +120,141 @@
   text-align: end;
 }
 
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 /* Start Margins */
 .m-1 {
-  margin: var(--prj-spacing-1);
+  margin: var(--prj-spacing-1) !important;
 }
 .m-2 {
-  margin: var(--prj-spacing-2);
+  margin: var(--prj-spacing-2) !important;
 }
 .m-3 {
-  margin: var(--prj-spacing-3);
+  margin: var(--prj-spacing-3) !important;
 }
 .m-4 {
-  margin: var(--prj-spacing-4);
+  margin: var(--prj-spacing-4) !important;
 }
 .m-5 {
-  margin: var(--prj-spacing-5);
+  margin: var(--prj-spacing-5) !important;
+}
+.m-auto {
+  margin: auto !important;
 }
 .mx-1 {
-  margin-right: var(--prj-spacing-1) 0;
+  margin-right: var(--prj-spacing-1) 0 !important;
 }
 .mx-2 {
-  margin-right: var(--prj-spacing-2) 0;
+  margin-right: var(--prj-spacing-2) 0 !important;
 }
 .mx-3 {
-  margin-right: var(--prj-spacing-3) 0;
+  margin-right: var(--prj-spacing-3) 0 !important;
 }
 .mx-4 {
-  margin-right: var(--prj-spacing-4) 0;
+  margin-right: var(--prj-spacing-4) 0 !important;
 }
 .mx-5 {
-  margin-right: var(--prj-spacing-5) 0;
+  margin-right: var(--prj-spacing-5) 0 !important;
+}
+.mx-auto {
+  margin-right: auto 0 !important;
 }
 .my-1 {
-  margin-right: 0 var(--prj-spacing-1);
+  margin-right: 0 var(--prj-spacing-1) !important;
 }
 .my-2 {
-  margin-right: 0 var(--prj-spacing-2);
+  margin-right: 0 var(--prj-spacing-2) !important;
 }
 .my-3 {
-  margin-right: 0 var(--prj-spacing-3);
+  margin-right: 0 var(--prj-spacing-3) !important;
 }
 .my-4 {
-  margin-right: 0 var(--prj-spacing-4);
+  margin-right: 0 var(--prj-spacing-4) !important;
 }
 .my-5 {
-  margin-right: 0 var(--prj-spacing-5);
+  margin-right: 0 var(--prj-spacing-5) !important;
+}
+.my-auto {
+  margin-right: 0 auto !important;
 }
 .mt-1 {
-  margin-top: var(--prj-spacing-1);
+  margin-top: var(--prj-spacing-1) !important;
 }
 .mt-2 {
-  margin-top: var(--prj-spacing-2);
+  margin-top: var(--prj-spacing-2) !important;
 }
 .mt-3 {
-  margin-top: var(--prj-spacing-3);
+  margin-top: var(--prj-spacing-3) !important;
 }
 .mt-4 {
-  margin-top: var(--prj-spacing-4);
+  margin-top: var(--prj-spacing-4) !important;
 }
 .mt-5 {
-  margin-top: var(--prj-spacing-5);
+  margin-top: var(--prj-spacing-5) !important;
+}
+.mt-auto {
+  margin-top: auto !important;
 }
 .mb-1 {
-  margin-bottom: var(--prj-spacing-1);
+  margin-bottom: var(--prj-spacing-1) !important;
 }
 .mb-2 {
-  margin-bottom: var(--prj-spacing-2);
+  margin-bottom: var(--prj-spacing-2) !important;
 }
 .mb-3 {
-  margin-bottom: var(--prj-spacing-3);
+  margin-bottom: var(--prj-spacing-3) !important;
 }
 .mb-4 {
-  margin-bottom: var(--prj-spacing-4);
+  margin-bottom: var(--prj-spacing-4) !important;
 }
 .mb-5 {
-  margin-bottom: var(--prj-spacing-5);
+  margin-bottom: var(--prj-spacing-5) !important;
+}
+.mb-auto {
+  margin-bottom: auto !important;
 }
 .ml-1 {
-  margin-left: var(--prj-spacing-1);
+  margin-left: var(--prj-spacing-1) !important;
 }
 .ml-2 {
-  margin-left: var(--prj-spacing-2);
+  margin-left: var(--prj-spacing-2) !important;
 }
 .ml-3 {
-  margin-left: var(--prj-spacing-3);
+  margin-left: var(--prj-spacing-3) !important;
 }
 .ml-4 {
-  margin-left: var(--prj-spacing-4);
+  margin-left: var(--prj-spacing-4) !important;
 }
 .ml-5 {
-  margin-left: var(--prj-spacing-5);
+  margin-left: var(--prj-spacing-5) !important;
+}
+.ml-auto {
+  margin-left: auto !important;
 }
 .mr-1 {
-  margin-right: var(--prj-spacing-1);
+  margin-right: var(--prj-spacing-1) !important;
 }
 .mr-2 {
-  margin-right: var(--prj-spacing-2);
+  margin-right: var(--prj-spacing-2) !important;
 }
 .mr-3 {
-  margin-right: var(--prj-spacing-3);
+  margin-right: var(--prj-spacing-3) !important;
 }
 .mr-4 {
-  margin-right: var(--prj-spacing-4);
+  margin-right: var(--prj-spacing-4) !important;
 }
 .mr-5 {
-  margin-right: var(--prj-spacing-5);
+  margin-right: var(--prj-spacing-5) !important;
+}
+.mr-auto {
+  margin-right: var(--prj-spacing-5) !important;
 }
 /* End Margins */
diff --git a/src/components/Inputs/SelectInput.module.css b/src/components/Inputs/SelectInput.module.css
index 8960fff..ed2eb4d 100644
--- a/src/components/Inputs/SelectInput.module.css
+++ b/src/components/Inputs/SelectInput.module.css
@@ -6,6 +6,9 @@
   padding: var(--prj-spacing-1);
   background-color: var(--bg-color);
   color: var(--text-color);
+
+  display: flex;
+  gap: var(--prj-spacing-1);
 }
 
 .input {
@@ -16,9 +19,6 @@
   font-size: 0.8em;
 }
 
-.realInput {
-}
-
 .selectedItem {
   background-color: var(--prj-surface-3);
   color: var(--prj-text);
diff --git a/src/components/Inputs/SelectInput.tsx b/src/components/Inputs/SelectInput.tsx
index 7fb1dea..ba73e15 100644
--- a/src/components/Inputs/SelectInput.tsx
+++ b/src/components/Inputs/SelectInput.tsx
@@ -11,12 +11,14 @@ interface Props {
   options: [{ label: string; value: any }];
   keyData: string;
   isMultiple?: boolean;
+  value?: string | string[];
 }
 
 export default function SelectInput({
   options,
   isMultiple = false,
   onChange,
+  value = [],
 }: Props): JSX.Element {
   const [selected, setSelected] = useState<string[]>([]);
   const [filteredOptions, setFilteredOptions] = useState<Props['options']>([]);
@@ -33,12 +35,12 @@ export default function SelectInput({
       return;
     }
 
-    onChange(isMultiple ? selected : selected.at(0));
+    onChange(isMultiple ? selected : selected[0]);
   }, [selected]);
 
   const handleFocusInput = (): void => {
     setIsOptionsOpen(true);
-    inputRef.current.focus();
+    inputRef.current?.focus();
   };
 
   const handleAddElement = (item: any): void => {
@@ -49,6 +51,9 @@ export default function SelectInput({
       return [item];
     });
     setIsOptionsOpen(false);
+
+    if (inputRef.current === null) return;
+
     inputRef.current.value = '';
   };
 
@@ -111,6 +116,14 @@ export default function SelectInput({
           onChange={handleFilterOptions}
         />
       </div>
+      <button
+        onClick={() => {
+          onChange(null);
+          setSelected([]);
+        }}
+      >
+        X
+      </button>
       <div className={styles.optionList} hidden={!isOptionsOpen}>
         {filteredOptions.map((item, idx) => (
           <button
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 92fca97..382d85d 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import usePagination, { Offset } from 'src/hooks/usePagination';
 import {
   SelectFilter,
@@ -29,8 +29,11 @@ interface Props {
   headers: Header[];
 }
 
+type Value = string | string[] | number | number[] | null;
+
 export default function Table({ data, headers }: Props): JSX.Element {
   const [filters, setFilters] = useState<Record<string, Filter>>({});
+  const filtersKey = useRef(crypto.randomUUID());
 
   const filteredItems = useMemo(() => {
     return data.filter((item) => {
@@ -86,49 +89,31 @@ export default function Table({ data, headers }: Props): JSX.Element {
   }
 
   function formatFilter(header: Header): JSX.Element {
+    const baseProps = {
+      key: header.key + filtersKey.current,
+      keyData: header.key,
+      value: filters[header.key]?.value,
+      onChange: (value: Value) => {
+        handleUpdateFilters(header.key, header.type, value);
+      },
+    };
+
     switch (header.type) {
       case HeaderType.String:
         return (
           <input
             onChange={(e) => {
-              handleUpdateFilters(
-                header.key,
-                header.type,
-                e.target.value ?? null,
-              );
+              baseProps.onChange(e.target.value);
             }}
+            key={baseProps.key}
           />
         );
       case HeaderType.Number:
-        return (
-          <NumberInput
-            keyData={header.key}
-            onChange={(value) => {
-              handleUpdateFilters(header.key, header.type, value);
-            }}
-          />
-        );
+        return <NumberInput {...baseProps} />;
       case HeaderType.Select:
-        return (
-          <SelectFilter
-            data={data}
-            keyData={header.key}
-            onChange={(value) => {
-              handleUpdateFilters(header.key, header.type, value);
-            }}
-          />
-        );
+        return <SelectFilter data={data} {...baseProps} />;
       case HeaderType.Multiple:
-        return (
-          <SelectFilter
-            isMultiple
-            data={data}
-            keyData={header.key}
-            onChange={(value) => {
-              handleUpdateFilters(header.key, header.type, value);
-            }}
-          />
-        );
+        return <SelectFilter {...baseProps} isMultiple data={data} />;
 
       default:
         break;
@@ -139,32 +124,47 @@ export default function Table({ data, headers }: Props): JSX.Element {
 
   return (
     <>
-      <table style={{ width: '100%' }}>
-        <thead>
-          <tr>
-            {headers.map((item, idx) => (
-              <th key={idx}>
-                <div className="vstack">
-                  {item.header}
-                  {formatFilter(item)}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
+      <section className="hstack">
+        <button
+          className="ml-auto"
+          onClick={() => {
+            // FIXME: this clear the filters but not the value of the inputs
+            setFilters({});
+            filtersKey.current = crypto.randomUUID();
+          }}
+        >
+          Clear Filters
+        </button>
+      </section>
 
-        <tbody>
-          {items.map((item, idx) => (
-            <tr key={idx}>
-              {headers.map((header, hidx) => (
-                <td key={hidx}>{formatCell(item, header)}</td>
+      <section className="mt-1 overflow-scroll">
+        <table>
+          <thead>
+            <tr>
+              {headers.map((item, idx) => (
+                <th key={idx}>
+                  <div className="vstack">
+                    {item.header}
+                    {formatFilter(item)}
+                  </div>
+                </th>
               ))}
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
 
-      <section>
+          <tbody>
+            {items.map((item, idx) => (
+              <tr key={idx}>
+                {headers.map((header, hidx) => (
+                  <td key={hidx}>{formatCell(item, header)}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+
+      <section className="mt-1">
         <button
           onClick={() => {
             changeOffset(Offset.First);
diff --git a/src/pages/games/index.astro b/src/pages/games/index.astro
index 73b56af..653822f 100644
--- a/src/pages/games/index.astro
+++ b/src/pages/games/index.astro
@@ -20,7 +20,8 @@ const headers: Header[] = [
   {
     key: 'title',
     header: 'Title',
-    formatter: (data) => `<a href="games/${data.slug}">${data.title}</a>`,
+    // TODO: uncomment this when we are ready ton show a single page game.
+    // formatter: (data) => `<a href="games/${data.slug}">${data.title}</a>`,
     type: HeaderType.String,
   },
   {
@@ -58,7 +59,8 @@ const headers: Header[] = [
       {
         games.map((item) => (
           <li>
-            <a href={`games/${item.slug}`}>{item.title}</a>
+            {/* <a href={`games/${item.slug}`}>{item.title}</a> */}
+            {item.title}
           </li>
         ))
       }