Skip to content

Commit

Permalink
Feature/deseng671: New Summary page in authoring section (#2587)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
jareth-whitney authored Sep 13, 2024
1 parent 6ba4401 commit 5373540
Show file tree
Hide file tree
Showing 14 changed files with 259 additions and 211 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>();

Check warning on line 17 in met-web/src/components/engagement/admin/create/authoring/AuthoringBanner.tsx

View workflow job for this annotation

GitHub Actions / linting (20.x)

'bannerImage' is assigned a value but never used
const [savedBannerImageFileName, setSavedBannerImageFileName] = useState(engagement.banner_filename || '');

Check warning on line 18 in met-web/src/components/engagement/admin/create/authoring/AuthoringBanner.tsx

View workflow job for this annotation

GitHub Actions / linting (20.x)

'savedBannerImageFileName' is assigned a value but never used
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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' };
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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=""
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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',
});
Expand All @@ -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',
Expand All @@ -90,7 +101,7 @@ export const AuthoringContext = () => {

return (
<FormProvider {...engagementUpdateForm}>
<Outlet context={{ onSubmit }} />
<Outlet context={{ onSubmit, defaultValues, setDefaultValues, fetcher }} />
</FormProvider>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 5373540

Please sign in to comment.