-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: unaccepted requests in admin page
- Loading branch information
1 parent
1e91f63
commit f0d780e
Showing
7 changed files
with
212 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import { useState } from "react" | ||
| import { Button } from "../ui/button" | ||
| import { Card, CardContent, CardHeader, CardTitle } from "../ui/card" | ||
| import { ExchangeStatus } from "./requests/cards/ExchangeStatus" | ||
| import { Person } from "./requests/cards/Person" | ||
| import { RequestDate } from "./requests/cards/RequestDate" | ||
| import { ArrowRightIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" | ||
| import { AdminPreviewSchedule } from "./requests/AdminPreviewSchedule" | ||
| import useStudentsSchedule from "../../hooks/admin/useStudentsSchedule" | ||
| import { ClassDescriptor, MarketplaceRequest } from "../../@types" | ||
| import { AdminRequestCardFooter } from "./requests/cards/AdminRequestCardFooter" | ||
| import { listEmailExchanges } from "../../utils/mail" | ||
| import { AdminRequestType } from "../../utils/exchange" | ||
|
|
||
| type Props = { | ||
| exchange: MarketplaceRequest | ||
| } | ||
|
|
||
| export const AdminMarketplaceExhangesCard = ({ | ||
| exchange | ||
| }: Props) => { | ||
| const [open, setOpen] = useState<boolean>(false); | ||
| const [exchangeState, setExchangeState] = useState(exchange); | ||
|
|
||
| const { schedule } = useStudentsSchedule(exchange.issuer_nmec); | ||
|
|
||
| return (<> | ||
| <Card> | ||
| <CardHeader className="flex flex-row justify-between items-center"> | ||
| <div className="flex gap-4 items-center"> | ||
| <div className="flex flex-col gap-1 "> | ||
| <div className="flex gap-2 items-center"> | ||
| <CardTitle> | ||
| <h2 className="font-bold"> | ||
| {`#${exchange.id}`} | ||
| </h2> | ||
| </CardTitle> | ||
| <ExchangeStatus exchange={exchangeState} /> | ||
| </div> | ||
| <RequestDate | ||
| date={exchange.date} | ||
| /> | ||
| </div> | ||
| {!open && <> | ||
| <Person name={exchange.issuer_name} nmec={exchange.issuer_nmec} /> | ||
| </>} | ||
|
|
||
| </div> | ||
| <div> | ||
| <Button | ||
| onClick={() => setOpen(prev => !prev)} | ||
| className="bg-white text-black border-2 border-black hover:text-white" | ||
| > | ||
| {open | ||
| ? <ChevronUpIcon className="w-5 h-5" /> | ||
| : <ChevronDownIcon className="w-5 h-5" /> | ||
| } | ||
| </Button> | ||
| </div> | ||
| </CardHeader> | ||
|
|
||
| <CardContent className="w-full "> | ||
| {open && | ||
| <div className="flex flex-col gap-y-8" key={crypto.randomUUID()}> | ||
| <div className="flex justify-between"> | ||
| <Person name={exchange.issuer_name} nmec={exchange.issuer_nmec} /> | ||
| <div> | ||
| <div | ||
| key={crypto.randomUUID()} | ||
| className="flex flex-col gap-y-2 items-center border-gray-200 border-2 rounded-md p-2 px-4" | ||
| > | ||
| <>{exchange.options.map((option) => ( | ||
| <div key={crypto.randomUUID()} className="flex gap-5 items-center"> | ||
| <h2 className="font-bold">{option.course_info.acronym}</h2> | ||
| <div className="flex gap-2 items-center"> | ||
| <p>{option.class_issuer_goes_from.name}</p> | ||
| <ArrowRightIcon className="w-5 h-5" /> | ||
| <p>{option.class_issuer_goes_to.name}</p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <AdminPreviewSchedule | ||
| originalSchedule={schedule} | ||
| classesToAdd={ | ||
| exchange.options.map((option): ClassDescriptor => { | ||
| return { | ||
| classInfo: option.class_issuer_goes_to, | ||
| courseInfo: option.course_info, | ||
| slotInfo: null | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } | ||
| </CardContent> | ||
|
|
||
| {open && | ||
| <AdminRequestCardFooter | ||
| nmecs={[exchange.issuer_nmec]} | ||
| exchangeMessage={listEmailExchanges( | ||
| exchange.options.map(option => ({ | ||
| participant_name: undefined, | ||
| participant_nmec: exchange.issuer_nmec, | ||
| goes_from: option.class_issuer_goes_from.name, | ||
| goes_to: option.class_issuer_goes_to.name, | ||
| course_acronym: option.course_info.acronym | ||
| })) | ||
| )} | ||
| requestType={AdminRequestType.URGENT_EXCHANGE} | ||
| requestId={exchange.id} | ||
| setExchange={setExchangeState} | ||
| courseId={exchange.options.map(option => option.course_info.course)} | ||
| /> | ||
| } | ||
| </Card> | ||
| </> | ||
| ) | ||
| } |
24 changes: 24 additions & 0 deletions
24
src/components/admin/requests/AdminMarketplaceExhanges.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { useContext } from "react"; | ||
| import RequestFiltersContext from "../../../contexts/admin/RequestFiltersContext"; | ||
| import useAdminAllMarketplaceExchanges from "../../../hooks/admin/useAdminAllMarketplaceExchanges" | ||
| import AdminPaginationContext from "../../../contexts/admin/AdminPaginationContext"; | ||
| import { BarLoader } from "react-spinners"; | ||
| import { AdminMarketplaceExhangesCard } from "../AdminMarketplaceExchangesCard"; | ||
|
|
||
| export const AdminMarketplaceExhanges = () => { | ||
| const filterContext = useContext(RequestFiltersContext); | ||
| const { currPage } = useContext(AdminPaginationContext); | ||
| const { exchanges, loading } = useAdminAllMarketplaceExchanges(filterContext, currPage); | ||
|
|
||
| return (<> | ||
| {loading && <BarLoader className="w-full" />} | ||
|
|
||
| {exchanges?.map((exchange) => ( | ||
| <AdminMarketplaceExhangesCard | ||
| key={`admin-marketplace-${exchange.id}`} | ||
| exchange={exchange} | ||
| /> | ||
| ))} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { useMemo } from "react"; | ||
| import api from "../../api/backend"; | ||
| import useSWR from "swr"; | ||
| import { RequestFiltersContextContent } from "../../contexts/admin/RequestFiltersContext"; | ||
| import { buildUrlWithFilterParams } from "../../utils/admin/filters"; | ||
|
|
||
| /** | ||
| * Gets the exchanges that a student made not involving any other student. | ||
| */ | ||
| export default (filterContext: RequestFiltersContextContent, pageIndex: number) => { | ||
| const getExchanges = async (url: string) => { | ||
| try { | ||
| const res = await fetch(url, { | ||
| credentials: "include" | ||
| }); | ||
|
|
||
| if(res.ok) { | ||
| return await res.json(); | ||
| } | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| }; | ||
|
|
||
| const { data, error, mutate } = useSWR( | ||
| buildUrlWithFilterParams(`${api.BACKEND_URL}/exchange/admin/marketplace?page=${pageIndex}`, filterContext), | ||
| getExchanges | ||
| ); | ||
|
|
||
| const exchanges = useMemo(() => data ? [].concat(...data["exchanges"]) : null, [data]); | ||
| const totalPages = useMemo(() => data ? data["total_pages"] : null, [data]); | ||
|
|
||
| return { | ||
| exchanges, | ||
| totalPages, | ||
| error, | ||
| loading: !data, | ||
| mutate, | ||
| }; | ||
| }; | ||
|
|
||
|
|