From f20cb5b44c7119b1d1783c5f5de68d4ce1373d3a Mon Sep 17 00:00:00 2001
From: Muhammad Fajar <muhammadfajar191@gmail.com>
Date: Wed, 7 Dec 2022 03:10:02 +0700
Subject: [PATCH] fix table dashboard

---
 .../src/sections/dashboard/TableList.tsx      | 131 ++++++++----------
 1 file changed, 57 insertions(+), 74 deletions(-)

diff --git a/frontend/client-portal/src/sections/dashboard/TableList.tsx b/frontend/client-portal/src/sections/dashboard/TableList.tsx
index 6364a6b1..4073d089 100755
--- a/frontend/client-portal/src/sections/dashboard/TableList.tsx
+++ b/frontend/client-portal/src/sections/dashboard/TableList.tsx
@@ -30,7 +30,6 @@ import palette from '../../theme/palette';
 import { useSearchParams } from 'react-router-dom';
 
 /* ---------------------------------- types --------------------------------- */
-
 type PaginationTableProps = {
   current_page: number;
   from: number;
@@ -64,11 +63,9 @@ interface EnhancedTableProps {
   order: Order;
   orderBy: string;
 }
-
 /* -------------------------------------------------------------------------- */
 
 /* -------------------------- enchanced table head -------------------------- */
-
 const headCells: readonly HeadCell[] = [
   {
     id: 'member_id',
@@ -141,7 +138,6 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
     </TableHead>
   );
 }
-
 /* -------------------------------------------------------------------------- */
 
 export default function TableList() {
@@ -180,7 +176,6 @@ export default function TableList() {
   /* -------------------------------------------------------------------------- */
 
   /* ----------------------------- Field Container ---------------------------- */
-
   /* ----------------------------- division field ----------------------------- */
   const optionDivisions = ['All'];
 
@@ -190,10 +185,6 @@ export default function TableList() {
   /* ------------------------------ Search field ------------------------------ */
   const [searchText, setSearchText] = useState('');
 
-  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(event.target.value);
-  };
-
   const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsLoading(true);
@@ -223,72 +214,9 @@ export default function TableList() {
     setAnchorEl(event.currentTarget);
   };
   /* -------------------------------------------------------------------------- */
-
-  const FieldContainer = () => (
-    <Grid container spacing={2}>
-      <Grid item xs={12} lg={3} xl={2}>
-        <Autocomplete
-          disablePortal
-          options={optionDivisions}
-          value={value}
-          onChange={(event: any, newValue: string | null) => {
-            console.log(newValue);
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} label="Division" />}
-        />
-      </Grid>
-      <Grid item xs={12} lg={5} xl={6}>
-        <form onSubmit={handleSearchSubmit}>
-          <TextField
-            id="search-input"
-            label="Search"
-            variant="outlined"
-            onChange={handleSearch}
-            value={searchText}
-            fullWidth
-          />
-        </form>
-      </Grid>
-      <Grid item xs={12} lg={2} xl={2}>
-        <Button
-          id="import-button"
-          variant="outlined"
-          startIcon={<Iconify icon="material-symbols:download-rounded" />}
-          component="label"
-          fullWidth
-          sx={{ height: '100%' }}
-        >
-          Import
-          <input
-            type="file"
-            id="file"
-            ref={importForm}
-            style={{ display: 'none' }}
-            onChange={handleImportChange}
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
-          />
-        </Button>
-      </Grid>
-      <Grid item xs={12} lg={2} xl={2}>
-        <Button
-          id="import-button"
-          variant="contained"
-          startIcon={<AddIcon />}
-          onClick={handleClick}
-          fullWidth
-          sx={{ height: '100%' }}
-        >
-          Add Data
-        </Button>
-      </Grid>
-    </Grid>
-  );
-
   /* -------------------------------------------------------------------------- */
 
   /* ---------------------------- table pagination ---------------------------- */
-
   /* ------------------------ button change pagination ------------------------ */
   const onPageChangeHandle = async (
     event: React.MouseEvent<HTMLButtonElement> | null,
@@ -318,7 +246,6 @@ export default function TableList() {
     setIsLoading(false);
   };
   /* -------------------------------------------------------------------------- */
-
   /* -------------------------------------------------------------------------- */
 
   useEffect(() => {
@@ -354,7 +281,63 @@ export default function TableList() {
       <Grid container>
         {/* Field 1 */}
         <Grid item xs={12} paddingX="24px" paddingY="20px">
-          <FieldContainer />
+          <Grid container spacing={2}>
+            <Grid item xs={12} lg={3} xl={2}>
+              <Autocomplete
+                disablePortal
+                options={optionDivisions}
+                value={value}
+                onChange={(event: any, newValue: string | null) => {
+                  setValue(newValue);
+                }}
+                renderInput={(params) => <TextField {...params} label="Division" />}
+              />
+            </Grid>
+            <Grid item xs={12} lg={5} xl={6}>
+              <form onSubmit={handleSearchSubmit}>
+                <TextField
+                  id="search-input"
+                  label="Search"
+                  variant="outlined"
+                  onChange={(event) => setSearchText(event.target.value)}
+                  value={searchText}
+                  fullWidth
+                />
+              </form>
+            </Grid>
+            <Grid item xs={12} lg={2} xl={2}>
+              <Button
+                id="import-button"
+                variant="outlined"
+                startIcon={<Iconify icon="material-symbols:download-rounded" />}
+                component="label"
+                fullWidth
+                sx={{ height: '100%' }}
+              >
+                Import
+                <input
+                  type="file"
+                  id="file"
+                  ref={importForm}
+                  style={{ display: 'none' }}
+                  onChange={handleImportChange}
+                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+                />
+              </Button>
+            </Grid>
+            <Grid item xs={12} lg={2} xl={2}>
+              <Button
+                id="import-button"
+                variant="contained"
+                startIcon={<AddIcon />}
+                onClick={handleClick}
+                fullWidth
+                sx={{ height: '100%' }}
+              >
+                Add Data
+              </Button>
+            </Grid>
+          </Grid>
         </Grid>
         {/* End Field 1 */}
         {/* Field 2 */}