Skip to content

Commit

Permalink
enhance(ProposalApplication): table design improved with modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@mxmlnwbr
mxmlnwbr committed Nov 2, 2023
1 parent 5ee2cbc commit 11d7b67
Showing 1 changed file with 168 additions and 62 deletions.
230 changes: 168 additions & 62 deletions src/components/ProposalApplication.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import {
IconDefinition,
faFilePdf,
faMessage,
} from '@fortawesome/free-regular-svg-icons'
import { IconDefinition, faFilePdf } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { H2, Table } from '@uzh-bf/design-system'
import { Button, H2, Modal, Table } from '@uzh-bf/design-system'
import { add, format, parseISO } from 'date-fns'
import { useState } from 'react'
import { ProposalDetails } from 'src/types/app'
import { IterableElement } from 'type-fest'
import ApplicationForm from './ApplicationForm'
Expand All @@ -24,6 +21,8 @@ export default function ProposalApplication({
const FileTypeIconMap: Record<string, IconDefinition> = {
'application/pdf': faFilePdf,
}
const [isOpen, setIsOpen] = useState(false)
const [updatedRow, setUpdatedRow] = useState<null | any>(null)
if (proposalDetails?.typeKey === 'SUPERVISOR') {
return (
<div className="p-4">
Expand All @@ -49,75 +48,182 @@ export default function ProposalApplication({
{
label: 'Date',
accessor: 'createdAt',
transformer: ({ row }) =>
format(parseISO(row.createdAt), 'dd.MM.Y'),
},
{
label: 'Status',
accessor: 'status',
sortable: true,
transformer: ({ row }) => <div>{row.statusKey}</div>,
},
{
label: 'Working Period',
accessor: 'plannedStartAt',
sortable: true,
transformer: ({ row }) =>
`${format(
parseISO(row.plannedStartAt),
'd.M.Y'
)} - ${format(
add(parseISO(row.plannedStartAt), { months: 6 }),
'd.M.Y'
)}`,
format(parseISO(row.createdAt), 'dd.MM.yyyy'),
},
// {
// label: 'Status',
// accessor: 'status',
// sortable: true,
// transformer: ({ row }) => <div>{row.statusKey}</div>,
// },
{
label: 'Name',
accessor: 'fullName',
label: 'Email',
accessor: 'email',
sortable: true,
transformer: ({ row }) => (
<a
href={`mailto:${row.email}`}
target="_blank"
className="flex flex-row items-center gap-2 hover:text-orange-700"
rel="noreferrer"
>
<FontAwesomeIcon icon={faMessage} />
{row.fullName}
</a>
),
},
{
label: 'Motivation',
accessor: 'motivation',
transformer: ({ row }) => (
<div className="text-xs break-all">{row.motivation}</div>
),
},
{
label: 'Attachments',
accessor: 'attachments',
label: 'Details',
accessor: 'fullName',
transformer: ({ row }) => (
<div>
{row.attachments?.map((attachment: any) => (
<a
href={attachment.href}
target="_blank"
key={attachment.id}
className="hover:text-orange-700"
rel="noreferrer"
>
<div className="flex flex-row items-center gap-2">
<FontAwesomeIcon
icon={FileTypeIconMap[attachment.type]}
/>
{attachment.name}
<Modal
open={isOpen}
trigger={
<Button
onClick={() => (
setUpdatedRow(row), setIsOpen(true)
)}
>
More
</Button>
}
onClose={() => setIsOpen(false)}
>
<div className="p-4">
<div className="md:grid md:grid-cols-2">
<div>
<h1 className="text-base font-bold">
Full Name:
</h1>
<p className="pb-2 text-base">
{updatedRow?.fullName}
</p>
<h1 className="text-base font-bold">Email:</h1>
<p className="pb-2 text-base">
{updatedRow?.email}
</p>
<h1 className="text-base font-bold">
Matriculation Number:
</h1>
<p className="pb-2 text-base">
{updatedRow?.matriculationNumber}
</p>
</div>
<div>
<h1 className="text-base font-bold">Status:</h1>
<p className="pb-2 text-base">
{updatedRow?.statusKey}
</p>
<h1 className="text-base font-bold">
Working Period:
</h1>
<p className="pb-2 text-base">
{format(
parseISO(row.plannedStartAt),
'dd.MM.Y'
)}{' '}
-{' '}
{format(
add(parseISO(row.plannedStartAt), {
months: 6,
}),
'dd.MM.Y'
)}
</p>

<h1 className="text-base font-bold">
Attachments:
</h1>
<div className="grid grid-cols-1 pb-2 text-base">
{updatedRow?.attachments?.map(
(attachment: any) => (
<div key={attachment.id}>
<a
href={attachment.href}
target="_blank"
className="hover:text-orange-700"
rel="noreferrer"
>
<div className="flex flex-row items-center gap-2">
<FontAwesomeIcon
icon={
FileTypeIconMap[attachment.type]
}
/>
{attachment.name}
</div>
</a>
</div>
)
)}
</div>
</div>
</div>
<div>
<h1 className="text-base font-bold">
Motivation:
</h1>
<p className="pb-2 text-base">
{updatedRow?.motivation}
</p>
</div>
</a>
))}
</div>
</Modal>
</div>
),
},
// {
// label: 'Working Period',
// accessor: 'plannedStartAt',
// sortable: true,
// transformer: ({ row }) =>
// `${format(
// parseISO(row.plannedStartAt),
// 'd.M.Y'
// )} - ${format(
// add(parseISO(row.plannedStartAt), { months: 6 }),
// 'd.M.Y'
// )}`,
// },
// {
// label: 'Name',
// accessor: 'fullName',
// sortable: true,
// transformer: ({ row }) => (
// <a
// href={`mailto:${row.email}`}
// target="_blank"
// className="flex flex-row items-center gap-2 hover:text-orange-700"
// rel="noreferrer"
// >
// <FontAwesomeIcon icon={faMessage} />
// {row.email}
// </a>
// ),
// },
// {
// label: 'Motivation',
// accessor: 'motivation',
// transformer: ({ row }) => (
// <div className="text-xs break-all">{row.motivation}</div>
// ),
// },
// {
// label: 'Attachments',
// accessor: 'attachments',
// transformer: ({ row }) => (
// <div>
// {row.attachments?.map((attachment: any) => (
// <a
// href={attachment.href}
// target="_blank"
// key={attachment.id}
// className="hover:text-orange-700"
// rel="noreferrer"
// >
// <div className="flex flex-row items-center gap-2">
// <FontAwesomeIcon
// icon={FileTypeIconMap[attachment.type]}
// />
// {attachment.name}
// </div>
// </a>
// ))}
// </div>
// ),
// },
]}
data={proposalDetails.applications}
/>
Expand Down

0 comments on commit 11d7b67

Please sign in to comment.