From 631f9278539b307015acd51389d058f4f7135328 Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 25 Jul 2023 20:39:09 +0200 Subject: [PATCH] feat: add delete confirmation screens --- .../(withmenu)/collections/admin.tsx | 15 +- .../[orgslug]/(withmenu)/courses/courses.tsx | 18 ++- .../Pages/CourseEdit/Draggables/Chapter.tsx | 23 ++-- .../ConfirmationModal/ConfirmationModal.tsx | 128 ++++++++++++++++++ 4 files changed, 166 insertions(+), 18 deletions(-) create mode 100644 front/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx index e32eb804..732c4068 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx @@ -2,6 +2,7 @@ import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'; import { AuthContext } from '@components/Security/AuthProvider'; +import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'; import { getUriWithOrg } from '@services/config/config'; import { deleteCollection } from '@services/courses/collections'; import { revalidateTags } from '@services/utils/ts/requests'; @@ -26,9 +27,17 @@ const CollectionAdminEditsArea = (props: any) => { return (
- + + Delete + } + functionToExecute={() => deleteCollectionUI(props.collection_id)} + status='warning' + >
) diff --git a/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx b/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx index e1b57d4d..dbe9f11d 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx @@ -16,6 +16,7 @@ import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWra import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'; import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'; import { getCourseThumbnailMediaDirectory } from '@services/media/media'; +import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'; interface CourseProps { orgslug: string; @@ -48,6 +49,7 @@ function Courses(props: CourseProps) { return (
+
@@ -73,7 +75,7 @@ function Courses(props: CourseProps) {
{courses.map((course: any) => (
- +
@@ -94,9 +96,17 @@ function Courses(props: CourseProps) { const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => { return (
- + + Delete + } + functionToExecute={() => props.deleteCourses(props.courseId)} + status='warning' + > } + functionToExecute={() => props.deleteChapter(props.info.list.chapter.id)} + status='warning' + > - -
{ - props.deleteChapter(props.info.list.chapter.id); - }} - > - -
{(provided) => ( @@ -68,8 +71,6 @@ const ChapterWrapper = styled.div` border: 1px solid rgba(255, 255, 255, 0.19); box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%); transition: all 0.2s ease; - - h3{ padding-left: 20px; padding-right: 20px; diff --git a/front/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx b/front/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx new file mode 100644 index 00000000..9c66f056 --- /dev/null +++ b/front/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx @@ -0,0 +1,128 @@ +'use client'; +import React from 'react'; +import * as Dialog from '@radix-ui/react-dialog'; +import { styled, keyframes } from '@stitches/react'; +import { blackA, } from '@radix-ui/colors'; +import { AlertTriangle, Info } from 'lucide-react'; + +type ModalParams = { + confirmationMessage: string; + confirmationButtonText: string; + dialogTitle: string; + functionToExecute: any; + dialogTrigger?: React.ReactNode; + status?: "warning" | "info"; +}; + +const ConfirmationModal = (params: ModalParams) => { + const [isDialogOpen, setIsDialogOpen] = React.useState(false); + const warningColors = 'bg-red-100 text-red-600' + const infoColors = 'bg-blue-100 text-blue-600' + const warningButtonColors = 'text-white bg-red-500 hover:bg-red-600' + const infoButtonColors = 'text-white bg-blue-500 hover:bg-blue-600' + + + const onOpenChange = React.useCallback( + (open: any) => { + setIsDialogOpen(open); + }, + [setIsDialogOpen] + ); + + return ( + + {params.dialogTrigger ? ( + + {params.dialogTrigger} + + ) : null} + + + + +
+
+ {params.status === 'warning' ? : } +
+
+
+ {params.dialogTitle} +
+
+ {params.confirmationMessage} +
+
+
{ params.functionToExecute(); setIsDialogOpen(false) }}> + {params.confirmationButtonText} +
+
+
+
+ + + + ) +}; + +const overlayShow = keyframes({ + '0%': { opacity: 0 }, + '100%': { opacity: 1 }, +}); + +const overlayClose = keyframes({ + '0%': { opacity: 1 }, + '100%': { opacity: 0 }, +}); + +const contentShow = keyframes({ + '0%': { opacity: 0, transform: 'translate(-50%, -50%) scale(.96)' }, + '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' }, +}); + +const contentClose = keyframes({ + '0%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' }, + '100%': { opacity: 0, transform: 'translate(-50%, -52%) scale(.96)' }, +}); + +const DialogOverlay = styled(Dialog.Overlay, { + backgroundColor: blackA.blackA9, + position: 'fixed', + zIndex: 500, + inset: 0, + animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, + '&[data-state="closed"]': { + animation: `${overlayClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, + }, +}); + +const DialogContent = styled(Dialog.Content, { + + backgroundColor: 'white', + borderRadius: 18, + zIndex: 501, + boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 'auto', + minWidth: '500px', + overflow: 'hidden', + height: 'auto', + maxHeight: '85vh', + maxWidth: '600px', + padding: 11, + animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, + '&:focus': { outline: 'none' }, + + '&[data-state="closed"]': { + animation: `${contentClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, + }, + transition: "max-height 0.3s ease-out", +}); + + +export default ConfirmationModal; \ No newline at end of file