142 lines
4.3 KiB
TypeScript
142 lines
4.3 KiB
TypeScript
import { mdiEye, mdiTrashCan } from '@mdi/js'
|
|
import React, { useState } from 'react'
|
|
import { useSampleClients } from '../hooks/sampleData'
|
|
import { Client } from '../interfaces'
|
|
import BaseButton from './BaseButton'
|
|
import BaseButtons from './BaseButtons'
|
|
import CardBoxModal from './CardBoxModal'
|
|
import UserAvatar from './UserAvatar'
|
|
|
|
const TableSampleClients = () => {
|
|
const { clients } = useSampleClients()
|
|
|
|
const perPage = 5
|
|
|
|
const [currentPage, setCurrentPage] = useState(0)
|
|
|
|
const clientsPaginated = clients.slice(perPage * currentPage, perPage * (currentPage + 1))
|
|
|
|
const numPages = clients.length / perPage
|
|
|
|
const pagesList = []
|
|
|
|
for (let i = 0; i < numPages; i++) {
|
|
pagesList.push(i)
|
|
}
|
|
|
|
const [isModalInfoActive, setIsModalInfoActive] = useState(false)
|
|
const [isModalTrashActive, setIsModalTrashActive] = useState(false)
|
|
|
|
const handleModalAction = () => {
|
|
setIsModalInfoActive(false)
|
|
setIsModalTrashActive(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<CardBoxModal
|
|
title="Sample modal"
|
|
buttonColor="info"
|
|
buttonLabel="Done"
|
|
isActive={isModalInfoActive}
|
|
onConfirm={handleModalAction}
|
|
onCancel={handleModalAction}
|
|
>
|
|
<p>
|
|
Lorem ipsum dolor sit amet <b>adipiscing elit</b>
|
|
</p>
|
|
<p>This is sample modal</p>
|
|
</CardBoxModal>
|
|
|
|
<CardBoxModal
|
|
title="Please confirm"
|
|
buttonColor="danger"
|
|
buttonLabel="Confirm"
|
|
isActive={isModalTrashActive}
|
|
onConfirm={handleModalAction}
|
|
onCancel={handleModalAction}
|
|
>
|
|
<p>
|
|
Lorem ipsum dolor sit amet <b>adipiscing elit</b>
|
|
</p>
|
|
<p>This is sample modal</p>
|
|
</CardBoxModal>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th />
|
|
<th>Name</th>
|
|
<th>Company</th>
|
|
<th>City</th>
|
|
<th>Progress</th>
|
|
<th>Created</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{clientsPaginated.map((client: Client) => (
|
|
<tr key={client.id}>
|
|
<td className="border-b-0 lg:w-6 before:hidden">
|
|
<UserAvatar username={client.name} className="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
|
|
</td>
|
|
<td data-label="Name">{client.name}</td>
|
|
<td data-label="Company">{client.company}</td>
|
|
<td data-label="City">{client.city}</td>
|
|
<td data-label="Progress" className="lg:w-32">
|
|
<progress
|
|
className="flex w-2/5 self-center lg:w-full"
|
|
max="100"
|
|
value={client.progress}
|
|
>
|
|
{client.progress}
|
|
</progress>
|
|
</td>
|
|
<td data-label="Created" className="lg:w-1 whitespace-nowrap">
|
|
<small className="text-gray-500 dark:text-slate-400">{client.created}</small>
|
|
</td>
|
|
<td className="before:hidden lg:w-1 whitespace-nowrap">
|
|
<BaseButtons type="justify-start lg:justify-end" noWrap>
|
|
<BaseButton
|
|
color="info"
|
|
icon={mdiEye}
|
|
onClick={() => setIsModalInfoActive(true)}
|
|
small
|
|
/>
|
|
<BaseButton
|
|
color="danger"
|
|
icon={mdiTrashCan}
|
|
onClick={() => setIsModalTrashActive(true)}
|
|
small
|
|
/>
|
|
</BaseButtons>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<div className="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
|
|
<div className="flex flex-col md:flex-row items-center justify-between py-3 md:py-0">
|
|
<BaseButtons>
|
|
{pagesList.map((page) => (
|
|
<BaseButton
|
|
key={page}
|
|
active={page === currentPage}
|
|
label={page + 1}
|
|
color={page === currentPage ? 'lightDark' : 'whiteDark'}
|
|
small
|
|
onClick={() => setCurrentPage(page)}
|
|
/>
|
|
))}
|
|
</BaseButtons>
|
|
<small className="mt-6 md:mt-0">
|
|
Page {currentPage + 1} of {numPages}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default TableSampleClients
|