feature/deseng668: Added authoring template and skeletons.

bcgov · Sep 3, 2024 · 0702a23 · 0702a23
1 parent e60b306
commit 0702a23
Show file tree

Hide file tree

Showing 16 changed files with 1,706 additions and 115 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,7 @@
+## September 3, 2024
+- **Feature** New authoring content section [🎟️ DESENG-668](https://citz-gdx.atlassian.net/browse/DESENG-668)
+  - Added skeletons
+
 ## August 23, 2024
 - **Feature** New authoring content section [🎟️ DESENG-668](https://citz-gdx.atlassian.net/browse/DESENG-668)
   - Implemented authoring side nav

diff --git a/met-web/src/components/common/RichTextEditor/index.tsx b/met-web/src/components/common/RichTextEditor/index.tsx
@@ -67,7 +67,6 @@ const RichTextEditor = ({
                         onEditorStateChange={handleChange}
                         handlePastedText={() => false}
                         editorStyle={{
-                            height: '10em',
                             padding: '1em',
                             resize: 'vertical',
                         }}

diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringBanner.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringBanner.tsx
diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringBottomNav.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringBottomNav.tsx
@@ -1,45 +1,29 @@
-import React, { Suspense, useState, useMemo } from 'react';
-import { Await, useAsyncValue, useParams } from 'react-router-dom';
+import React from 'react';
 import { AppBar, Theme, ThemeProvider, Box, useMediaQuery, Select, MenuItem, SelectChangeEvent } from '@mui/material';
 import { Palette, colors, DarkTheme, BaseTheme } from 'styles/Theme';
 import { When, Unless } from 'react-if';
 import { BodyText } from 'components/common/Typography';
 import { elevations } from 'components/common';
 import { Button } from 'components/common/Input';
-import { Link } from 'components/common/Navigation';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/pro-regular-svg-icons';
-import { useAppSelector } from 'hooks';
-import { getAuthoringRoutes } from './AuthoringNavElements';
-import { getTenantLanguages } from 'services/languageService';
-import { Language } from 'models/language';
 import { StatusCircle } from '../../view/AuthoringTab';
 import pagePreview from 'assets/images/pagePreview.png';
 import { AuthoringBottomNavProps, LanguageSelectorProps } from './types';
+import { getLanguageValue } from './AuthoringTemplate';
 
-const AuthoringBottomNav = (props: AuthoringBottomNavProps) => {
-    const { isDirty, isValid, isSubmitting } = props;
+const AuthoringBottomNav = ({
+    isDirty,
+    isValid,
+    isSubmitting,
+    currentLanguage,
+    setCurrentLanguage,
+    languages,
+    pageTitle,
+}: 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' };
 
-    const tenant = useAppSelector((state) => state.tenant);
-    const { engagementId } = useParams() as { engagementId: string };
-    const location = window.location.href;
-    const locationArray = location.split('/');
-    const slug = locationArray[locationArray.length - 1];
-
-    const languages = useMemo(() => getTenantLanguages(tenant.id), [tenant.id]); // todo: Using tenant language list until language data is integrated with the engagement.
-    const [currentLanguage, setCurrentLanguage] = useState(useAppSelector((state) => state.language.id));
-
-    const getPageValue = () => {
-        const authoringRoutes = getAuthoringRoutes(Number(engagementId), tenant);
-        return authoringRoutes.find((route) => route.path.includes(slug))?.name;
-    };
-
-    const getLanguageValue = (currentLanguage: string, languages: Language[]) => {
-        return languages.find((language) => language.code === currentLanguage)?.name;
-    };
-
     const buttonStyles = {
         height: '2.6rem',
         borderRadius: '8px',
@@ -80,24 +64,18 @@ const AuthoringBottomNav = (props: AuthoringBottomNavProps) => {
                 <ThemeProvider theme={DarkTheme}>
                     <Box
                         sx={{
-                            width: '18.75rem',
-                            minWidth: '18.75rem',
+                            width: '18.8rem',
+                            minWidth: '18.8rem',
                             marginBottom: isMediumScreenOrLarger ? '0' : '1rem',
                         }}
                     >
                         <BodyText sx={{ fontWeight: 'bold' }}>Currently Authoring</BodyText>
                         <BodyText sx={{ fontSize: '0.7rem', alignItems: 'center', marginTop: '-5px', display: 'flex' }}>
-                            <span>{getPageValue()}</span>
+                            <span>{pageTitle}</span>
                             <span style={{ fontSize: '0.4rem', paddingLeft: '0.4rem', paddingRight: '0.4rem' }}>
                                 {'\u2B24'}
                             </span>
-                            <Suspense>
-                                <Await resolve={languages}>
-                                    {(languages: Language[]) => (
-                                        <span>{getLanguageValue(currentLanguage, languages)}</span>
-                                    )}
-                                </Await>
-                            </Suspense>
+                            {getLanguageValue(currentLanguage, languages)}
                         </BodyText>
                     </Box>
                     <Box
@@ -108,14 +86,13 @@ const AuthoringBottomNav = (props: AuthoringBottomNavProps) => {
                         }}
                     >
                         <ThemeProvider theme={BaseTheme}>
-                            <Suspense>
-                                <Await resolve={languages}>
-                                    <LanguageSelector
-                                        currentLanguage={currentLanguage}
-                                        setCurrentLanguage={setCurrentLanguage}
-                                    />
-                                </Await>
-                            </Suspense>
+                            <LanguageSelector
+                                currentLanguage={currentLanguage}
+                                setCurrentLanguage={setCurrentLanguage}
+                                languages={languages}
+                                isDirty={isDirty}
+                                isSubmitting={isSubmitting}
+                            />
                         </ThemeProvider>
 
                         <Button
@@ -128,11 +105,10 @@ const AuthoringBottomNav = (props: AuthoringBottomNavProps) => {
                                 margin: '0 1.2rem',
                             }}
                         >
-                            <Link sx={{ color: colors.surface.gray[60] }} href="#">
-                                Save Section
-                            </Link>
+                            Save Section
                         </Button>
                         <Button
+                            disabled={!isValid || !isDirty || isSubmitting}
                             type="submit"
                             name="request_type"
                             value="preview"
@@ -141,7 +117,14 @@ const AuthoringBottomNav = (props: AuthoringBottomNavProps) => {
                                 marginLeft: 'auto',
                             }}
                         >
-                            <img style={{ paddingRight: '0.3rem' }} src={pagePreview} alt="page preview icon" />
+                            <img
+                                style={{
+                                    paddingRight: '0.3rem',
+                                    filter: !isValid || !isDirty || isSubmitting ? 'opacity(40%)' : 'opacity(100%)',
+                                }}
+                                src={pagePreview}
+                                alt="page preview icon"
+                            />
                             Preview
                         </Button>
                     </Box>
@@ -152,10 +135,24 @@ const AuthoringBottomNav = (props: AuthoringBottomNavProps) => {
     );
 };
 
-const LanguageSelector = ({ currentLanguage, setCurrentLanguage }: LanguageSelectorProps) => {
-    const languages = useAsyncValue() as Language[];
+const LanguageSelector = ({
+    currentLanguage,
+    setCurrentLanguage,
+    languages,
+    isDirty,
+    isSubmitting,
+}: LanguageSelectorProps) => {
     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);
     };
     return (

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,22 +1,23 @@
 import React from 'react';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { FormProvider, useForm } from 'react-hook-form';
 import { createSearchParams, useFetcher, Outlet } from 'react-router-dom';
 
 export interface EngagementUpdateData {
     id: number;
+    status_id: number;
+    taxon_id: number;
+    content_id: number;
     name: string;
     start_date: Dayjs;
     end_date: Dayjs;
-    status_id: number;
     description: string;
     rich_description: string;
     banner_filename: string;
     status_block: string[];
     title: string;
     icon_name: string;
     metadata_value: string;
-    taxon_id: number;
     send_report: boolean;
     slug: string;
     request_type: string;
@@ -26,55 +27,67 @@ export const AuthoringContext = () => {
     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,
-            name: '',
-            start_date: undefined,
-            end_date: undefined,
             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: '',
-            taxon_id: 0,
-            send_report: false,
+            send_report: undefined,
             slug: '',
             request_type: '',
         },
         mode: 'onSubmit',
         reValidateMode: 'onChange',
     });
-
     const onSubmit = async (data: EngagementUpdateData) => {
         fetcher.submit(
             createSearchParams({
-                id: data.id.toString(),
+                id: 0 === data.id ? '' : data.id.toString(),
+                status_id: 0 === data.status_id ? '' : data.status_id.toString(),
+                taxon_id: 0 === data.taxon_id ? '' : data.taxon_id.toString(),
+                content_id: 0 === data.content_id ? '' : data.content_id.toString(),
                 name: data.name,
-                start_date: data.start_date.format('YYYY-MM-DD'),
-                end_date: data.end_date.format('YYYY-MM-DD'),
+                start_date:
+                    '1970-01-01' === data.start_date.format('YYYY-MM-DD') ? '' : data.start_date.format('YYYY-MM-DD'),
+                end_date:
+                    '1970-01-01' === data.start_date.format('YYYY-MM-DD') ? '' : data.end_date.format('YYYY-MM-DD'),
                 description: data.description,
                 rich_description: data.rich_description,
                 banner_filename: data.banner_filename,
                 status_block: data.status_block,
                 title: data.title,
                 icon_name: data.icon_name,
                 metadata_value: data.metadata_value,
-                taxon_id: data.taxon_id.toString(),
-                send_report: data.send_report ? 'true' : 'false',
+                send_report: getSendReportValue(data.send_report),
                 slug: data.slug,
                 request_type: data.request_type,
             }),
             {
                 method: 'post',
-                action: `/engagements/${data.id}/authoring/${slug}`,
+                action: `/engagements/${data.id}/details/authoring/${slug}`,
             },
         );
     };
 
+    const getSendReportValue = (valueToInterpret: boolean) => {
+        if (undefined === valueToInterpret) {
+            return '';
+        }
+        return valueToInterpret ? 'true' : 'false';
+    };
+
     return (
         <FormProvider {...engagementUpdateForm}>
             <Outlet context={{ onSubmit }} />