Feature/deseng671: New Summary page in authoring section (#2587)

* feature/deseng671: integrated authoring summary page form. * feature/deseng671: Made small revisions as per PR comments. Removed test WidgetPicker component from authoring tab, due to unit tests failing.
bcgov · Sep 13, 2024 · 5373540 · 5373540
1 parent 6ba4401
commit 5373540
Show file tree

Hide file tree

Showing 14 changed files with 259 additions and 211 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,10 @@
+## September 12, 2024
+- **Feature** New Summary page in authoring section [🎟️ DESENG-671](https://citz-gdx.atlassian.net/browse/DESENG-671)
+  - Fetches values
+  - Saves values to database
+  - Returns success and error messages to user after form submission
+  - Resets form dirty state after submission
+
 ## September 9, 2024
 
 - **Feature** Add image widget [🎟️ DESENG-689](https://citz-gdx.atlassian.net/browse/DESENG-689)

diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringBanner.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringBanner.tsx
@@ -12,7 +12,7 @@ const ENGAGEMENT_UPLOADER_HEIGHT = '360px';
 const ENGAGEMENT_CROPPER_ASPECT_RATIO = 1920 / 700;
 
 const AuthoringBanner = () => {
-    const { setValue, watch, control, engagement }: AuthoringTemplateOutletContext = useOutletContext(); // Access the form functions and values from the authoring template
+    const { engagement }: AuthoringTemplateOutletContext = useOutletContext(); // Access the form functions and values from the authoring template
 
     const [bannerImage, setBannerImage] = useState<File | null>();
     const [savedBannerImageFileName, setSavedBannerImageFileName] = useState(engagement.banner_filename || '');

diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringBottomNav.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringBottomNav.tsx
@@ -14,12 +14,12 @@ import { getLanguageValue } from './AuthoringTemplate';
 
 const AuthoringBottomNav = ({
     isDirty,
-    isValid,
     isSubmitting,
     currentLanguage,
     setCurrentLanguage,
     languages,
     pageTitle,
+    setValue,
 }: AuthoringBottomNavProps) => {
     const isMediumScreenOrLarger = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
     const padding = { xs: '1rem 1rem', md: '1rem 1.5rem 1rem 2rem', lg: '1rem 3rem 1rem 2rem' };
@@ -96,10 +96,9 @@ const AuthoringBottomNav = ({
                         </ThemeProvider>
 
                         <Button
-                            disabled={!isValid || !isDirty || isSubmitting}
+                            disabled={!isDirty || isSubmitting}
                             type="submit"
-                            name="request_type"
-                            value="update"
+                            onClick={() => setValue('request_type', 'update')}
                             sx={{
                                 ...buttonStyles,
                                 margin: '0 1.2rem',
@@ -108,10 +107,9 @@ const AuthoringBottomNav = ({
                             Save Section
                         </Button>
                         <Button
-                            disabled={!isValid || !isDirty || isSubmitting}
+                            disabled={!isDirty || isSubmitting}
                             type="submit"
-                            name="request_type"
-                            value="preview"
+                            onClick={() => setValue('request_type', 'preview')}
                             sx={{
                                 ...buttonStyles,
                                 marginLeft: 'auto',
@@ -120,7 +118,7 @@ const AuthoringBottomNav = ({
                             <img
                                 style={{
                                     paddingRight: '0.3rem',
-                                    filter: !isValid || !isDirty || isSubmitting ? 'opacity(40%)' : 'opacity(100%)',
+                                    filter: !isDirty || isSubmitting ? 'opacity(40%)' : 'opacity(100%)',
                                 }}
                                 src={pagePreview}
                                 alt=""
@@ -146,15 +144,18 @@ const LanguageSelector = ({
     const handleSelectChange = (event: SelectChangeEvent<string>) => {
         const newLanguageCode = event.target.value;
         if (isDirty && !isSubmitting)
-            // todo: Replace this message with our stylized modal message.
-            window.confirm(
-                `Are you sure you want to switch to ${
-                    getLanguageValue(newLanguageCode, languages) || 'another language'
-                }? You have unsaved changes for the ${
-                    getLanguageValue(currentLanguage, languages) || 'current'
-                } language.`,
-            );
-        setCurrentLanguage(newLanguageCode);
+            if (
+                window.confirm(
+                    `Are you sure you want to switch to ${
+                        getLanguageValue(newLanguageCode, languages) || 'another language'
+                    }? You have unsaved changes for the ${
+                        getLanguageValue(currentLanguage, languages) || 'current'
+                    } language.`,
+                )
+            ) {
+                // todo: Replace this message with our stylized modal message.
+                setCurrentLanguage(newLanguageCode);
+            }
     };
     return (
         <Select

diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringContext.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringContext.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import { FormProvider, useForm } from 'react-hook-form';
 import { createSearchParams, useFetcher, Outlet } from 'react-router-dom';
+import { EditorState } from 'draft-js';
 
 export interface EngagementUpdateData {
     id: number;
@@ -21,33 +22,41 @@ export interface EngagementUpdateData {
     send_report: boolean;
     slug: string;
     request_type: string;
+    text_content: string;
+    json_content: string;
+    summary_editor_state: EditorState;
 }
 
+export const defaultValuesObject = {
+    id: 0,
+    status_id: 0,
+    taxon_id: 0,
+    content_id: 0,
+    name: '',
+    start_date: dayjs(new Date(1970, 0, 1)),
+    end_date: dayjs(new Date(1970, 0, 1)),
+    description: '',
+    rich_description: '',
+    banner_filename: '',
+    status_block: [],
+    title: '',
+    icon_name: '',
+    metadata_value: '',
+    send_report: undefined,
+    slug: '',
+    request_type: '',
+    text_content: '',
+    json_content: '{ blocks: [], entityMap: {} }',
+    summary_editor_state: EditorState.createEmpty(),
+};
+
 export const AuthoringContext = () => {
+    const [defaultValues, setDefaultValues] = useState(defaultValuesObject);
     const fetcher = useFetcher();
     const locationArray = window.location.href.split('/');
     const slug = locationArray[locationArray.length - 1];
-    const defaultDateValue = dayjs(new Date(1970, 0, 1));
     const engagementUpdateForm = useForm<EngagementUpdateData>({
-        defaultValues: {
-            id: 0,
-            status_id: 0,
-            taxon_id: 0,
-            content_id: 0,
-            name: '',
-            start_date: defaultDateValue,
-            end_date: defaultDateValue,
-            description: '',
-            rich_description: '',
-            banner_filename: '',
-            status_block: [],
-            title: '',
-            icon_name: '',
-            metadata_value: '',
-            send_report: undefined,
-            slug: '',
-            request_type: '',
-        },
+        defaultValues: useMemo(() => defaultValues, [defaultValues]),
         mode: 'onSubmit',
         reValidateMode: 'onChange',
     });
@@ -73,6 +82,8 @@ export const AuthoringContext = () => {
                 send_report: getSendReportValue(data.send_report),
                 slug: data.slug,
                 request_type: data.request_type,
+                text_content: data.text_content,
+                json_content: data.json_content,
             }),
             {
                 method: 'post',
@@ -90,7 +101,7 @@ export const AuthoringContext = () => {
 
     return (
         <FormProvider {...engagementUpdateForm}>
-            <Outlet context={{ onSubmit }} />
+            <Outlet context={{ onSubmit, defaultValues, setDefaultValues, fetcher }} />
         </FormProvider>
     );
 };
diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringDetails.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringDetails.tsx
@@ -26,9 +26,6 @@ const handleDuplicateTabNames = (newTabs: TabValues[], newTabName: string) => {
 const AuthoringDetails = () => {
     const {
         setValue,
-        watch, // Optional form control prop
-        control, // Optional form control prop
-        engagement, // Optional form control prop
         contentTabsEnabled,
         tabs,
         setTabs,