From 3111a090005faef7086aa5c86cdb664cd1c142dc Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Fri, 1 Dec 2023 16:44:23 +0545 Subject: [PATCH 01/42] Add timeline chart in rapid response table --- src/components/DateOutput/index.tsx | 4 +- .../ColumnShortcuts/TimelineHeader/index.tsx | 43 +++++++++ .../TimelineHeader/styles.module.css | 7 ++ .../ColumnShortcuts/TimelineItem/index.tsx | 88 +++++++++++++++++++ .../TimelineItem/styles.module.css | 36 ++++++++ src/components/Table/ColumnShortcuts/index.ts | 82 +++++++++++------ .../Table/ColumnShortcuts/styles.module.css | 4 + src/components/Table/types.ts | 2 +- src/utils/common.ts | 28 ++++-- .../RapidResponsePerosnnelTable/i18n.json | 2 - .../RapidResponsePerosnnelTable/index.tsx | 79 +++++++++++++---- .../styles.module.css | 11 +++ 12 files changed, 332 insertions(+), 54 deletions(-) create mode 100644 src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx create mode 100644 src/components/Table/ColumnShortcuts/TimelineHeader/styles.module.css create mode 100644 src/components/Table/ColumnShortcuts/TimelineItem/index.tsx create mode 100644 src/components/Table/ColumnShortcuts/TimelineItem/styles.module.css create mode 100644 src/views/EmergencySurge/RapidResponsePerosnnelTable/styles.module.css diff --git a/src/components/DateOutput/index.tsx b/src/components/DateOutput/index.tsx index 0bf32789ad..0d0ff6b78a 100644 --- a/src/components/DateOutput/index.tsx +++ b/src/components/DateOutput/index.tsx @@ -1,12 +1,12 @@ import { useMemo } from 'react'; import { _cs } from '@togglecorp/fujs'; -import { formatDate } from '#utils/common'; +import { DateLike, formatDate } from '#utils/common'; import styles from './styles.module.css'; export interface Props { className?: string; - value?: string | number | null; + value: DateLike | undefined | null; format?: string; invalidText?: React.ReactNode; } diff --git a/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx b/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx new file mode 100644 index 0000000000..a5f4f5dbdc --- /dev/null +++ b/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx @@ -0,0 +1,43 @@ +import DateOutput from '#components/DateOutput'; +import { _cs } from '@togglecorp/fujs'; + +import HeaderCell, { HeaderCellProps } from '../../HeaderCell'; + +import styles from './styles.module.css'; + +export interface Props extends HeaderCellProps { + className?: string; + dateRange: { + start: Date, + end: Date, + } | undefined; +} + +function TimelineHeader(props: Props) { + const { + className, + dateRange, + ...otherProps + } = props; + + return ( + + + + + )} + /> + ); +} + +export default TimelineHeader; diff --git a/src/components/Table/ColumnShortcuts/TimelineHeader/styles.module.css b/src/components/Table/ColumnShortcuts/TimelineHeader/styles.module.css new file mode 100644 index 0000000000..a043f8cef3 --- /dev/null +++ b/src/components/Table/ColumnShortcuts/TimelineHeader/styles.module.css @@ -0,0 +1,7 @@ +.timeline-header { + .title { + display: flex; + flex-grow: 1; + justify-content: space-between; + } +} diff --git a/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx b/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx new file mode 100644 index 0000000000..249b8ddc25 --- /dev/null +++ b/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx @@ -0,0 +1,88 @@ +import { _cs, isNotDefined } from '@togglecorp/fujs'; + +import Tooltip from '#components/Tooltip'; +import TextOutput from '#components/TextOutput'; + +import { type DateLike, isValidDate } from '#utils/common'; + +import styles from './styles.module.css'; + +export interface Props { + className?: string; + startDate: DateLike | null | undefined; + endDate: DateLike | null | undefined; + dateRange: { + start: Date, + end: Date, + } | undefined; +} + +function TimelineItem(props: Props) { + const { + className, + startDate, + endDate, + dateRange, + } = props; + + if (isNotDefined(dateRange)) { + return null; + } + + if (!isValidDate(startDate)) { + return null; + } + + if (!isValidDate(endDate)) { + return null; + } + + const domainWidth = dateRange.end.getTime() - dateRange.start.getTime(); + + const start = 1 - (dateRange.end.getTime() - new Date(startDate).getTime()) / domainWidth; + const end = (dateRange.end.getTime() - new Date(endDate).getTime()) / domainWidth; + + const today = 1 - (dateRange.end.getTime() - new Date().getTime()) / domainWidth; + + return ( + <> +
+
+
+
+
+
+ + + + + )} + /> + + ); +} + +export default TimelineItem; diff --git a/src/components/Table/ColumnShortcuts/TimelineItem/styles.module.css b/src/components/Table/ColumnShortcuts/TimelineItem/styles.module.css new file mode 100644 index 0000000000..1cd9cca097 --- /dev/null +++ b/src/components/Table/ColumnShortcuts/TimelineItem/styles.module.css @@ -0,0 +1,36 @@ +.timeline-item { + position: absolute; + top: 0; + left: var(--go-ui-spacing-sm); + width: calc(100% - 2 * var(--go-ui-spacing-sm)); + height: 100%; + + .timeline-progress { + position: absolute; + top: 50%; + transform: translateY(-50%); + border-radius: 0.25em; + background-color: var(--go-ui-color-primary-red); + height: 0.5rem; + } + + .today-marker { + position: absolute; + border-left: var(--go-ui-width-separator-sm) dashed var(--go-ui-color-primary-blue); + height: 100%; + } + + .start-date-marker { + position: absolute; + left: 0; + border-left: var(--go-ui-width-separator-sm) dashed var(--go-ui-color-separator); + height: 100%; + } + + .end-date-marker { + position: absolute; + right: 0; + border-left: var(--go-ui-width-separator-sm) dashed var(--go-ui-color-separator); + height: 100%; + } +} diff --git a/src/components/Table/ColumnShortcuts/index.ts b/src/components/Table/ColumnShortcuts/index.ts index 7428949e5c..e67501cc78 100644 --- a/src/components/Table/ColumnShortcuts/index.ts +++ b/src/components/Table/ColumnShortcuts/index.ts @@ -7,21 +7,13 @@ import { randomString, } from '@togglecorp/fujs'; -import DateOutput from '#components/DateOutput'; -import { type Props as DateOutputProps } from '#components/DateOutput'; -import DateRangeOutput from '#components/DateRangeOutput'; -import { type Props as DateRangeOutputProps } from '#components/DateRangeOutput'; -import NumberOutput from '#components/NumberOutput'; -import { type Props as NumberOutputProps } from '#components/NumberOutput'; -import BooleanOutput from '#components/BooleanOutput'; -import { type Props as BooleanOutputProps } from '#components/BooleanOutput'; -import ProgressBar from '#components/ProgressBar'; -import { type Props as ProgressBarProps } from '#components/ProgressBar'; -import ReducedListDisplay, { - Props as ReducedListDisplayProps, -} from '#components/ReducedListDisplay'; -import { type Props as LinkProps } from '#components/Link'; -import Link from '#components/Link'; +import DateOutput, { type Props as DateOutputProps } from '#components/DateOutput'; +import DateRangeOutput, { type Props as DateRangeOutputProps } from '#components/DateRangeOutput'; +import NumberOutput, { type Props as NumberOutputProps } from '#components/NumberOutput'; +import BooleanOutput, { type Props as BooleanOutputProps } from '#components/BooleanOutput'; +import ProgressBar, { type Props as ProgressBarProps } from '#components/ProgressBar'; +import ReducedListDisplay, { Props as ReducedListDisplayProps } from '#components/ReducedListDisplay'; +import Link, { type Props as LinkProps } from '#components/Link'; import { numericIdSelector } from '#utils/selectors'; import { type GoApiResponse } from '#utils/restRequest'; @@ -38,6 +30,8 @@ import { type ExpandButtonProps } from './ExpandButton'; import ExpansionIndicator from './ExpansionIndicator'; import { type Props as ExpansionIndicatorProps } from './ExpansionIndicator'; import CountryLink from './CountryLink'; +import TimelineItem, { type Props as TimelineItemProps } from './TimelineItem'; +import TimelineHeader, { type Props as TimelineHeaderProps } from './TimelineHeader'; import type { Props as CountryLinkProps } from './CountryLink'; import RegionLink from './RegionLink'; @@ -383,10 +377,10 @@ export function createExpandColumn( return item; } -export function createExpansionIndicatorColumn( +export function createExpansionIndicatorColumn( isExpanded?: boolean, ) { - const item: Column = { + const item: Column = { id: randomString(), title: '', headerCellRenderer: HeaderCell, @@ -417,14 +411,14 @@ export function createExpansionIndicatorColumn( return item; } -export function createElementColumn( +export function createElementColumn( id: string, title: string, renderer: React.ComponentType, - rendererParams: (key: KEY, datum: DATA) => ELEMENT_PROPS, - options?: Options, + rendererParams: (key: KEY, datum: DATUM) => ELEMENT_PROPS, + options?: Options, ) { - const item: Column = { + const item: Column = { id, title, headerCellRenderer: HeaderCell, @@ -446,12 +440,50 @@ export function createElementColumn( return item; } -export function createActionColumn( +export function createTimelineColumn( id: string, - rendererParams: (datum: D) => TableActionsProps, - options?: Options, + dateRange: { + start: Date, + end: Date, + } | undefined, + rendererParams: (datum: DATUM) => Omit, + options?: Options, +) { + const item: Column = { + id, + title: '', + headerCellRenderer: TimelineHeader, + headerCellRendererParams: { + dateRange, + sortable: options?.sortable, + }, + cellRenderer: TimelineItem, + cellRendererParams: (_, datum) => ({ + dateRange, + ...rendererParams(datum), + }), + headerContainerClassName: options?.headerContainerClassName, + cellRendererClassName: options?.cellRendererClassName, + columnClassName: options?.columnClassName, + headerCellRendererClassName: options?.headerCellRendererClassName, + cellContainerClassName: _cs( + options?.cellContainerClassName, + styles.timelineCellContainer, + ), + columnWidth: options?.columnWidth, + columnStretch: options?.columnStretch, + columnStyle: options?.columnStyle, + }; + + return item; +} + +export function createActionColumn( + id: string, + rendererParams: (datum: DATUM) => TableActionsProps, + options?: Options, ) { - const item: Column = { + const item: Column = { id, title: '', headerCellRenderer: HeaderCell, diff --git a/src/components/Table/ColumnShortcuts/styles.module.css b/src/components/Table/ColumnShortcuts/styles.module.css index 25bce0f709..edb8305863 100644 --- a/src/components/Table/ColumnShortcuts/styles.module.css +++ b/src/components/Table/ColumnShortcuts/styles.module.css @@ -5,3 +5,7 @@ .expansion-indicator-cell-container { position: relative; } + +.timeline-cell-container { + position: relative; +} diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts index adfb1aaea2..b33da8217f 100644 --- a/src/components/Table/types.ts +++ b/src/components/Table/types.ts @@ -6,7 +6,7 @@ export interface BaseHeader { name: string; index: number; - title?: string; + title?: React.ReactNode; } export interface BaseCell { diff --git a/src/utils/common.ts b/src/utils/common.ts index 0abf2278d9..77d99fea91 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -373,16 +373,10 @@ export function formatNumber( return newValue; } +export type DateLike = string | number | Date; + export function formatDate( - value: null | undefined, - format?: string, -): undefined; -export function formatDate( - value: Date | string | number, - format?: string, -): string | undefined; -export function formatDate( - value: Date | string | number | null | undefined, + value: DateLike | null | undefined, format = DEFAULT_DATE_FORMAT, ) { if (isNotDefined(value)) { @@ -668,3 +662,19 @@ export function addNumMonthsToDate( return dateSafe; } + +export function isValidDate( + value: T | null | undefined, +): value is T { + if (isNotDefined(value)) { + return false; + } + + const date = new Date(value); + + if (Number.isNaN(date.getTime())) { + return false; + } + + return true; +} diff --git a/src/views/EmergencySurge/RapidResponsePerosnnelTable/i18n.json b/src/views/EmergencySurge/RapidResponsePerosnnelTable/i18n.json index a0ae2d10a1..75c194eff4 100644 --- a/src/views/EmergencySurge/RapidResponsePerosnnelTable/i18n.json +++ b/src/views/EmergencySurge/RapidResponsePerosnnelTable/i18n.json @@ -3,8 +3,6 @@ "strings": { "rapidResponseTitle": "Rapid Response Personnel", "rapidResponse": "Rapid Response", - "personnelTableStartDate": "Start Date", - "personnelTableEndDate": "End Date", "personnelTableName": "Name", "personnelTablePosition": "Position", "personnelTableType": "Type", diff --git a/src/views/EmergencySurge/RapidResponsePerosnnelTable/index.tsx b/src/views/EmergencySurge/RapidResponsePerosnnelTable/index.tsx index f96d794350..63f230c03a 100644 --- a/src/views/EmergencySurge/RapidResponsePerosnnelTable/index.tsx +++ b/src/views/EmergencySurge/RapidResponsePerosnnelTable/index.tsx @@ -2,6 +2,8 @@ import { useMemo, useCallback, } from 'react'; +import { isDefined, isNotDefined } from '@togglecorp/fujs'; + import useTranslation from '#hooks/useTranslation'; import { type GoApiResponse, @@ -14,15 +16,21 @@ import { } from '#components/Table/useSorting'; import { createStringColumn, - createDateColumn, createLinkColumn, + createTimelineColumn, } from '#components/Table/ColumnShortcuts'; import Table from '#components/Table'; import Link from '#components/Link'; import { numericIdSelector } from '#utils/selectors'; import useFilterState from '#hooks/useFilterState'; +import { + isValidDate, + maxSafe, + minSafe, +} from '#utils/common'; import i18n from './i18n.json'; +import styles from './styles.module.css'; type PersonnelTableItem = NonNullable['results']>[number]; const now = new Date().toISOString(); @@ -70,13 +78,57 @@ export default function RapidResponsePersonnelTable(props: Props) { }, }); + const dateRange = useMemo( + () => { + if ( + isNotDefined(personnelResponse) + || isNotDefined(personnelResponse.results) + || personnelResponse.results.length === 0 + ) { + return undefined; + } + + const startDateList = personnelResponse.results.map( + ({ start_date }) => ( + isValidDate(start_date) + ? new Date(start_date).getTime() + : undefined + ), + ).filter(isDefined); + + const endDateList = personnelResponse.results.map( + ({ end_date }) => ( + isValidDate(end_date) + ? new Date(end_date).getTime() + : undefined + ), + ).filter(isDefined); + + const start = minSafe([...startDateList, ...endDateList]); + const end = maxSafe([...startDateList, ...endDateList]); + + if (isNotDefined(start) || isNotDefined(end)) { + return undefined; + } + + return { + start: new Date(start), + end: new Date(end), + }; + }, + [personnelResponse], + ); + const columns = useMemo( () => ([ createStringColumn( 'role', strings.personnelTablePosition, (item) => item.role, - { sortable: true }, + { + sortable: true, + columnClassName: styles.role, + }, ), createStringColumn( 'type', @@ -110,17 +162,14 @@ export default function RapidResponsePersonnelTable(props: Props) { (item) => item.name, { sortable: true }, ), - createDateColumn( - 'start_date', - strings.personnelTableStartDate, - (item) => item.start_date, - { sortable: true }, - ), - createDateColumn( - 'end_date', - strings.personnelTableEndDate, - (item) => item.end_date, - { sortable: true }, + createTimelineColumn( + 'timeline', + dateRange, + (item) => ({ + startDate: item.start_date, + endDate: item.end_date, + }), + { columnClassName: styles.timeline }, ), ]), [ @@ -129,14 +178,14 @@ export default function RapidResponsePersonnelTable(props: Props) { strings.personnelTableDeployedParty, strings.personnelTableDeployedTo, strings.personnelTableName, - strings.personnelTableStartDate, - strings.personnelTableEndDate, getTypeName, + dateRange, ], ); return ( Date: Mon, 27 Nov 2023 14:06:44 +0545 Subject: [PATCH 02/42] Change date format in all dref related export module --- src/views/DrefApplicationExport/index.tsx | 3 +++ src/views/DrefFinalReportExport/index.tsx | 2 ++ src/views/DrefOperationalUpdateExport/index.tsx | 2 ++ 3 files changed, 7 insertions(+) diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index 69a87c43f9..ee57266743 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -333,6 +333,7 @@ export function Component() { label={strings.operationStartDateLabel} value={drefResponse?.date_of_approval} valueType="date" + format="dd-MM-yyyy" strongValue /> diff --git a/src/views/DrefFinalReportExport/index.tsx b/src/views/DrefFinalReportExport/index.tsx index 793993a86c..8f03b75883 100644 --- a/src/views/DrefFinalReportExport/index.tsx +++ b/src/views/DrefFinalReportExport/index.tsx @@ -299,6 +299,7 @@ export function Component() { label={strings.operationStartDateLabel} value={drefResponse?.operation_start_date} valueType="date" + format="dd-MM-yyyy" strongValue /> Date: Tue, 28 Nov 2023 10:31:03 +0545 Subject: [PATCH 03/42] Fix bullet points in new line in TextArea component --- src/components/TextArea/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 01b3a1f674..a56125163e 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -5,7 +5,7 @@ import InputContainer, { Props as InputContainerProps } from '../InputContainer' import RawTextArea, { Props as RawTextAreaProps } from '../RawTextArea'; const BULLET = '•'; -const KEY_ENTER = 'ENTER'; +const KEY_ENTER = 'Enter'; type InheritedProps = (Omit & Omit, 'type'>); export interface Props extends InheritedProps { From 35259f7b256bedb5388333241a4803803944d7d1 Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Tue, 21 Nov 2023 11:58:42 +0545 Subject: [PATCH 04/42] Add content from dref form to dref export --- src/index.css | 1 + src/views/DrefApplicationExport/i18n.json | 3 + src/views/DrefApplicationExport/index.tsx | 79 ++++++++++++------- .../DrefApplicationExport/styles.module.css | 2 +- .../DrefApplicationForm/EventDetail/i18n.json | 3 +- .../DrefApplicationForm/EventDetail/index.tsx | 15 ++-- .../EventDetail/styles.module.css | 5 ++ src/views/DrefFinalReportExport/i18n.json | 4 +- .../DrefFinalReportExport/styles.module.css | 2 +- .../DrefFinalReportForm/Operation/i18n.json | 2 +- .../DrefOperationalUpdateExport/i18n.json | 2 + .../DrefOperationalUpdateExport/index.tsx | 46 +++++++---- .../styles.module.css | 2 +- 13 files changed, 113 insertions(+), 53 deletions(-) diff --git a/src/index.css b/src/index.css index 7c0a92230f..fb80317fe8 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,7 @@ --base-font-size: 0.875rem; --font-multiplier: 1.5; + --go-ui-dref-super-ticket-size: 0.688rem; --go-ui-font-size-2xs: calc(var(--base-font-size) * 0.625); --go-ui-font-size-xs: calc(var(--base-font-size) * 0.75); diff --git a/src/views/DrefApplicationExport/i18n.json b/src/views/DrefApplicationExport/i18n.json index a45ca40036..ed3287a218 100644 --- a/src/views/DrefApplicationExport/i18n.json +++ b/src/views/DrefApplicationExport/i18n.json @@ -25,6 +25,7 @@ "eventDescriptionSectionHeading": "Description of the Event", "approximateDateOfImpactHeading": "Approximate date of impact", "whatWhereWhenSectionHeading": "What happened, where and when?", + "dateWhenTheTriggerWasMetHeading": "Date of event / Date when the trigger was met", "situationUpdateSectionHeading": "Provide any updates in the situation since the field report and explain what is expected to happen.", "anticipatoryActionsHeading": "Why your National Society is acting now and what criteria is used to launch this operation.", "scopeAndScaleSectionHeading": "Scope and Scale", @@ -37,6 +38,8 @@ "recurrentEventJustificationLabel": "If you have answered yes to all questions above, justify why the use of DREF for a recurrent event, or how this event should not be considered recurrent", "lessonsLearnedLabel": "Lessons learned", "currentNationalSocietyActionsHeading": "Current National Society Actions", + "nationalSocietyActionsHeading": "National Society anticipatory actions started", + "drefFormNsResponseStarted": "Start date of National Society actions", "movementPartnersActionsHeading": "IFRC Network Actions Related To The Current Event", "secretariatLabel": "Secretariat", "participatingNsLabel": "Participating National Societies", diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index ee57266743..0943498663 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -112,12 +112,12 @@ export function Component() { const lessonsLearnedDefined = isTruthyString(drefResponse?.lessons_learned?.trim()); const showPreviousOperations = drefResponse?.type_of_dref !== DREF_TYPE_ASSESSMENT && ( isDefined(drefResponse?.did_it_affect_same_area) - || isDefined(drefResponse?.did_it_affect_same_population) - || isDefined(drefResponse?.did_ns_respond) - || isDefined(drefResponse?.did_ns_request_fund) - || isTruthyString(drefResponse?.ns_request_text?.trim()) - || isTruthyString(drefResponse?.dref_recurrent_text?.trim()) - || lessonsLearnedDefined + || isDefined(drefResponse?.did_it_affect_same_population) + || isDefined(drefResponse?.did_ns_respond) + || isDefined(drefResponse?.did_ns_request_fund) + || isTruthyString(drefResponse?.ns_request_text?.trim()) + || isTruthyString(drefResponse?.dref_recurrent_text?.trim()) + || lessonsLearnedDefined ); const ifrcActionsDefined = isTruthyString(drefResponse?.ifrc?.trim()); @@ -287,8 +287,8 @@ export function Component() { value={drefResponse?.disaster_category_display} valueClassName={_cs( isDefined(drefResponse) - && isDefined(drefResponse.disaster_category) - && colorMap[drefResponse.disaster_category], + && isDefined(drefResponse.disaster_category) + && colorMap[drefResponse.disaster_category], )} strongValue /> @@ -395,6 +395,15 @@ export function Component() { /> )} + + + {drefResponse?.event_date} + + {eventDescriptionDefined && ( )} {showNsAction && ( - - {drefResponse?.national_society_actions?.map( - (nsAction) => ( - - ), - )} + + + {drefResponse?.national_society_actions?.map( + (nsAction) => ( + + ), + )} + + + {drefResponse?.ns_respond_date && + + + {drefResponse?.ns_respond_date} + + + } + )} {showMovementPartnersActionsSection && ( @@ -590,12 +615,12 @@ export function Component() { )} {showNeedsIdentifiedSection && ( <> - - {strings.needsIdentifiedSectionHeading} - {needsIdentifiedDefined && drefResponse?.needs_identified?.map( (identifiedNeed) => ( + + {strings.needsIdentifiedSectionHeading} + +
{strings.drefOperationalLearningPlatformLabel} - + + {strings.drefOperationalLearningPlatformLink} + +
)} > @@ -507,18 +507,36 @@ export function Component() { )} {nsActionsDefined && ( - - {drefResponse?.national_society_actions?.map( - (nsAction) => ( - - ), - )} + + + {drefResponse?.national_society_actions?.map( + (nsAction) => ( + + ), + )} + + + {drefResponse?.ns_respond_date && + + + {drefResponse?.ns_respond_date} + + + } + )} diff --git a/src/views/DrefOperationalUpdateExport/styles.module.css b/src/views/DrefOperationalUpdateExport/styles.module.css index 9fddea6990..5d18a5c2d6 100644 --- a/src/views/DrefOperationalUpdateExport/styles.module.css +++ b/src/views/DrefOperationalUpdateExport/styles.module.css @@ -2,7 +2,7 @@ --pdf-element-bg: var(--go-ui-color-background); font-family: 'Open Sans', sans-serif; - font-size: var(--go-ui-font-size-sm); + font-size: var(--go-ui-dref-super-ticket-size); @media screen { margin: var(--go-ui-spacing-xl) auto; From 884d2259b546ac3a2e1b17d90659921dba3ccbcc Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Tue, 21 Nov 2023 12:16:45 +0545 Subject: [PATCH 05/42] Fix lint error --- src/views/DrefApplicationExport/index.tsx | 10 +++++----- src/views/DrefOperationalUpdateExport/index.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index 0943498663..143ce6edce 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -397,8 +397,7 @@ export function Component() { )} {drefResponse?.event_date} @@ -521,18 +520,19 @@ export function Component() { )} - {drefResponse?.ns_respond_date && + {drefResponse?.ns_respond_date && ( {drefResponse?.ns_respond_date} - } + )} )} diff --git a/src/views/DrefOperationalUpdateExport/index.tsx b/src/views/DrefOperationalUpdateExport/index.tsx index f16ff63a67..28c1447b8c 100644 --- a/src/views/DrefOperationalUpdateExport/index.tsx +++ b/src/views/DrefOperationalUpdateExport/index.tsx @@ -524,18 +524,19 @@ export function Component() { )} - {drefResponse?.ns_respond_date && + {drefResponse?.ns_respond_date && ( {drefResponse?.ns_respond_date} - } + )} )} From 5fb0cef144cb0357edd0eca05b721339848b59cf Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Tue, 21 Nov 2023 14:04:13 +0545 Subject: [PATCH 06/42] Fix minor type error --- src/views/DrefApplicationExport/index.tsx | 16 ++++++++-------- .../EventDetail/styles.module.css | 2 +- src/views/DrefOperationalUpdateExport/index.tsx | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index 143ce6edce..a85d5c9915 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -112,12 +112,12 @@ export function Component() { const lessonsLearnedDefined = isTruthyString(drefResponse?.lessons_learned?.trim()); const showPreviousOperations = drefResponse?.type_of_dref !== DREF_TYPE_ASSESSMENT && ( isDefined(drefResponse?.did_it_affect_same_area) - || isDefined(drefResponse?.did_it_affect_same_population) - || isDefined(drefResponse?.did_ns_respond) - || isDefined(drefResponse?.did_ns_request_fund) - || isTruthyString(drefResponse?.ns_request_text?.trim()) - || isTruthyString(drefResponse?.dref_recurrent_text?.trim()) - || lessonsLearnedDefined + || isDefined(drefResponse?.did_it_affect_same_population) + || isDefined(drefResponse?.did_ns_respond) + || isDefined(drefResponse?.did_ns_request_fund) + || isTruthyString(drefResponse?.ns_request_text?.trim()) + || isTruthyString(drefResponse?.dref_recurrent_text?.trim()) + || lessonsLearnedDefined ); const ifrcActionsDefined = isTruthyString(drefResponse?.ifrc?.trim()); @@ -287,8 +287,8 @@ export function Component() { value={drefResponse?.disaster_category_display} valueClassName={_cs( isDefined(drefResponse) - && isDefined(drefResponse.disaster_category) - && colorMap[drefResponse.disaster_category], + && isDefined(drefResponse.disaster_category) + && colorMap[drefResponse.disaster_category], )} strongValue /> diff --git a/src/views/DrefApplicationForm/EventDetail/styles.module.css b/src/views/DrefApplicationForm/EventDetail/styles.module.css index d23656ebea..853ea16496 100644 --- a/src/views/DrefApplicationForm/EventDetail/styles.module.css +++ b/src/views/DrefApplicationForm/EventDetail/styles.module.css @@ -7,4 +7,4 @@ .learning-platform-link { display: flex; gap: var(--go-ui-spacing-2xs); -} \ No newline at end of file +} diff --git a/src/views/DrefOperationalUpdateExport/index.tsx b/src/views/DrefOperationalUpdateExport/index.tsx index 28c1447b8c..b2fb7e07d1 100644 --- a/src/views/DrefOperationalUpdateExport/index.tsx +++ b/src/views/DrefOperationalUpdateExport/index.tsx @@ -283,8 +283,8 @@ export function Component() { value={drefResponse?.disaster_category_display} valueClassName={_cs( isDefined(drefResponse) - && isDefined(drefResponse.disaster_category) - && colorMap[drefResponse.disaster_category], + && isDefined(drefResponse.disaster_category) + && colorMap[drefResponse.disaster_category], )} strongValue /> From aed8a96067a783bc77b66342f492789b4f3516ab Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Wed, 22 Nov 2023 15:12:13 +0545 Subject: [PATCH 07/42] Add total budget to plan activities section --- src/views/DrefApplicationExport/index.tsx | 23 ++++++++++++------- src/views/DrefApplicationForm/i18n.json | 2 +- src/views/DrefFinalReportForm/i18n.json | 2 +- src/views/DrefOperationalUpdateForm/i18n.json | 2 +- 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index a85d5c9915..613394d69f 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -112,12 +112,12 @@ export function Component() { const lessonsLearnedDefined = isTruthyString(drefResponse?.lessons_learned?.trim()); const showPreviousOperations = drefResponse?.type_of_dref !== DREF_TYPE_ASSESSMENT && ( isDefined(drefResponse?.did_it_affect_same_area) - || isDefined(drefResponse?.did_it_affect_same_population) - || isDefined(drefResponse?.did_ns_respond) - || isDefined(drefResponse?.did_ns_request_fund) - || isTruthyString(drefResponse?.ns_request_text?.trim()) - || isTruthyString(drefResponse?.dref_recurrent_text?.trim()) - || lessonsLearnedDefined + || isDefined(drefResponse?.did_it_affect_same_population) + || isDefined(drefResponse?.did_ns_respond) + || isDefined(drefResponse?.did_ns_request_fund) + || isTruthyString(drefResponse?.ns_request_text?.trim()) + || isTruthyString(drefResponse?.dref_recurrent_text?.trim()) + || lessonsLearnedDefined ); const ifrcActionsDefined = isTruthyString(drefResponse?.ifrc?.trim()); @@ -287,8 +287,8 @@ export function Component() { value={drefResponse?.disaster_category_display} valueClassName={_cs( isDefined(drefResponse) - && isDefined(drefResponse.disaster_category) - && colorMap[drefResponse.disaster_category], + && isDefined(drefResponse.disaster_category) + && colorMap[drefResponse.disaster_category], )} strongValue /> @@ -824,6 +824,13 @@ export function Component() { {plannedIntervention.title_display} + Date: Fri, 24 Nov 2023 14:34:49 +0545 Subject: [PATCH 08/42] Move the numeric details from essential information to description of the event --- .../DrefApplicationForm/EventDetail/i18n.json | 12 ++ .../DrefApplicationForm/Overview/i18n.json | 13 +- .../DrefApplicationForm/Overview/index.tsx | 98 +-------------- src/views/DrefApplicationForm/schema.ts | 10 +- .../DrefFinalReportForm/EventDetail/i18n.json | 15 ++- .../DrefFinalReportForm/EventDetail/index.tsx | 119 ++++++++++++++++++ .../DrefFinalReportForm/Overview/i18n.json | 18 +-- .../DrefFinalReportForm/Overview/index.tsx | 116 +---------------- src/views/DrefFinalReportForm/schema.ts | 18 ++- .../EventDetail/i18n.json | 16 ++- .../EventDetail/index.tsx | 100 +++++++++++++++ .../Overview/i18n.json | 15 +-- .../Overview/index.tsx | 99 +-------------- src/views/DrefOperationalUpdateForm/schema.ts | 10 +- 14 files changed, 286 insertions(+), 373 deletions(-) diff --git a/src/views/DrefApplicationForm/EventDetail/i18n.json b/src/views/DrefApplicationForm/EventDetail/i18n.json index 8441bfc95e..3d300e434d 100644 --- a/src/views/DrefApplicationForm/EventDetail/i18n.json +++ b/src/views/DrefApplicationForm/EventDetail/i18n.json @@ -6,6 +6,18 @@ "drefFormApproximateDateOfImpact": "Approximate date of impact", "drefFormDescriptionEvent": "Description of the Event", "drefFormEventDate": "Date of the Event", + "numericDetailsSectionTitle": "Numeric Details", + "drefFormPeopleAffectedDescriptionSlowSudden": "People Affected include all those whose lives and livelihoods have been impacted as a direct result of the shock or stress.", + "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework", + "drefFormEstimatedPeopleInNeed": "Estimated people in need (Optional)", + "drefFormPeopleTargetedDescription": "Include all those whose the National Society is aiming or planning to assist", + "drefFormPeopleInNeed": "People in need (Optional)", + "drefFormPeopleTargeted": "Number of people targeted", + "drefFormPeopleAffected": "Total affected population", + "drefFormRiskPeopleLabel": "Total population at risk", + "drefFormPeopleInNeedDescriptionImminent": "Include all those whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection will be inadequate to re-establish normal living conditions without additional assistance", + "drefFormPeopleInNeedDescriptionSlowSudden": "People in Need (PIN) are those members whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection is inadequate to re-establish normal living conditions without additional assistance.", + "drefFormPeopleAffectedDescriptionImminent": "Includes all those whose lives and livelihoods are at risk as a direct result of the shock or stress.", "drefFormImminentDisaster": "Provide any updates in the situation since the field report and explain what is expected to happen.", "drefFormLessonsLearnedDescription": "Specify how the lessons learnt from these previous operations are being used to mitigate similar challenges in the current operation", "drefFormLessonsLearnedTitle": "Lessons learned", diff --git a/src/views/DrefApplicationForm/Overview/i18n.json b/src/views/DrefApplicationForm/Overview/i18n.json index acf05bfd4e..6f05911364 100644 --- a/src/views/DrefApplicationForm/Overview/i18n.json +++ b/src/views/DrefApplicationForm/Overview/i18n.json @@ -22,17 +22,6 @@ "drefFormAddRegion": "Region/Province", "drefFormTitle": "DREF Title", "drefFormGenerateTitle": "Generate title", - "numericDetailsSectionTitle": "Numeric Details", - "drefFormRiskPeopleLabel": "Total population at risk", - "drefFormPeopleAffected": "Total affected population", - "drefFormPeopleAffectedDescriptionImminent": "Includes all those whose lives and livelihoods are at risk as a direct result of the shock or stress.", - "drefFormPeopleAffectedDescriptionSlowSudden": "People Affected include all those whose lives and livelihoods have been impacted as a direct result of the shock or stress.", - "drefFormEstimatedPeopleInNeed": "Estimated people in need (Optional)", - "drefFormPeopleInNeed": "People in need (Optional)", - "drefFormPeopleInNeedDescriptionImminent": "Include all those whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection will be inadequate to re-establish normal living conditions without additional assistance", - "drefFormPeopleInNeedDescriptionSlowSudden": "People in Need (PIN) are those members whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection is inadequate to re-establish normal living conditions without additional assistance.", - "drefFormPeopleTargeted": "Number of people targeted", - "drefFormPeopleTargetedDescription": "Include all those whose the National Society is aiming or planning to assist", "drefFormRequestAmount": "Requested Amount in CHF", "drefFormEmergencyAppealPlanned": "Emergency appeal planned", "drefFormUploadMap": "Upload map", @@ -41,7 +30,7 @@ "drefFormUploadCoverImage": "Cover image", "drefFormUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.", "drefFormDrefTypeTitle": "DREF Type", - "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework", + "drefFormClickEmergencyResponseFrameworkLabel": "Click to view Emergency Response Framework", "userListEmptyMessage": "The DREF Application is not shared with anyone." } } diff --git a/src/views/DrefApplicationForm/Overview/index.tsx b/src/views/DrefApplicationForm/Overview/index.tsx index 196633c68e..ae1cc3f47f 100644 --- a/src/views/DrefApplicationForm/Overview/index.tsx +++ b/src/views/DrefApplicationForm/Overview/index.tsx @@ -55,10 +55,6 @@ import styles from './styles.module.css'; import i18n from './i18n.json'; const disasterCategoryLink = 'https://www.ifrc.org/sites/default/files/2021-07/IFRC%20Emergency%20Response%20Framework%20-%202017.pdf'; -const totalPopulationRiskImminentLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; -const totalPeopleAffectedSlowSuddenLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; -const peopleTargetedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; -const peopleInNeedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>; type DrefTypeOption = NonNullable[number]; @@ -290,7 +286,7 @@ function Overview(props: Props) { ? strings.drefFormImminentDisasterCategoryLabel : strings.drefFormDisasterCategoryLabel}
- - - {strings.drefFormRiskPeopleLabel} - - - - - ) : ( - <> - {strings.drefFormPeopleAffected} - - - - - )} - value={value?.num_affected} - onChange={setFieldValue} - error={error?.num_affected} - hint={( - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormPeopleAffectedDescriptionImminent - : strings.drefFormPeopleAffectedDescriptionSlowSudden - )} - disabled={disabled} - /> - {value?.type_of_dref !== TYPE_LOAN && ( - - { - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormEstimatedPeopleInNeed - : strings.drefFormPeopleInNeed - } - - - - - )} - name="people_in_need" - value={value?.people_in_need} - onChange={setFieldValue} - error={error?.people_in_need} - hint={( - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormPeopleInNeedDescriptionImminent - : strings.drefFormPeopleInNeedDescriptionSlowSudden - )} - disabled={disabled} - /> - )} - - {strings.drefFormPeopleTargeted} - - - - - )} - name="num_assisted" - value={value?.num_assisted} - onChange={setFieldValue} - error={error?.num_assisted} - hint={strings.drefFormPeopleTargetedDescription} - disabled={disabled} - /> - {/* NOTE: Empty div to preserve the layout */} -
- { const conditionalFields: OverviewDrefTypeRelatedFields = { - people_in_need: { forceValue: nullValue }, emergency_appeal_planned: { forceValue: nullValue }, event_map_file: { forceValue: nullValue }, // NOTE: check if this works cover_image_file: { forceValue: nullValue }, @@ -231,7 +229,6 @@ const schema: DrefFormSchema = { } return { ...conditionalFields, - people_in_need: { validations: [positiveIntegerCondition] }, emergency_appeal_planned: {}, event_map_file: { fields: (): EventMapFileFields => ({ @@ -254,6 +251,7 @@ const schema: DrefFormSchema = { // EVENT DETAILS const eventDetailDrefTypeRelatedFields = [ + 'people_in_need', 'did_it_affect_same_area', 'did_it_affect_same_population', 'did_ns_respond', @@ -278,6 +276,7 @@ const schema: DrefFormSchema = { eventDetailDrefTypeRelatedFields, (val): EventDetailDrefTypeRelatedFields => { let conditionalFields: EventDetailDrefTypeRelatedFields = { + people_in_need: { forceValue: nullValue }, did_it_affect_same_area: { forceValue: nullValue }, did_it_affect_same_population: { forceValue: nullValue }, did_ns_respond: { forceValue: nullValue }, @@ -304,6 +303,7 @@ const schema: DrefFormSchema = { did_ns_request_fund: {}, lessons_learned: {}, event_scope: {}, + people_in_need: { validations: [positiveIntegerCondition] }, }; } diff --git a/src/views/DrefFinalReportForm/EventDetail/i18n.json b/src/views/DrefFinalReportForm/EventDetail/i18n.json index 949d808420..7892a8fcf0 100644 --- a/src/views/DrefFinalReportForm/EventDetail/i18n.json +++ b/src/views/DrefFinalReportForm/EventDetail/i18n.json @@ -11,6 +11,19 @@ "drefFormUploadPhotos": "Upload photos (e.g. impact of the events, NS in the field, assessments)", "drefFormUploadPhotosLimitation": "Add maximum 2 photos", "drefFormWhatWhereWhen": "What happened, where and when?", - "drefFinalReportFormSelectImages": "Select images" + "drefFinalReportFormSelectImages": "Select images", + "numericDetails": "Numeric Details", + "drefFormRiskPeopleLabel": "Total population at risk", + "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework", + "drefFormPeopleAffected": "Total affected population", + "drefFormPeopleAffectedDescriptionImminent": "Includes all those whose lives and livelihoods are at risk as a direct result of the shock or stress.", + "drefFormPeopleAffectedDescriptionSlowSudden": "People Affected include all those whose lives and livelihoods have been impacted as a direct result of the shock or stress.", + "drefFormEstimatedPeopleInNeed": "Estimated people in need (Optional)", + "drefFormPeopleInNeed": "People in need (Optional)", + "drefFormPeopleInNeedDescriptionImminent": "Include all those whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection will be inadequate to re-establish normal living conditions without additional assistance", + "finalReportPeopleTargeted": "Number of people targeted", + "drefFormPeopleTargetedDescription": "Include all those whose the National Society is aiming or planning to assist", + "drefFormPeopleTargeted": "Number of people targeted", + "drefFormPeopleInNeedDescriptionSlowSudden": "People in Need (PIN) are those members whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection is inadequate to re-establish normal living conditions without additional assistance." } } diff --git a/src/views/DrefFinalReportForm/EventDetail/index.tsx b/src/views/DrefFinalReportForm/EventDetail/index.tsx index a7e8a6da3e..1282025219 100644 --- a/src/views/DrefFinalReportForm/EventDetail/index.tsx +++ b/src/views/DrefFinalReportForm/EventDetail/index.tsx @@ -3,11 +3,14 @@ import { type EntriesAsList, getErrorObject, } from '@togglecorp/toggle-form'; +import { WikiHelpSectionLineIcon } from '@ifrc-go/icons'; import Container from '#components/Container'; import InputSection from '#components/InputSection'; import TextArea from '#components/TextArea'; import DateInput from '#components/DateInput'; +import NumberInput from '#components/NumberInput'; +import Link from '#components/Link'; import useTranslation from '#hooks/useTranslation'; import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput'; @@ -31,6 +34,11 @@ interface Props { disabled?: boolean; } +const totalPopulationRiskImminentLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; +const totalPeopleAffectedSlowSuddenLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; +const peopleTargetedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; +const peopleInNeedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; + function EventDetail(props: Props) { const strings = useTranslation(i18n); @@ -79,6 +87,117 @@ function EventDetail(props: Props) { /> )} + + + + {strings.drefFormRiskPeopleLabel} + + + + + ) : ( + <> + {strings.drefFormPeopleAffected} + + + + + )} + value={value?.number_of_people_affected} + onChange={setFieldValue} + error={error?.number_of_people_affected} + hint={( + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormPeopleAffectedDescriptionImminent + : strings.drefFormPeopleAffectedDescriptionSlowSudden + )} + disabled={disabled} + /> + + { + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormEstimatedPeopleInNeed + : strings.drefFormPeopleInNeed + } + + + + + )} + name="people_in_need" + value={value?.people_in_need} + onChange={setFieldValue} + error={error?.people_in_need} + hint={( + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormPeopleInNeedDescriptionImminent + : strings.drefFormPeopleInNeedDescriptionSlowSudden + )} + disabled={disabled} + /> + + {strings.finalReportPeopleTargeted} + + + + + )} + name="number_of_people_targeted" + value={value.number_of_people_targeted} + onChange={setFieldValue} + error={error?.number_of_people_targeted} + hint={strings.drefFormPeopleTargetedDescription} + disabled={disabled} + /> + + {strings.drefFormPeopleTargeted} + + + + + )} + name="num_assisted" + value={value?.num_assisted} + onChange={setFieldValue} + error={error?.num_assisted} + hint={strings.drefFormPeopleTargetedDescription} + disabled={disabled} + /> + {/* NOTE: Empty div to preserve the layout */} +
+ ; type DrefTypeOption = NonNullable[number]; @@ -258,7 +254,7 @@ function Overview(props: Props) { ? strings.drefFormImminentDisasterCategoryLabel : strings.drefFormDisasterCategoryLabel}
- - - {strings.drefFormRiskPeopleLabel} - - - - - ) : ( - <> - {strings.drefFormPeopleAffected} - - - - - )} - value={value?.number_of_people_affected} - onChange={setFieldValue} - error={error?.number_of_people_affected} - hint={( - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormPeopleAffectedDescriptionImminent - : strings.drefFormPeopleAffectedDescriptionSlowSudden - )} - disabled={disabled} - /> - - { - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormEstimatedPeopleInNeed - : strings.drefFormPeopleInNeed - } - - - - - )} - name="people_in_need" - value={value?.people_in_need} - onChange={setFieldValue} - error={error?.people_in_need} - hint={( - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormPeopleInNeedDescriptionImminent - : strings.drefFormPeopleInNeedDescriptionSlowSudden - )} - disabled={disabled} - /> - - {strings.finalReportPeopleTargeted} - - - - - )} - name="number_of_people_targeted" - value={value.number_of_people_targeted} - onChange={setFieldValue} - error={error?.number_of_people_targeted} - hint={strings.drefFormPeopleTargetedDescription} - disabled={disabled} - /> - - {strings.drefFormPeopleTargeted} - - - - - )} - name="num_assisted" - value={value?.num_assisted} - onChange={setFieldValue} - error={error?.num_assisted} - hint={strings.drefFormPeopleTargetedDescription} - disabled={disabled} - /> - {/* NOTE: Empty div to preserve the layout */} -
- diff --git a/src/views/DrefFinalReportForm/schema.ts b/src/views/DrefFinalReportForm/schema.ts index d8b27ce871..cbd6abb617 100644 --- a/src/views/DrefFinalReportForm/schema.ts +++ b/src/views/DrefFinalReportForm/schema.ts @@ -138,8 +138,6 @@ const schema: FinalReportFormSchema = { required: true, requiredValidation: requiredStringCondition, }, - num_assisted: { validations: [positiveIntegerCondition] }, - people_in_need: { validations: [positiveIntegerCondition] }, event_map_file: { fields: (): EventMapFileFields => ({ client_id: {}, @@ -154,12 +152,6 @@ const schema: FinalReportFormSchema = { caption: {}, }), }, - number_of_people_affected: { - validations: [positiveIntegerCondition], - }, - number_of_people_targeted: { - validations: [positiveIntegerCondition], - }, total_dref_allocation: {}, main_donors: { validations: [max500CharCondition], @@ -169,7 +161,10 @@ const schema: FinalReportFormSchema = { financial_report_description: {}, // EVENT DETAILS - + number_of_people_affected: { + validations: [positiveIntegerCondition], + }, + people_in_need: { validations: [positiveIntegerCondition] }, event_description: {}, images_file: { keySelector: (image_file) => image_file.client_id, @@ -182,7 +177,10 @@ const schema: FinalReportFormSchema = { }), validations: [lessThanEqualToTwoImagesCondition], }, - + number_of_people_targeted: { + validations: [positiveIntegerCondition], + }, + num_assisted: { validations: [positiveIntegerCondition] }, // ACTIONS ifrc: {}, diff --git a/src/views/DrefOperationalUpdateForm/EventDetail/i18n.json b/src/views/DrefOperationalUpdateForm/EventDetail/i18n.json index 0b75404d04..3ea017aff7 100644 --- a/src/views/DrefOperationalUpdateForm/EventDetail/i18n.json +++ b/src/views/DrefOperationalUpdateForm/EventDetail/i18n.json @@ -24,6 +24,18 @@ "drefFormUploadPhotos": "Upload photos (e.g. impact of the events, NS in the field, assessments)", "drefFormUploadPhotosLimitation": "Add maximum 2 photos", "drefFormWhatWhereWhen": "What happened, where and when?", - "drefOperationalUpdateFormSelectImages": "Select images" + "drefOperationalUpdateFormSelectImages": "Select images", + "numericDetails": "Numeric Details", + "drefFormRiskPeopleLabel": "Total population at risk", + "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework", + "drefFormPeopleAffected": "Total affected population", + "drefFormPeopleAffectedDescriptionImminent": "Includes all those whose lives and livelihoods are at risk as a direct result of the shock or stress.", + "drefFormPeopleAffectedDescriptionSlowSudden": "People Affected include all those whose lives and livelihoods have been impacted as a direct result of the shock or stress.", + "drefFormEstimatedPeopleInNeed": "Estimated people in need (Optional)", + "drefFormPeopleInNeed": "People in need (Optional)", + "drefFormPeopleInNeedDescriptionImminent": "Include all those whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection will be inadequate to re-establish normal living conditions without additional assistance", + "drefFormPeopleInNeedDescriptionSlowSudden": "People in Need (PIN) are those members whose physical security, basic rights, dignity, living conditions or livelihoods are threatened or have been disrupted, and whose current level of access to basic services, goods and social protection is inadequate to re-establish normal living conditions without additional assistance.", + "drefFormPeopleTargeted": "Number of people targeted", + "drefFormPeopleTargetedDescription": "Include all those whose the National Society is aiming or planning to assist" } -} +} \ No newline at end of file diff --git a/src/views/DrefOperationalUpdateForm/EventDetail/index.tsx b/src/views/DrefOperationalUpdateForm/EventDetail/index.tsx index f64e067ce4..0578109769 100644 --- a/src/views/DrefOperationalUpdateForm/EventDetail/index.tsx +++ b/src/views/DrefOperationalUpdateForm/EventDetail/index.tsx @@ -3,12 +3,15 @@ import { type EntriesAsList, getErrorObject, } from '@togglecorp/toggle-form'; +import { WikiHelpSectionLineIcon } from '@ifrc-go/icons'; import Container from '#components/Container'; import InputSection from '#components/InputSection'; import BooleanInput from '#components/BooleanInput'; import TextArea from '#components/TextArea'; import DateInput from '#components/DateInput'; +import NumberInput from '#components/NumberInput'; +import Link from '#components/Link'; import useTranslation from '#hooks/useTranslation'; import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput'; @@ -33,6 +36,11 @@ interface Props { disabled?: boolean; } +const totalPopulationRiskImminentLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; +const totalPeopleAffectedSlowSuddenLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; +const peopleTargetedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; +const peopleInNeedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; + function EventDetail(props: Props) { const strings = useTranslation(i18n); @@ -193,6 +201,98 @@ function EventDetail(props: Props) { /> )} + + + {strings.drefFormRiskPeopleLabel} + + + + + ) : ( + <> + {strings.drefFormPeopleAffected} + + + + + )} + value={value?.number_of_people_affected} + onChange={setFieldValue} + error={error?.number_of_people_affected} + hint={( + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormPeopleAffectedDescriptionImminent + : strings.drefFormPeopleAffectedDescriptionSlowSudden + )} + disabled={disabled} + /> + {value?.type_of_dref !== TYPE_LOAN && ( + + { + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormEstimatedPeopleInNeed + : strings.drefFormPeopleInNeed + } + + + + + )} + name="people_in_need" + value={value?.people_in_need} + onChange={setFieldValue} + error={error?.people_in_need} + hint={( + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormPeopleInNeedDescriptionImminent + : strings.drefFormPeopleInNeedDescriptionSlowSudden + )} + disabled={disabled} + /> + )} + + {strings.drefFormPeopleTargeted} + + + + + )} + name="number_of_people_targeted" + value={value?.number_of_people_targeted} + onChange={setFieldValue} + error={error?.number_of_people_targeted} + hint={strings.drefFormPeopleTargetedDescription} + disabled={disabled} + /> + {/* NOTE: Empty div to preserve the layout */} +
+ {value.type_of_dref !== TYPE_LOAN && ( ; type DrefTypeOption = NonNullable[number]; @@ -297,7 +293,7 @@ function Overview(props: Props) { ? strings.drefFormImminentDisasterCategoryLabel : strings.drefFormDisasterCategoryLabel}
- - - {strings.drefFormRiskPeopleLabel} - - - - - ) : ( - <> - {strings.drefFormPeopleAffected} - - - - - )} - value={value?.number_of_people_affected} - onChange={setFieldValue} - error={error?.number_of_people_affected} - hint={( - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormPeopleAffectedDescriptionImminent - : strings.drefFormPeopleAffectedDescriptionSlowSudden - )} - disabled={disabled} - /> - {value?.type_of_dref !== TYPE_LOAN && ( - - { - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormEstimatedPeopleInNeed - : strings.drefFormPeopleInNeed - } - - - - - )} - name="people_in_need" - value={value?.people_in_need} - onChange={setFieldValue} - error={error?.people_in_need} - hint={( - value?.type_of_dref === TYPE_IMMINENT - ? strings.drefFormPeopleInNeedDescriptionImminent - : strings.drefFormPeopleInNeedDescriptionSlowSudden - )} - disabled={disabled} - /> - )} - - {strings.drefFormPeopleTargeted} - - - - - )} - name="number_of_people_targeted" - value={value?.number_of_people_targeted} - onChange={setFieldValue} - error={error?.number_of_people_targeted} - hint={strings.drefFormPeopleTargetedDescription} - disabled={disabled} - /> - {/* NOTE: Empty div to preserve the layout */} -
- - { const conditionalFields: OverviewDrefTypeRelatedFields = { - people_in_need: { forceValue: nullValue }, emergency_appeal_planned: { forceValue: nullValue }, event_map_file: { forceValue: nullValue }, cover_image_file: { forceValue: nullValue }, @@ -237,7 +235,6 @@ const schema: OpsUpdateFormSchema = { } return { ...conditionalFields, - people_in_need: { validations: [positiveIntegerCondition] }, emergency_appeal_planned: {}, event_map_file: { fields: (): EventMapFileFields => ({ @@ -266,6 +263,7 @@ const schema: OpsUpdateFormSchema = { 'event_date', 'event_description', 'images_file', + 'people_in_need', 'summary_of_change', 'changing_timeframe_operation', @@ -293,6 +291,7 @@ const schema: OpsUpdateFormSchema = { event_date: { forceValue: nullValue }, event_description: { forceValue: nullValue }, images_file: { forceValue: [] }, + people_in_need: { forceValue: nullValue }, summary_of_change: { forceValue: nullValue }, changing_timeframe_operation: { forceValue: nullValue }, @@ -311,6 +310,7 @@ const schema: OpsUpdateFormSchema = { conditionalFields = { ...conditionalFields, event_scope: {}, + people_in_need: { validations: [positiveIntegerCondition] }, }; } From 3e07149221a156920abdc7cf025cc7589066e4f1 Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Fri, 24 Nov 2023 15:14:16 +0545 Subject: [PATCH 09/42] Hide questions in previous operations sections --- .../DrefApplicationForm/EventDetail/i18n.json | 2 +- .../DrefApplicationForm/EventDetail/index.tsx | 72 ++++++++++--------- 2 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/views/DrefApplicationForm/EventDetail/i18n.json b/src/views/DrefApplicationForm/EventDetail/i18n.json index 3d300e434d..37cf732a8c 100644 --- a/src/views/DrefApplicationForm/EventDetail/i18n.json +++ b/src/views/DrefApplicationForm/EventDetail/i18n.json @@ -1,7 +1,7 @@ { "namespace": "drefApplicationForm", "strings": { - "drefFormAffectedthePopulationTitle": "Did it affect the same population groups?", + "drefFormAffectedThePopulationTitle": "Did it affect the same population groups?", "drefFormAffectSameArea": "Has a similar event affected the same area(s) in the last 3 years?", "drefFormApproximateDateOfImpact": "Approximate date of impact", "drefFormDescriptionEvent": "Description of the Event", diff --git a/src/views/DrefApplicationForm/EventDetail/index.tsx b/src/views/DrefApplicationForm/EventDetail/index.tsx index 5b708433f6..d3a390aa0e 100644 --- a/src/views/DrefApplicationForm/EventDetail/index.tsx +++ b/src/views/DrefApplicationForm/EventDetail/index.tsx @@ -84,39 +84,45 @@ function EventDetail(props: Props) { disabled={disabled} /> - - - - - - - - - + {value.did_it_affect_same_area && ( + + + + )} + {value.did_it_affect_same_population && ( + + + + )} + {value.did_ns_respond && ( + + + + )} {value.did_ns_request_fund && ( Date: Fri, 24 Nov 2023 17:02:03 +0545 Subject: [PATCH 10/42] Add assessment report and supporting document link in the export --- src/views/DrefApplicationExport/i18n.json | 4 +++- src/views/DrefApplicationExport/index.tsx | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/views/DrefApplicationExport/i18n.json b/src/views/DrefApplicationExport/i18n.json index ed3287a218..67baab14ef 100644 --- a/src/views/DrefApplicationExport/i18n.json +++ b/src/views/DrefApplicationExport/i18n.json @@ -92,6 +92,8 @@ "mediaContactHeading": "Media Contact", "imageLogoIFRCAlt": "IFRC", "drefApplicationExportRisk": "Risk", - "drefApplicationExportMitigation": "Mitigation action" + "drefApplicationExportMitigation": "Mitigation action", + "drefApplicationSupportingDocumentation": "Supporting Documentation", + "drefAssessmentReportLink": "Assessment Report" } } diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index 613394d69f..5420429c23 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -445,6 +445,15 @@ export function Component() { )} + {drefResponse?.supporting_document_details?.file && ( + + {strings.drefApplicationSupportingDocumentation} + + )} )} {showPreviousOperations && ( @@ -642,6 +651,13 @@ export function Component() { )} + + {strings.drefAssessmentReportLink} + )} {showOperationStrategySection && ( From 5079ad9d9df4aaf8994fbeab48ba409daaac92d5 Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Tue, 28 Nov 2023 12:15:43 +0545 Subject: [PATCH 11/42] Add goverment assisstance value from field report to dref application --- .../Overview/CopyFieldReportSection/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/views/DrefApplicationForm/Overview/CopyFieldReportSection/index.tsx b/src/views/DrefApplicationForm/Overview/CopyFieldReportSection/index.tsx index d4ff562448..a7baa20e35 100644 --- a/src/views/DrefApplicationForm/Overview/CopyFieldReportSection/index.tsx +++ b/src/views/DrefApplicationForm/Overview/CopyFieldReportSection/index.tsx @@ -110,6 +110,9 @@ function CopyFieldReportSection(props: Props) { ); })); + const government_assistance = value?.government_requested_assistance + ?? fieldReportResponse.request_assistance; + const num_affected = value?.num_affected ?? fieldReportResponse.num_affected ?? fieldReportResponse.gov_num_affected @@ -119,8 +122,6 @@ function CopyFieldReportSection(props: Props) { ?? fieldReportResponse.actions_taken?.find((a) => a.organization === 'PNS')?.summary; const ifrc = value?.ifrc ?? fieldReportResponse.actions_taken?.find((a) => a.organization === 'FDRN')?.summary; - const icrc = value?.icrc - ?? fieldReportResponse.actions_taken?.find((a) => a.organization === 'NTLS')?.summary; let { national_society_contact_name, @@ -210,7 +211,7 @@ function CopyFieldReportSection(props: Props) { setFieldValue(num_affected, 'num_affected'); setFieldValue(partner_national_society, 'partner_national_society'); setFieldValue(ifrc, 'ifrc'); - setFieldValue(icrc, 'icrc'); + setFieldValue(government_assistance, 'government_requested_assistance'); // set field_report_option and districts From ae6eb23b3d212d660495cbadd5700535e9485ace Mon Sep 17 00:00:00 2001 From: samshara Date: Thu, 30 Nov 2023 17:00:38 +0545 Subject: [PATCH 12/42] feat: add modal opening for new operational updates with DREF types marked as imminent or assessment --- .../DrefTableActions/index.tsx | 1 + .../Overview/i18n.json | 9 ++-- .../Overview/index.tsx | 48 +++++++++++++++++-- 3 files changed, 50 insertions(+), 8 deletions(-) diff --git a/src/views/AccountMyFormsDref/DrefTableActions/index.tsx b/src/views/AccountMyFormsDref/DrefTableActions/index.tsx index 2723b2a164..2caac21c6b 100644 --- a/src/views/AccountMyFormsDref/DrefTableActions/index.tsx +++ b/src/views/AccountMyFormsDref/DrefTableActions/index.tsx @@ -246,6 +246,7 @@ function DrefTableActions(props: Props) { navigate( 'drefOperationalUpdateForm', { params: { opsUpdateId: response.id } }, + { state: { isNewOpsUpdate: true } }, ); }, onFailure: ({ diff --git a/src/views/DrefOperationalUpdateForm/Overview/i18n.json b/src/views/DrefOperationalUpdateForm/Overview/i18n.json index 99d15d1634..1c1183ad34 100644 --- a/src/views/DrefOperationalUpdateForm/Overview/i18n.json +++ b/src/views/DrefOperationalUpdateForm/Overview/i18n.json @@ -1,7 +1,6 @@ { "namespace": "drefOperationalUpdateForm", "strings": { - "drefOperationalUpdateNumber": "Operational Update Number", "drefOperationalShareApplicationLabel": "The DREF Operational Update is shared with", "drefOperationalShareApplicationDescription": "The users will be able to view, edit and add other users.", @@ -34,7 +33,11 @@ "drefFormUploadCoverImage": "Cover image", "drefFormUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.", "drefFormDrefTypeTitle": "DREF Type", - "drefFormClickEmergencyResponseFrameworkLabel": "Click to view Emergency Response Framework", - "userListEmptyMessage": "The DREF Operational Update is not shared with anyone." + "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework", + "userListEmptyMessage": "The DREF Operational Update is not shared with anyone.", + "numericDetails": "Numeric Details", + "isDrefChangingToResponse": "Is DREF changing to Response?", + "yesLabel": "Yes, change to Response", + "changeToResponseHeading": "Change DREF Type" } } diff --git a/src/views/DrefOperationalUpdateForm/Overview/index.tsx b/src/views/DrefOperationalUpdateForm/Overview/index.tsx index 855cbb72ce..38a58f14ca 100644 --- a/src/views/DrefOperationalUpdateForm/Overview/index.tsx +++ b/src/views/DrefOperationalUpdateForm/Overview/index.tsx @@ -3,6 +3,9 @@ import { type SetStateAction, type Dispatch, } from 'react'; +import { + useLocation, +} from 'react-router-dom'; import { type Error, getErrorObject, @@ -14,20 +17,22 @@ import { } from '@togglecorp/fujs'; import { WikiHelpSectionLineIcon } from '@ifrc-go/icons'; +import BooleanInput from '#components/BooleanInput'; +import Button from '#components/Button'; import Container from '#components/Container'; import InputSection from '#components/InputSection'; -import Button from '#components/Button'; -import TextInput from '#components/TextInput'; -import SelectInput from '#components/SelectInput'; -import NumberInput from '#components/NumberInput'; import Link from '#components/Link'; -import BooleanInput from '#components/BooleanInput'; +import Modal from '#components/Modal'; +import NumberInput from '#components/NumberInput'; +import SelectInput from '#components/SelectInput'; +import TextInput from '#components/TextInput'; import useTranslation from '#hooks/useTranslation'; import { type GoApiResponse } from '#utils/restRequest'; import { stringValueSelector, } from '#utils/selectors'; import { sumSafe } from '#utils/common'; +import useBooleanState from '#hooks/useBooleanState'; import useGlobalEnums from '#hooks/domain/useGlobalEnums'; import useCountry from '#hooks/domain/useCountry'; import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput'; @@ -97,6 +102,7 @@ function Overview(props: Props) { setDistrictOptions, drefUsers, } = props; + const { state } = useLocation(); const strings = useTranslation(i18n); const { @@ -109,6 +115,13 @@ function Overview(props: Props) { const disasterTypes = useDisasterType(); + const [ + showChangeDrefTypeModal, + { + setFalse: setShowChangeDrefTypeModalFalse, + }, + ] = useBooleanState(true); + const handleTypeOfOnsetChange = useCallback(( typeOfOnset: OnsetTypeOption['key'] | undefined, name: 'type_of_onset', @@ -149,6 +162,11 @@ function Overview(props: Props) { [setFieldValue], ); + const handleChangeToResponse = useCallback(() => { + setFieldValue(2, 'type_of_dref'); + setShowChangeDrefTypeModalFalse(); + }, [setFieldValue, setShowChangeDrefTypeModalFalse]); + const handleGenerateTitleButtonClick = useCallback( () => { const countryName = countryOptions?.find( @@ -180,6 +198,26 @@ function Overview(props: Props) { return (
+ {state?.isNewOpsUpdate + && showChangeDrefTypeModal + && (value?.type_of_dref === 0 || value?.type_of_dref === 1) && ( + + {strings.yesLabel} + + )} + className={styles.flashUpdateShareModal} + > + {strings.isDrefChangingToResponse} + + )} Date: Fri, 1 Dec 2023 10:28:43 +0545 Subject: [PATCH 13/42] feat: introduce "No" button for modifying DREF type modal --- .../Overview/i18n.json | 8 +++--- .../Overview/index.tsx | 28 +++++++++++++------ .../DrefOperationalUpdateForm/common.tsx | 2 +- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/views/DrefOperationalUpdateForm/Overview/i18n.json b/src/views/DrefOperationalUpdateForm/Overview/i18n.json index 1c1183ad34..4d16026888 100644 --- a/src/views/DrefOperationalUpdateForm/Overview/i18n.json +++ b/src/views/DrefOperationalUpdateForm/Overview/i18n.json @@ -33,11 +33,11 @@ "drefFormUploadCoverImage": "Cover image", "drefFormUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.", "drefFormDrefTypeTitle": "DREF Type", - "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework", + "drefFormClickEmergencyResponseFrameworkLabel": "Click to view Emergency Response Framework", "userListEmptyMessage": "The DREF Operational Update is not shared with anyone.", - "numericDetails": "Numeric Details", - "isDrefChangingToResponse": "Is DREF changing to Response?", - "yesLabel": "Yes, change to Response", + "isDrefChangingToResponse": "Is this DREF changing to Response?", + "yesLabel": "Yes, change it to Response", + "noLabel": "No", "changeToResponseHeading": "Change DREF Type" } } diff --git a/src/views/DrefOperationalUpdateForm/Overview/index.tsx b/src/views/DrefOperationalUpdateForm/Overview/index.tsx index 38a58f14ca..53aeadc073 100644 --- a/src/views/DrefOperationalUpdateForm/Overview/index.tsx +++ b/src/views/DrefOperationalUpdateForm/Overview/index.tsx @@ -53,7 +53,9 @@ import { DISASTER_FLASH_FLOOD, TYPE_IMMINENT, TYPE_LOAN, + TYPE_RESPONSE, ONSET_SUDDEN, + TYPE_ASSESSMENT, } from '../common'; import { type PartialOpsUpdate } from '../schema'; import styles from './styles.module.css'; @@ -163,7 +165,7 @@ function Overview(props: Props) { ); const handleChangeToResponse = useCallback(() => { - setFieldValue(2, 'type_of_dref'); + setFieldValue(TYPE_RESPONSE, 'type_of_dref'); setShowChangeDrefTypeModalFalse(); }, [setFieldValue, setShowChangeDrefTypeModalFalse]); @@ -200,18 +202,28 @@ function Overview(props: Props) {
{state?.isNewOpsUpdate && showChangeDrefTypeModal - && (value?.type_of_dref === 0 || value?.type_of_dref === 1) && ( + && (value?.type_of_dref === TYPE_IMMINENT + || value?.type_of_dref === TYPE_ASSESSMENT) && ( - {strings.yesLabel} - + <> + + + )} className={styles.flashUpdateShareModal} > diff --git a/src/views/DrefOperationalUpdateForm/common.tsx b/src/views/DrefOperationalUpdateForm/common.tsx index 7053f19788..fa72eaf725 100644 --- a/src/views/DrefOperationalUpdateForm/common.tsx +++ b/src/views/DrefOperationalUpdateForm/common.tsx @@ -16,7 +16,7 @@ export const ONSET_SUDDEN = 2 satisfies TypeOfOnsetEnum; export const TYPE_IMMINENT = 0 satisfies TypeOfDrefEnum; export const TYPE_ASSESSMENT = 1 satisfies TypeOfDrefEnum; -// export const TYPE_RESPONSE = 2 satisfies TypeOfDrefEnum; +export const TYPE_RESPONSE = 2 satisfies TypeOfDrefEnum; export const TYPE_LOAN = 3 satisfies TypeOfDrefEnum; // FIXME: identify a way to store disaster From 93337d880cea2be34db9699a5322aafe7082f546 Mon Sep 17 00:00:00 2001 From: samshara Date: Tue, 5 Dec 2023 11:11:16 +0545 Subject: [PATCH 14/42] fix: increase the default font size for DREF allocation export --- .../DrefTableActions/drefAllocationExport.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts b/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts index f55357ed7f..720e37dfbd 100644 --- a/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts +++ b/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts @@ -61,12 +61,24 @@ export async function exportDrefAllocation(exportData: ExportData) { extension: 'png', }); const worksheet = workbook.addWorksheet(`${name} DREF Allocation`, { + properties: { + defaultRowHeight: 20, + }, pageSetup: { paperSize: 9, showGridLines: false, fitToPage: true, + margins: { + left: 0.25, + right: 0.25, + top: 0.25, + bottom: 0.25, + header: 1, + footer: 1, + }, }, }); + const borderStyles: Partial = { top: { style: 'thin' }, left: { style: 'thin' }, @@ -662,6 +674,10 @@ export async function exportDrefAllocation(exportData: ExportData) { worksheet.eachRow({ includeEmpty: false }, (row) => { row.eachCell({ includeEmpty: false }, (cell) => { cell.border = borderStyles; // eslint-disable-line no-param-reassign + if (!cell.font?.size) { + // eslint-disable-next-line no-param-reassign + cell.font = Object.assign(cell.font || {}, { size: 12 }); + } }); }); From a2827895a39bebc73211b4c02bdf98e97f9a3465 Mon Sep 17 00:00:00 2001 From: samshara Date: Wed, 6 Dec 2023 10:42:18 +0545 Subject: [PATCH 15/42] fix: change default worksheet name --- .../AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts b/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts index 720e37dfbd..6095c915b4 100644 --- a/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts +++ b/src/views/AccountMyFormsDref/DrefTableActions/drefAllocationExport.ts @@ -60,7 +60,7 @@ export async function exportDrefAllocation(exportData: ExportData) { buffer, extension: 'png', }); - const worksheet = workbook.addWorksheet(`${name} DREF Allocation`, { + const worksheet = workbook.addWorksheet('DREF Allocation', { properties: { defaultRowHeight: 20, }, From 0bbf03664b0f71f1a347dc1d3c68caec3cd2b44a Mon Sep 17 00:00:00 2001 From: puranban Date: Tue, 5 Dec 2023 13:35:26 +0545 Subject: [PATCH 16/42] Change date format in dref export --- src/views/DrefApplicationExport/index.tsx | 48 ++++++++++--------- .../DrefApplicationExport/styles.module.css | 6 +++ 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index 5420429c23..beab519f36 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -1,5 +1,4 @@ -import { Fragment, useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { Fragment, useState } from 'react'; import { useParams } from 'react-router-dom'; import { _cs, isDefined, @@ -13,6 +12,7 @@ import Image from '#components/printable/Image'; import Heading from '#components/printable/Heading'; import DescriptionText from '#components/printable/DescriptionText'; import Link from '#components/Link'; +import DateOutput from '#components/DateOutput'; import useTranslation from '#hooks/useTranslation'; import { useRequest } from '#utils/restRequest'; import { @@ -399,9 +399,10 @@ export function Component() { heading={drefResponse?.type_of_dref !== DREF_TYPE_IMMINENT && strings.dateWhenTheTriggerWasMetHeading} > - - {drefResponse?.event_date} - + {eventDescriptionDefined && ( )} {showNsAction && ( - + + + {drefResponse?.ns_respond_date && ( + + )} + {drefResponse?.national_society_actions?.map( (nsAction) => ( @@ -528,21 +545,6 @@ export function Component() { ), )} - - {drefResponse?.ns_respond_date && ( - - - {drefResponse?.ns_respond_date} - - - )} - )} {showMovementPartnersActionsSection && ( diff --git a/src/views/DrefApplicationExport/styles.module.css b/src/views/DrefApplicationExport/styles.module.css index fb7d483a65..45cd2c7048 100644 --- a/src/views/DrefApplicationExport/styles.module.css +++ b/src/views/DrefApplicationExport/styles.module.css @@ -90,6 +90,7 @@ .lessons-learned { grid-column: span 2; background-color: var(--pdf-element-bg); + padding: var(--go-ui-spacing-sm); gap: var(--go-ui-spacing-sm); } @@ -217,5 +218,10 @@ color: var(--go-ui-color-primary-red); } } + + .ns-actions-container { + display: grid; + grid-gap: var(--go-ui-width-separator-md); + } } From 3969ca767ee2502b733dc034edebb5c86fd04ce4 Mon Sep 17 00:00:00 2001 From: puranban Date: Tue, 5 Dec 2023 13:56:16 +0545 Subject: [PATCH 17/42] Fix copy field from field report in DREF --- src/views/DrefApplicationExport/index.tsx | 54 ++++++++++--------- .../DrefApplicationExport/styles.module.css | 6 --- .../Overview/CopyFieldReportSection/index.tsx | 5 +- .../DrefOperationalUpdateExport/index.tsx | 32 +++++------ 4 files changed, 48 insertions(+), 49 deletions(-) diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index beab519f36..d5363f8fdc 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -1,4 +1,5 @@ -import { Fragment, useState } from 'react'; import { useParams } from 'react-router-dom'; +import { Fragment, useState } from 'react'; +import { useParams } from 'react-router-dom'; import { _cs, isDefined, @@ -395,15 +396,17 @@ export function Component() { /> )} - - - + {isDefined(drefResponse?.end_date) && ( + + + + )} {eventDescriptionDefined && ( )} {showNsAction && ( - - - {drefResponse?.ns_respond_date && ( + <> + + {strings.currentNationalSocietyActionsHeading} + + {drefResponse?.ns_respond_date && ( + - )} - + + )} @@ -545,7 +547,7 @@ export function Component() { ), )} - + )} {showMovementPartnersActionsSection && ( {strings.currentNationalSocietyActionsHeading} + + {drefResponse?.ns_respond_date && ( + + + + )} + {nsActionImagesDefined && ( {drefResponse?.photos_file?.map( @@ -523,21 +540,6 @@ export function Component() { ), )} - - {drefResponse?.ns_respond_date && ( - - - {drefResponse?.ns_respond_date} - - - )} - )} From d5a12156935aee6918d309b233d4fde9c227b7ea Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Wed, 6 Dec 2023 11:24:33 +0545 Subject: [PATCH 18/42] Move numeric section from overview to event tab --- .../DrefApplicationForm/EventDetail/index.tsx | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/src/views/DrefApplicationForm/EventDetail/index.tsx b/src/views/DrefApplicationForm/EventDetail/index.tsx index d3a390aa0e..824dad374c 100644 --- a/src/views/DrefApplicationForm/EventDetail/index.tsx +++ b/src/views/DrefApplicationForm/EventDetail/index.tsx @@ -3,6 +3,7 @@ import { type EntriesAsList, getErrorObject, } from '@togglecorp/toggle-form'; +import { WikiHelpSectionLineIcon } from '@ifrc-go/icons'; import { resolveUrl } from '#utils/resolveUrl'; import Container from '#components/Container'; @@ -15,6 +16,7 @@ import useTranslation from '#hooks/useTranslation'; import GoSingleFileInput from '#components/domain/GoSingleFileInput'; import Link from '#components/Link'; import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput'; +import NumberInput from '#components/NumberInput'; import { TYPE_IMMINENT, @@ -40,6 +42,11 @@ interface Props { function EventDetail(props: Props) { const strings = useTranslation(i18n); + const totalPopulationRiskImminentLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; + const totalPeopleAffectedSlowSuddenLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; + const peopleTargetedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; + const peopleInNeedLink = 'https://ifrcorg.sharepoint.com/sites/IFRCSharing/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF%2FHum%20Pop%20Definitions%20for%20DREF%20Form%5F21072022%2Epdf&parent=%2Fsites%2FIFRCSharing%2FShared%20Documents%2FDREF&p=true&ga=1'; + const { error: formError, setFieldValue, @@ -201,6 +208,98 @@ function EventDetail(props: Props) { /> )} + + + {strings.drefFormRiskPeopleLabel} + + + + + ) : ( + <> + {strings.drefFormPeopleAffected} + + + + + )} + value={value?.num_affected} + onChange={setFieldValue} + error={error?.num_affected} + hint={( + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormPeopleAffectedDescriptionImminent + : strings.drefFormPeopleAffectedDescriptionSlowSudden + )} + disabled={disabled} + /> + {value?.type_of_dref !== TYPE_LOAN && ( + + { + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormEstimatedPeopleInNeed + : strings.drefFormPeopleInNeed + } + + + + + )} + name="people_in_need" + value={value?.people_in_need} + onChange={setFieldValue} + error={error?.people_in_need} + hint={( + value?.type_of_dref === TYPE_IMMINENT + ? strings.drefFormPeopleInNeedDescriptionImminent + : strings.drefFormPeopleInNeedDescriptionSlowSudden + )} + disabled={disabled} + /> + )} + + {strings.drefFormPeopleTargeted} + + + + + )} + name="num_assisted" + value={value?.num_assisted} + onChange={setFieldValue} + error={error?.num_assisted} + hint={strings.drefFormPeopleTargetedDescription} + disabled={disabled} + /> + {/* NOTE: Empty div to preserve the layout */} +
+ {value.type_of_dref !== TYPE_LOAN && ( Date: Fri, 8 Dec 2023 10:56:44 +0545 Subject: [PATCH 19/42] fix: for 'Loan' type DREF in Ops Update change 'allocation for' to 'Emergency Appeal' --- src/views/AccountMyFormsDref/DrefTableActions/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/AccountMyFormsDref/DrefTableActions/index.tsx b/src/views/AccountMyFormsDref/DrefTableActions/index.tsx index 2caac21c6b..668342fc25 100644 --- a/src/views/AccountMyFormsDref/DrefTableActions/index.tsx +++ b/src/views/AccountMyFormsDref/DrefTableActions/index.tsx @@ -112,7 +112,7 @@ function DrefTableActions(props: Props) { ), onSuccess: (response) => { const exportData = { - allocationFor: 'DREF Operation', + allocationFor: response?.type_of_dref_display === 'Loan' ? 'Emergency Appeal' : 'DREF Operation', appealManager: response?.ifrc_appeal_manager_name, projectManager: response?.ifrc_project_manager_name, affectedCountry: response?.country_details?.name, From 16a41d644548a08b77f527ecbf4a27bee1d7e0d8 Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Fri, 8 Dec 2023 16:03:45 +0545 Subject: [PATCH 20/42] Add source information and reporting timeframe data in export --- src/views/DrefApplicationExport/i18n.json | 5 +- src/views/DrefApplicationExport/index.tsx | 39 ++++++++ .../DrefApplicationExport/styles.module.css | 12 ++- .../SourceInformationInput/i18n.json | 8 ++ .../SourceInformationInput/index.tsx | 91 ++++++++++++++++++ .../SourceInformationInput/styles.module.css | 14 +++ .../DrefApplicationForm/EventDetail/i18n.json | 5 +- .../DrefApplicationForm/EventDetail/index.tsx | 96 +++++++++++++++---- src/views/DrefApplicationForm/schema.ts | 21 +++- .../DrefOperationalUpdateExport/i18n.json | 2 + .../DrefOperationalUpdateExport/index.tsx | 18 +++- .../styles.module.css | 2 + 12 files changed, 288 insertions(+), 25 deletions(-) create mode 100644 src/views/DrefApplicationForm/EventDetail/SourceInformationInput/i18n.json create mode 100644 src/views/DrefApplicationForm/EventDetail/SourceInformationInput/index.tsx create mode 100644 src/views/DrefApplicationForm/EventDetail/SourceInformationInput/styles.module.css diff --git a/src/views/DrefApplicationExport/i18n.json b/src/views/DrefApplicationExport/i18n.json index 67baab14ef..cff5f276b2 100644 --- a/src/views/DrefApplicationExport/i18n.json +++ b/src/views/DrefApplicationExport/i18n.json @@ -94,6 +94,9 @@ "drefApplicationExportRisk": "Risk", "drefApplicationExportMitigation": "Mitigation action", "drefApplicationSupportingDocumentation": "Supporting Documentation", - "drefAssessmentReportLink": "Assessment Report" + "drefAssessmentReportLink": "Assessment Report", + "SourceInformationSectionHeading": "Source Information", + "sourceInformationSourceNameTitle": "Source Name", + "sourceInformationSourceLinkTitle": "Source Link" } } diff --git a/src/views/DrefApplicationExport/index.tsx b/src/views/DrefApplicationExport/index.tsx index d5363f8fdc..f8f2176819 100644 --- a/src/views/DrefApplicationExport/index.tsx +++ b/src/views/DrefApplicationExport/index.tsx @@ -186,6 +186,10 @@ export function Component() { || pmerDefined || communicationDefined; + const SourceInformationDefined = isDefined(drefResponse) + && isDefined(drefResponse.source_information) + && drefResponse.source_information.length > 0; + const showBudgetOverview = isTruthyString(drefResponse?.budget_file_details?.file); const nsContactText = [ @@ -458,6 +462,41 @@ export function Component() { {strings.drefApplicationSupportingDocumentation} )} + {SourceInformationDefined && ( + +
+ {strings.sourceInformationSourceNameTitle} +
+
+ {strings.sourceInformationSourceLinkTitle} +
+ {drefResponse?.source_information?.map( + (source, index) => ( + + +
+ {`${index + 1}. ${source.source_name}`} +
+ + + + {source?.source_link} + + + + ), + )} + + + )} )} {showPreviousOperations && ( diff --git a/src/views/DrefApplicationExport/styles.module.css b/src/views/DrefApplicationExport/styles.module.css index 0472282a5c..276fde696b 100644 --- a/src/views/DrefApplicationExport/styles.module.css +++ b/src/views/DrefApplicationExport/styles.module.css @@ -153,18 +153,28 @@ } } - .risk-list { + .risk-list, + .source-information-list { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--go-ui-width-separator-md); .risk, + .name, + .link, .mitigation { background-color: var(--pdf-element-bg); padding: var(--go-ui-spacing-xs); } + .name-list { + display: flex; + gap: var(--go-ui-spacing-sm); + } + .risk-title, + .name-title, + .link-title, .mitigation-title { background-color: var(--pdf-element-bg); padding: var(--go-ui-spacing-xs); diff --git a/src/views/DrefApplicationForm/EventDetail/SourceInformationInput/i18n.json b/src/views/DrefApplicationForm/EventDetail/SourceInformationInput/i18n.json new file mode 100644 index 0000000000..5094a51e5f --- /dev/null +++ b/src/views/DrefApplicationForm/EventDetail/SourceInformationInput/i18n.json @@ -0,0 +1,8 @@ +{ + "namespace": "drefApplicationForm", + "strings": { + "sourceInformationNameLabel": "Sources of information (optional) name", + "sourceInformationLinkLabel": "Sources of information (optional) link", + "sourceInformationDeleteButton": "Delete Source Information" + } +} diff --git a/src/views/DrefApplicationForm/EventDetail/SourceInformationInput/index.tsx b/src/views/DrefApplicationForm/EventDetail/SourceInformationInput/index.tsx new file mode 100644 index 0000000000..8f839c2b9e --- /dev/null +++ b/src/views/DrefApplicationForm/EventDetail/SourceInformationInput/index.tsx @@ -0,0 +1,91 @@ +import { + type ArrayError, + useFormObject, + getErrorObject, + type SetValueArg, +} from '@togglecorp/toggle-form'; +import { DeleteBinTwoLineIcon } from '@ifrc-go/icons'; +import { randomString } from '@togglecorp/fujs'; + +import NonFieldError from '#components/NonFieldError'; +import Button from '#components/Button'; +import TextArea from '#components/TextArea'; +import useTranslation from '#hooks/useTranslation'; + +import { type PartialDref } from '../../schema'; +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +type SourceInformationFormFields = NonNullable[number]; + +interface Props { + value: SourceInformationFormFields; + error: ArrayError | undefined; + onChange: (value: SetValueArg, index: number) => void; + onRemove: (index: number) => void; + index: number; + disabled?: boolean; +} + +function SourceInformation(props: Props) { + const { + error: errorFromProps, + onChange, + value, + index, + onRemove, + disabled, + } = props; + + const strings = useTranslation(i18n); + + const onFieldChange = useFormObject( + index, + onChange, + () => ({ + client_id: randomString(), + }), + ); + + const error = (value && value.client_id && errorFromProps) + ? getErrorObject(errorFromProps?.[value.client_id]) + : undefined; + + return ( +
+ +