-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Designer Job View * Formatting Fixes * Lint Fix + Minor Styling Update
- Loading branch information
1 parent
ff359d5
commit 44aac7f
Showing
14 changed files
with
413 additions
and
64 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
189 changes: 189 additions & 0 deletions
189
frontend/src/components/Jobs/DesignerJobs/JobViewDesigner.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,189 @@ | ||
| import { useState } from "react" | ||
| import { jobApi, userApi } from "../../../api/api" | ||
| import { JobExtended } from "../JobRow" | ||
|
|
||
| import { Divider } from "@mui/material" | ||
| import AvatarCell from "../AvatarCell" | ||
| import { ReactNode } from "react" | ||
| import Map from "../../Map/Map" | ||
| import { useApiError } from "../../../hooks/use-api-error" | ||
| import router from "../../../router" | ||
| import { JobStatus, NEW_USER_ID, User } from "../../../main.types" | ||
|
|
||
| type JobViewDesignerProps = { | ||
| jobId: string | ||
| } | ||
|
|
||
| type GridItemProps = { | ||
| title: string | ||
| children: ReactNode | ||
| } | ||
|
|
||
| type JobStatusTagProps = { | ||
| status: JobStatus, | ||
| } | ||
|
|
||
| export default function JobViewDesigner({ jobId } : JobViewDesignerProps) { | ||
| const [job, setJob] = useState<JobExtended>() | ||
| const [producer, setProducer] = useState<User>() | ||
|
|
||
| const [getJob, { isUninitialized }] = jobApi.useGetJobMutation() | ||
| const [getUser] = userApi.useLazyGetUserQuery() | ||
|
|
||
| const { addError, setOpen } = useApiError() | ||
|
|
||
| // Retrieve page data: | ||
| if (isUninitialized) { | ||
| getJob(jobId) | ||
| .unwrap() | ||
| .then((jobResponse) => { | ||
| setJob(jobResponse as JobExtended) | ||
| // Retrieve the producer: | ||
| if (jobResponse.producerId !== NEW_USER_ID) { | ||
| getUser(jobResponse.producerId as string) | ||
| .unwrap() | ||
| .then((producerResponse) => { | ||
| setProducer(producerResponse) | ||
| }) | ||
| .catch(() => { | ||
| addError('Failed to load producer information!') | ||
| router.navigate({ to: '/jobs' }) | ||
| setOpen(true) | ||
| }) | ||
| } | ||
| }) | ||
| .catch(() => { | ||
| addError('Failed to load job!') | ||
| router.navigate({ to: '/jobs' }) | ||
| setOpen(true) | ||
| }) | ||
| } | ||
|
|
||
| const GridItem = ({ title, children } : GridItemProps) => { | ||
| return ( | ||
| <div className='text-[#A4A4A4]'> | ||
| <h1 className='font-semibold text-lg text-primary mb-2'> | ||
| {title} | ||
| </h1> | ||
| {children} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const JobStatusTag = ({ status } : JobStatusTagProps) => { | ||
| console.log(status) | ||
|
|
||
| const infoMappings = { | ||
| PENDING: {title: 'Pending', styles: 'bg-background !text-primary'}, | ||
| ACCEPTED: {title: 'Accepted', styles: 'bg-producer'}, | ||
| INPROGRESS: {title: 'In Progress', styles: 'bg-[#ae7d14]'}, | ||
| INSHIPPING: {title: 'Shipped', styles: 'bg-[designer]'}, | ||
| COMPLETE: {title: 'Complete', styles: 'bg-[#14AE5C'} | ||
| } | ||
|
|
||
| return ( | ||
| <div className={`p-2 pr-6 pl-6 text-background shadow-md rounded-lg ${infoMappings[status].styles} w-fit`}> | ||
| {infoMappings[status].title} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| // Job information: | ||
| const address = ( | ||
| <> | ||
| {job?.shippingAddress.line1}, | ||
| <br/> | ||
| {job?.shippingAddress.city}, {job?.shippingAddress.state} | ||
| </> | ||
| ) | ||
| const trackingNumber = job?.status === "INSHIPPING" ? "No Information" : "VX562388751US" | ||
| const estimatedDelivery = () => { | ||
| const date = new Date(job?.createdAt as Date) | ||
| const shippingAdjustedDay = date.getDay() + 10 | ||
| date.setDate(shippingAdjustedDay) | ||
| return date.toDateString() | ||
| } | ||
| const price = `$${job?.price && (job.price / 100).toFixed(2)} USD` | ||
| const orderDate = new Date(job?.createdAt as Date).toDateString() | ||
|
|
||
| return ( | ||
| <div className='flex flex-col w-full'> | ||
| <section className='flex items-center justify-between h-32 mt-10'> | ||
| {job?.status !== 'PENDING' | ||
| ? <div> | ||
| <h2 className='text-3xl'> | ||
| Your purchase with | ||
| </h2> | ||
| <h1 className='font-semibold text-3xl mt-2'> | ||
| {producer?.firstName + " " + producer?.lastName} | ||
| </h1> | ||
| </div> | ||
| : <h1 className='animate-pulse text-3xl'> | ||
| Searching for a producer... | ||
| </h1> | ||
| } | ||
| <AvatarCell | ||
| firstName='Alder' | ||
| lastName='Whiteford' | ||
| userType='producer' | ||
| imageOnly={true} | ||
| size={120} | ||
| /> | ||
| </section> | ||
| <div className='flex flex-row gap-x-5 items-center'> | ||
| <h1 className='text-2xl'> | ||
| Status | ||
| </h1> | ||
| {job && <JobStatusTag status={job?.status as JobStatus} /> } | ||
| </div> | ||
| <Divider | ||
| className='!m-0 !mt-10' | ||
| /> | ||
| <div className='flex flex-wrap justify-between items-center mt-10'> | ||
| <div className='grid grid-cols-2 grid-rows-2 gap-y-10 w-full md:w-[50%]'> | ||
| <GridItem title={'Delivery Location'}> | ||
| {address} | ||
| </GridItem> | ||
| <GridItem title={'Tracking Number'}> | ||
| {trackingNumber} | ||
| </GridItem> | ||
| <GridItem title={'Estimated Delivery'}> | ||
| {estimatedDelivery()} | ||
| </GridItem> | ||
| <GridItem title={'Price'}> | ||
| {price} | ||
| </GridItem> | ||
| </div> | ||
| {job && | ||
| <div className='w-full md:w-[50%]'> | ||
| <Map | ||
| latitude={job?.shippingAddress.location?.coordinates[1] as number} | ||
| longitude={job?.shippingAddress.location?.coordinates[0] as number} | ||
| zoom={15} | ||
| /> | ||
| </div> | ||
| } | ||
| </div> | ||
| <Divider | ||
| className='!m-0 !mt-10' | ||
| /> | ||
| <div className='grid grid-cols-2 grid-rows-2 gap-y-10 md:w-[50%] mt-10'> | ||
| <GridItem title={'File Count'}> | ||
| {job?.designId.length} | ||
| </GridItem> | ||
| <GridItem title={'Color'}> | ||
| {job?.color} | ||
| </GridItem> | ||
| <GridItem title={'Filament Type'}> | ||
| {job?.filament} | ||
| </GridItem> | ||
| <GridItem title={'Order Placed'}> | ||
| {orderDate} | ||
| </GridItem> | ||
| </div> | ||
| <Divider | ||
| className='!m-0 !mt-10' | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
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
Oops, something went wrong.