handle filter list with button
This commit is contained in:
Ehsan
@@ -22,7 +22,7 @@ function List({ user, loading }) {
|
||||
<div className="!mt-[32px]">
|
||||
<div className="hidden md:block w-full">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
{user.done.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
@@ -111,7 +111,7 @@ function List({ user, loading }) {
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex md:hidden flex-col gap-y-[24px]">
|
||||
{user.turns.map((row, idx) => (
|
||||
{user.done.map((row, idx) => (
|
||||
<Card key={idx} data={row} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
|
||||
|
||||
const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
|
||||
|
||||
function Head({ value, setValue, handleChange }) {
|
||||
function Head({ value, setValue, isDone, setIsDone, handleChange }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className="block w-full lg:hidden">
|
||||
@@ -38,14 +38,26 @@ function Head({ value, setValue, handleChange }) {
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
|
||||
${
|
||||
isDone
|
||||
? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
|
||||
: "!text-[#EFEFEF] !border-transparent"
|
||||
}`}
|
||||
onClick={() => setIsDone(!isDone)}
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium"
|
||||
variant="outlined"
|
||||
className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
|
||||
${
|
||||
!isDone
|
||||
? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
|
||||
: "!text-[#EFEFEF] !border-transparent"
|
||||
}`}
|
||||
onClick={() => setIsDone(!isDone)}
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
|
||||
@@ -8,6 +8,8 @@ import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function List({ user, loading, setIsTurnsDetails }) {
|
||||
console.log(user);
|
||||
|
||||
const tableHead = [
|
||||
"ردیف",
|
||||
"نام پزشک",
|
||||
@@ -23,7 +25,7 @@ function List({ user, loading, setIsTurnsDetails }) {
|
||||
<div className="!mt-[24px]">
|
||||
<div className="hidden lg:block">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
{user.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
@@ -101,7 +103,7 @@ function List({ user, loading, setIsTurnsDetails }) {
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex flex-col lg:hidden gap-[24px]">
|
||||
{user.turns.map((item, idx) => (
|
||||
{user.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
|
||||
@@ -4,6 +4,7 @@ import List from "./List";
|
||||
|
||||
function Turns({ user, setIsTurnsDetails, loading }) {
|
||||
const [value, setValue] = useState(0);
|
||||
const [isDone, setIsDone] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
return (
|
||||
@@ -11,9 +12,15 @@ function Turns({ user, setIsTurnsDetails, loading }) {
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">
|
||||
تاریخچه نوبت ها
|
||||
</p>
|
||||
<Head value={value} setValue={setValue} handleChange={handleChange} />
|
||||
<Head
|
||||
value={value}
|
||||
isDone={isDone}
|
||||
setValue={setValue}
|
||||
setIsDone={setIsDone}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<List
|
||||
user={user}
|
||||
user={user.turns[isDone ? "done" : "current"]}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
|
||||
@@ -12,7 +12,7 @@ import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
function DetailLg({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
const data = user.done[1];
|
||||
|
||||
return (
|
||||
<div className="lg:mt-[18px] hidden md:block">
|
||||
|
||||
@@ -8,7 +8,7 @@ import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function DetailSm({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
const data = user.done[1];
|
||||
|
||||
return (
|
||||
<div className="mt-[20px] block md:hidden">
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Button } from "@mui/material";
|
||||
|
||||
function NotFoundPage() {
|
||||
return (
|
||||
<div className="pt-[105px] padding-responsive sm:pt-[135px] md:pt-[165px] lg:pt-[201px] flex flex-col md:flex-row items-center justify-between gap-[50px]">
|
||||
<div className="py-[105px] padding-responsive sm:py-[135px] md:py-[165px] lg:py-[201px] min-h-screen flex flex-col md:flex-row items-center justify-between gap-[50px]">
|
||||
<div className="flex w-full md:w-fit flex-col justify-center items-center">
|
||||
<div
|
||||
className="w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
|
||||
|
||||
+746
-602
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user