From c8b06f67d125ff35cc9b37c62ccc6d6e5d415437 Mon Sep 17 00:00:00 2001 From: pajri Date: Fri, 5 May 2023 17:02:40 +0700 Subject: [PATCH] Table Component Alarm Center --- frontend/client-portal/.env.development | 4 +- .../src/pages/AlarmCenter/List.tsx | 519 +++++++++--------- 2 files changed, 268 insertions(+), 255 deletions(-) diff --git a/frontend/client-portal/.env.development b/frontend/client-portal/.env.development index b3f9d3bd..2badd03d 100644 --- a/frontend/client-portal/.env.development +++ b/frontend/client-portal/.env.development @@ -2,6 +2,6 @@ GENERATE_SOURCEMAP=false PORT=8083 -REACT_APP_HOST_API_URL="http://lms.test" +REACT_APP_HOST_API_URL="http://localhost:8001" -VITE_API_URL="http://lms.test/api/client" +VITE_API_URL="http://localhost:8001/api/client" diff --git a/frontend/client-portal/src/pages/AlarmCenter/List.tsx b/frontend/client-portal/src/pages/AlarmCenter/List.tsx index 025f8ae0..bcfcf455 100644 --- a/frontend/client-portal/src/pages/AlarmCenter/List.tsx +++ b/frontend/client-portal/src/pages/AlarmCenter/List.tsx @@ -19,127 +19,166 @@ import { visuallyHidden } from '@mui/utils'; import axios from '../../utils/axios'; /* ---------------------------------- react --------------------------------- */ import { useContext, useEffect, useState } from 'react'; + /* -------------------------------- component ------------------------------- */ import Iconify from '../../components/Iconify'; import BaseTablePagination from '../../components/BaseTablePagination'; +import TableComponent from '../../components/Table'; + /* ---------------------------------- hooks --------------------------------- */ import useMap from '../../hooks/useMap'; /* ---------------------------------- theme --------------------------------- */ import palette from '../../theme/palette'; import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate'; +import { HeadCell, Order, PaginationTableProps } from '../../@types/table'; +import { useSearchParams } from 'react-router-dom'; /* ---------------------------------- types --------------------------------- */ -type PaginationTableProps = { - current_page: number; - from: number; - last_page: number; - links: []; - path: string; - per_page: number; - to: number; - total: number; -}; +// type PaginationTableProps = { +// current_page: number; +// from: number; +// last_page: number; +// links: []; +// path: string; +// per_page: number; +// to: number; +// total: number; +// }; -type DataTableProps = { - fullName: string; - memberId: string; - service: string; - start_date: string; - end_date: string; - status: boolean | number; -}; +// type DataTableProps = { +// fullName: string; +// memberId: string; +// service: string; +// start_date: string; +// end_date: string; +// status: boolean | number; +// }; -/* -------------------------------------------------------------------------- */ +// /* -------------------------------------------------------------------------- */ -/* -------------------------- enchanced table head -------------------------- */ +// /* -------------------------- enchanced table head -------------------------- */ -type Order = 'asc' | 'desc'; +// type Order = 'asc' | 'desc'; -interface HeadCell { - id: string; - label: string; -} +// interface HeadCell { +// id: string; +// label: string; +// } -const headCells: readonly HeadCell[] = [ - { - id: 'name', - label: 'Name', - }, - { - id: 'member_id', - label: 'Member ID', - }, - { - id: 'service', - label: 'Service', - }, - { - id: 'start_date', - label: 'Start Date', - }, - { - id: 'end_date', - label: 'End Date', - }, - { - id: 'status', - label: 'Status', - }, -]; +// const headCells: readonly HeadCell[] = [ +// { +// id: 'name', +// label: 'Name', +// }, +// { +// id: 'member_id', +// label: 'Member ID', +// }, +// { +// id: 'service', +// label: 'Service', +// }, +// { +// id: 'start_date', +// label: 'Start Date', +// }, +// { +// id: 'end_date', +// label: 'End Date', +// }, +// { +// id: 'status', +// label: 'Status', +// }, +// ]; -interface EnhancedTableProps { - onRequestSort: (event: React.MouseEvent, property: string) => void; - order: Order; - orderBy: string; -} +// interface EnhancedTableProps { +// onRequestSort: (event: React.MouseEvent, property: string) => void; +// order: Order; +// orderBy: string; +// } -function EnhancedTableHead(props: EnhancedTableProps) { - const { order, orderBy, onRequestSort } = props; - const createSortHandler = (property: string) => (event: React.MouseEvent) => { - onRequestSort(event, property); - }; +// function EnhancedTableHead(props: EnhancedTableProps) { +// const { order, orderBy, onRequestSort } = props; +// const createSortHandler = (property: string) => (event: React.MouseEvent) => { +// onRequestSort(event, property); +// }; - return ( - - - No - {headCells.map((headCell) => ( - - - {headCell.label} - {orderBy === headCell.id ? ( - - {order === 'desc' ? 'sorted descending' : 'sorted ascending'} - - ) : null} - - - ))} - - - ); -} +// return ( +// +// +// No +// {headCells.map((headCell) => ( +// +// +// {headCell.label} +// {orderBy === headCell.id ? ( +// +// {order === 'desc' ? 'sorted descending' : 'sorted ascending'} +// +// ) : null} +// +// +// ))} +// +// +// ); +// } /* -------------------------------------------------------------------------- */ export default function List() { const { corporateValue } = useContext(UserCurrentCorporateContext); - const [order, setOrder] = useState('asc'); - const [orderBy, setOrderBy] = useState(''); - const [customSearchParams, setCustomSearchParams] = useMap(); + + const [data, setData] = useState([]); + + /* -------------------------------------------------------------------------- */ + /* setting up for the table */ + /* -------------------------------------------------------------------------- */ const [isLoading, setIsLoading] = useState(true); - const [dataTable, setDataTable] = useState([]); + + const loadings = { + isLoading: isLoading, + setIsLoading: setIsLoading, + }; + + /* ------------------------------ handle params ----------------------------- */ + const [searchParams, setSearchParams] = useSearchParams(); + const [appliedParams, setAppliedParams] = useState({}); + + const params = { + searchParams: searchParams, + setSearchParams: setSearchParams, + appliedParams: appliedParams, + setAppliedParams: setAppliedParams, + }; + /* -------------------------------------------------------------------------- */ + + /* ------------------------------ handle order ------------------------------ */ + const [order, setOrder] = useState('asc'); + const [orderBy, setOrderBy] = useState('fullName'); + + const orders = { + order: order, + setOrder: setOrder, + orderBy: orderBy, + setOrderBy: setOrderBy, + }; + /* -------------------------------------------------------------------------- */ + + /* ---------------------------- handle pagination --------------------------- */ const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); + const [paginationTable, setPaginationTable] = useState({ current_page: 0, from: 0, @@ -150,183 +189,157 @@ export default function List() { to: 0, total: 0, }); - /* ------------------------------- handle sort ------------------------------ */ - const handleRequestSort = async (event: React.MouseEvent, property: string) => { - const isAsc = orderBy === property && order === 'asc'; - setOrder(isAsc ? 'desc' : 'asc'); - setOrderBy(property); - const params = Object.fromEntries([ - ...customSearchParams.entries(), - // ['order', isAsc ? 'desc' : 'asc'], - // ['orderBy', property], - ]); - setIsLoading(true); - await new Promise((resolve) => setTimeout(resolve, 500)); - loadDataTable(params); - setIsLoading(false); + + const paginations = { + page: page, + setPage: setPage, + rowsPerPage: rowsPerPage, + setRowsPerPage: setRowsPerPage, + paginationTable: paginationTable, + setPaginationTable: setPaginationTable, }; /* -------------------------------------------------------------------------- */ - /* ------------------------------ Search field ------------------------------ */ + /* ------------------------------ handle search ----------------------------- */ const [searchText, setSearchText] = useState(''); - const handleSearch = (event: any) => { - setSearchText(event.target.value); - }; - - const handleSearchSubmit = async (event: any) => { + const handleSearchSubmit = async (event: React.FormEvent) => { event.preventDefault(); - const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]); - setIsLoading(true); - await new Promise((resolve) => setTimeout(resolve, 500)); - loadDataTable(params); - setIsLoading(false); - }; - /* -------------------------------------------------------------------------- */ - /* --------------------------- Load Data Table API -------------------------- */ - const loadDataTable = async (appliedParams: any | null = null) => { - setIsLoading(true); - - const params = appliedParams - ? appliedParams - : Object.fromEntries([ - ...customSearchParams.entries(), - // ['order', order], - // ['orderBy', orderBy], - ]); - const response = await axios.get(`/${corporateValue}/members?type=alarm-center`, { - params: params, - }); - setDataTable(response.data.data); - setPaginationTable(response.data); - setRowsPerPage(response.data.per_page); - setIsLoading(false); + if (searchText === '') { + searchParams.delete('search'); + const params = Object.fromEntries([...searchParams.entries()]); + setAppliedParams(params); + } else { + const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]); + setAppliedParams(params); + } }; - /* -------------------------------------------------------------------------- */ - /* ------------------------ button change pagination ------------------------ */ - const onPageChangeHandle = async (event: unknown, newPage: number) => { - const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]); - setPage(newPage); - setIsLoading(true); - await new Promise((resolve) => setTimeout(resolve, 500)); - loadDataTable(params); - setIsLoading(false); - setCustomSearchParams.set('page', newPage + 1); + const searchs = { + searchText: searchText, + setSearchText: setSearchText, + handleSearchSubmit: handleSearchSubmit, }; - /* -------------------------------------------------------------------------- */ - /* ----------------------- row page per limit on click ---------------------- */ - const onRowsPerPageChangeHandle = async (event: React.ChangeEvent) => { - setPage(0); - const params = Object.fromEntries([ - ...customSearchParams.entries(), - ['page', 0], - ['per_page', parseInt(event.target.value, 10)], - ]); - setRowsPerPage(parseInt(event.target.value, 10)); - setIsLoading(true); - await new Promise((resolve) => setTimeout(resolve, 500)); - loadDataTable(params); - setIsLoading(false); - setCustomSearchParams.set('per_page', parseInt(event.target.value, 10)); - }; + /* -------------------------------- headCell -------------------------------- */ + const headCells: HeadCell[] = [ + { + id: 'fullName', + align: 'left', + label: 'Name', + isSort: true, + }, + { + id: 'memberId', + align: 'left', + label: 'Member ID', + isSort: true, + }, + { + id: 'start_date', + align: 'center', + label: 'Start Date', + isSort: true, + }, + { + id: 'end_date', + align: 'center', + label: 'End Date', + isSort: false, + }, + { + id: 'status', + align: 'center', + label: 'Status', + isSort: true, + }, + ]; /* -------------------------------------------------------------------------- */ useEffect(() => { - loadDataTable(); - }, []); + (async () => { + setIsLoading(true); + + await new Promise((resolve) => setTimeout(resolve, 250)); + + const parameters = + Object.keys(appliedParams).length !== 0 + ? appliedParams + : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]); + + const response = await axios.get(`/${corporateValue}/members?type=alarm-center`, { + params: parameters, + }); + + setData( + response.data.data.map((obj: any) => { + return { + ...obj, + status: + obj.status === 1 ? ( + + ) : ( + + ), + }; + }) + ); + + setPaginationTable(response.data); + setRowsPerPage(response.data.per_page); + + if (searchParams.get('page')) { + //@ts-ignore + const currentPage = parseInt(searchParams.get('page')) - 1; + + paginationTable.current_page = currentPage; + setPage(currentPage); + } + + setIsLoading(false); + })(); + }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]); return ( - {/* Search */} -
- - - - {/* The Main Table */} - - - - - {isLoading ? ( - - - Loading . . . - - - ) : dataTable.length >= 1 ? ( - dataTable.map((row: DataTableProps, index) => ( - - {paginationTable.from + index++} - {row.fullName} - {row.memberId} - {row.service} - {row.start_date} - {row.end_date} - - {row.status === 1 ? ( - - ) : ( - - )} - - - )) - ) : ( - - - No Data Found - - - )} - -
- - - {/* Pagination */} -
);