Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

Commit

Permalink
feat(event): allow faculty chair to assign
Browse files Browse the repository at this point in the history 
refactor: separate faculty and edit details modal
  • Loading branch information
@jhdcruz
jhdcruz committed Nov 1, 2024
1 parent db9cfec commit 718ef12
Show file tree
Hide file tree
Showing 11 changed files with 410 additions and 264 deletions.
90 changes: 42 additions & 48 deletions src/app/portal/activities/_components/ActivityDetails/ActivityInfoBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ import { ActivityDetailsProps } from '@/libs/supabase/api/_response';
import { getAssignedFaculties } from '@/libs/supabase/api/faculty-assignments';
import { getActivityReports } from '@/libs/supabase/api/storage';
import {
IconFileText,
IconLibrary,
IconRosetteDiscountCheck,
IconScanEye,
IconUsersGroup,
} from '@tabler/icons-react';
import { downloadActivityFile } from '@portal/activities/actions';
import dayjs from '@/libs/dayjs';
import { isElevated, isInternal } from '@/utils/access-control';
import { isPrivate, isInternal } from '@/utils/access-control';
import { identifyFileType } from '@/utils/file-types';

const RTEditor = dynamic(
Expand Down Expand Up @@ -167,7 +167,7 @@ function ActivityDetailsBody({

<Grid.Col span={{ base: 12, xs: 3 }}>
<>
{isElevated(role) && (
{isPrivate(role) && (
<>
<Divider
label={
Expand Down Expand Up @@ -246,12 +246,12 @@ function ActivityDetailsBody({
)}
</>

{isElevated(role) && files && (
{isInternal(role) && files && (
<>
<Divider
label={
<Group gap={0} preventGrowOverflow wrap="nowrap">
<IconFileText className="mr-2" size={16} />
<IconLibrary className="mr-2" size={16} />
Reports
</Group>
}
Expand All @@ -263,51 +263,45 @@ function ActivityDetailsBody({
{files.length > 0 ? (
<>
{files.map((file) => (
<>
<Group
align="flex-start"
gap={8}
key={file.checksum}
my={16}
>
<Badge mr={4} size="sm" variant="default">
{identifyFileType(file.type)}
</Badge>
<Group align="flex-start" gap={8} key={file.checksum} my={16}>
<Badge mr={4} size="sm" variant="default">
{identifyFileType(file.type)}
</Badge>

<div>
<Anchor
component="button"
fw={500}
lineClamp={1}
onClick={() => saveFile(file.name, file.checksum)}
size="sm"
ta="left"
>
{file.name}
</Anchor>
<Group gap={2} mt={4}>
<Text c="dimmed" size="xs">
{dayjs(file.uploaded_at).fromNow()}
</Text>
<div>
<Anchor
component="button"
fw={500}
lineClamp={1}
onClick={() => saveFile(file.name, file.checksum)}
size="sm"
ta="left"
>
{file.name}
</Anchor>
<Group gap={2} mt={4}>
<Text c="dimmed" size="xs">
{dayjs(file.uploaded_at).fromNow()}
</Text>

<Tooltip label="Verified checksum of the uploaded file, should match the downloaded file.">
<Badge
className="cursor-pointer"
color="gray"
leftSection={
<IconRosetteDiscountCheck size={16} />
}
onClick={() => clipboard.copy(file.checksum)}
size="xs"
variant="transparent"
>
{file.checksum.slice(0, 8)}
</Badge>
</Tooltip>
</Group>
</div>
</Group>
</>
<Tooltip
label="Verified checksum of the uploaded file, should match the downloaded file."
position="bottom"
>
<Badge
className="cursor-pointer"
color="gray"
leftSection={<IconRosetteDiscountCheck size={16} />}
onClick={() => clipboard.copy(file.checksum)}
size="xs"
variant="transparent"
>
{file.checksum.slice(0, 8)}
</Badge>
</Tooltip>
</Group>
</div>
</Group>
))}
</>
) : (
Expand Down
162 changes: 92 additions & 70 deletions src/app/portal/activities/_components/ActivityDetails/ActivityInfoHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
IconRss,
IconTrash,
IconUpload,
IconUsersGroup,
} from '@tabler/icons-react';
import { useProgress } from 'react-transition-progress';
import { formatDateRange } from 'little-date';
Expand All @@ -40,8 +41,9 @@ import {
} from '@portal/activities/actions';
import { ActivityFormProps } from '../Forms/ActivityFormModal';
import type { Enums } from '@/libs/supabase/_database';
import { isInternal } from '@/utils/access-control';
import { isElevated, isInternal, isStudent } from '@/utils/access-control';
import { useUser } from '@/components/Providers/UserProvider';
import { FacultyAssignmentModal } from '../Forms/FacultyAssignmentModal';

const ActivityFormModal = dynamic(
() =>
Expand Down Expand Up @@ -138,7 +140,10 @@ function ActivityDetailsHeader({
}) {
const { id: userId } = useUser();

const [opened, { open, close }] = useDisclosure(false);
const [editOpened, { open: editOpen, close: editClose }] =
useDisclosure(false);
const [assignOpened, { open: assignOpen, close: assignClose }] =
useDisclosure(false);
const [localFiles, setLocalFiles] = useState<File[]>();
const [subscribed, setSubscribed] = useState(false);

Expand Down Expand Up @@ -188,12 +193,16 @@ function ActivityDetailsHeader({
<>
<ActivityFormModal
activity={activityForm}
close={close}
key={activity.id}
opened={opened}
close={editClose}
opened={editOpened}
/>
<FacultyAssignmentModal
activity={activityForm}
close={assignClose}
opened={assignOpened}
/>

<Group justify="space-between">
<Group justify="space-between" wrap="wrap-reverse">
<Stack gap={0}>
<Title mb="lg" order={2}>
{activity?.title}
Expand Down Expand Up @@ -235,81 +244,94 @@ function ActivityDetailsHeader({

{/* Activity control buttons */}
<Group gap="xs" mt={16}>
{isInternal(role) ? (
<>
<Button.Group>
<>
<Button.Group>
{isStudent(role) && (
<Button
leftSection={<IconCalendarEvent size={16} />}
onClick={open}
variant="default"
leftSection={<IconRss size={16} />}
onClick={() =>
onUserSubscribe(
activity.id as string,
userId,
subscribed ? !subscribed : true,
setSubscribed,
)
}
variant={subscribed ? 'default' : 'filled'}
>
Adjust Details
{subscribed ? 'Unsubscribe' : 'Subscribe'}
</Button>
)}
{/* Internal-only controls */}
{isInternal(role) && (
<>
<Button
leftSection={<IconCalendarEvent size={16} />}
onClick={editOpen}
variant="default"
>
Adjust Details
</Button>

<Button
leftSection={
editable ? (
<IconEditOff size={16} />
) : (
<IconEdit size={16} />
)
}
onClick={toggleEdit}
variant="default"
>
{editable ? 'Hide Toolbars' : 'Edit Description'}
</Button>
</>
)}

{/* Faculty Assignment */}
{isElevated(role) && (
<Button
leftSection={
editable ? (
<IconEditOff size={16} />
) : (
<IconEdit size={16} />
)
}
onClick={toggleEdit}
leftSection={<IconUsersGroup size={16} />}
onClick={assignOpen}
variant="default"
>
{editable ? 'Hide Toolbars' : 'Edit Description'}
Assign Faculty
</Button>
</Button.Group>
)}
</Button.Group>

<Divider orientation="vertical" />
<Divider orientation="vertical" />

<FileButton
accept=".odt,.doc,.docx,.pdf,.pptx,.ppt,.xls,.xlsx,.csv"
multiple
onChange={setLocalFiles}
>
{(props) => (
<Tooltip label="Only visible to admins/staffs. Max. 50mb per file">
<Button
leftSection={<IconUpload size={16} />}
variant="default"
{...props}
>
Upload Reports
</Button>
</Tooltip>
)}
</FileButton>
<FileButton
accept=".odt,.doc,.docx,.pdf,.pptx,.ppt,.xls,.xlsx,.csv"
multiple
onChange={setLocalFiles}
>
{(props) => (
<Tooltip label="Only visible to admins/staffs. Max. 50mb per file">
<Button
leftSection={<IconUpload size={16} />}
variant="default"
{...props}
>
Upload Reports
</Button>
</Tooltip>
)}
</FileButton>

<Button
color="red"
leftSection={<IconTrash size={16} />}
onClick={() =>
deleteModal(activity.id as string, router, startProgress)
}
variant="filled"
>
Delete Activity
</Button>
</>
) : (
<>
<Button
leftSection={<IconRss size={16} />}
onClick={() =>
onUserSubscribe(
activity.id as string,
userId,
subscribed ? !subscribed : true,
setSubscribed,
)
}
variant={subscribed ? 'default' : 'filled'}
>
{subscribed ? 'Unsubscribe' : 'Subscribe'}
</Button>
</>
)}
<Button
color="red"
leftSection={<IconTrash size={16} />}
onClick={() =>
deleteModal(activity.id as string, router, startProgress)
}
variant="outline"
>
Delete Activity
</Button>
</>
</Group>
</Stack>
<Image
Expand Down
Loading

0 comments on commit 718ef12

Please sign in to comment.