danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

row click & filters + ...

Browse Source
This commit is contained in:
hamid zarghami
2025-06-26 09:41:39 +03:30
parent 5af36bd77b
commit 1cd24fc3c5
6 changed files with 101 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ interface ButtonProps {
const Button: FC<ButtonProps> = (props) => {
const buttonClass = clx(
'w-full bg-primary text-white rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
'w-full bg-primary text-white cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
props.variant === 'secondary' && 'bg-[#ECEEF5] text-black',
props.className
)
src/components/Filters.tsx
+56 -5
View File
@@ -1,4 +1,5 @@
import { FC, useEffect, useState, ChangeEvent } from 'react';
import { Filter, CloseCircle } from 'iconsax-react';
import DatePicker from './DatePicker';
import Input from './Input';
import Select, { ItemsSelectType } from './Select';
@@ -49,6 +50,7 @@ const Filters: FC<FiltersProps> = ({
searchField = "search" // پیش‌فرض فیلد سرچ با نام search
}) => {
const [filters, setFilters] = useState<FilterValues>({});
const [isFiltersOpen, setIsFiltersOpen] = useState(false);
// تنظیم مقادیر اولیه
useEffect(() => {
@@ -125,12 +127,61 @@ const Filters: FC<FiltersProps> = ({
return (
<div className={className}>
<div className={fieldClassName}>
{otherFields.map(renderField)}
{/* آیکون فیلتر برای موبایل */}
<div className="flex md:hidden items-center justify-between w-full mb-2">
<button
onClick={() => setIsFiltersOpen(!isFiltersOpen)}
className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
>
<Filter size={18} color="#000" />
<span className="text-sm">فیلترها</span>
</button>
{searchFieldObj && (
<div className="flex-1 mr-4">
{renderField(searchFieldObj)}
</div>
)}
</div>
{searchFieldObj && (
<div className="w-full md:w-auto">
{renderField(searchFieldObj)}
{/* فیلترها برای دسکتاپ (همیشه نمایش داده می‌شوند) */}
<div className="hidden md:flex md:flex-row justify-between items-center gap-4 w-full">
<div className={fieldClassName}>
{otherFields.map(renderField)}
</div>
{searchFieldObj && (
<div className="w-full md:w-auto">
{renderField(searchFieldObj)}
</div>
)}
</div>
{/* فیلترها برای موبایل (قابل باز و بسته شدن) */}
{isFiltersOpen && (
<div className="md:hidden w-full animate-fadeInDown">
<div className="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-xl p-5 space-y-4">
<div className="flex items-center justify-between pb-3 border-b border-gray-100">
<div className="flex items-center gap-2">
<Filter size={16} color="#6B7280" />
<span className="text-sm font-medium text-gray-700">فیلتر کردن نتایج</span>
</div>
<button
onClick={() => setIsFiltersOpen(false)}
className="p-1 hover:bg-gray-100 rounded-full transition-colors"
>
<CloseCircle size={18} color="#6B7280" />
</button>
</div>
{otherFields.map(field => (
<div key={field.name} className="w-full">
<label className="block text-xs font-medium text-gray-600 mb-2">
{field.placeholder}
</label>
<div className="transform hover:scale-[1.02] transition-transform duration-200">
{renderField(field)}
</div>
</div>
))}
</div>
</div>
)}
</div>
src/index.css
+16
View File
@@ -227,3 +227,19 @@ textarea::placeholder {
}
/* End Generation Here */
/* انیمیشن برای فیلترهای موبایل */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeInDown {
animation: fadeInDown 0.3s ease-out;
}
src/pages/received/List.tsx
+3 -1
View File
@@ -5,6 +5,7 @@ import Table from '../../components/Table';
import { ColumnType } from '../../components/types/TableTypes';
import { InfoCircle, More, Refresh2, Trash, Edit, Archive, ArchiveSlash } from 'iconsax-react';
import { RowActionItem } from '../../components/RowActionsDropdown';
import { useNavigate } from 'react-router-dom';
interface Message extends Record<string, unknown> {
id: string;
@@ -15,6 +16,7 @@ interface Message extends Record<string, unknown> {
}
const List: FC = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const [isLoading] = useState(false);
const [selectedMessages, setSelectedMessages] = useState<Message[]>([]);
@@ -141,7 +143,7 @@ const List: FC = () => {
actions={tableActions}
selectedActions={selectedActions}
onSelectionChange={handleSelectionChange}
onRowClick={(id) => console.log(`کلیک روی پیام با شناسه ${id}`)}
onRowClick={(id) => navigate(`/mail/${id}`)}
noDataMessage={
<div className="flex flex-col items-center py-6">
<InfoCircle size={32} className="text-gray-300 mb-2" />
src/router/AppRouter.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { FC } from 'react'
import { Paths } from '@/utils/Paths'
import { Routes, Route } from 'react-router-dom'
import Home from '@/pages/home/Home'
import ReceivedList from '@/pages/received/List'
import Setting from '@/pages/setting/Setting'
import SentList from '@/pages/sent/List'
@@ -12,7 +11,7 @@ import DetailEmail from '@/pages/received/Detail'
const AppRouter: FC = () => {
return (
<Routes>
<Route path='/' element={<Home />} />
<Route path='/' element={<ReceivedList />} />
<Route path={Paths.received} element={<ReceivedList />} />
<Route path={Paths.setting} element={<Setting />} />
<Route path={Paths.sent} element={<SentList />} />
src/shared/Main.tsx
+24
View File
@@ -2,8 +2,16 @@ import { FC } from 'react'
import SideBar from './SideBar'
import AppRouter from '@/router/AppRouter'
import Header from './Header'
import Button from '@/components/Button'
import { Add } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import { useSharedStore } from './store/sharedStore'
const Main: FC = () => {
const { t } = useTranslation()
const { setOpenSidebar, setOpenNewMessage } = useSharedStore()
return (
<div className='p-2 md:p-4 overflow-hidden'>
<SideBar />
@@ -15,6 +23,22 @@ const Main: FC = () => {
</div>
</div>
</div>
<div className='flex fixed bottom-4 xl:hidden right-0 justify-center mt-10 md:mt-14 px-4'>
<Button
className='bg-secondary font-normal text-primary w-fit px-4 md:px-6 text-sm'
onClick={() => {
setOpenSidebar(false)
setOpenNewMessage(true)
}}
>
<div className='flex gap-2 items-center'>
<Add size={18} color='black' />
<div>{t('sidebar.new_message')}</div>
</div>
</Button>
</div>
</div>
)
}