hide notification dashboard & add search employee data

2024-01-02 11:31:39 +07:00
parent b7ff05bc87
commit df4bd6946f
6 changed files with 226 additions and 223 deletions
--- a/app/Services/CorporateMemberService.php
+++ b/app/Services/CorporateMemberService.php
@@ -203,6 +203,12 @@ class CorporateMemberService
            ->whereHas('employeds', function ($query) use ($corporateId) {
                $query->where('corporate_id', $corporateId);
            })
+            ->when($request->input('search'), function ($query, $search) {
+                $query->where(function ($query) use ($search) {
+                    $query->orWhere('member_id', 'like', "%" . $search . "%")
+                        ->orWhere('name', 'like', "%" . $search . "%");
+                });
+            })
            ->when($request->has('orderBy'), function ($query) use ($request) {
                $orderBy = match ($request->input('orderBy')) {
                    'memberId' => 'member_id',
--- a/frontend/client-portal/src/@types/table.ts
+++ b/frontend/client-portal/src/@types/table.ts
@@ -84,6 +84,7 @@ export type TableListProps<DataType> = {
  };
  searchs?: {
    useSearchs: boolean;
+    fullWidth?: boolean;
    searchText: string;
    setSearchText: Dispatch<SetStateAction<string>>;
    handleSearchSubmit: (event: FormEvent<HTMLFormElement>) => void;
--- a/frontend/client-portal/src/components/Table.tsx
+++ b/frontend/client-portal/src/components/Table.tsx
@@ -1,5 +1,4 @@
 /* ---------------------------------- @mui ---------------------------------- */
-import { styled } from '@mui/material/styles';
 import {
  Paper,
  Table as TableContent,
@@ -12,49 +11,23 @@ import {
  Button,
  TableSortLabel,
  Box,
-  Card,
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
-  SelectChangeEvent,
-  Stack,
+  InputAdornment,
  Typography,
-  LinearProgress,
-  linearProgressClasses,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
-/* ---------------------------------- axios --------------------------------- */
-import axios from '../utils/axios';
 /* ---------------------------------- react --------------------------------- */
-import { Fragment, useContext, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { Fragment } from 'react';
 /* -------------------------------- component ------------------------------- */
 import BaseTablePagination from './BaseTablePagination';
-/* ---------------------------------- theme --------------------------------- */
-import palette from '../theme/palette';
 /* ---------------------------------- utils --------------------------------- */
-import { UserCurrentCorporateContext } from '../contexts/UserCurrentCorporate';
-import { fSplit } from '../utils/formatNumber';
-import { Download, Search as SearchIcon, Upload } from '@mui/icons-material';
+import { Download, Search as SearchIcon } from '@mui/icons-material';
 /* ---------------------------------- types --------------------------------- */
-import { DivisionDataProps, Order, PaginationTableProps, TableListProps } from '../@types/table';
-import { InputAdornment } from '@mui/material';
-import GetAppIcon from '@mui/icons-material/GetApp';
-/* --------------------------------- styled --------------------------------- */
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 6,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: '#D1F1F1',
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 6,
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-/* -------------------------------------------------------------------------- */
+import { DivisionDataProps, StatusDataProps, TableListProps } from '../@types/table';

 export default function Table<T>({
  headCells,
@@ -136,7 +109,7 @@ export default function Table<T>({
    const parameters = Object.fromEntries([
      ...params.searchParams.entries(),
      ['page', newPage + 1],
-      ['per_page', paginations.rowsPerPage]
+      ['per_page', paginations.rowsPerPage],
    ]);
    paginations.setPage(newPage);
    await new Promise((resolve) => setTimeout(resolve, 500));
@@ -187,13 +160,13 @@ export default function Table<T>({
                </FormControl>
              </Grid>
              <Grid item xs={12} lg={9} xl={10}>
-                  <form onSubmit={searchs.handleSearchSubmit}>
+                <form onSubmit={searchs?.handleSearchSubmit}>
                  <TextField
                    id="search-input"
                    label="Search"
                    variant="outlined"
-                      onChange={(event) => searchs.setSearchText(event.target.value)}
-                      value={searchs.searchText}
+                    onChange={(event) => searchs?.setSearchText(event.target.value)}
+                    value={searchs?.searchText}
                    fullWidth
                  />
                </form>
@@ -223,8 +196,8 @@ export default function Table<T>({
                    />
                  </form>
                </Grid>
-                ) :
-                  <Grid item xs={12} lg={6} xl={6}>
+              ) : (
+                <Grid item xs={12} lg={searchs.fullWidth ? 12 : 6} xl={searchs.fullWidth ? 12 : 6}>
                  <form onSubmit={searchs.handleSearchSubmit}>
                    <TextField
                      id="search-input"
@@ -243,8 +216,7 @@ export default function Table<T>({
                    />
                  </form>
                </Grid>
-                }
-                  
+              )}
            </Fragment>
          ) : null}

@@ -302,7 +274,7 @@ export default function Table<T>({
                  onChange={filterStatus.config.handleStatusChange}
                >
                  <MenuItem value="all">All</MenuItem>
-                    {filterStatus.config.filterData.map((row: StatusDataProps, index) => (
+                  {filterStatus.config.statusData.map((row: StatusDataProps, index) => (
                    <MenuItem key={index} value={row.id}>
                      {row.name}
                    </MenuItem>
@@ -313,18 +285,22 @@ export default function Table<T>({
          ) : null}

          {/* Export Report */}
-
          {exportReport && exportReport.useExport ? (
            <Grid item xs={12} lg={2} xl={2}>
              <FormControl fullWidth>
-                  <Button variant='contained' sx={{p:2}} onClick={exportReport.handleExportReport}>
+                <Button
+                  variant="contained"
+                  sx={{ p: 2 }}
+                  onClick={() => exportReport.handleExportReport}
+                >
                  <Download />
-                    <Typography variant='inherit' sx={{marginLeft: 1}}>Export</Typography> 
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Export
+                  </Typography>
                </Button>
              </FormControl>
            </Grid>
          ) : null}
-
        </Grid>
      </Grid>
      {/* End Field 1 */}
@@ -338,7 +314,7 @@ export default function Table<T>({
            {/* End Table Header */}
            {/* Table Body */}
            <TableBody>
-                {loadings.isLoading && rows.length >= 1  ? (
+              {loadings.isLoading && rows && rows.length >= 1 ? (
                <TableRow>
                  <TableCell colSpan={headCells?.length} align="center">
                    Loading . . .
--- a/frontend/client-portal/src/layouts/dashboard/index.tsx
+++ b/frontend/client-portal/src/layouts/dashboard/index.tsx
@@ -60,9 +60,8 @@ export default function DashboardLayout() {

  const [corporateValue, setCorporateValue] = useLocalStorage(
    'corporateValue',
-    user.corporate ? `${user.corporate.id}` : ''
+    user && user.corporate ? `${user.corporate.id}` : ''
  );
-  const value = { corporateValue, setCorporateValue };

  if (verticalLayout) {
    return (
@@ -96,7 +95,7 @@ export default function DashboardLayout() {
  }

  return (
-    <UserCurrentCorporateContext.Provider value={value}>
+    <UserCurrentCorporateContext.Provider value={{ corporateValue, setCorporateValue }}>
      <Box
        sx={{
          display: { lg: 'flex' },
--- a/frontend/client-portal/src/pages/Dashboard/Index.tsx
+++ b/frontend/client-portal/src/pages/Dashboard/Index.tsx
@@ -21,7 +21,7 @@ import { Stack } from '@mui/system';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 import Table from '../../components/Table';
 import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import palette from '../../theme/palette';
 import { fSplit } from '../../utils/formatNumber';

@@ -80,6 +80,7 @@ type CardPolicyProps = {
 export default function Index() {
  const { themeStretch } = useSettings();
  const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const { pathname } = useLocation();

  const [memberData, setMemberData] = useState([]);
  const [policyData, setPolicyData] = useState<CardPolicyProps>();
@@ -257,8 +258,6 @@ export default function Index() {
    (async () => {
      setIsLoading(true);

-      await new Promise((resolve) => setTimeout(resolve, 250));
-
      const parameters =
        Object.keys(appliedParams).length !== 0
          ? appliedParams
@@ -270,10 +269,12 @@ export default function Index() {
        params: { ...parameters },
      });

-      //      console.log('member', corporateMembers);
      const corporateTopUpLimit = await axios.get(`${corporateValue}/topup`);

+      if (pathname === '/dashboard') {
        setSearchParams(parameters);
+      }
+
      setPolicyData({
        limit: corporatePolicyLimit.data.data,
        topUpLimit: corporateTopUpLimit.data.data,
--- a/frontend/client-portal/src/pages/EmployeeData/List.tsx
+++ b/frontend/client-portal/src/pages/EmployeeData/List.tsx
@@ -85,6 +85,31 @@ export default function List() {

  /* -------------------------------------------------------------------------- */

+  /* ------------------------------ handle search ----------------------------- */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
+  };
+
+  const searchs = {
+    useSearchs: true,
+    fullWidth: true,
+    searchText: searchText,
+    setSearchText: setSearchText,
+    handleSearchSubmit: handleSearchSubmit,
+  };
+  /* -------------------------------------------------------------------------- */
+
  /* -------------------------------- headCell -------------------------------- */
  const headCells: HeadCell<never>[] = [
    {
@@ -146,11 +171,6 @@ export default function List() {
      setData(
        response.data.data.map((obj: any) => ({
          ...obj,
-          // memberId:
-          // <Button
-          //  onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}
-          // >{obj.memberId}</Button>
-          // ,
          status:
            obj.status === 1 ? (
              <Label color="success">Active</Label>
@@ -200,7 +220,7 @@ export default function List() {
        paginations={paginations}
        loadings={loadings}
        params={params}
-        // searchs={searchs}
+        searchs={searchs}
        // filters={filters}
      />
    </Stack>