feat: schedule list item action menu (#230)
* feat: action menu for schedule list item * feat: schedule action menu functionality * feat: dialog provider popups for delete * feat: duplicate schedule satiesfies type * refactor: change non-null assertion to early return for rename schedule * refactor: move schedule list item dialog providers to util file * style: run prettier * chore: inline object with satisfies operator * fix: border issues * style: change popups to match figma * fix: update import for schedule list item dialog providers * style: change dropdown text style to match figma * fix: add back dialog context * style: rounded edges when hovering over action + soften border color * chore: cleanup and improve styling * fix: dialog in popupmain --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> Co-authored-by: Razboy20 <razboy20@gmail.com>
This commit is contained in:
Casey Charleston
GitHub
@@ -1,6 +1,8 @@
|
||||
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
|
||||
import { generateRandomId } from '@shared/util/random';
|
||||
|
||||
import handleDuplicate from './handleDuplicate';
|
||||
|
||||
/**
|
||||
* Creates a new schedule with the given name
|
||||
* @param scheduleName the name of the schedule to create
|
||||
@@ -8,13 +10,13 @@ import { generateRandomId } from '@shared/util/random';
|
||||
*/
|
||||
export default async function createSchedule(scheduleName: string): Promise<string | undefined> {
|
||||
const schedules = await UserScheduleStore.get('schedules');
|
||||
// if (schedules.find(schedule => schedule.name === scheduleName)) {
|
||||
// return `Schedule ${scheduleName} already exists`;
|
||||
// }
|
||||
|
||||
// Duplicate schedule found, we need to append a number to the end of the schedule name
|
||||
const updatedName = await handleDuplicate(scheduleName);
|
||||
|
||||
schedules.push({
|
||||
id: generateRandomId(),
|
||||
name: scheduleName,
|
||||
name: updatedName,
|
||||
courses: [],
|
||||
hours: 0,
|
||||
updatedAt: Date.now(),
|
||||
|
||||
@@ -17,7 +17,11 @@ export default async function deleteSchedule(scheduleId: string): Promise<string
|
||||
throw new Error(`Schedule ${scheduleId} does not exist`);
|
||||
}
|
||||
if (scheduleIndex === activeIndex) {
|
||||
throw new Error('You cannot delete your active schedule! Please switch to another schedule before deleting.');
|
||||
throw new Error(`Cannot delete active schedule`);
|
||||
}
|
||||
|
||||
if (scheduleIndex < activeIndex) {
|
||||
await UserScheduleStore.set('activeIndex', activeIndex - 1);
|
||||
}
|
||||
|
||||
schedules.splice(scheduleIndex, 1);
|
||||
|
||||
31
src/pages/background/lib/duplicateSchedule.ts
Normal file
31
src/pages/background/lib/duplicateSchedule.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
|
||||
import { generateRandomId } from '@shared/util/random';
|
||||
|
||||
import handleDuplicate from './handleDuplicate';
|
||||
|
||||
/**
|
||||
* Creates a new schedule with the given name
|
||||
* @param scheduleName the name of the schedule to create
|
||||
* @returns undefined if successful, otherwise an error message
|
||||
*/
|
||||
export default async function duplicateSchedule(scheduleId: string): Promise<string | undefined> {
|
||||
const schedules = await UserScheduleStore.get('schedules');
|
||||
const schedule = schedules.find(schedule => schedule.id === scheduleId);
|
||||
|
||||
if (schedule === undefined) {
|
||||
throw new Error(`Schedule ${scheduleId} does not exist`);
|
||||
}
|
||||
|
||||
const updatedName = await handleDuplicate(schedule.name);
|
||||
|
||||
schedules.push({
|
||||
id: generateRandomId(),
|
||||
name: updatedName,
|
||||
courses: JSON.parse(JSON.stringify(schedule.courses)),
|
||||
hours: schedule.hours,
|
||||
updatedAt: Date.now(),
|
||||
} satisfies typeof schedule);
|
||||
|
||||
await UserScheduleStore.set('schedules', schedules);
|
||||
return undefined;
|
||||
}
|
||||
37
src/pages/background/lib/handleDuplicate.ts
Normal file
37
src/pages/background/lib/handleDuplicate.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
|
||||
|
||||
/**
|
||||
* Duplicates a new schedule with the given name.
|
||||
* Assumes that each schedule has a unique name.
|
||||
* @param scheduleName the name of the schedule to handle duplication for
|
||||
* @param schedules the list of UserSchedules to find existing names
|
||||
* @returns the new name for the schedule, of the form `{baseName}({index})`
|
||||
*/
|
||||
export default async function handleDuplicate(scheduleName: string): Promise<string> {
|
||||
const schedules = await UserScheduleStore.get('schedules');
|
||||
|
||||
// No point in checking for duplicates if the name is unique
|
||||
if (schedules.find(schedule => schedule.name === scheduleName) === undefined) {
|
||||
return scheduleName;
|
||||
}
|
||||
|
||||
// Regex for matching `{baseName}({index})`, where match[1] = baseName, match[2] = (index)
|
||||
const regex = /^(.+?)(\(\d+\))?$/;
|
||||
|
||||
// Extract base name and existing index
|
||||
const match = scheduleName.match(regex);
|
||||
const baseName = match && match[1] ? match[1] : scheduleName;
|
||||
|
||||
// Extract number from parentheses and increment
|
||||
let index = match && match[2] ? parseInt(match[2].slice(1, -1), 10) + 1 : 1;
|
||||
|
||||
let newName: string;
|
||||
|
||||
// Increment until an unused index is found
|
||||
do {
|
||||
newName = `${baseName} (${index++})`;
|
||||
// eslint-disable-next-line @typescript-eslint/no-loop-func
|
||||
} while (schedules.find(schedule => schedule.name === newName));
|
||||
|
||||
return newName;
|
||||
}
|
||||
@@ -1,21 +1,41 @@
|
||||
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
|
||||
|
||||
import handleDuplicate from './handleDuplicate';
|
||||
|
||||
/**
|
||||
* Renames a schedule with the specified name to a new name.
|
||||
* @param scheduleId - The id of the schedule to be renamed.
|
||||
* @param newName - The new name for the schedule.
|
||||
* @returns A promise that resolves to a string if there is an error, or undefined if the schedule is renamed successfully.
|
||||
* @returns A promise that resolves to the new name if successful, otherwise undefined.
|
||||
*/
|
||||
export default async function renameSchedule(scheduleId: string, newName: string): Promise<string | undefined> {
|
||||
const schedules = await UserScheduleStore.get('schedules');
|
||||
|
||||
const scheduleIndex = schedules.findIndex(schedule => schedule.id === scheduleId);
|
||||
if (scheduleIndex === -1) {
|
||||
return `Schedule ${scheduleId} does not exist`;
|
||||
return undefined;
|
||||
}
|
||||
const schedule = schedules[scheduleIndex];
|
||||
if (schedule === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
schedules[scheduleIndex]!.name = newName;
|
||||
// schedules[scheduleIndex].updatedAt = Date.now();
|
||||
// if old name is of the form `{baseName}{index}` and newName === baseName, do nothing.
|
||||
const oldName = schedule.name;
|
||||
const regex = /^(.+?)(\(\d+\))?$/;
|
||||
const match = oldName?.match(regex);
|
||||
const baseName = match?.[1] ?? '';
|
||||
const baseNameOfNewName = newName.match(regex)?.[1];
|
||||
|
||||
if (baseName === baseNameOfNewName) {
|
||||
return oldName;
|
||||
}
|
||||
|
||||
const updatedName = await handleDuplicate(newName);
|
||||
|
||||
schedule.name = updatedName;
|
||||
schedule.updatedAt = Date.now();
|
||||
|
||||
await UserScheduleStore.set('schedules', schedules);
|
||||
return undefined;
|
||||
return newName;
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ import RefreshIcon from '~icons/material-symbols/refresh';
|
||||
import SettingsIcon from '~icons/material-symbols/settings';
|
||||
|
||||
import CourseStatus from './common/CourseStatus';
|
||||
import DialogProvider from './common/DialogProvider/DialogProvider';
|
||||
import { SmallLogo } from './common/LogoIcon';
|
||||
import PopupCourseBlock from './common/PopupCourseBlock';
|
||||
import ScheduleDropdown from './common/ScheduleDropdown';
|
||||
@@ -50,111 +51,116 @@ export default function PopupMain(): JSX.Element {
|
||||
|
||||
return (
|
||||
<ExtensionRoot>
|
||||
<div className='h-screen max-h-full flex flex-col bg-white'>
|
||||
<div className='p-5 py-3.5'>
|
||||
<div className='flex items-center justify-between bg-white'>
|
||||
<SmallLogo />
|
||||
<div className='flex items-center gap-2.5'>
|
||||
<button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
|
||||
<CalendarIcon className='size-6 text-white' />
|
||||
</button>
|
||||
<button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
|
||||
<SettingsIcon className='size-6 color-ut-black' />
|
||||
</button>
|
||||
<DialogProvider>
|
||||
<div className='h-screen max-h-full flex flex-col bg-white'>
|
||||
<div className='p-5 py-3.5'>
|
||||
<div className='flex items-center justify-between bg-white'>
|
||||
<SmallLogo />
|
||||
<div className='flex items-center gap-2.5'>
|
||||
<button
|
||||
className='bg-ut-burntorange px-2 py-1.25 btn'
|
||||
onClick={handleCalendarOpenOnClick}
|
||||
>
|
||||
<CalendarIcon className='size-6 text-white' />
|
||||
</button>
|
||||
<button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
|
||||
<SettingsIcon className='size-6 color-ut-black' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider orientation='horizontal' size='100%' />
|
||||
<div className='px-5 pb-2.5 pt-3.75'>
|
||||
<ScheduleDropdown>
|
||||
<List
|
||||
draggables={schedules}
|
||||
itemKey={schedule => schedule.id}
|
||||
onReordered={reordered => {
|
||||
const activeSchedule = getActiveSchedule();
|
||||
const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);
|
||||
<Divider orientation='horizontal' size='100%' />
|
||||
<div className='px-5 pb-2.5 pt-3.75'>
|
||||
<ScheduleDropdown>
|
||||
<List
|
||||
draggables={schedules}
|
||||
itemKey={schedule => schedule.id}
|
||||
onReordered={reordered => {
|
||||
const activeSchedule = getActiveSchedule();
|
||||
const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);
|
||||
|
||||
// don't care about the promise
|
||||
UserScheduleStore.set('schedules', reordered);
|
||||
UserScheduleStore.set('activeIndex', activeIndex);
|
||||
}}
|
||||
gap={10}
|
||||
>
|
||||
{(schedule, handleProps) => (
|
||||
<ScheduleListItem
|
||||
schedule={schedule}
|
||||
onClick={() => {
|
||||
switchSchedule(schedule.id);
|
||||
}}
|
||||
dragHandleProps={handleProps}
|
||||
/>
|
||||
)}
|
||||
</List>
|
||||
</ScheduleDropdown>
|
||||
</div>
|
||||
{activeSchedule?.courses?.length === 0 && (
|
||||
<div className='max-w-64 flex flex-col items-center self-center gap-1.25 px-2 py-2'>
|
||||
<Text variant='small' className='text-center text-ut-gray !font-normal'>
|
||||
{funny}
|
||||
</Text>
|
||||
<Text variant='small' className='text-center text-black'>
|
||||
(No courses added)
|
||||
</Text>
|
||||
// don't care about the promise
|
||||
UserScheduleStore.set('schedules', reordered);
|
||||
UserScheduleStore.set('activeIndex', activeIndex);
|
||||
}}
|
||||
gap={10}
|
||||
>
|
||||
{(schedule, handleProps) => (
|
||||
<ScheduleListItem
|
||||
schedule={schedule}
|
||||
onClick={() => {
|
||||
switchSchedule(schedule.id);
|
||||
}}
|
||||
dragHandleProps={handleProps}
|
||||
/>
|
||||
)}
|
||||
</List>
|
||||
</ScheduleDropdown>
|
||||
</div>
|
||||
)}
|
||||
<div className='flex-1 self-stretch overflow-y-auto px-5'>
|
||||
{activeSchedule?.courses?.length > 0 && (
|
||||
<List
|
||||
draggables={activeSchedule.courses}
|
||||
onReordered={reordered => {
|
||||
activeSchedule.courses = reordered;
|
||||
replaceSchedule(getActiveSchedule(), activeSchedule);
|
||||
}}
|
||||
itemKey={e => e.uniqueId}
|
||||
gap={10}
|
||||
>
|
||||
{(course, handleProps) => (
|
||||
<PopupCourseBlock
|
||||
key={course.uniqueId}
|
||||
course={course}
|
||||
colors={course.colors}
|
||||
dragHandleProps={handleProps}
|
||||
/>
|
||||
)}
|
||||
</List>
|
||||
{activeSchedule?.courses?.length === 0 && (
|
||||
<div className='max-w-64 flex flex-col items-center self-center gap-1.25 px-2 py-2'>
|
||||
<Text variant='small' className='text-center text-ut-gray !font-normal'>
|
||||
{funny}
|
||||
</Text>
|
||||
<Text variant='small' className='text-center text-black'>
|
||||
(No courses added)
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
|
||||
<div className='flex gap-2.5'>
|
||||
{enableCourseStatusChips && (
|
||||
<>
|
||||
<CourseStatus status='WAITLISTED' size='mini' />
|
||||
<CourseStatus status='CLOSED' size='mini' />
|
||||
<CourseStatus status='CANCELLED' size='mini' />
|
||||
</>
|
||||
<div className='flex-1 self-stretch overflow-y-auto px-5'>
|
||||
{activeSchedule?.courses?.length > 0 && (
|
||||
<List
|
||||
draggables={activeSchedule.courses}
|
||||
onReordered={reordered => {
|
||||
activeSchedule.courses = reordered;
|
||||
replaceSchedule(getActiveSchedule(), activeSchedule);
|
||||
}}
|
||||
itemKey={e => e.uniqueId}
|
||||
gap={10}
|
||||
>
|
||||
{(course, handleProps) => (
|
||||
<PopupCourseBlock
|
||||
key={course.uniqueId}
|
||||
course={course}
|
||||
colors={course.colors}
|
||||
dragHandleProps={handleProps}
|
||||
/>
|
||||
)}
|
||||
</List>
|
||||
)}
|
||||
</div>
|
||||
{enableCourseRefreshing && (
|
||||
<div className='inline-flex items-center self-center gap-1'>
|
||||
<Text variant='mini' className='text-ut-gray !font-normal'>
|
||||
DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
|
||||
</Text>
|
||||
<button
|
||||
className='h-4 w-4 bg-transparent p-0 btn'
|
||||
onClick={() => {
|
||||
setIsRefreshing(true);
|
||||
}}
|
||||
>
|
||||
<RefreshIcon
|
||||
className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
|
||||
'animate-spin': isRefreshing,
|
||||
})}
|
||||
/>
|
||||
</button>
|
||||
<div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
|
||||
<div className='flex gap-2.5'>
|
||||
{enableCourseStatusChips && (
|
||||
<>
|
||||
<CourseStatus status='WAITLISTED' size='mini' />
|
||||
<CourseStatus status='CLOSED' size='mini' />
|
||||
<CourseStatus status='CANCELLED' size='mini' />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{enableCourseRefreshing && (
|
||||
<div className='inline-flex items-center self-center gap-1'>
|
||||
<Text variant='mini' className='text-ut-gray !font-normal'>
|
||||
DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
|
||||
</Text>
|
||||
<button
|
||||
className='h-4 w-4 bg-transparent p-0 btn'
|
||||
onClick={() => {
|
||||
setIsRefreshing(true);
|
||||
}}
|
||||
>
|
||||
<RefreshIcon
|
||||
className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
|
||||
'animate-spin': isRefreshing,
|
||||
})}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogProvider>
|
||||
</ExtensionRoot>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
|
||||
>
|
||||
<div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
|
||||
</TransitionChild>
|
||||
<div className='fixed inset-0 z-50 flex items-center justify-center'>
|
||||
<div className='fixed inset-0 z-50 flex items-center justify-center p-2'>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
|
||||
@@ -56,7 +56,7 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
|
||||
>
|
||||
<DialogPanel
|
||||
className={clsx(
|
||||
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)]',
|
||||
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%-1rem)]',
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.extensionRoot {
|
||||
@apply font-sans h-full;
|
||||
@apply font-sans;
|
||||
color: #303030;
|
||||
|
||||
[data-rfd-drag-handle-context-id=':r1:'] {
|
||||
|
||||
@@ -2,24 +2,27 @@
|
||||
import 'uno.css';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import React, { forwardRef } from 'react';
|
||||
|
||||
import styles from './ExtensionRoot.module.scss';
|
||||
|
||||
interface Props {
|
||||
testId?: string;
|
||||
className?: string;
|
||||
}
|
||||
export const styleResetClass = styles.extensionRoot;
|
||||
|
||||
/**
|
||||
* A wrapper component for the extension elements that adds some basic styling to them
|
||||
*/
|
||||
export default function ExtensionRoot(props: React.PropsWithChildren<Props>): JSX.Element {
|
||||
export default function ExtensionRoot(props: React.HTMLProps<HTMLDivElement>): JSX.Element {
|
||||
const { className, ...others } = props;
|
||||
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<div className={clsx(styles.extensionRoot, props.className)} data-testid={props.testId}>
|
||||
{props.children}
|
||||
</div>
|
||||
<div className={clsx(styleResetClass, 'h-full', className)} {...others} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
export const ExtensionRootWrapper = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
|
||||
<div className={styleResetClass}>
|
||||
<div {...props} ref={ref} />
|
||||
</div>
|
||||
));
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
|
||||
import deleteSchedule from '@pages/background/lib/deleteSchedule';
|
||||
import duplicateSchedule from '@pages/background/lib/duplicateSchedule';
|
||||
import renameSchedule from '@pages/background/lib/renameSchedule';
|
||||
import type { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
@@ -6,11 +8,12 @@ import useSchedules from '@views/hooks/useSchedules';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import XIcon from '~icons/material-symbols/close';
|
||||
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
|
||||
import MoreActionsIcon from '~icons/material-symbols/more-vert';
|
||||
|
||||
import { Button } from './Button';
|
||||
import { usePrompt } from './DialogProvider/DialogProvider';
|
||||
import DialogProvider, { usePrompt } from './DialogProvider/DialogProvider';
|
||||
import { ExtensionRootWrapper, styleResetClass } from './ExtensionRoot/ExtensionRoot';
|
||||
|
||||
/**
|
||||
* Props for the ScheduleListItem component.
|
||||
@@ -29,14 +32,12 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
|
||||
const [activeSchedule] = useSchedules();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editorValue, setEditorValue] = useState(schedule.name);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const showDialog = usePrompt();
|
||||
|
||||
const editorRef = React.useRef<HTMLInputElement>(null);
|
||||
useEffect(() => {
|
||||
const editor = editorRef.current;
|
||||
|
||||
setEditorValue(schedule.name);
|
||||
|
||||
if (isEditing && editor) {
|
||||
@@ -47,35 +48,63 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
|
||||
|
||||
const isActive = useMemo(() => activeSchedule.id === schedule.id, [activeSchedule, schedule]);
|
||||
|
||||
const handleBlur = () => {
|
||||
if (editorValue.trim() !== '') {
|
||||
schedule.name = editorValue.trim();
|
||||
renameSchedule(schedule.id, schedule.name);
|
||||
const handleBlur = async () => {
|
||||
if (editorValue.trim() !== '' && editorValue.trim() !== schedule.name) {
|
||||
schedule.name = (await renameSchedule(schedule.id, editorValue.trim())) as string;
|
||||
}
|
||||
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
deleteSchedule(schedule.id).catch(e => setError(e.message));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
const handleDelete = () => {
|
||||
if (schedule.id === activeSchedule.id) {
|
||||
showDialog({
|
||||
title: <span className='text-ut-red'>Something went wrong.</span>,
|
||||
description: error,
|
||||
title: `Unable to delete active schedule.`,
|
||||
|
||||
description: (
|
||||
<>
|
||||
<Text>Deleting the active schedule</Text>
|
||||
<Text className='text-ut-burntorange'> {schedule.name} </Text>
|
||||
<Text>is not allowed. Please switch to another schedule and try again.</Text>
|
||||
</>
|
||||
),
|
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
buttons: close => (
|
||||
<Button variant='filled' color='ut-black' onClick={close}>
|
||||
I understand
|
||||
<Button variant='filled' color='ut-burntorange' onClick={close}>
|
||||
I Understand
|
||||
</Button>
|
||||
),
|
||||
onClose: () => setError(undefined),
|
||||
});
|
||||
} else {
|
||||
showDialog({
|
||||
title: `Are you sure?`,
|
||||
description: (
|
||||
<>
|
||||
<Text>Deleting</Text>
|
||||
<Text className='text-ut-burntorange'> {schedule.name} </Text>
|
||||
<Text>is permanent and will remove all added courses from that schedule.</Text>
|
||||
</>
|
||||
),
|
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
buttons: close => (
|
||||
<>
|
||||
<Button variant='single' color='ut-black' onClick={close}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant='filled'
|
||||
color='ut-red'
|
||||
onClick={() => {
|
||||
close();
|
||||
deleteSchedule(schedule.id);
|
||||
}}
|
||||
>
|
||||
Delete Permanently
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='rounded bg-white'>
|
||||
@@ -85,12 +114,12 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
|
||||
</div>
|
||||
<div className='group relative flex flex-1 items-center overflow-x-hidden'>
|
||||
<div
|
||||
className='flex flex-grow items-center gap-1.5 overflow-x-hidden'
|
||||
className='group/circle flex flex-grow items-center gap-1.5 overflow-x-hidden'
|
||||
onClick={(...e) => !isEditing && onClick?.(...e)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
|
||||
'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active/circle:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
|
||||
{
|
||||
'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive,
|
||||
}
|
||||
@@ -119,9 +148,57 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<div className='self-end'>
|
||||
<XIcon className='invisible h-5 w-5 text-ut-red group-hover:visible' onClick={onDelete} />
|
||||
</div>
|
||||
<DialogProvider>
|
||||
<Menu>
|
||||
<MenuButton className='invisible h-fit bg-transparent p-0 text-ut-gray btn-transition data-[open]:visible group-hover:visible'>
|
||||
<MoreActionsIcon className='h-6 w-6' />
|
||||
</MenuButton>
|
||||
|
||||
<MenuItems
|
||||
as={ExtensionRootWrapper}
|
||||
className={clsx([
|
||||
styleResetClass,
|
||||
'w-30 cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite focus:outline-none',
|
||||
'data-[closed]:(opacity-0 scale-95)',
|
||||
'data-[enter]:(ease-out-expo duration-150)',
|
||||
'data-[leave]:(ease-out duration-50)',
|
||||
])}
|
||||
transition
|
||||
anchor='bottom end'
|
||||
>
|
||||
<MenuItem>
|
||||
<Text
|
||||
as='button'
|
||||
variant='small'
|
||||
onClick={() => setIsEditing(true)}
|
||||
className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40'
|
||||
>
|
||||
Rename
|
||||
</Text>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<Text
|
||||
as='button'
|
||||
variant='small'
|
||||
onClick={() => duplicateSchedule(schedule.id)}
|
||||
className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40'
|
||||
>
|
||||
Duplicate
|
||||
</Text>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<Text
|
||||
as='button'
|
||||
variant='small'
|
||||
onClick={handleDelete}
|
||||
className='w-full rounded bg-transparent p-2 text-left text-ut-red data-[focus]:bg-red-200/40'
|
||||
>
|
||||
Delete
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</Menu>
|
||||
</DialogProvider>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user