From a58a8b14e8167fda83dfe8d00b2759ec20d9bbef Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Mon, 13 Oct 2025 11:42:11 +0545 Subject: [PATCH 01/10] feat(eap): Add Early Action Protocal form and views - Add EAP Application tab in account page - Add EAP Registration Form - Add simplified EAP form - Add export for simplified EAP - Add full EAP form - Add full EAP export - Add full EAP summary export - Add Admin2 input component - Make minor enhancements in various UI components - Add form variant in Heading - Add option to show border in container - Restructure radio icon size - Improve info popup icon size - Update styling of TabLayout - Update 'step' variant TabLayout to match the designs - Add 'form' variant to Container - Fix styling of info popup - Update styling of InputLabel --- app/package.json | 1 + app/src/App/routes/index.tsx | 186 ++ app/src/components/GoMapContainer/index.tsx | 8 +- .../GoMapContainer/styles.module.css | 17 + app/src/components/Navbar/i18n.json | 1 + app/src/components/Navbar/index.tsx | 10 +- app/src/components/NonFieldError/index.tsx | 9 +- .../NonFieldError/styles.module.css | 1 - app/src/components/PerExportModal/index.tsx | 13 +- app/src/components/TabPage/index.tsx | 4 + .../components/domain/Admin2Input/index.tsx | 389 ++++ app/src/components/domain/BaseMap/index.tsx | 8 +- .../domain/ContactInputsSection/i18n.json | 9 + .../domain/ContactInputsSection/index.tsx | 139 ++ .../domain/DrefExportModal/index.tsx | 9 +- .../domain/EapExportModal/i18n.json | 13 + .../domain/EapExportModal/index.tsx | 200 ++ .../domain/EapExportModal/styles.module.css | 5 + .../domain/EapIndicatorInput/i18n.json | 8 + .../domain/EapIndicatorInput/index.tsx | 102 + .../domain/EapIndicatorInput/schema.ts | 35 + .../domain/EapIndicatorListInput/i18n.json | 8 + .../domain/EapIndicatorListInput/index.tsx | 126 ++ .../TimeSpanCheck/index.tsx | 90 + .../TimeSpanCheck/styles.module.css | 29 + .../EapOperationActivityInput/i18n.json | 8 + .../EapOperationActivityInput/index.tsx | 174 ++ .../EapOperationActivityInput/schema.ts | 32 + .../EapOperationActivityListInput/i18n.json | 14 + .../EapOperationActivityListInput/index.tsx | 172 ++ .../domain/GoMultiFileInput/i18n.json | 3 +- .../domain/GoMultiFileInput/index.tsx | 19 +- .../domain/GoSingleFileInput/index.tsx | 60 +- .../domain/ImageWithCaptionInput/i18n.json | 7 +- .../domain/ImageWithCaptionInput/index.tsx | 35 +- .../MultiImageWithCaptionInput/i18n.json | 9 +- .../MultiImageWithCaptionInput/index.tsx | 35 +- .../domain/PrintableActivityOutput/index.tsx | 77 + .../domain/SourceInformationInput/index.tsx | 49 +- .../printable/PrintableContainer/index.tsx | 49 + .../PrintableContainer/styles.module.css | 17 + .../printable/PrintableDataDisplay/index.tsx | 282 +++ .../PrintableDataDisplay/styles.module.css | 59 + .../printable/PrintableDescription/index.tsx | 90 + .../PrintableDescription/styles.module.css | 18 + .../printable/PrintableLabel/index.tsx | 90 + .../PrintableLabel/styles.module.css | 16 + .../printable/PrintablePage/index.tsx | 100 + .../printable/PrintablePage/styles.module.css | 38 + app/src/utils/common.ts | 26 +- app/src/utils/constants.ts | 27 +- .../AccountMyFormsEap/EapStatus/index.tsx | 234 +++ .../EapTableActions/BudgetFileInput/i18n.json | 12 + .../EapTableActions/BudgetFileInput/index.tsx | 139 ++ .../EapTableActions/i18n.json | 19 + .../EapTableActions/index.tsx | 327 +++ .../views/AccountMyFormsEap/Filters/i18n.json | 6 + .../views/AccountMyFormsEap/Filters/index.tsx | 47 + app/src/views/AccountMyFormsEap/i18n.json | 11 + app/src/views/AccountMyFormsEap/index.tsx | 357 ++++ .../views/AccountMyFormsEap/styles.module.css | 3 + app/src/views/AccountMyFormsEap/utils.ts | 34 + app/src/views/AccountMyFormsLayout/i18n.json | 3 +- app/src/views/AccountMyFormsLayout/index.tsx | 5 + app/src/views/DrefApplicationForm/index.tsx | 1 + app/src/views/DrefDetail/i18n.json | 15 + app/src/views/DrefDetail/index.tsx | 58 + app/src/views/DrefProcess/i18n.json | 9 + app/src/views/DrefProcess/index.tsx | 37 + .../PrintableContactOutput/index.tsx | 75 + .../EapFullExport/TableOfContents/index.tsx | 82 + .../TableOfContents/styles.module.css | 41 + app/src/views/EapFullExport/i18n.json | 98 + app/src/views/EapFullExport/index.tsx | 1857 +++++++++++++++++ app/src/views/EapFullExport/styles.module.css | 34 + .../EAPSourceInformationInput/i18n.json | 8 + .../EAPSourceInformationInput/index.tsx | 120 ++ .../EapActivationProcess/i18n.json | 54 + .../EapActivationProcess/index.tsx | 411 ++++ .../EapFullForm/FinanceLogistics/i18n.json | 52 + .../EapFullForm/FinanceLogistics/index.tsx | 433 ++++ app/src/views/EapFullForm/Meal/i18n.json | 28 + app/src/views/EapFullForm/Meal/index.tsx | 180 ++ .../NationalSocietyCapacity/i18n.json | 28 + .../NationalSocietyCapacity/index.tsx | 202 ++ .../Overview/KeyActorsInput/i18n.json | 8 + .../Overview/KeyActorsInput/index.tsx | 108 + .../Overview/PartnerContactsInput/i18n.json | 10 + .../Overview/PartnerContactsInput/index.tsx | 126 ++ app/src/views/EapFullForm/Overview/i18n.json | 59 + app/src/views/EapFullForm/Overview/index.tsx | 564 +++++ .../PrioritisedImpactInput/index.tsx | 87 + .../views/EapFullForm/RiskAnalysis/i18n.json | 62 + .../views/EapFullForm/RiskAnalysis/index.tsx | 466 +++++ .../ApproachesInput/i18n.json | 8 + .../ApproachesInput/index.tsx | 137 ++ .../EarlyActionsInput/index.tsx | 87 + .../SelectionActions/OperationInput/i18n.json | 9 + .../SelectionActions/OperationInput/index.tsx | 151 ++ .../EapFullForm/SelectionActions/i18n.json | 66 + .../EapFullForm/SelectionActions/index.tsx | 668 ++++++ .../views/EapFullForm/TriggerModel/i18n.json | 70 + .../views/EapFullForm/TriggerModel/index.tsx | 536 +++++ app/src/views/EapFullForm/common.tsx | 172 ++ app/src/views/EapFullForm/i18n.json | 34 + app/src/views/EapFullForm/index.tsx | 1030 +++++++++ app/src/views/EapFullForm/schema.ts | 1087 ++++++++++ app/src/views/EapRegistration/i18n.json | 36 + app/src/views/EapRegistration/index.tsx | 370 ++++ app/src/views/EapRegistration/schema.ts | 56 + .../PrintableContactOutput/index.tsx | 75 + app/src/views/EapSimplifiedExport/i18n.json | 56 + app/src/views/EapSimplifiedExport/index.tsx | 936 +++++++++ .../EapSimplifiedExport/styles.module.css | 6 + .../DeliveryAndBudget/i18n.json | 45 + .../DeliveryAndBudget/index.tsx | 351 ++++ .../EapSimplifiedForm/EarlyAction/i18n.json | 52 + .../EapSimplifiedForm/EarlyAction/index.tsx | 394 ++++ .../ApproachesInput/i18n.json | 8 + .../ApproachesInput/index.tsx | 138 ++ .../EnablingApproaches/i18n.json | 8 + .../EnablingApproaches/index.tsx | 150 ++ .../EapSimplifiedForm/Overview/i18n.json | 34 + .../EapSimplifiedForm/Overview/index.tsx | 337 +++ .../PartnerContactInput/i18n.json | 10 + .../PartnerContactInput/index.tsx | 121 ++ .../OperationsInput/i18n.json | 9 + .../OperationsInput/index.tsx | 149 ++ .../PlannedOperations/i18n.json | 8 + .../PlannedOperations/index.tsx | 149 ++ .../EapSimplifiedForm/RiskAnalysis/i18n.json | 31 + .../EapSimplifiedForm/RiskAnalysis/index.tsx | 267 +++ app/src/views/EapSimplifiedForm/common.tsx | 179 ++ app/src/views/EapSimplifiedForm/i18n.json | 32 + app/src/views/EapSimplifiedForm/index.tsx | 816 ++++++++ app/src/views/EapSimplifiedForm/schema.ts | 545 +++++ app/src/views/EapSummaryExport/i18n.json | 37 + app/src/views/EapSummaryExport/index.tsx | 549 +++++ .../views/EapSummaryExport/styles.module.css | 27 + app/src/views/EarlyActionProtocols/i18n.json | 14 + app/src/views/EarlyActionProtocols/index.tsx | 71 + .../ComponentInput/index.tsx | 3 +- go-api | 2 +- packages/ui/src/components/Alert/index.tsx | 7 +- .../ui/src/components/Alert/styles.module.css | 23 +- .../AlertContainer/styles.module.css | 4 +- .../ui/src/components/Checklist/index.tsx | 21 +- .../ui/src/components/Container/index.tsx | 11 + .../components/Container/styles.module.css | 11 + packages/ui/src/components/Heading/index.tsx | 18 + .../src/components/Heading/styles.module.css | 8 + .../components/IconButton/styles.module.css | 2 +- .../components/InfoPopup/styles.module.css | 7 +- .../components/InlineLayout/styles.module.css | 15 +- .../ui/src/components/InputSection/index.tsx | 12 +- packages/ui/src/components/ListView/index.tsx | 6 + .../src/components/ListView/styles.module.css | 4 + .../src/components/Message/styles.module.css | 3 +- .../src/components/RadioInput/Radio/index.tsx | 2 +- .../RadioInput/Radio/styles.module.css | 7 + .../components/RawFileInput/styles.module.css | 1 + .../ui/src/components/TabLayout/index.tsx | 12 +- .../components/TabLayout/styles.module.css | 38 +- .../ui/src/components/TabListLayout/index.tsx | 1 + .../ui/src/components/Table/Cell/index.tsx | 17 +- .../components/Table/Cell/styles.module.css | 5 + .../ExpandButton/styles.module.css | 2 + .../ExpansionIndicator/index.tsx | 3 + .../ExpansionIndicator/styles.module.css | 12 +- .../components/Table/ColumnShortcuts/index.ts | 14 +- .../Table/ColumnShortcuts/styles.module.css | 2 +- .../Table/TableBodyContent/index.tsx | 19 +- .../Table/TableBodyContent/styles.module.css | 15 - .../src/components/Table/TableData/index.tsx | 16 +- .../Table/TableData/styles.module.css | 16 +- packages/ui/src/components/Table/types.ts | 8 + .../{parked => }/TopBanner/index.tsx | 3 +- .../components/TopBanner/styles.module.css | 24 + .../parked/TopBanner/styles.module.css | 19 - .../components/printable/Heading/index.tsx | 8 +- .../printable/Heading/styles.module.css | 2 +- .../components/printable/TextOutput/index.tsx | 9 +- .../printable/TextOutput/styles.module.css | 15 + packages/ui/src/hooks/index.tsx | 1 + packages/ui/src/index.tsx | 2 +- packages/ui/src/utils/style.ts | 8 +- pnpm-lock.yaml | 15 +- 187 files changed, 19772 insertions(+), 238 deletions(-) create mode 100644 app/src/components/domain/Admin2Input/index.tsx create mode 100644 app/src/components/domain/ContactInputsSection/i18n.json create mode 100644 app/src/components/domain/ContactInputsSection/index.tsx create mode 100644 app/src/components/domain/EapExportModal/i18n.json create mode 100644 app/src/components/domain/EapExportModal/index.tsx create mode 100644 app/src/components/domain/EapExportModal/styles.module.css create mode 100644 app/src/components/domain/EapIndicatorInput/i18n.json create mode 100644 app/src/components/domain/EapIndicatorInput/index.tsx create mode 100644 app/src/components/domain/EapIndicatorInput/schema.ts create mode 100644 app/src/components/domain/EapIndicatorListInput/i18n.json create mode 100644 app/src/components/domain/EapIndicatorListInput/index.tsx create mode 100644 app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx create mode 100644 app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/styles.module.css create mode 100644 app/src/components/domain/EapOperationActivityInput/i18n.json create mode 100644 app/src/components/domain/EapOperationActivityInput/index.tsx create mode 100644 app/src/components/domain/EapOperationActivityInput/schema.ts create mode 100644 app/src/components/domain/EapOperationActivityListInput/i18n.json create mode 100644 app/src/components/domain/EapOperationActivityListInput/index.tsx create mode 100644 app/src/components/domain/PrintableActivityOutput/index.tsx create mode 100644 app/src/components/printable/PrintableContainer/index.tsx create mode 100644 app/src/components/printable/PrintableContainer/styles.module.css create mode 100644 app/src/components/printable/PrintableDataDisplay/index.tsx create mode 100644 app/src/components/printable/PrintableDataDisplay/styles.module.css create mode 100644 app/src/components/printable/PrintableDescription/index.tsx create mode 100644 app/src/components/printable/PrintableDescription/styles.module.css create mode 100644 app/src/components/printable/PrintableLabel/index.tsx create mode 100644 app/src/components/printable/PrintableLabel/styles.module.css create mode 100644 app/src/components/printable/PrintablePage/index.tsx create mode 100644 app/src/components/printable/PrintablePage/styles.module.css create mode 100644 app/src/views/AccountMyFormsEap/EapStatus/index.tsx create mode 100644 app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/i18n.json create mode 100644 app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx create mode 100644 app/src/views/AccountMyFormsEap/EapTableActions/i18n.json create mode 100644 app/src/views/AccountMyFormsEap/EapTableActions/index.tsx create mode 100644 app/src/views/AccountMyFormsEap/Filters/i18n.json create mode 100644 app/src/views/AccountMyFormsEap/Filters/index.tsx create mode 100644 app/src/views/AccountMyFormsEap/i18n.json create mode 100644 app/src/views/AccountMyFormsEap/index.tsx create mode 100644 app/src/views/AccountMyFormsEap/styles.module.css create mode 100644 app/src/views/AccountMyFormsEap/utils.ts create mode 100644 app/src/views/DrefDetail/i18n.json create mode 100644 app/src/views/DrefDetail/index.tsx create mode 100644 app/src/views/DrefProcess/i18n.json create mode 100644 app/src/views/DrefProcess/index.tsx create mode 100644 app/src/views/EapFullExport/PrintableContactOutput/index.tsx create mode 100644 app/src/views/EapFullExport/TableOfContents/index.tsx create mode 100644 app/src/views/EapFullExport/TableOfContents/styles.module.css create mode 100644 app/src/views/EapFullExport/i18n.json create mode 100644 app/src/views/EapFullExport/index.tsx create mode 100644 app/src/views/EapFullExport/styles.module.css create mode 100644 app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json create mode 100644 app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx create mode 100644 app/src/views/EapFullForm/EapActivationProcess/i18n.json create mode 100644 app/src/views/EapFullForm/EapActivationProcess/index.tsx create mode 100644 app/src/views/EapFullForm/FinanceLogistics/i18n.json create mode 100644 app/src/views/EapFullForm/FinanceLogistics/index.tsx create mode 100644 app/src/views/EapFullForm/Meal/i18n.json create mode 100644 app/src/views/EapFullForm/Meal/index.tsx create mode 100644 app/src/views/EapFullForm/NationalSocietyCapacity/i18n.json create mode 100644 app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx create mode 100644 app/src/views/EapFullForm/Overview/KeyActorsInput/i18n.json create mode 100644 app/src/views/EapFullForm/Overview/KeyActorsInput/index.tsx create mode 100644 app/src/views/EapFullForm/Overview/PartnerContactsInput/i18n.json create mode 100644 app/src/views/EapFullForm/Overview/PartnerContactsInput/index.tsx create mode 100644 app/src/views/EapFullForm/Overview/i18n.json create mode 100644 app/src/views/EapFullForm/Overview/index.tsx create mode 100644 app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx create mode 100644 app/src/views/EapFullForm/RiskAnalysis/i18n.json create mode 100644 app/src/views/EapFullForm/RiskAnalysis/index.tsx create mode 100644 app/src/views/EapFullForm/SelectionActions/ApproachesInput/i18n.json create mode 100644 app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx create mode 100644 app/src/views/EapFullForm/SelectionActions/EarlyActionsInput/index.tsx create mode 100644 app/src/views/EapFullForm/SelectionActions/OperationInput/i18n.json create mode 100644 app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx create mode 100644 app/src/views/EapFullForm/SelectionActions/i18n.json create mode 100644 app/src/views/EapFullForm/SelectionActions/index.tsx create mode 100644 app/src/views/EapFullForm/TriggerModel/i18n.json create mode 100644 app/src/views/EapFullForm/TriggerModel/index.tsx create mode 100644 app/src/views/EapFullForm/common.tsx create mode 100644 app/src/views/EapFullForm/i18n.json create mode 100644 app/src/views/EapFullForm/index.tsx create mode 100644 app/src/views/EapFullForm/schema.ts create mode 100644 app/src/views/EapRegistration/i18n.json create mode 100644 app/src/views/EapRegistration/index.tsx create mode 100644 app/src/views/EapRegistration/schema.ts create mode 100644 app/src/views/EapSimplifiedExport/PrintableContactOutput/index.tsx create mode 100644 app/src/views/EapSimplifiedExport/i18n.json create mode 100644 app/src/views/EapSimplifiedExport/index.tsx create mode 100644 app/src/views/EapSimplifiedExport/styles.module.css create mode 100644 app/src/views/EapSimplifiedForm/DeliveryAndBudget/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/DeliveryAndBudget/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/EarlyAction/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/EarlyAction/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/EnablingApproaches/ApproachesInput/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/EnablingApproaches/ApproachesInput/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/EnablingApproaches/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/EnablingApproaches/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/Overview/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/Overview/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/PartnerContactInput/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/PartnerContactInput/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/PlannedOperations/OperationsInput/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/PlannedOperations/OperationsInput/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/PlannedOperations/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/PlannedOperations/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/RiskAnalysis/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/RiskAnalysis/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/common.tsx create mode 100644 app/src/views/EapSimplifiedForm/i18n.json create mode 100644 app/src/views/EapSimplifiedForm/index.tsx create mode 100644 app/src/views/EapSimplifiedForm/schema.ts create mode 100644 app/src/views/EapSummaryExport/i18n.json create mode 100644 app/src/views/EapSummaryExport/index.tsx create mode 100644 app/src/views/EapSummaryExport/styles.module.css create mode 100644 app/src/views/EarlyActionProtocols/i18n.json create mode 100644 app/src/views/EarlyActionProtocols/index.tsx create mode 100644 packages/ui/src/components/Table/Cell/styles.module.css delete mode 100644 packages/ui/src/components/Table/TableBodyContent/styles.module.css rename packages/ui/src/components/{parked => }/TopBanner/index.tsx (88%) create mode 100644 packages/ui/src/components/TopBanner/styles.module.css delete mode 100644 packages/ui/src/components/parked/TopBanner/styles.module.css diff --git a/app/package.json b/app/package.json index 65418d3d9e..7786db5caf 100644 --- a/app/package.json +++ b/app/package.json @@ -48,6 +48,7 @@ "@togglecorp/toggle-request": "^1.0.0-beta.3", "@turf/bbox": "^6.5.0", "@turf/buffer": "^6.5.0", + "diff": "^8.0.2", "exceljs": "^4.3.0", "file-saver": "^2.0.5", "html-to-image": "^1.11.11", diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx index b25ad826a3..d3cceb192e 100644 --- a/app/src/App/routes/index.tsx +++ b/app/src/App/routes/index.tsx @@ -319,6 +319,50 @@ const emergencyAdditionalInfo = customWrapRoute({ }, }); +type DefaultDrefDetailChild = 'dref-detail'; +const drefProcessLayout = customWrapRoute({ + parent: rootLayout, + path: 'dref-process', + forwardPath: 'dref-detail' satisfies DefaultDrefDetailChild, + component: { + render: () => import('#views/DrefProcess'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'DREF Process', + visibility: 'anything', + }, +}); + +const drefDetail = customWrapRoute({ + parent: drefProcessLayout, + path: 'dref-detail' satisfies DefaultDrefDetailChild, + component: { + render: () => import('#views/DrefDetail'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Response and Imminent DREF', + visibility: 'anything', + }, +}); + +const eapDetail = customWrapRoute({ + parent: drefProcessLayout, + path: 'eap-detail', + component: { + render: () => import('#views/EarlyActionProtocols'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Early Action Protocols', + visibility: 'anything', + }, +}); + type DefaultPreparednessChild = 'global-summary'; const preparednessLayout = customWrapRoute({ parent: rootLayout, @@ -715,6 +759,49 @@ const accountMyFormsThreeW = customWrapRoute({ }, }); +const accountMyFormsEap = customWrapRoute({ + parent: accountMyFormsLayout, + path: 'eap-applications', + component: { + render: () => import('#views/AccountMyFormsEap'), + props: {}, + }, + context: { + title: 'Account - EAP Applications', + visibility: 'is-authenticated', + permissions: ({ isGuestUser }) => !isGuestUser, + }, +}); + +const fullEapForm = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/full', + component: { + render: () => import('#views/EapFullForm'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Full Forms', + visibility: 'is-authenticated', + permissions: ({ isGuestUser }) => !isGuestUser, + }, +}); + +const simplifiedEapForm = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/simplified', + component: { + render: () => import('#views/EapSimplifiedForm'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Simplified EAP Form', + visibility: 'is-authenticated', + }, +}); + const accountNotifications = customWrapRoute({ parent: accountLayout, path: 'notifications', @@ -1094,6 +1181,93 @@ const fieldReportDetails = customWrapRoute({ }, }); +type DefaultEapRegistrationChild = 'new'; +const eapRegistrationLayout = customWrapRoute({ + parent: rootLayout, + path: 'eap-registration', + forwardPath: 'new' satisfies DefaultEapRegistrationChild, + component: { + render: () => import('#views/EapRegistration'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Process', + visibility: 'is-authenticated', + }, +}); + +const newEapDevelopmentRegistration = customWrapRoute({ + parent: eapRegistrationLayout, + path: 'new' satisfies DefaultEapRegistrationChild, + component: { + render: () => import('#views/EapRegistration'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'New EAP Development Registration', + visibility: 'is-authenticated', + permissions: ({ isGuestUser }) => !isGuestUser, + }, +}); + +const eapDevelopmentRegistrationForm = customWrapRoute({ + parent: eapRegistrationLayout, + path: ':eapId/', + component: { + render: () => import('#views/EapRegistration'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'View EAP', + visibility: 'is-authenticated', + }, +}); + +const eapFullExport = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/export/full', + component: { + render: () => import('#views/EapFullExport'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Export', + visibility: 'is-authenticated', + }, +}); + +const eapSimplifiedExport = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/export/simplified', + component: { + render: () => import('#views/EapSimplifiedExport'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Export', + visibility: 'is-authenticated', + }, +}); + +const eapSummaryExport = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/export/summary', + component: { + render: () => import('#views/EapSummaryExport'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Full Summary Export', + visibility: 'is-authenticated', + }, +}); + type DefaultPerProcessChild = 'new'; const perProcessLayout = customWrapRoute({ parent: rootLayout, @@ -1317,6 +1491,7 @@ const wrappedRoutes = { accountMyFormsPer, accountMyFormsDref, accountMyFormsThreeW, + accountMyFormsEap, resources, search, allThreeWProject, @@ -1353,6 +1528,9 @@ const wrappedRoutes = { termsAndConditions, operationalLearning, montandonLandingPage, + newEapDevelopmentRegistration, + fullEapForm, + simplifiedEapForm, ...regionRoutes, ...countryRoutes, ...surgeRoutes, @@ -1363,6 +1541,14 @@ const wrappedRoutes = { // Redirects preparednessOperationalLearning, obsoleteFieldReportDetails, + drefDetail, + eapDetail, + drefProcessLayout, + eapRegistrationLayout, + eapDevelopmentRegistrationForm, + eapFullExport, + eapSimplifiedExport, + eapSummaryExport, }; export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes)); diff --git a/app/src/components/GoMapContainer/index.tsx b/app/src/components/GoMapContainer/index.tsx index b0449c859b..7ba28d6d48 100644 --- a/app/src/components/GoMapContainer/index.tsx +++ b/app/src/components/GoMapContainer/index.tsx @@ -50,6 +50,7 @@ interface Props { presentationModeAdditionalAfterContent?: React.ReactNode; onPresentationModeChange?: (newPresentationMode: boolean) => void; children?: React.ReactNode; + withFullHeight?: boolean; } function GoMapContainer(props: Props) { @@ -63,6 +64,7 @@ function GoMapContainer(props: Props) { presentationModeAdditionalAfterContent, onPresentationModeChange, children, + withFullHeight, } = props; const strings = useTranslation(i18n); @@ -161,6 +163,7 @@ function GoMapContainer(props: Props) { styles.goMapContainer, printMode && styles.printMode, presentationMode && styles.presentationMode, + withFullHeight && styles.withFullHeight, className, )} headingLevel={2} @@ -236,12 +239,15 @@ function GoMapContainer(props: Props) { withPadding={presentationMode} > {presentationMode && presentationModeAdditionalBeforeContent}
- + {strings.myDrefApplications} + + {strings.earlyActionProtocols} + (props: Props) { } return ( -
diff --git a/app/src/components/NonFieldError/styles.module.css b/app/src/components/NonFieldError/styles.module.css index 0c3a5adf12..db25d7b0d0 100644 --- a/app/src/components/NonFieldError/styles.module.css +++ b/app/src/components/NonFieldError/styles.module.css @@ -5,7 +5,6 @@ animation-delay: var(--go-ui-duration-animation-slow); gap: var(--go-ui-spacing-sm); color: var(--go-ui-color-red); - font-weight: var(--go-ui-font-weight-medium); .icon { flex-shrink: 0; diff --git a/app/src/components/PerExportModal/index.tsx b/app/src/components/PerExportModal/index.tsx index 732fbdb2bb..f7a855357e 100644 --- a/app/src/components/PerExportModal/index.tsx +++ b/app/src/components/PerExportModal/index.tsx @@ -14,11 +14,15 @@ import { import Link from '#components/Link'; import { type components } from '#generated/types'; -import { useRequest } from '#utils/restRequest'; +import { + type GoApiBody, + useRequest, +} from '#utils/restRequest'; import i18n from './i18n.json'; type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum']; +type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>; const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum; const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum; @@ -45,8 +49,11 @@ function PerExportModal(props: Props) { export_id: Number(perId), export_type: 'per' as const, per_country: Number(countryId), - is_pga: false, - }), + is_pga: undefined, + summary: undefined, + version: undefined, + diff: undefined, + } satisfies ExportBody), [perId, countryId], ); diff --git a/app/src/components/TabPage/index.tsx b/app/src/components/TabPage/index.tsx index d7a2782df2..b3ddba3bbb 100644 --- a/app/src/components/TabPage/index.tsx +++ b/app/src/components/TabPage/index.tsx @@ -24,6 +24,8 @@ interface Props { pendingMessage?: React.ReactNode; withoutMessageIcon?: boolean; withCompactMessage?: boolean; + + spacingOffset?: number; } function TabPage(props: Props) { @@ -43,6 +45,7 @@ function TabPage(props: Props) { errorMessage, withoutMessageIcon, withCompactMessage, + spacingOffset, } = props; const mainContent = (children || empty || pending || errored || filtered) && ( @@ -79,6 +82,7 @@ function TabPage(props: Props) { {mainContent} diff --git a/app/src/components/domain/Admin2Input/index.tsx b/app/src/components/domain/Admin2Input/index.tsx new file mode 100644 index 0000000000..1baaeb0db5 --- /dev/null +++ b/app/src/components/domain/Admin2Input/index.tsx @@ -0,0 +1,389 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { CloseLineIcon } from '@ifrc-go/icons'; +import { + Button, + ButtonLayout, + Container, + InputError, + ListView, + Modal, +} from '@ifrc-go/ui'; +import { useBooleanState } from '@ifrc-go/ui/hooks'; +import { + isNotDefined, + listToMap, +} from '@togglecorp/fujs'; +import { + MapBounds, + MapLayer, + MapSource, +} from '@togglecorp/re-map'; +import turfBbox from '@turf/bbox'; +import { + type FillLayer, + type LineLayer, + type MapboxGeoJSONFeature, + type SymbolLayer, +} from 'mapbox-gl'; + +import GoMapContainer from '#components/GoMapContainer'; +import useCountry from '#hooks/domain/useCountry'; +import useDebouncedValue from '#hooks/useDebouncedValue'; +import { + COLOR_BLACK, + COLOR_DARK_GREY, + COLOR_LIGHT_GREY, + COLOR_PRIMARY_RED, + COLOR_TEXT, + COLOR_TEXT_ON_DARK, + DEFAULT_MAP_PADDING, + DURATION_MAP_ZOOM, + MAX_PAGE_LIMIT, +} from '#utils/constants'; +import { useRequest } from '#utils/restRequest'; + +import BaseMap from '../BaseMap'; + +interface Props { + name: NAME; + value: number[] | null | undefined; + onChange: (newValue: number[] | undefined, name: NAME) => void; + countryId: number; + error?: React.ReactNode; + readOnly?: boolean; +} + +function Admin2Input(props: Props) { + const { + name, + value, + onChange, + countryId, + error, + readOnly, + } = props; + + const countryDetails = useCountry({ id: countryId }); + const iso3 = countryDetails?.iso3; + + const [selectedCodes, setSelectedCodes] = useState([]); + + const selectedCodesDebounced = useDebouncedValue(selectedCodes, 300); + + const { response: admin2Details } = useRequest({ + skip: isNotDefined(selectedCodesDebounced) || selectedCodesDebounced.length === 0, + url: '/api/v2/admin2/', + query: { + code__in: selectedCodesDebounced ?? [], + limit: MAX_PAGE_LIMIT, + }, + onSuccess: (response) => { + onChange( + response.results.map(({ id }) => id), + name, + ); + }, + }); + + const admin2NameMap = listToMap( + admin2Details?.results, + ({ id }) => id, + ({ name: admin2Name, district_name }) => `${admin2Name} (${district_name})`, + ); + + const admin2CodeMap = listToMap( + admin2Details?.results, + ({ id }) => id, + ({ code }) => code, + ); + + const bounds = useMemo(() => { + if (!countryDetails) { + return undefined; + } + + return turfBbox(countryDetails.bbox); + }, [ + countryDetails, + ]); + + const adminOneLabelLayerOptions: Omit = useMemo(() => ({ + type: 'symbol', + paint: { + 'text-opacity': [ + 'match', + ['get', 'country_id'], + countryId, + 1, + 0, + ], + }, + layout: { + 'text-offset': [ + 0, + 1, + ], + visibility: 'visible', + }, + }), [countryId]); + + const adminTwoLineLayerOptions: Omit | undefined = useMemo(() => { + if (!iso3) { + return undefined; + } + + return { + type: 'line', + 'source-layer': `go-admin2-${iso3}-staging`, + paint: { + 'line-color': COLOR_BLACK, + 'line-opacity': 1, + }, + layout: { + visibility: 'visible', + }, + }; + }, [iso3]); + + const adminTwoFillLayerOptions = useMemo((): Omit | undefined => { + if (!iso3) { + return undefined; + } + const defaultColor: NonNullable['fill-color'] = [ + 'case', + ['boolean', ['feature-state', 'hovered'], false], + COLOR_DARK_GREY, + COLOR_LIGHT_GREY, + ]; + const options: Omit = { + type: 'fill', + 'source-layer': `go-admin2-${iso3}-staging`, + paint: { + 'fill-color': (!value || value.length <= 0) + ? defaultColor + : [ + 'match', + ['get', 'code'], + ...value.map((admin2Id) => [ + admin2CodeMap?.[admin2Id] ?? admin2Id, + COLOR_PRIMARY_RED, + ]).flat(), + defaultColor, + ], + 'fill-outline-color': COLOR_DARK_GREY, + 'fill-opacity': 1, + }, + layout: { + visibility: 'visible', + }, + }; + return options; + }, [iso3, value, admin2CodeMap]); + + const adminTwoLabelLayerOptions = useMemo((): Omit | undefined => { + const textColor: NonNullable['text-color'] = ( + value && value.length > 0 + ? [ + 'match', + ['get', 'id'], + ...value.map((admin2Id) => [ + admin2Id, + COLOR_TEXT_ON_DARK, + ]).flat(), + COLOR_TEXT, + ] + : COLOR_TEXT + ); + + const options: Omit = { + type: 'symbol', + 'source-layer': `go-admin2-${iso3}-centroids`, + paint: { + 'text-color': textColor, + 'text-opacity': 1, + }, + layout: { + 'text-field': ['get', 'name'], + 'text-anchor': 'center', + 'text-size': 10, + }, + }; + return options; + }, [iso3, value]); + + const handleAdmin2Click = useCallback((clickedFeature: MapboxGeoJSONFeature) => { + const properties = clickedFeature?.properties as { + id: number; + admin1_id: number; + code: string; + admin1_name: string; + name?: string; + }; + + if (isNotDefined(properties.code)) { + return false; + } + + setSelectedCodes((prevCodes) => { + const codeIndex = prevCodes.findIndex((prevCode) => prevCode === properties.code); + + if (codeIndex === -1) { + return [...prevCodes, properties.code]; + } + + return prevCodes.toSpliced(codeIndex, 1); + }); + + return false; + }, []); + + const [ + showModal, + { + setTrue: setShowModalTrue, + setFalse: setShowModalFalse, + }, + ] = useBooleanState(false); + + const removeSelection = useCallback((admin2Id: number) => { + const index = value?.findIndex((selectedAdmin2Id) => selectedAdmin2Id === admin2Id) ?? -1; + + if (index !== -1) { + onChange(value?.toSpliced(index, 1), name); + } + }, [value, onChange, name]); + + return ( + + + Select areas + + )} + withCompactMessage + empty={!value || value.length === 0} + withBorder + withPadding + > + + {value?.map((admin2Id) => ( + + + + )} + readOnly + > + {admin2NameMap?.[admin2Id] ?? admin2Id} + + ))} + + + {error && ( + + {error} + + )} + {showModal && ( + + Done + + )} + > + + )} + > + + {bounds && ( + + )} + {/* eslint-disable-next-line max-len */} + {adminTwoFillLayerOptions && adminTwoLineLayerOptions && adminTwoLabelLayerOptions && ( + <> + + + + + + + + + )} + + + )} + + ); +} + +export default Admin2Input; diff --git a/app/src/components/domain/BaseMap/index.tsx b/app/src/components/domain/BaseMap/index.tsx index ec4a793584..125d6138fc 100644 --- a/app/src/components/domain/BaseMap/index.tsx +++ b/app/src/components/domain/BaseMap/index.tsx @@ -28,7 +28,7 @@ export type Props = Omit & { withDisclaimer?: boolean; } & Partial>; -function BaseMap(props: Props) { +function BaseMapWithoutErrorBoundary(props: Props) { const { baseLayers, mapStyle, @@ -101,7 +101,7 @@ function BaseMap(props: Props) { ); } -function BaseMapWithErrorBoundary(props: Props) { +function BaseMap(props: Props) { return ( )} > - @@ -118,4 +118,4 @@ function BaseMapWithErrorBoundary(props: Props) { ); } -export default BaseMapWithErrorBoundary; +export default BaseMap; diff --git a/app/src/components/domain/ContactInputsSection/i18n.json b/app/src/components/domain/ContactInputsSection/i18n.json new file mode 100644 index 0000000000..219d358cda --- /dev/null +++ b/app/src/components/domain/ContactInputsSection/i18n.json @@ -0,0 +1,9 @@ +{ + "namespace": "contactInputsSection", + "strings": { + "contactNameInputLabel": "Name", + "contactTitleInputLabel": "Title", + "contactEmailInputLabel": "Email", + "contactPhoneInputLabel": "Phone number" + } +} diff --git a/app/src/components/domain/ContactInputsSection/index.tsx b/app/src/components/domain/ContactInputsSection/index.tsx new file mode 100644 index 0000000000..ae09641c14 --- /dev/null +++ b/app/src/components/domain/ContactInputsSection/index.tsx @@ -0,0 +1,139 @@ +import { useCallback } from 'react'; +import { + InputSection, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + type EntriesAsList, + type Error, + getErrorObject, +} from '@togglecorp/toggle-form'; + +import i18n from './i18n.json'; + +type ContactFields = 'name' | 'title' | 'email' | 'phone_number'; +type PrefixFromKey = K extends `${infer P}_${ContactFields}` ? P : never; + +type HasAllKeys = + `${P}_name` extends K + ? `${P}_title` extends K + ? `${P}_email` extends K + ? `${P}_phone_number` extends K + ? true + : false + : false + : false + : false; + +type ValidPrefixes = + PrefixFromKey extends infer P + ? P extends string + ? HasAllKeys extends true ? P : never + : never + : never; + +interface Props< + FORM_VALUE extends object, + NAME_PREFIX extends ValidPrefixes> +> { + namePrefix: NAME_PREFIX; + value: FORM_VALUE; + setFieldValue: (...entries: EntriesAsList) => void; + error: Error | undefined; + + title?: React.ReactNode; + description?: React.ReactNode; + disabled?: boolean; + readOnly?: boolean; + withAsteriskOnTitle?: boolean; + withRequiredNameAndEmail?: boolean; +} + +function ContactInputsSection< + FORM_VALUE extends object, + const NAME_PREFIX extends ValidPrefixes> +>(props: Props) { + const { + title: sectionTitle, + description, + namePrefix, + value, + setFieldValue, + error: formError, + disabled, + readOnly, + withAsteriskOnTitle, + withRequiredNameAndEmail, + } = props; + + const strings = useTranslation(i18n); + + const error = getErrorObject(formError); + + function getContactFieldValue(field: ContactFields) { + return value?.[`${namePrefix}_${field}`]; + } + + function getContactFieldError(field: ContactFields) { + return error?.[`${namePrefix}_${field}`] as string | undefined; + } + + const setContactFieldValue = useCallback( + (newValue: string | undefined, field: ContactFields) => { + const fieldName = `${namePrefix}_${field}` as const; + setFieldValue(newValue as ReturnType, fieldName); + }, + [setFieldValue, namePrefix], + ); + + return ( + + + + + + + ); +} + +export default ContactInputsSection; diff --git a/app/src/components/domain/DrefExportModal/index.tsx b/app/src/components/domain/DrefExportModal/index.tsx index 0bcebcca03..4240a3bf2f 100644 --- a/app/src/components/domain/DrefExportModal/index.tsx +++ b/app/src/components/domain/DrefExportModal/index.tsx @@ -24,6 +24,7 @@ import { type TypeOfDrefEnum, } from '#utils/constants'; import { + type GoApiBody, useLazyRequest, useRequest, } from '#utils/restRequest'; @@ -33,6 +34,7 @@ import styles from './styles.module.css'; type ExportTypeEnum = components<'read'>['schemas']['ExportTypeEnum']; type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum']; +type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>; const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum; const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum; @@ -83,9 +85,12 @@ function DrefExportModal(props: Props) { export_id: id, export_type: type, is_pga: includePga, - selector: '#pdf-preview-ready', + // selector: '#pdf-preview-ready', per_country: undefined, - }; + summary: undefined, + version: undefined, + diff: undefined, + } satisfies ExportBody; }, [ id, diff --git a/app/src/components/domain/EapExportModal/i18n.json b/app/src/components/domain/EapExportModal/i18n.json new file mode 100644 index 0000000000..19fee027c1 --- /dev/null +++ b/app/src/components/domain/EapExportModal/i18n.json @@ -0,0 +1,13 @@ +{ + "namespace": "eapExportModal", + "strings": { + "exportTitle": "Export EAP", + "preparingExport": "Preparing for export...", + "waitingExport": "Waiting for the export to complete...", + "exportFailed": "Export failed", + "exportSuccessfully": "Export completed successfully!", + "downloadLinkDescription": "Click on the download link below!", + "downloadLinkLabel": "Download PDF", + "failureToExportMessage":"Failed to export PDF." + } +} diff --git a/app/src/components/domain/EapExportModal/index.tsx b/app/src/components/domain/EapExportModal/index.tsx new file mode 100644 index 0000000000..31e8c3fd62 --- /dev/null +++ b/app/src/components/domain/EapExportModal/index.tsx @@ -0,0 +1,200 @@ +import { + useEffect, + useMemo, + useState, +} from 'react'; +import { DownloadLineIcon } from '@ifrc-go/icons'; +import { + Message, + Modal, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + isDefined, + isNotDefined, +} from '@togglecorp/fujs'; + +import Link from '#components/Link'; +import { type components } from '#generated/types'; +import useAlert from '#hooks/useAlert'; +import { EAP_TYPE_SIMPLIFIED } from '#utils/constants'; +import { + type GoApiBody, + useLazyRequest, + useRequest, +} from '#utils/restRequest'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +type EapType = components['schemas']['EapEapTypeEnumKey']; +type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum']; + +type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>; + +const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum; +const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum; +const EXPORT_STATUS_ERRORED = 2 satisfies ExportStatusEnum; + +interface Props { + eapId: number; + eapType: EapType; + version?: number; + onClose: () => void; + diff?: boolean; + summary?: boolean; +} + +function EapExportModal(props: Props) { + const { + eapId, + eapType, + onClose, + version, + diff, + summary, + } = props; + + const strings = useTranslation(i18n); + const alert = useAlert(); + + const [exportId, setExportId] = useState(); + + const exportTriggerBody = useMemo( + () => ({ + export_id: eapId, + export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified' : 'full', + selector: '#pdf-preview-ready', + is_pga: undefined, + per_country: undefined, + version, + summary, + diff, + }), + [eapId, eapType, version, diff, summary], + ); + + const { + pending: exportPending, + error: exportError, + trigger: triggerExport, + } = useLazyRequest({ + method: 'POST', + useCurrentLanguageForMutation: true, + url: '/api/v2/pdf-export/', + body: exportTriggerBody, + onSuccess: (response) => { + if (isDefined(response.id)) { + setExportId(response.id); + } + }, + onFailure: () => { + alert.show( + strings.failureToExportMessage, + { variant: 'danger' }, + ); + }, + }); + + useEffect(() => { + triggerExport(null); + }, [triggerExport]); + + const { + pending: exportStatusPending, + response: exportStatusResponse, + error: exportStatusError, + } = useRequest({ + skip: isNotDefined(exportId), + url: '/api/v2/pdf-export/{id}/', + // FIXME: typings should be fixed in the server + pathVariables: isDefined(exportId) ? ({ id: String(exportId) }) : undefined, + shouldPoll: (poll) => { + if (poll?.errored || poll?.value?.status !== EXPORT_STATUS_PENDING) { + return -1; + } + + return 5000; + }, + }); + + const exportStatus = useMemo(() => { + if (exportPending) { + return 'PREPARE'; + } + + if (exportStatusPending || exportStatusResponse?.status === EXPORT_STATUS_PENDING) { + return 'WAITING'; + } + + if (isDefined(exportStatusError) + || isDefined(exportError) + || (isDefined(exportStatusResponse) + && exportStatusResponse.status === EXPORT_STATUS_ERRORED) + ) { + return 'FAILED'; + } + + if (isDefined(exportStatusResponse) + && isDefined(exportStatusResponse.status === EXPORT_STATUS_COMPLETED) + && isDefined(exportStatusResponse.pdf_file) + ) { + return 'SUCCESS'; + } + + return 'NOT_STARTED'; + }, [ + exportPending, + exportStatusError, + exportError, + exportStatusPending, + exportStatusResponse, + ]); + + return ( + + {exportStatus === 'PREPARE' && ( + + )} + {exportStatus === 'WAITING' && ( + + )} + {exportStatus === 'FAILED' && ( + + )} + {exportStatus === 'SUCCESS' && ( + } + external + > + {strings.downloadLinkLabel} + + )} + /> + )} + + ); +} + +export default EapExportModal; diff --git a/app/src/components/domain/EapExportModal/styles.module.css b/app/src/components/domain/EapExportModal/styles.module.css new file mode 100644 index 0000000000..2de1f5fc87 --- /dev/null +++ b/app/src/components/domain/EapExportModal/styles.module.css @@ -0,0 +1,5 @@ +.dref-export-modal { + .icon { + font-size: var(--go-ui-height-icon-multiplier); + } +} diff --git a/app/src/components/domain/EapIndicatorInput/i18n.json b/app/src/components/domain/EapIndicatorInput/i18n.json new file mode 100644 index 0000000000..8df0c45642 --- /dev/null +++ b/app/src/components/domain/EapIndicatorInput/i18n.json @@ -0,0 +1,8 @@ +{ + "namespace": "eapIndicatorInput", + "strings": { + "removeButtonTitle": "Remove", + "titleInputLabel": "Title", + "targetInputLabel": "Target" + } +} diff --git a/app/src/components/domain/EapIndicatorInput/index.tsx b/app/src/components/domain/EapIndicatorInput/index.tsx new file mode 100644 index 0000000000..857c1a6cb9 --- /dev/null +++ b/app/src/components/domain/EapIndicatorInput/index.tsx @@ -0,0 +1,102 @@ +import { DeleteBinTwoLineIcon } from '@ifrc-go/icons'; +import { + IconButton, + InlineLayout, + ListView, + NumberInput, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + type ArrayError, + getErrorObject, + type PartialForm, + type SetValueArg, + useFormObject, +} from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; + +import i18n from './i18n.json'; + +type Indicator = components<'write'>['schemas']['Indicator'] & { client_id: string }; +type IndicatorFormFields = PartialForm; + +const defaultIndicatorValue: IndicatorFormFields = { + client_id: '-1', +}; + +interface Props { + value: IndicatorFormFields; + error: ArrayError | undefined; + onChange: (value: SetValueArg, index: number) => void; + onRemove: (index: number) => void; + index: number; + disabled?: boolean; + readOnly?: boolean; +} + +function EapIndicatorInput(props: Props) { + const { + error: errorFromProps, + readOnly, + onChange, + value, + index, + onRemove, + disabled, + } = props; + + const strings = useTranslation(i18n); + + const onFieldChange = useFormObject(index, onChange, defaultIndicatorValue); + + const error = value && value.client_id && errorFromProps + ? getErrorObject(errorFromProps?.[value.client_id]) + : undefined; + + return ( + + + + )} + spacing="sm" + > + + + + + + ); +} + +export default EapIndicatorInput; diff --git a/app/src/components/domain/EapIndicatorInput/schema.ts b/app/src/components/domain/EapIndicatorInput/schema.ts new file mode 100644 index 0000000000..43bcf4fcac --- /dev/null +++ b/app/src/components/domain/EapIndicatorInput/schema.ts @@ -0,0 +1,35 @@ +import { + type ObjectSchema, + type PartialForm, + requiredStringCondition, + undefinedValue, +} from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; +import { positiveNumberCondition } from '#utils/form'; + +type Indicator = components<'write'>['schemas']['Indicator']; + +export type IndicatorFormFields = PartialForm & { + client_id: string; +} + +type IndicatorSchema = ObjectSchema; + +const schema: IndicatorSchema = { + fields: (): ReturnType => ({ + client_id: {}, + id: { defaultValue: undefinedValue }, + title: { + // FIXME: add validation for character limit + required: true, + requiredValidation: requiredStringCondition, + }, + target: { + required: true, + validations: [positiveNumberCondition], + }, + }), +}; + +export default schema; diff --git a/app/src/components/domain/EapIndicatorListInput/i18n.json b/app/src/components/domain/EapIndicatorListInput/i18n.json new file mode 100644 index 0000000000..364ada6509 --- /dev/null +++ b/app/src/components/domain/EapIndicatorListInput/i18n.json @@ -0,0 +1,8 @@ +{ + "namespace": "eapIndicatorListInput", + "strings": { + "indicatorsTitle": "Indicators", + "addButtonLabel": "Add indicator", + "emptyMessage": "No indicators yet!" + } +} diff --git a/app/src/components/domain/EapIndicatorListInput/index.tsx b/app/src/components/domain/EapIndicatorListInput/index.tsx new file mode 100644 index 0000000000..a8b4efe4e5 --- /dev/null +++ b/app/src/components/domain/EapIndicatorListInput/index.tsx @@ -0,0 +1,126 @@ +import { useCallback } from 'react'; +import { AddLineIcon } from '@ifrc-go/icons'; +import { + Button, + Container, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + isNotDefined, + randomString, +} from '@togglecorp/fujs'; +import { + type ArrayError, + getErrorObject, + type SetValueArg, + useFormArray, +} from '@togglecorp/toggle-form'; + +import EapIndicatorInput from '#components/domain/EapIndicatorInput'; +import { type IndicatorFormFields } from '#components/domain/EapIndicatorInput/schema'; +import NonFieldError from '#components/NonFieldError'; + +import i18n from './i18n.json'; + +type FormName = 'indicators'; + +interface Props { + disabled?: boolean; + readOnly?: boolean; + + name: NAME, + value: IndicatorFormFields[] | undefined; + onChange: (newValue: SetValueArg, name: NAME) => void; + error: ArrayError | undefined; +} + +function EapIndicatorListInput(props: Props) { + const { + disabled, + readOnly, + + name, + value, + onChange, + error, + } = props; + + const strings = useTranslation(i18n); + + const { + setValue: onReadinessChange, + removeValue: onReadinessRemove, + } = useFormArray( + name, + onChange, + ); + + const handleReadinessAddButtonClick = useCallback( + () => { + const newActionItem: IndicatorFormFields = { + client_id: randomString(), + }; + + onChange( + (oldValue: IndicatorFormFields[] | undefined) => ( + [...(oldValue ?? []), newActionItem] + ), + name, + ); + }, + [onChange, name], + ); + + return ( + + {strings.indicatorsTitle} + * + + )} + headingLevel={5} + footerActions={( + + )} + withCompactMessage + empty={isNotDefined(value) + || value.length === 0} + emptyMessage={strings.emptyMessage} + footer={} + > + + {value?.map((activity, i) => ( + + ))} + + + ); +} + +export default EapIndicatorListInput; diff --git a/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx b/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx new file mode 100644 index 0000000000..d94c47b047 --- /dev/null +++ b/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx @@ -0,0 +1,90 @@ +import { useCallback } from 'react'; +import { + type CheckboxProps, + InputError, +} from '@ifrc-go/ui'; +import { _cs } from '@togglecorp/fujs'; + +import styles from './styles.module.css'; + +function TimeSpanCheck(props: CheckboxProps) { + const { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + checkmarkClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + checkmarkContainerClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + inputClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + labelContainerClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + description, + + className: classNameFromProps, + disabled, + error, + indeterminate, + invertedLogic = false, + label, + name, + onChange, + readOnly, + tooltip, + value, + withBackground, + withDarkBackground, + ...otherProps + } = props; + + const handleChange = useCallback( + (e: React.FormEvent) => { + const v = e.currentTarget.checked; + onChange( + invertedLogic ? !v : v, + name, + ); + }, + [name, onChange, invertedLogic], + ); + + const checked = invertedLogic ? !value : value; + + const className = _cs( + styles.checkbox, + classNameFromProps, + !indeterminate && checked && styles.checked, + withBackground && styles.withBackground, + withDarkBackground && styles.withDarkBackground, + disabled && styles.disabledCheckbox, + readOnly && styles.readOnly, + ); + + return ( + + ); +} + +export default TimeSpanCheck; diff --git a/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/styles.module.css b/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/styles.module.css new file mode 100644 index 0000000000..00ca96a56f --- /dev/null +++ b/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/styles.module.css @@ -0,0 +1,29 @@ +.time-span-check { + display: flex; + align-items: center; + justify-content: center; + border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-gray-50); + border-radius: var(--go-ui-border-radius-md); + cursor: pointer; + padding: 0 var(--go-ui-spacing-3xs); + min-width: 1.5rem; + height: 1.5rem; + text-align: center; + font-size: var(--go-ui-font-size-sm); + + &.checked { + border-color: var(--go-ui-color-primary-red); + background-color: var(--go-ui-color-primary-red); + color: var(--go-ui-color-text-on-dark); + } + + .input { + position: absolute; + opacity: 0; + margin: 0; + padding: 0; + width: 0; + height: 0; + pointer-events: none; + } +} diff --git a/app/src/components/domain/EapOperationActivityInput/i18n.json b/app/src/components/domain/EapOperationActivityInput/i18n.json new file mode 100644 index 0000000000..43c2e750d4 --- /dev/null +++ b/app/src/components/domain/EapOperationActivityInput/i18n.json @@ -0,0 +1,8 @@ +{ + "namespace": "eapOperationActivityInput", + "strings": { + "operationPriorityActionLabel": "Priority action", + "operationTimeFrameLabel": "Time Frame", + "operationTimeValueLabel": "Time Value" + } +} diff --git a/app/src/components/domain/EapOperationActivityInput/index.tsx b/app/src/components/domain/EapOperationActivityInput/index.tsx new file mode 100644 index 0000000000..dc3e04656f --- /dev/null +++ b/app/src/components/domain/EapOperationActivityInput/index.tsx @@ -0,0 +1,174 @@ +import { useCallback } from 'react'; +import { DeleteBinTwoLineIcon } from '@ifrc-go/icons'; +import { + Checklist, + IconButton, + InlineLayout, + ListView, + SelectInput, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { stringValueSelector } from '@ifrc-go/ui/utils'; +import { + type ArrayError, + getErrorObject, + getErrorString, + type SetValueArg, + useFormObject, +} from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; + +import { type OperationActivityFormFields } from './schema'; +import TimeSpanCheck from './TimeSpanCheck'; + +import i18n from './i18n.json'; + +const defaultActivityValue: OperationActivityFormFields = { + client_id: '-1', +}; + +type TimeframeOption = components['schemas']['EapTimeframeEnum']; + +function timeframeKeySelector(option: TimeframeOption) { + return option.key; +} + +const timeValueKeySelector = ( + option: { key: number; value: string }, +) => option.key; + +interface Props { + value: OperationActivityFormFields; + error: ArrayError | undefined; + onChange: (value: SetValueArg, index: number) => void; + onRemove: (index: number) => void; + index: number; + disabled?: boolean; + readOnly?: boolean; +} + +function EapOperationActivityInput(props: Props) { + const { + error: errorFromProps, + onChange, + value, + index, + onRemove, + disabled, + readOnly, + } = props; + + const strings = useTranslation(i18n); + + const { + eap_timeframe, + eap_years_timeframe_value, + eap_months_timeframe_value, + eap_days_timeframe_value, + eap_hours_timeframe_value, + } = useGlobalEnums(); + const onFieldChange = useFormObject(index, onChange, defaultActivityValue); + + const error = (value && value.client_id && errorFromProps) + ? getErrorObject(errorFromProps?.[value.client_id]) + : undefined; + + const getTimeValueOptions = useCallback( + (timeframe?: number) => { + switch (timeframe) { + case 10: + return eap_years_timeframe_value ?? []; + case 20: + return eap_months_timeframe_value ?? []; + case 30: + return eap_days_timeframe_value ?? []; + case 40: + return eap_hours_timeframe_value ?? []; + default: + return []; + } + }, + [ + eap_years_timeframe_value, + eap_months_timeframe_value, + eap_days_timeframe_value, + eap_hours_timeframe_value, + ], + ); + + const timeValueOptions = getTimeValueOptions(value?.timeframe); + + const handleTimeframeChange = useCallback( + (newTimeframe: TimeframeOption['key'] | undefined) => { + onFieldChange(newTimeframe, 'timeframe'); + onFieldChange([], 'time_value'); + }, + [onFieldChange], + ); + + return ( + + + + )} + > + + + + + {value?.timeframe && ( + + )} + + + + ); +} + +export default EapOperationActivityInput; diff --git a/app/src/components/domain/EapOperationActivityInput/schema.ts b/app/src/components/domain/EapOperationActivityInput/schema.ts new file mode 100644 index 0000000000..f812bb46d2 --- /dev/null +++ b/app/src/components/domain/EapOperationActivityInput/schema.ts @@ -0,0 +1,32 @@ +import { + type ObjectSchema, + type PartialForm, + requiredStringCondition, + undefinedValue, +} from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; + +type OperationActivity = components<'write'>['schemas']['OperationActivity']; + +export type OperationActivityFormFields = PartialForm & { + client_id: string; +} + +type OperationActivitySchema = ObjectSchema; + +const schema: OperationActivitySchema = { + fields: (): ReturnType => ({ + client_id: {}, + id: { defaultValue: undefinedValue }, + activity: { + // FIXME: add validation for character limit + required: true, + requiredValidation: requiredStringCondition, + }, + time_value: {}, + timeframe: {}, + }), +}; + +export default schema; diff --git a/app/src/components/domain/EapOperationActivityListInput/i18n.json b/app/src/components/domain/EapOperationActivityListInput/i18n.json new file mode 100644 index 0000000000..2f3ba72329 --- /dev/null +++ b/app/src/components/domain/EapOperationActivityListInput/i18n.json @@ -0,0 +1,14 @@ +{ + "namespace": "eapOperationActivityListInput", + "strings": { + "addButtonLabel": "Add activity", + "emptyMessage": "No activities yet!", + "readinessTitle": "Readiness Activities", + "readinessDescription": "Readiness activities are done year on year to ensure that the National Society is ready to conduct the early actions. These are activities that will happen irrespective of an activation. Readiness activities may include refresher training, coordination meetings with government, readiness meetings, simulations, etc. Under readiness they can include any ongoing costs and services (human resources and logistics) that are deemed indispensable for subsequent trigger-based early action activities. If, during the simplified EAP development process the National Society finds some areas for improvement to deliver on their selected early actions, these could be addressed with activities included under readiness.", + "prepositioningTitle": "Pre-positioning Activities", + "prepositioningDescription": "The National Society should preposition the materials needed to undertake the early action, especially those that may require a longer procurement process. For example, prepositioned stocks could include shelter kits (for house reinforcement), sandbags (for protecting infrastructure), or tarpaulins (for protecting water sources), etc. Food, medicine and other items with a shelf life of less than two years are not eligible as pre-positioning, they will have to be procured as part of the early actions. Pre-positioning activities are one-off and done in the first year following approval of the simplified EAP.", + "earlyActionTitle": "Early Action Activities", + "earlyActionDescription": "Early action activities are implemented once a trigger is reached and before the impact of the hazard. Early actions seek to reduce or mitigate the impact of the hazard. Consider selecting only a few early actions, especially for sudden onset events, as they will have to be implemented within a short timeframe. The early actions will be unique to each hazard and context, but may be activities such as evacuation of at-risk communities and/or livestock, early harvest of crops, cash transfer, shelter strengthening, provision of water treatment, hygiene kits or mosquito nets, etc. For more examples of early action activities, visit the {earlyActionDatabaseLink} on the Anticipation Hub.", + "earlyActionDatabaseLinkLabel": "early action database" + } +} diff --git a/app/src/components/domain/EapOperationActivityListInput/index.tsx b/app/src/components/domain/EapOperationActivityListInput/index.tsx new file mode 100644 index 0000000000..3a7553d32a --- /dev/null +++ b/app/src/components/domain/EapOperationActivityListInput/index.tsx @@ -0,0 +1,172 @@ +import { + useCallback, + useMemo, +} from 'react'; +import { AddLineIcon } from '@ifrc-go/icons'; +import { + Button, + Container, + InfoPopup, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { resolveToComponent } from '@ifrc-go/ui/utils'; +import { + isNotDefined, + randomString, +} from '@togglecorp/fujs'; +import { + type ArrayError, + getErrorObject, + type SetValueArg, + useFormArray, +} from '@togglecorp/toggle-form'; + +import EapOperationActivityInput from '#components/domain/EapOperationActivityInput'; +import { type OperationActivityFormFields } from '#components/domain/EapOperationActivityInput/schema'; +import Link from '#components/Link'; +import NonFieldError from '#components/NonFieldError'; + +import i18n from './i18n.json'; + +type FormName = 'readiness_activities' | 'prepositioning_activities' | 'early_action_activities'; + +interface Props { + disabled?: boolean; + readOnly?: boolean; + + name: NAME, + value: OperationActivityFormFields[] | undefined; + onChange: (newValue: SetValueArg, name: NAME) => void; + error: ArrayError | undefined; +} + +function EapOperationActivityListInput(props: Props) { + const { + disabled, + readOnly, + + name, + value, + onChange, + error, + } = props; + + const strings = useTranslation(i18n); + + const { + setValue: onReadinessChange, + removeValue: onReadinessRemove, + } = useFormArray( + name, + onChange, + ); + + const handleReadinessAddButtonClick = useCallback( + () => { + const newActionItem: OperationActivityFormFields = { + client_id: randomString(), + }; + + onChange( + (oldValue: OperationActivityFormFields[] | undefined) => ( + [...(oldValue ?? []), newActionItem] + ), + name, + ); + }, + [onChange, name], + ); + + const [ + title, + description, + ] = useMemo(() => { + if (name === 'readiness_activities') { + return [strings.readinessTitle, strings.readinessDescription]; + } + + if (name === 'prepositioning_activities') { + return [strings.prepositioningTitle, strings.prepositioningDescription]; + } + + if (name === 'early_action_activities') { + return [ + strings.earlyActionTitle, + resolveToComponent( + strings.earlyActionDescription, + { + earlyActionDatabaseLink: ( + + {strings.earlyActionDatabaseLinkLabel} + + ), + }, + ), + ]; + } + + return []; + }, [name, strings]); + + return ( + + {title} + {description && ( + + )} + + )} + headingLevel={5} + footerActions={( + + )} + withCompactMessage + empty={isNotDefined(value) + || value.length === 0} + emptyMessage={strings.emptyMessage} + footer={} + > + + {value?.map((activity, i) => ( + + ))} + + + ); +} + +export default EapOperationActivityListInput; diff --git a/app/src/components/domain/GoMultiFileInput/i18n.json b/app/src/components/domain/GoMultiFileInput/i18n.json index 07d67703b1..42f738ff02 100644 --- a/app/src/components/domain/GoMultiFileInput/i18n.json +++ b/app/src/components/domain/GoMultiFileInput/i18n.json @@ -2,6 +2,7 @@ "namespace": "goMultiFileInput", "strings": { "goMultiFailedUploadMessage": "Failed to upload the file!", + "noFileSelected": "No file Selected", "goMultiDeleteButton": "Delete" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/GoMultiFileInput/index.tsx b/app/src/components/domain/GoMultiFileInput/index.tsx index d4f8f74916..a83f06105c 100644 --- a/app/src/components/domain/GoMultiFileInput/index.tsx +++ b/app/src/components/domain/GoMultiFileInput/index.tsx @@ -31,7 +31,7 @@ import { transformObjectError } from '#utils/restRequest/error'; import i18n from './i18n.json'; -export type SupportedPaths = '/api/v2/per-file/multiple/' | '/api/v2/dref-files/multiple/' | '/api/v2/flash-update-file/multiple/'; +export type SupportedPaths = '/api/v2/per-file/multiple/' | '/api/v2/dref-files/multiple/' | '/api/v2/flash-update-file/multiple/' | '/api/v2/eap-file/multiple/'; interface FileUploadResult { id: number; @@ -170,7 +170,7 @@ function GoMultiFileInput(props: Props) { }, [onChange, name]); const disabled = disabledFromProps || pending || readOnly; - const valueUrls = isDefined(value) ? ( + const valueUrls = (isDefined(value) && value.length > 0) ? ( value.map((fileId) => ({ id: fileId, url: fileIdToUrlMap?.[fileId] })) ) : undefined; @@ -193,10 +193,14 @@ function GoMultiFileInput(props: Props) { return ( - + (props: Props) { > {children} - {clearable && value && ( + {clearable && value && value.length > 0 && ( (props: Props) { )} + {isNotDefined(valueUrls) && ( + + {strings.noFileSelected} + + )} {!withoutPreview && isDefined(valueUrls) && valueUrls.length > 0 && ( = Omit, 'value'> & { name: NAME; @@ -156,10 +156,14 @@ function GoSingleFileInput(props: Props) { return ( - + (props: Props) { > {children} - {clearable && isDefined(value) && ( - - - + {isNotDefined(selectedFileUrl) && !withoutStatus && ( + + {strings.noFileSelected} + )} + + {!withoutPreview && isDefined(selectedFileUrl) && ( + + {selectedFileUrl.split('/').pop()} + + )} + {clearable && isDefined(value) && ( + + + + )} + - {!withoutPreview && isDefined(selectedFileUrl) && ( - - {selectedFileUrl.split('/').pop()} - - )} - {isNotDefined(selectedFileUrl) && !withoutStatus && ( - - {strings.noFileSelected} - - )} {description && ( {description} diff --git a/app/src/components/domain/ImageWithCaptionInput/i18n.json b/app/src/components/domain/ImageWithCaptionInput/i18n.json index 2ac3a6a3ec..f10ddae406 100644 --- a/app/src/components/domain/ImageWithCaptionInput/i18n.json +++ b/app/src/components/domain/ImageWithCaptionInput/i18n.json @@ -1,7 +1,8 @@ { "namespace": "imageWithCaptionInput", "strings": { - "imageWithCaptionEnterCaption": "Enter Caption", - "imageWithCaptionPreview": "preview" + "captionInputPlaceholder": "Enter Caption", + "previewFallbackText": "Preview not available", + "defaultLabel": "Select an image" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/ImageWithCaptionInput/index.tsx b/app/src/components/domain/ImageWithCaptionInput/index.tsx index cf74833d98..6d167e3adc 100644 --- a/app/src/components/domain/ImageWithCaptionInput/index.tsx +++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx @@ -21,22 +21,28 @@ import NonFieldError from '#components/NonFieldError'; import i18n from './i18n.json'; -type Value = { - id?: number | undefined; +type ImageWithCaptionValue = { + id?: number; client_id: string; - caption?: string | undefined; + caption?: string | null; }; -interface Props { +type OutputValue = { + id?: number; + client_id: string; + caption?: string; +} + +interface Props { className?: string; - name: N; + name: NAME; url: SupportedPaths; - value: Value | null | undefined; - onChange: (value: SetValueArg | undefined, name: N) => void; - error: ObjectError | undefined; + value: ImageWithCaptionValue | null | undefined; + onChange: (value: SetValueArg | undefined, name: NAME) => void; + error: ObjectError | undefined; fileIdToUrlMap: Record; setFileIdToUrlMap?: React.Dispatch>>; - label: React.ReactNode; + label?: React.ReactNode; before?: React.ReactNode; after?: React.ReactNode; disabled?: boolean; @@ -46,6 +52,8 @@ interface Props { // FIXME: Move this to components function ImageWithCaptionInput(props: Props) { + const strings = useTranslation(i18n); + const { className, readOnly, @@ -56,15 +64,13 @@ function ImageWithCaptionInput(props: Props) setFileIdToUrlMap, onChange, error: formError, - label, + label = strings.defaultLabel, before, after, disabled, useCurrentLanguageForMutation, } = props; - const strings = useTranslation(i18n); - const setFieldValue = useFormObject( name, onChange, @@ -113,13 +119,14 @@ function ImageWithCaptionInput(props: Props) // FIXME: Make Go single file input with preview description={isDefined(fileUrl) ? ( {strings.imageWithCaptionPreview} ) : undefined} clearable useCurrentLanguageForMutation={useCurrentLanguageForMutation} + error={error?.id} > {label} @@ -130,7 +137,7 @@ function ImageWithCaptionInput(props: Props) readOnly={readOnly} onChange={setFieldValue} error={error?.caption} - placeholder={strings.imageWithCaptionEnterCaption} + placeholder={strings.captionInputPlaceholder} disabled={disabled} /> )} diff --git a/app/src/components/domain/MultiImageWithCaptionInput/i18n.json b/app/src/components/domain/MultiImageWithCaptionInput/i18n.json index a9dca445a8..d454e9df57 100644 --- a/app/src/components/domain/MultiImageWithCaptionInput/i18n.json +++ b/app/src/components/domain/MultiImageWithCaptionInput/i18n.json @@ -1,8 +1,9 @@ { "namespace": "multiImageWithCaptionInput", "strings": { - "removeImagesButtonTitle": "Remove", - "imagePreviewAlt": "preview", - "enterCaptionPlaceholder": "Enter Caption" + "removeImageButtonTitle": "Remove", + "imagePreviewFallbackText": "Preview not available", + "defaultLabel": "Select images", + "captionInputPlaceholder": "Enter caption" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx index c7e2be8461..cafd69f5e1 100644 --- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx +++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx @@ -29,31 +29,40 @@ import NonFieldError from '#components/NonFieldError'; import i18n from './i18n.json'; import styles from './styles.module.css'; -type Value = { +type InputValue = { + id?: number; client_id: string; + caption?: string | null; +}; + +type OutputValue = { id?: number; + client_id: string; caption?: string; -}; +} interface Props { className?: string; name: N; url: SupportedPaths; - value: Value[] | null | undefined; - onChange: (value: SetValueArg, name: N) => void; - error: ArrayError | undefined; + value: InputValue[] | null | undefined; + onChange: (value: SetValueArg, name: N) => void; + error: ArrayError | undefined; fileIdToUrlMap: Record; setFileIdToUrlMap?: React.Dispatch>>; - label: React.ReactNode; + label?: React.ReactNode; readOnly?: boolean; before?: React.ReactNode; after?: React.ReactNode; disabled?: boolean; + description?: React.ReactNode; useCurrentLanguageForMutation?: boolean; } // FIXME: Move this to components function MultiImageWithCaptionInput(props: Props) { + const strings = useTranslation(i18n); + const { className, name, @@ -63,16 +72,15 @@ function MultiImageWithCaptionInput(props: Prop setFileIdToUrlMap, onChange, error: formError, - label, + label = strings.defaultLabel, readOnly, before, after, disabled, + description, useCurrentLanguageForMutation = false, } = props; - const strings = useTranslation(i18n); - const error = getErrorObject(formError); const { @@ -152,6 +160,7 @@ function MultiImageWithCaptionInput(props: Prop readOnly={readOnly} disabled={disabled} useCurrentLanguageForMutation={useCurrentLanguageForMutation} + description={description} > {label} @@ -185,8 +194,8 @@ function MultiImageWithCaptionInput(props: Prop (props: Prop /> {strings.imagePreviewAlt} @@ -206,7 +215,7 @@ function MultiImageWithCaptionInput(props: Prop value={fileValue?.caption} onChange={handleCaptionChange} error={imageError?.caption} - placeholder={strings.enterCaptionPlaceholder} + placeholder={strings.captionInputPlaceholder} readOnly={readOnly} disabled={disabled} /> diff --git a/app/src/components/domain/PrintableActivityOutput/index.tsx b/app/src/components/domain/PrintableActivityOutput/index.tsx new file mode 100644 index 0000000000..02d105c871 --- /dev/null +++ b/app/src/components/domain/PrintableActivityOutput/index.tsx @@ -0,0 +1,77 @@ +import { + compareNumber, + isNotDefined, +} from '@togglecorp/fujs'; + +import PrintableDataDisplay from '#components/printable/PrintableDataDisplay'; +import PrintableLabel from '#components/printable/PrintableLabel'; +import { type components } from '#generated/types'; + +type OperationActivity = components['schemas']['OperationActivity']; + +function getFormattedActivityTimeline(activity: OperationActivity | undefined) { + if (isNotDefined(activity)) { + return undefined; + } + + const { + time_value, + timeframe_display, + } = activity; + + const timeValueDisplay = time_value.toSorted( + (a, b) => compareNumber(a, b, 1), + ); + + return ( + `${timeValueDisplay} ${timeframe_display}` + ); +} + +function getFormattedActivityLabel(activity: OperationActivity | undefined, index: number) { + if (isNotDefined(activity)) { + return undefined; + } + + return `${index + 1}. ${activity.activity}`; +} + +interface Props { + activity: OperationActivity; + prevActivity: OperationActivity | undefined; + withDiff: boolean; + index: number; +} + +function PrintableActivityOutput(props: Props) { + const { + activity, + prevActivity, + withDiff, + index, + } = props; + + return ( + + )} + value={getFormattedActivityTimeline(activity)} + prevValue={ + getFormattedActivityTimeline(prevActivity) + } + valueType="text" + variant="contents" + withBackground + withPadding + withoutLabelColon + withDiff={withDiff} + /> + ); +} + +export default PrintableActivityOutput; diff --git a/app/src/components/domain/SourceInformationInput/index.tsx b/app/src/components/domain/SourceInformationInput/index.tsx index 4a4da8b968..af5923a2b8 100644 --- a/app/src/components/domain/SourceInformationInput/index.tsx +++ b/app/src/components/domain/SourceInformationInput/index.tsx @@ -5,10 +5,7 @@ import { TextInput, } from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; -import { - isNotDefined, - randomString, -} from '@togglecorp/fujs'; +import { randomString } from '@togglecorp/fujs'; import { type ArrayError, getErrorObject, @@ -17,17 +14,23 @@ import { } from '@togglecorp/toggle-form'; import NonFieldError from '#components/NonFieldError'; +import { formatSourceLink } from '#utils/common'; import { type PartialDref } from '#views/DrefApplicationForm/schema'; import i18n from './i18n.json'; import styles from './styles.module.css'; -type SourceInformationFormFields = NonNullable[number]; +type SourceInformationFormFields = NonNullable< + PartialDref['source_information'] +>[number]; interface Props { value: SourceInformationFormFields; error: ArrayError | undefined; - onChange: (value: SetValueArg, index: number) => void; + onChange: ( + value: SetValueArg, + index: number + ) => void; onRemove: (index: number) => void; index: number; disabled?: boolean; @@ -47,39 +50,17 @@ function SourceInformationInput(props: Props) { const strings = useTranslation(i18n); - const onFieldChange = useFormObject( - index, - onChange, - () => ({ - client_id: randomString(), - }), - ); + const onFieldChange = useFormObject(index, onChange, () => ({ + client_id: randomString(), + })); - const error = (value && value.client_id && errorFromProps) + const error = value && value.client_id && errorFromProps ? getErrorObject(errorFromProps?.[value.client_id]) : undefined; const handleSourceFieldChange = useCallback( - (newValue: string | undefined) => { - if ( - isNotDefined(newValue) - || newValue.startsWith('http://') - || newValue.startsWith('https://') - || newValue === 'h' - || newValue === 'ht' - || newValue === 'htt' - || newValue === 'http' - || newValue === 'http:' - || newValue === 'http:/' - || newValue === 'https' - || newValue === 'https:' - || newValue === 'https:/' - ) { - onFieldChange(newValue, 'source_link'); - return; - } - - onFieldChange(`https://${newValue}`, 'source_link'); + (linkValue: string | undefined) => { + onFieldChange(formatSourceLink(linkValue), 'source_link'); }, [onFieldChange], ); diff --git a/app/src/components/printable/PrintableContainer/index.tsx b/app/src/components/printable/PrintableContainer/index.tsx new file mode 100644 index 0000000000..c0d248eefa --- /dev/null +++ b/app/src/components/printable/PrintableContainer/index.tsx @@ -0,0 +1,49 @@ +import { + Heading, + type HeadingProps, +} from '@ifrc-go/ui/printable'; +import { getSpacingValue } from '@ifrc-go/ui/utils'; + +import styles from './styles.module.css'; + +interface Props { + heading?: React.ReactNode; + headingLevel?: HeadingProps['level']; + breakBefore?: boolean; + breakAfter?: boolean; + children?: React.ReactNode; +} + +function PrintableContainer(props: Props) { + const { + heading, + headingLevel = 3, + breakAfter, + breakBefore, + children, + } = props; + + const spacing = getSpacingValue('3xl', -headingLevel); + + return ( + <> + {breakBefore &&
} + {heading && ( + + {heading} + + )} + {children} +
+ {breakAfter &&
} + + ); +} + +export default PrintableContainer; diff --git a/app/src/components/printable/PrintableContainer/styles.module.css b/app/src/components/printable/PrintableContainer/styles.module.css new file mode 100644 index 0000000000..904bf35cd1 --- /dev/null +++ b/app/src/components/printable/PrintableContainer/styles.module.css @@ -0,0 +1,17 @@ +.page-break { + break-before: page; + + @media screen { + margin: var(--go-ui-spacing-lg) 0; + border: var(--go-ui-width-separator-thin) dashed var(--go-ui-color-separator); + } +} + +.heading:has(+ :empty), +.heading:has(+ .heading + :empty) { + display: none; +} + +.block-spacing:has(+ :empty) { + display: none; +} diff --git a/app/src/components/printable/PrintableDataDisplay/index.tsx b/app/src/components/printable/PrintableDataDisplay/index.tsx new file mode 100644 index 0000000000..b2d6d08ed7 --- /dev/null +++ b/app/src/components/printable/PrintableDataDisplay/index.tsx @@ -0,0 +1,282 @@ +import { useMemo } from 'react'; +import { + BooleanOutput, + type BooleanOutputProps, + DateOutput, + type DateOutputProps, + ListView, + NumberOutput, + type NumberOutputProps, +} from '@ifrc-go/ui'; +import { useSpacingToken } from '@ifrc-go/ui/hooks'; +import { + DEFAULT_INVALID_TEXT, + DEFAULT_PRINT_DATE_FORMAT, + fullSpacings, + gapSpacings, + paddingSpacings, + type SpacingType, +} from '@ifrc-go/ui/utils'; +import { + _cs, + isDefined, + isNotDefined, + isTruthyString, +} from '@togglecorp/fujs'; + +import styles from './styles.module.css'; + +interface BaseProps { + className?: string; + label?: React.ReactNode; + strongValue?: boolean; + strongLabel?: boolean; + withoutLabelColon?: boolean; + invalidText?: React.ReactNode; + variant?: 'block' | 'inline' | 'contents'; + withPadding?: boolean; + withBackground?: boolean; + spacing?: SpacingType; + withDiff: boolean; +} + +interface BooleanProps extends BooleanOutputProps { + valueType: 'boolean', + prevValue?: BooleanOutputProps['value']; +} + +interface NumberProps extends NumberOutputProps { + valueType: 'number', + prevValue?: NumberOutputProps['value']; +} + +interface DateProps extends DateOutputProps { + valueType: 'date', + prevValue?: DateProps['value']; +} + +interface TextProps { + valueType: 'text', + value: string | null | undefined; + prevValue?: TextProps['value']; +} + +interface NodeProps { + valueType?: never; + value?: React.ReactNode; + prevValue?: never; +} + +type Props = BaseProps & ( + NodeProps | TextProps | DateProps | NumberProps | BooleanProps +); + +function PrintableDataDisplay(props: Props) { + const { + className, + label, + strongLabel, + strongValue, + withoutLabelColon, + invalidText = DEFAULT_INVALID_TEXT, + variant = 'inline', + withPadding, + withBackground, + spacing, + withDiff, + ...otherProps + } = props; + + const valueComponent = useMemo(() => { + const { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + prevValue: _, + ...componentProps + } = otherProps; + + if (componentProps.valueType === 'number') { + return ( + + ); + } + + if (componentProps.valueType === 'date') { + return ( + + ); + } + + if (componentProps.valueType === 'boolean') { + return ( + + ); + } + + if (!(componentProps.value instanceof Date)) { + return componentProps.value || invalidText; + } + + return invalidText; + }, [otherProps, invalidText]); + + const prevValueComponent = useMemo(() => { + const { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + value: _, + ...componentProps + } = otherProps; + + if (!withDiff) { + return null; + } + + if (componentProps.valueType === 'number') { + return ( + + ); + } + + if (componentProps.valueType === 'date') { + return ( + + ); + } + + if (componentProps.valueType === 'boolean') { + return ( + + ); + } + + if (isTruthyString(componentProps.prevValue)) { + return componentProps.prevValue; + } + + return invalidText; + }, [withDiff, otherProps, invalidText]); + + const { value, valueType, prevValue } = otherProps; + + const diffType: 'added' | 'removed' | 'updated' | undefined = useMemo(() => { + if (!withDiff) { + return undefined; + } + + if (isNotDefined(prevValue) && isDefined(value)) { + return 'added'; + } + + if (isNotDefined(value) && isDefined(prevValue)) { + return 'removed'; + } + + if (isDefined(valueType) && value !== prevValue) { + return 'updated'; + } + + return undefined; + }, [withDiff, value, prevValue, valueType]); + + const spacingOffset = -3; + + const spacingClassName = useSpacingToken({ + spacing, + offset: spacingOffset, + modes: withPadding ? fullSpacings : gapSpacings, + }); + + const innerPaddingClassName = useSpacingToken({ + spacing, + offset: spacingOffset, + modes: paddingSpacings, + }); + + return ( +
+ {label && ( +
+ {label} +
+ )} + {(valueComponent || prevValueComponent) && ( +
+ {isNotDefined(diffType) && valueComponent} + {isDefined(diffType) && ( + + {diffType === 'updated' && ( + {prevValueComponent} + )} + + {valueComponent} + + + )} +
+ )} +
+ ); +} + +export default PrintableDataDisplay; diff --git a/app/src/components/printable/PrintableDataDisplay/styles.module.css b/app/src/components/printable/PrintableDataDisplay/styles.module.css new file mode 100644 index 0000000000..0dbe6c14e5 --- /dev/null +++ b/app/src/components/printable/PrintableDataDisplay/styles.module.css @@ -0,0 +1,59 @@ +.printable-data-display { + &.inline-variant { + display: flex; + flex-direction: row; + } + + &.with-diff-view { + border: thick double var(--go-ui-color-red); + } + + &.block-variant { + display: flex; + flex-direction: column; + } + + &.contents-variant { + display: contents; + } + + &.with-background { + background-color: var(--go-ui-color-background); + + &.contents-variant { + .value, + .label { + background-color: var(--go-ui-color-background); + } + } + } + + .label { + &.with-colon::after { + content: ':'; + } + } + + .value { + &.text-type { + text-align: justify; + white-space: pre-wrap; + } + + .added { + background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent); + color: var(--go-ui-color-green); + } + + .removed { + background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent); + text-decoration: line-through; + color: var(--go-ui-color-red); + } + } + + .strong { + color: var(--go-ui-color-black); + font-weight: var(--go-ui-font-weight-semibold); + } +} diff --git a/app/src/components/printable/PrintableDescription/index.tsx b/app/src/components/printable/PrintableDescription/index.tsx new file mode 100644 index 0000000000..230ebaefd8 --- /dev/null +++ b/app/src/components/printable/PrintableDescription/index.tsx @@ -0,0 +1,90 @@ +import { + Fragment, + useMemo, +} from 'react'; +import { + _cs, + isNotDefined, +} from '@togglecorp/fujs'; +import { diffSentences } from 'diff'; + +import styles from './styles.module.css'; + +interface Props { + value?: string | null; + className?: string; + withDiff?: boolean; + prevValue?: string | null; +} + +function PrintableDescription(props: Props) { + const { + className, + value, + prevValue, + withDiff = false, + } = props; + + const diff = useMemo(() => { + if (!withDiff) { + return undefined; + } + + return diffSentences(prevValue ?? '', value ?? ''); + }, [withDiff, value, prevValue]); + + if (isNotDefined(diff)) { + return ( +
+ {value} +
+ ); + } + + return ( +
+ {diff.map((part, index) => { + const { added, removed, value: partValue } = part; + + if (added) { + return ( + + {partValue} + + ); + } + + if (removed) { + return ( + + {partValue} + + ); + } + + return ( + // eslint-disable-next-line react/no-array-index-key + + {partValue} + + ); + })} +
+ ); +} + +export default PrintableDescription; diff --git a/app/src/components/printable/PrintableDescription/styles.module.css b/app/src/components/printable/PrintableDescription/styles.module.css new file mode 100644 index 0000000000..a52f405f09 --- /dev/null +++ b/app/src/components/printable/PrintableDescription/styles.module.css @@ -0,0 +1,18 @@ +.printable-description { + text-align: justify; + white-space: pre-wrap; + overflow-wrap: break-word; + + &.with-diff-view { + .added { + background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent); + color: var(--go-ui-color-green); + } + + .removed { + background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent); + text-decoration: line-through; + color: var(--go-ui-color-red); + } + } +} diff --git a/app/src/components/printable/PrintableLabel/index.tsx b/app/src/components/printable/PrintableLabel/index.tsx new file mode 100644 index 0000000000..9917ac5ce7 --- /dev/null +++ b/app/src/components/printable/PrintableLabel/index.tsx @@ -0,0 +1,90 @@ +import { + Fragment, + useMemo, +} from 'react'; +import { + _cs, + isNotDefined, +} from '@togglecorp/fujs'; +import { diffWordsWithSpace } from 'diff'; + +import styles from './styles.module.css'; + +interface Props { + value?: string | null; + className?: string; + withDiff?: boolean; + prevValue?: string | null; +} + +function PrintableLabel(props: Props) { + const { + className, + value, + prevValue, + withDiff = false, + } = props; + + const diff = useMemo(() => { + if (!withDiff) { + return undefined; + } + + return diffWordsWithSpace(prevValue ?? '', value ?? ''); + }, [withDiff, value, prevValue]); + + if (isNotDefined(diff)) { + return ( +
+ {value} +
+ ); + } + + return ( +
+ {diff.map((part, index) => { + const { added, removed, value: partValue } = part; + + if (added) { + return ( + + {partValue} + + ); + } + + if (removed) { + return ( + + {partValue} + + ); + } + + return ( + // eslint-disable-next-line react/no-array-index-key + + {partValue} + + ); + })} +
+ ); +} + +export default PrintableLabel; diff --git a/app/src/components/printable/PrintableLabel/styles.module.css b/app/src/components/printable/PrintableLabel/styles.module.css new file mode 100644 index 0000000000..62c8ca20aa --- /dev/null +++ b/app/src/components/printable/PrintableLabel/styles.module.css @@ -0,0 +1,16 @@ +.printable-label{ + overflow-wrap: break-word; + + &.with-diff-view { + .added { + background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent); + color: var(--go-ui-color-green); + } + + .removed { + background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent); + text-decoration: line-through; + color: var(--go-ui-color-red); + } + } +} diff --git a/app/src/components/printable/PrintablePage/index.tsx b/app/src/components/printable/PrintablePage/index.tsx new file mode 100644 index 0000000000..2cfc8161d7 --- /dev/null +++ b/app/src/components/printable/PrintablePage/index.tsx @@ -0,0 +1,100 @@ +import React, { + useEffect, + useState, +} from 'react'; +import { Heading } from '@ifrc-go/ui/printable'; +import { _cs } from '@togglecorp/fujs'; + +import ifrcLogo from '#assets/icons/ifrc-square.png'; + +import styles from './styles.module.css'; + +interface Props { + className?: string; + children: React.ReactNode; + heading: React.ReactNode; + description: React.ReactNode; + dataReady?: boolean; + mainRef: React.RefObject; +} + +function PrintablePage(props: Props) { + const { + className, + children, + heading, + description, + dataReady = false, + mainRef, + } = props; + + const [previewReady, setPreviewReady] = useState(false); + + useEffect(() => { + if (!dataReady) { + return; + } + + const mainContainer = mainRef.current; + + async function waitForImages() { + if (!mainContainer) { + return; + } + + const images = mainContainer.querySelectorAll('img'); + + if (images.length === 0) { + setPreviewReady(true); + return; + } + + const promises = Array.from(images).map( + (image) => { + if (image.complete) { + return undefined; + } + + return new Promise((accept) => { + image.addEventListener('load', () => { + accept(true); + }); + }); + }, + ); + + await Promise.all(promises); + setPreviewReady(true); + } + + waitForImages(); + }, [dataReady, mainRef]); + + return ( +
+
+ IFRC + + {heading} + +
+ {description} +
+
+ {children} + {previewReady &&
} +
+ ); +} + +export default PrintablePage; diff --git a/app/src/components/printable/PrintablePage/styles.module.css b/app/src/components/printable/PrintablePage/styles.module.css new file mode 100644 index 0000000000..06f063c82c --- /dev/null +++ b/app/src/components/printable/PrintablePage/styles.module.css @@ -0,0 +1,38 @@ +.printable-page { + font-family: 'Open Sans', sans-serif; + font-size: var(--go-ui-font-size-export); + + @media screen { + margin: var(--go-ui-spacing-xl) auto; + background-color: var(--go-ui-color-foreground); + padding: var(--go-ui-export-page-margin); + width: 210mm; + min-height: 297mm; + } + + .header-section { + display: grid; + grid-template-areas: + "logo heading" + "desc desc"; + margin-block-end: var(--go-ui-spacing-xl); + + .ifrc-logo { + width: 6rem; + height: 6rem; + grid-area: logo; + } + + .heading { + text-align: end; + grid-area: heading; + } + + .description { + grid-area: desc; + text-align: end; + color: var(--go-ui-color-primary-blue); + font-size: var(--go-ui-font-size-lg); + } + } +} diff --git a/app/src/utils/common.ts b/app/src/utils/common.ts index 6210ae901c..980a339275 100644 --- a/app/src/utils/common.ts +++ b/app/src/utils/common.ts @@ -1,6 +1,9 @@ import { type Language } from '@ifrc-go/ui/contexts'; import { DEFAULT_INVALID_TEXT } from '@ifrc-go/ui/utils'; -import { isTruthyString } from '@togglecorp/fujs'; +import { + isNotDefined, + isTruthyString, +} from '@togglecorp/fujs'; import type { GoApiResponse } from '#utils/restRequest'; @@ -68,3 +71,24 @@ export function joinStrings( ): string { return values.filter(Boolean).join(separator); } + +export function formatSourceLink(value: string | undefined): string | undefined { + if ( + isNotDefined(value) + || value.startsWith('http://') + || value.startsWith('https://') + || value === 'h' + || value === 'ht' + || value === 'htt' + || value === 'http' + || value === 'http:' + || value === 'http:/' + || value === 'https' + || value === 'https:' + || value === 'https:/' + ) { + return value; + } + + return `https://${value}`; +} diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts index 93b6b00878..5f3c04dd69 100644 --- a/app/src/utils/constants.ts +++ b/app/src/utils/constants.ts @@ -58,8 +58,8 @@ export const CATEGORY_RISK_VERY_HIGH = 5; // Colors export const COLOR_WHITE = '#ffffff'; -// export const COLOR_TEXT = '#313131'; -// export const COLOR_TEXT_ON_DARK = '#ffffff'; +export const COLOR_TEXT = '#313131'; +export const COLOR_TEXT_ON_DARK = '#ffffff'; export const COLOR_LIGHT_GREY = '#e0e0e0'; export const COLOR_DARK_GREY = '#a5a5a5'; export const COLOR_BLACK = '#000000'; @@ -198,6 +198,7 @@ export const multiMonthSelectDefaultValue = listToMap( () => false, ); +// FIXME these need to satisfy some enum export const ERU_READINESS_READY = 1; export const ERU_READINESS_CAN_CONTRIBUTE = 2; export const ERU_READINESS_NO_CAPACITY = 3; @@ -220,3 +221,25 @@ export const OTHER_TRAINING_FACILITIES = 9 satisfies LocalUnitTrainingFacilityTy type LocalUnitAffiliationOptions = NonNullable['affiliation']>[number]>['id'] export const OTHER_AFFILIATION = 9 satisfies LocalUnitAffiliationOptions; + +// FIXME these need to satisfy some enum +export const EAP_TYPE_SIMPLIFIED = 20; +export const EAP_TYPE_FULL = 10; + +// Timeframe + +// FIXME these need to satisfy some enum +export const TIMEFRAME_YEAR = 10; +// export const TIMEFRAME_MONTHS = 20; +// export const TIMEFRAME_DAYS = 30; +// export const TIMEFRAME_HOURS = 40; + +type EapStatus = components['schemas']['EapEapStatusEnumKey']; + +export const EAP_STATUS_UNDER_DEVELOPMENT = 10 satisfies EapStatus; +export const EAP_STATUS_UNDER_REVIEW = 20 satisfies EapStatus; +export const EAP_STATUS_NS_ADDRESSING_COMMENTS = 30 satisfies EapStatus; +export const EAP_STATUS_TECHNICALLY_VALIDATED = 40 satisfies EapStatus; +export const EAP_STATUS_PENDING_PFA = 50 satisfies EapStatus; +export const EAP_STATUS_APPROVED = 60 satisfies EapStatus; +export const EAP_STATUS_ACTIVATED = 70 satisfies EapStatus; diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx new file mode 100644 index 0000000000..f538cff058 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx @@ -0,0 +1,234 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { + ArrowRightFillIcon, + UploadLineIcon, +} from '@ifrc-go/icons'; +import { + Alert, + Button, + Description, + DropdownMenu, + Label, + ListView, + Modal, + RawFileInput, +} from '@ifrc-go/ui'; +import { + isDefined, + isNotDefined, + listToMap, +} from '@togglecorp/fujs'; + +import DropdownMenuItem from '#components/DropdownMenuItem'; +import { type components } from '#generated/types'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; +import useAlert from '#hooks/useAlert'; +import { + EAP_STATUS_ACTIVATED, + EAP_STATUS_APPROVED, + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_PENDING_PFA, + EAP_STATUS_TECHNICALLY_VALIDATED, + EAP_STATUS_UNDER_DEVELOPMENT, + EAP_STATUS_UNDER_REVIEW, +} from '#utils/constants'; +import { + type GoApiBody, + useLazyRequest, +} from '#utils/restRequest'; + +type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>; +type EapStatus = components['schemas']['EapEapStatusEnumKey']; + +const validStatusTransition: Record = { + [EAP_STATUS_UNDER_DEVELOPMENT]: [EAP_STATUS_UNDER_REVIEW], + [EAP_STATUS_UNDER_REVIEW]: [ + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_TECHNICALLY_VALIDATED, + ], + [EAP_STATUS_NS_ADDRESSING_COMMENTS]: [ + EAP_STATUS_UNDER_REVIEW, + ], + [EAP_STATUS_TECHNICALLY_VALIDATED]: [ + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_PENDING_PFA, + ], + [EAP_STATUS_PENDING_PFA]: [EAP_STATUS_APPROVED], + [EAP_STATUS_APPROVED]: [EAP_STATUS_ACTIVATED], + [EAP_STATUS_ACTIVATED]: [], +}; + +export interface Props { + eapId: number; + status: EapStatus; + onStatusUpdate?: () => void; + hasValidatedBudgetFile?: boolean; +} + +function EapStatus(props: Props) { + const { + eapId, + status, + onStatusUpdate, + hasValidatedBudgetFile, + } = props; + + const alert = useAlert(); + + const { eap_eap_status: eapStatusOptions } = useGlobalEnums(); + const [newStatus, setNewStatus] = useState(); + const [checklistFile, setChecklistFile] = useState(); + + const statusLabelMapping = listToMap( + eapStatusOptions, + ({ key }) => key, + ({ value }) => value, + ); + + const { trigger: triggerStatusUpdate } = useLazyRequest({ + method: 'POST', + url: '/api/v2/eap-registration/{id}/status/', + pathVariables: { + id: eapId, + }, + body: (fields: EapStatusBody) => fields, + onSuccess: () => { + setNewStatus(undefined); + if (onStatusUpdate) { + onStatusUpdate(); + } + + alert.show( + // FIXME: use translations + 'Status updated successfully!', + { variant: 'success' }, + ); + }, + formData: true, + onFailure: (error) => { + alert.show( + // FIXME: use translations + 'Failed to update the status!', + { + variant: 'danger', + description: error.value.messageForNotification, + }, + ); + }, + }); + + // FIXME: fix typings in the server + const requestBody = useMemo( + () => ({ + status: newStatus, + review_checklist_file: checklistFile, + } as EapStatusBody), + [newStatus, checklistFile], + ); + + const handleStatusUpdateCancel = useCallback(() => { + setNewStatus(undefined); + }, []); + + const confirmDisabled = ( + (newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && isNotDefined(checklistFile)) + || (newStatus === EAP_STATUS_PENDING_PFA && !hasValidatedBudgetFile) + ); + + return ( + <> + + {eapStatusOptions?.map((option) => ( + + {option.value} + + ))} + + {isDefined(newStatus) && ( + + Confirm + + )} + > + + + Are you sure you want to update the status? + + + + + + + {newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && ( + + {/* FIXME: use strings */} + + Upload the Review Checklist for the National Society + to download and review. Make sure to keep a proper + labeling of the file to avoid duplications. + + } + // FIXME: use strings + > + Select review checklist file + + + + )} + {newStatus === EAP_STATUS_PENDING_PFA && !hasValidatedBudgetFile && ( + + )} + + + )} + + ); +} + +export default EapStatus; diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/i18n.json new file mode 100644 index 0000000000..544ab68ac1 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/i18n.json @@ -0,0 +1,12 @@ +{ + "namespace":"accountMyFormsEap", + "strings":{ + "newBudgetFileUploadLabel": "Upload validated budget", + "updateBudgetFileLabel": "Update validated budget", + "uploadFileDescription": "Please select the validate budget file to be uploaded!", + "fileInputLabel": "Select a file to upload", + "confirmButtonLabel": "Confirm", + "uploadSuccessfulMessage": "Budget file uploaded successfully!", + "uploadFailureMessage": "Failed to upload the budget file!" + } +} diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx new file mode 100644 index 0000000000..de9faa01dc --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx @@ -0,0 +1,139 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { UploadLineIcon } from '@ifrc-go/icons'; +import { + Button, + Description, + Label, + ListView, + Modal, + RawFileInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { isDefined } from '@togglecorp/fujs'; + +import useAlert from '#hooks/useAlert'; +import { + type GoApiBody, + useLazyRequest, +} from '#utils/restRequest'; + +import i18n from './i18n.json'; + +type UploadBudgetFileBody = GoApiBody<'/api/v2/eap-registration/{id}/upload-validated-budget-file/', 'POST'>; + +interface Props { + eapId: number; + onBudgetFileUpload?: () => void; + hasBudgetFile?: boolean; +} + +function BudgetFileInput(props: Props) { + const { + eapId, + onBudgetFileUpload, + hasBudgetFile, + } = props; + + const strings = useTranslation(i18n); + + const alert = useAlert(); + + const [budgetFile, setBudgetFile] = useState(); + const [showUploadModal, setShowUploadModal] = useState(false); + + const { trigger: triggerUploadBudget } = useLazyRequest({ + method: 'POST', + url: '/api/v2/eap-registration/{id}/upload-validated-budget-file/', + pathVariables: { + id: eapId, + }, + body: (fields: UploadBudgetFileBody) => fields, + onSuccess: () => { + if (onBudgetFileUpload) { + onBudgetFileUpload(); + } + + alert.show( + strings.uploadSuccessfulMessage, + { variant: 'success' }, + ); + + setBudgetFile(undefined); + setShowUploadModal(false); + }, + formData: true, + onFailure: (error) => { + alert.show( + strings.uploadFailureMessage, + { + variant: 'danger', + description: error.value.messageForNotification, + }, + ); + }, + }); + + // FIXME: fix typings in the server + const requestBody = useMemo( + () => ({ + validated_budget_file: budgetFile, + } as unknown as UploadBudgetFileBody), + [budgetFile], + ); + + const handleUploadModalClose = useCallback(() => { + setShowUploadModal(false); + setBudgetFile(undefined); + }, []); + + return ( + <> + + {showUploadModal && ( + + {strings.confirmButtonLabel} + + )} + > + + + {strings.uploadFileDescription} + + } + > + {strings.fileInputLabel} + + + + + )} + + ); +} + +export default BudgetFileInput; diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json new file mode 100644 index 0000000000..b7706a26f5 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json @@ -0,0 +1,19 @@ +{ + "namespace":"accountMyFormsEap", + "strings":{ + "startFullEapLinkLabel": "Start Full EAP", + "startSimplifiedEapLinkLabel": "Start sEAP", + "editFullEapLinkLabel": "Edit Full EAP", + "viewFullEapLinkLabel": "View Full EAP", + "exportWithChangesButtonLabel": "Export with changes", + "exportButtonLabel": "Export", + "exportSummaryButtonLabel": "Export Summary", + "previewExportLinkLabel": "Preview export", + "previewSummaryExportLinkLabel": "Preview summary export", + "downloadReviewChecklistLinkLabel": "Download review checklist", + "downloadUpdatedChecklistLinkLabel": "Download updated checklist", + "editSimplifiedEapLinkLabel": "Edit sEAP", + "viewSimplifiedEapLinkLabel": "View sEAP", + "downloadValidatedBudgetLinkLabel": "Download validated budget" + } +} diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx new file mode 100644 index 0000000000..fbd8c69ba3 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx @@ -0,0 +1,327 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { + DocumentPdfLineIcon, + DownloadTwoLineIcon, +} from '@ifrc-go/icons'; +import { + Button, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + isDefined, + isNotDefined, +} from '@togglecorp/fujs'; + +import EapExportModal from '#components/domain/EapExportModal'; +import Link from '#components/Link'; +import { + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_PENDING_PFA, + EAP_STATUS_TECHNICALLY_VALIDATED, + EAP_STATUS_UNDER_DEVELOPMENT, + EAP_TYPE_FULL, + EAP_TYPE_SIMPLIFIED, +} from '#utils/constants'; + +import { type EapExpandedListItem } from '../utils'; +import BudgetFileInput from './BudgetFileInput'; + +import i18n from './i18n.json'; + +export interface Props { + expandedListItem: EapExpandedListItem; + onUpdate?: () => void; +} + +function EapTableActions(props: Props) { + const { + expandedListItem, + onUpdate, + } = props; + + const { + type, + eap, + details, + } = expandedListItem; + + const [exportWithDiffView, setExportWithDiffView] = useState(false); + const [summaryExport, setSummaryExport] = useState(false); + const [showExportModal, setShowExportModal] = useState(false); + + const strings = useTranslation(i18n); + + const setShowExportModalTrue = useCallback((withDiff?: boolean) => { + if (type === 'pending-pfa') { + setSummaryExport(true); + } + setExportWithDiffView(!!withDiff); + setShowExportModal(true); + }, [type]); + + const setShowExportModalFalse = useCallback(() => { + setSummaryExport(false); + setExportWithDiffView(false); + setShowExportModal(false); + }, []); + + const latestId = useMemo(() => { + if (eap.eap_type === EAP_TYPE_SIMPLIFIED) { + return eap.latest_simplified_eap ?? undefined; + } + + if (eap.eap_type === EAP_TYPE_FULL) { + return eap.latest_full_eap ?? undefined; + } + + return undefined; + }, [eap]); + + const latestVersion = useMemo(() => { + if (eap.eap_type === EAP_TYPE_SIMPLIFIED) { + return eap.simplified_eap_details.find(({ id }) => latestId === id)?.version; + } + + if (eap.eap_type === EAP_TYPE_FULL) { + return eap.full_eap_details.find(({ id }) => latestId === id)?.version; + } + + return undefined; + }, [eap, latestId]); + + const isCreated = isDefined(latestId); + const isLocked = isDefined(details) && !!details.data.is_locked; + + const isLatestVersion = useMemo(() => { + if (eap.eap_type === EAP_TYPE_SIMPLIFIED) { + return eap.latest_simplified_eap === details?.data.id; + } + + if (eap.eap_type === EAP_TYPE_FULL) { + return eap.latest_full_eap === details?.data.id; + } + + return false; + }, [eap, details]); + + const isEditable = useMemo(() => { + if (isCreated && !isLatestVersion) { + return false; + } + + if (isLocked) { + return false; + } + + if (eap.status !== EAP_STATUS_UNDER_DEVELOPMENT + && eap.status !== EAP_STATUS_NS_ADDRESSING_COMMENTS + ) { + return false; + } + + return true; + }, [isCreated, isLatestVersion, isLocked, eap]); + + return ( + + {type === 'registration' && isNotDefined(eap.eap_type) && isNotDefined(details) && ( + + + {strings.startSimplifiedEapLinkLabel} + + + {strings.startFullEapLinkLabel} + + + )} + {type === 'development' && ( + <> + {eap.eap_type === EAP_TYPE_SIMPLIFIED && isCreated && ( + } + > + {strings.previewExportLinkLabel} + + )} + {eap.eap_type === EAP_TYPE_FULL && isCreated && ( + } + > + {strings.previewExportLinkLabel} + + )} + {isCreated && ( + + )} + {isDefined(details?.data.version) + && details.data.version > 1 + && ( + + )} + {isDefined(details?.data?.review_checklist_file) && ( + } + > + {strings.downloadReviewChecklistLinkLabel} + + )} + {isDefined(details?.data?.updated_checklist_file_details?.file) && ( + } + > + {strings.downloadUpdatedChecklistLinkLabel} + + )} + {eap.eap_type === EAP_TYPE_SIMPLIFIED && isEditable && ( + + {strings.editSimplifiedEapLinkLabel} + + )} + {eap.eap_type === EAP_TYPE_SIMPLIFIED && !isEditable && ( + + {strings.viewSimplifiedEapLinkLabel} + + )} + {eap.eap_type === EAP_TYPE_FULL && isEditable && ( + + {strings.editFullEapLinkLabel} + + )} + {eap.eap_type === EAP_TYPE_FULL && !isEditable && ( + + {strings.viewFullEapLinkLabel} + + )} + + )} + {type === 'validated' && ( + <> + {isDefined(eap.validated_budget_file) && ( + } + > + {strings.downloadValidatedBudgetLinkLabel} + + )} + {eap.status === EAP_STATUS_TECHNICALLY_VALIDATED && ( + + )} + + )} + {type === 'pending-pfa' && eap.status >= EAP_STATUS_PENDING_PFA && eap.eap_type === EAP_TYPE_FULL && ( + + } + > + {strings.previewSummaryExportLinkLabel} + + + + )} + {showExportModal && isDefined(eap.eap_type) && ( + + )} + + ); +} + +export default EapTableActions; diff --git a/app/src/views/AccountMyFormsEap/Filters/i18n.json b/app/src/views/AccountMyFormsEap/Filters/i18n.json new file mode 100644 index 0000000000..9aab9233d2 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/Filters/i18n.json @@ -0,0 +1,6 @@ +{ + "namespace": "accountMyFormsEap", + "strings": { + "filterStatusPlaceholder": "Select Status" + } +} diff --git a/app/src/views/AccountMyFormsEap/Filters/index.tsx b/app/src/views/AccountMyFormsEap/Filters/index.tsx new file mode 100644 index 0000000000..8ebee10365 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/Filters/index.tsx @@ -0,0 +1,47 @@ +import { SelectInput } from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { stringValueSelector } from '@ifrc-go/ui/utils'; +import { type EntriesAsList } from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; + +import i18n from './i18n.json'; + +type TypeOfEapStatus = components<'read'>['schemas']['EapEapStatusEnumKey']; +function typeOfEapStatusKeySelector({ key } : { key: TypeOfEapStatus }) { + return key; +} + +export interface FilterValue { + status?: TypeOfEapStatus | undefined; +} + +interface Props { + value: FilterValue; + onChange: (...args: EntriesAsList) => void; +} + +function Filters(props: Props) { + const { + value, + onChange, + } = props; + + const strings = useTranslation(i18n); + const { eap_eap_status: eapStatusTypeOptions } = useGlobalEnums(); + + return ( + + ); +} + +export default Filters; diff --git a/app/src/views/AccountMyFormsEap/i18n.json b/app/src/views/AccountMyFormsEap/i18n.json new file mode 100644 index 0000000000..4fcb4dcfd7 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/i18n.json @@ -0,0 +1,11 @@ +{ + "namespace": "eapApplication", + "strings": { + "eapRegistrationLink": "Register Your EAP", + "eapApplicationsHeading": "EAP Application", + "eapLastUpdated": "Last Updated", + "eapName": "Name/Phase", + "eapType": "EAP Type", + "eapStatus": "Status" + } +} diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx new file mode 100644 index 0000000000..8174fe9111 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/index.tsx @@ -0,0 +1,357 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { + Container, + Pager, + type RowOptions, + Table, + TableBodyContent, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + createDateColumn, + createElementColumn, + createEmptyColumn, + createExpandColumn, + createExpansionIndicatorColumn, + createStringColumn, + numericIdSelector, +} from '@ifrc-go/ui/utils'; +import { + isDefined, + isNotDefined, + isTruthyString, + listToMap, +} from '@togglecorp/fujs'; + +import Link from '#components/Link'; +import useFilterState from '#hooks/useFilterState'; +import { + EAP_STATUS_APPROVED, + EAP_STATUS_PENDING_PFA, + EAP_STATUS_TECHNICALLY_VALIDATED, + EAP_TYPE_FULL, + EAP_TYPE_SIMPLIFIED, +} from '#utils/constants'; +import { useRequest } from '#utils/restRequest'; + +import EapStatus, { type Props as EapStatusProps } from './EapStatus'; +import EapTableActions, { type Props as EapTableActionProps } from './EapTableActions'; +import Filters, { type FilterValue } from './Filters'; +import { + type EapExpandedItem, + type EapExpandedListItem, + type EapListItem, +} from './utils'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +type Key = EapListItem['id']; +const ITEM_PER_PAGE = 6; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + const { + filter, + offset, + limit, + rawFilter, + filtered, + setFilterField, + page, + setPage, + } = useFilterState({ + filter: {}, + pageSize: ITEM_PER_PAGE, + }); + + const { + response: eapListResponse, + pending: eapListPending, + retrigger: reloadEapList, + } = useRequest({ + url: '/api/v2/eap-registration/', + preserveResponse: true, + query: { + offset, + limit, + status: filter.status, + }, + }); + + const [expandedRow, setExpandedRow] = useState(); + const handleExpandClick = useCallback( + (row: EapListItem) => { + setExpandedRow( + (prevValue) => (prevValue?.id === row.id ? undefined : row), + ); + }, + [], + ); + + const aggregatedColumns = useMemo( + () => ([ + createExpansionIndicatorColumn(false), + createDateColumn( + 'created_at', + strings.eapLastUpdated, + (item) => item.modified_at, + ), + createStringColumn( + 'name', + strings.eapName, + (item) => { + const baseYear = new Date(item.created_at).getFullYear(); + + let addedYear = baseYear; + + if (item.eap_type === EAP_TYPE_FULL) { + addedYear = baseYear + 5; + } else if (item.eap_type === EAP_TYPE_SIMPLIFIED) { + addedYear = baseYear + 2; + } + + return `${item.country_details?.name}: + ${item.disaster_type_details?.name} + ${baseYear} - ${addedYear}`; + }, + ), + createStringColumn( + 'eap_type_display', + strings.eapType, + (item) => item.eap_type_display, + ), + createElementColumn( + 'status', + strings.eapStatus, + EapStatus, + (key, row) => ({ + eapId: key, + status: row.status, + hasValidatedBudgetFile: isTruthyString(row.validated_budget_file), + onStatusUpdate: reloadEapList, + }), + { columnClassName: styles.status }, + ), + createExpandColumn( + 'expandRow', + '', + (row) => ({ + onClick: handleExpandClick, + expanded: row.id === expandedRow?.id, + }), + ), + ]), + [ + strings.eapLastUpdated, + strings.eapName, + strings.eapType, + strings.eapStatus, + expandedRow, + handleExpandClick, + reloadEapList, + ], + ); + + const eapExpandedItems = useMemo(() => ( + listToMap( + eapListResponse?.results, + (eapListItem) => eapListItem.id, + (eapListItem) => { + const { + simplified_eap_details, + full_eap_details, + modified_at, + eap_type, + status, + } = eapListItem; + + const eapStarted = simplified_eap_details.length > 0 || full_eap_details.length > 0; + + const items = [ + { + label: 'EAP Development Registration', + lastUpdated: modified_at, + eap: eapListItem, + type: 'registration', + details: undefined, + disabled: false, + } satisfies EapExpandedListItem, + ...(eap_type === EAP_TYPE_SIMPLIFIED + ? simplified_eap_details.map((simplifiedEap) => ({ + label: `EAP Application v${simplifiedEap.version}`, + lastUpdated: simplifiedEap.modified_at, + eap: eapListItem, + type: 'development', + details: { + eapType: EAP_TYPE_SIMPLIFIED, + data: simplifiedEap, + }, + disabled: false, + } satisfies EapExpandedListItem)).toReversed() + : [] + ), + ...(eap_type === EAP_TYPE_FULL + ? full_eap_details.map((fullEap) => ({ + label: `EAP Application v${fullEap.version}`, + lastUpdated: fullEap.modified_at, + eap: eapListItem, + type: 'development', + details: { + eapType: EAP_TYPE_FULL, + data: fullEap, + }, + disabled: false, + } satisfies EapExpandedListItem)).toReversed() + : [] + ), + ((isNotDefined(eap_type) || !eapStarted) + ? ({ + label: 'EAP Application v1', + eap: eapListItem, + type: 'development', + details: undefined, + disabled: true, + } satisfies EapExpandedListItem) + : undefined + ), + { + label: 'Technically Validated', + eap: eapListItem, + type: 'validated', + lastUpdated: eapListItem.technically_validated_at ?? undefined, + details: undefined, + disabled: status < EAP_STATUS_TECHNICALLY_VALIDATED, + } satisfies EapExpandedListItem, + { + label: 'Approved (Pending PFA)', + lastUpdated: eapListItem.pending_pfa_at ?? undefined, + eap: eapListItem, + type: 'pending-pfa', + details: undefined, + disabled: status < EAP_STATUS_PENDING_PFA, + } satisfies EapExpandedListItem, + { + label: 'Approved', + eap: eapListItem, + lastUpdated: eapListItem.approved_at ?? undefined, + type: 'approved', + details: undefined, + disabled: status < EAP_STATUS_APPROVED, + } satisfies EapExpandedListItem, + ].filter(isDefined).toReversed(); + + return { + eap: eapListItem, + expandedItems: items, + } satisfies EapExpandedItem; + }, + ) + ), [eapListResponse]); + + const detailColumns = useMemo( + () => ([ + createExpansionIndicatorColumn( + true, + (row) => !!row.disabled, + ), + createDateColumn( + 'created_at', + strings.eapLastUpdated, + (row) => row.lastUpdated, + ), + createStringColumn( + 'title', + '', + (row) => row.label, + { withLightText: (item) => !!item.disabled }, + ), + createEmptyColumn(), + createElementColumn( + 'actions', + '', + EapTableActions, + (_, row) => ({ + expandedListItem: row, + onUpdate: reloadEapList, + }), + ), + createEmptyColumn(), + ]), + [strings.eapLastUpdated, reloadEapList], + ); + + const rowModifier = useCallback( + ({ row, datum }: RowOptions) => { + if (datum.id !== expandedRow?.id) { + return row; + } + + const subRows = eapExpandedItems?.[expandedRow.id]; + + return ( + <> + {row} + expandedItem.label} + data={subRows?.expandedItems} + columns={detailColumns} + expandedContent + /> + + ); + }, + [ + expandedRow, + detailColumns, + eapExpandedItems, + ], + ); + + return ( + + )} + headerActions={( + + {strings.eapRegistrationLink} + + )} + footerActions={( + + )} + > + + + ); +} diff --git a/app/src/views/AccountMyFormsEap/styles.module.css b/app/src/views/AccountMyFormsEap/styles.module.css new file mode 100644 index 0000000000..f3760413eb --- /dev/null +++ b/app/src/views/AccountMyFormsEap/styles.module.css @@ -0,0 +1,3 @@ +.status { + min-width: 18rem; +} diff --git a/app/src/views/AccountMyFormsEap/utils.ts b/app/src/views/AccountMyFormsEap/utils.ts new file mode 100644 index 0000000000..c12eda4c8e --- /dev/null +++ b/app/src/views/AccountMyFormsEap/utils.ts @@ -0,0 +1,34 @@ +import { + type EAP_TYPE_FULL, + type EAP_TYPE_SIMPLIFIED, +} from '#utils/constants'; +import { type GoApiResponse } from '#utils/restRequest'; + +type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>; +export type EapListItem = NonNullable[number]; + +interface SimplifiedEapDetails { + eapType: typeof EAP_TYPE_SIMPLIFIED; + data: EapListItem['simplified_eap_details'][number]; +} + +interface FullEapDetails { + eapType: typeof EAP_TYPE_FULL; + data: EapListItem['full_eap_details'][number]; +} + +export type EapExpandedListItem = { + label: string; + lastUpdated?: string; + eap: EapListItem; + type: 'registration' | 'development' | 'validated' | 'pending-pfa' | 'approved'; + disabled?: boolean; + + // Only applicable for development type + details: SimplifiedEapDetails | FullEapDetails | undefined; +}; + +export type EapExpandedItem = { + eap: EapListItem; + expandedItems: EapExpandedListItem[]; +}; diff --git a/app/src/views/AccountMyFormsLayout/i18n.json b/app/src/views/AccountMyFormsLayout/i18n.json index 6b70856db7..c23cf7ce5b 100644 --- a/app/src/views/AccountMyFormsLayout/i18n.json +++ b/app/src/views/AccountMyFormsLayout/i18n.json @@ -4,6 +4,7 @@ "fieldReportTabTitle": "Field Report", "perTabTitle": "PER", "drefTabTitle": "DREF", - "threeWTabTitle": "3W" + "threeWTabTitle": "3W", + "eapApplications": "EAP Applications" } } \ No newline at end of file diff --git a/app/src/views/AccountMyFormsLayout/index.tsx b/app/src/views/AccountMyFormsLayout/index.tsx index 5364a38441..c7eaac05d2 100644 --- a/app/src/views/AccountMyFormsLayout/index.tsx +++ b/app/src/views/AccountMyFormsLayout/index.tsx @@ -35,6 +35,11 @@ export function Component() { > {strings.threeWTabTitle} + + {strings.eapApplications} + diff --git a/app/src/views/DrefApplicationForm/index.tsx b/app/src/views/DrefApplicationForm/index.tsx index 5266ddb7e3..ac925d1859 100644 --- a/app/src/views/DrefApplicationForm/index.tsx +++ b/app/src/views/DrefApplicationForm/index.tsx @@ -309,6 +309,7 @@ export function Component() { const loadResponseToFormValue = useCallback((response: GetDrefResponse) => { handleDrefLoad(response); + const { planned_interventions, proposed_action, diff --git a/app/src/views/DrefDetail/i18n.json b/app/src/views/DrefDetail/i18n.json new file mode 100644 index 0000000000..47ce2fe4c4 --- /dev/null +++ b/app/src/views/DrefDetail/i18n.json @@ -0,0 +1,15 @@ +{ + "namespace": "drefDetail", + "strings": { + "drefIntroHeading": "DREF Intro", + "drefIntroDetailOne": "Every year, small and medium-sized disasters occur in silence. Without media attention or international visibility, they can struggle to attract funding—putting affected communities at risk of being completely neglected.", + "drefIntroDetailTwo": "To support these smaller disasters, or to provide initial funding before launching an Emergency Appeal, we rapidly channel funding to Red Cross and Red Crescent Societies through the DREF—enabling them to deliver fast and effective local humanitarian action.", + "drefProcessHeading": "Dref Process", + "drefProcessSubHeading": "We provide funding in two ways:", + "drefProcessListOne": "A loan facility: start-up funding for the IFRC and National Societies to respond to large-scale disasters, which will later be reimbursed by donor contributions to an Emergency Appeal.", + "drefProcessListTwo": "A grant facility: funding for National Society responses to small- and medium-sized disasters. This is used when no Emergency Appeal will be launched or when support from other actors is not foreseen.", + "drefProcessDetailOne": "The fund is demand-driven and locally-owned. It is open to all 191 National Societies that submit funding applications and plans of action reflecting locally identified priorities and needs.", + "drefProcessDetailTwo": "On average, the DREF supports more than 100 responses to small and medium-sized disasters every year.", + "drefDrefApplication": "DREF Application" + } +} diff --git a/app/src/views/DrefDetail/index.tsx b/app/src/views/DrefDetail/index.tsx new file mode 100644 index 0000000000..33869faf08 --- /dev/null +++ b/app/src/views/DrefDetail/index.tsx @@ -0,0 +1,58 @@ +import { + Container, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; + +import SurgeContentContainer from '#components/domain/SurgeContentContainer'; +import Link from '#components/Link'; + +import i18n from './i18n.json'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + return ( + + + +
{strings.drefIntroDetailOne}
+
{strings.drefIntroDetailTwo}
+ + +
{strings.drefProcessSubHeading}
+
    +
  • + {strings.drefProcessListOne} +
    • +
  • + {strings.drefProcessListTwo} +
    • +
+
+ {strings.drefProcessDetailOne} +
+
+ {strings.drefProcessDetailTwo} +
+ + + {strings.drefDrefApplication} + + + + ); +} + +Component.displayName = 'DrefDetail'; diff --git a/app/src/views/DrefProcess/i18n.json b/app/src/views/DrefProcess/i18n.json new file mode 100644 index 0000000000..01904a6dda --- /dev/null +++ b/app/src/views/DrefProcess/i18n.json @@ -0,0 +1,9 @@ +{ + "namespace": "drefProcess", + "strings": { + "eapHeading": "Disaster Response Emergency Fund (DREF)", + "eapDescription": "The IFRC's Disaster Emergency Fund (DREF): rapid, reliable funding for life-saving action.", + "eapProcessDrefTab": "Response And Imminent Dref", + "eapProcessEapTab": "Early Action Protocols (EAP)" + } +} diff --git a/app/src/views/DrefProcess/index.tsx b/app/src/views/DrefProcess/index.tsx new file mode 100644 index 0000000000..2ed605891a --- /dev/null +++ b/app/src/views/DrefProcess/index.tsx @@ -0,0 +1,37 @@ +import { Outlet } from 'react-router-dom'; +import { NavigationTabList } from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; + +import NavigationTab from '#components/NavigationTab'; +import Page from '#components/Page'; + +import i18n from './i18n.json'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + return ( + + + + {strings.eapProcessDrefTab} + + + {strings.eapProcessEapTab} + + + + + ); +} + +Component.displayName = 'DrefProcess'; diff --git a/app/src/views/EapFullExport/PrintableContactOutput/index.tsx b/app/src/views/EapFullExport/PrintableContactOutput/index.tsx new file mode 100644 index 0000000000..145208e619 --- /dev/null +++ b/app/src/views/EapFullExport/PrintableContactOutput/index.tsx @@ -0,0 +1,75 @@ +import { isTruthyString } from '@togglecorp/fujs'; + +import PrintableContainer from '#components/printable/PrintableContainer'; +import PrintableDataDisplay from '#components/printable/PrintableDataDisplay'; +import { type GoApiResponse } from '#utils/restRequest'; + +type FullEap = GoApiResponse<'/api/v2/full-eap/{id}/'>; +type FieldKeys = keyof FullEap; + +type ExtractContactPrefix = KEY extends `${infer PREFIX}_name` + ? `${PREFIX}_title` extends FieldKeys + ? `${PREFIX}_email` extends FieldKeys + ? `${PREFIX}_phone_number` extends FieldKeys + ? PREFIX + : never + : never + : never + : never + +type ValidContactFieldPrefixes = ExtractContactPrefix; + +interface Props { + label: React.ReactNode; + namePrefix: ValidContactFieldPrefixes; + data: FullEap | undefined | null; + prevData: FullEap | undefined | null; + withDiff: boolean; +} + +function PrintableContactOutput(props: Props) { + const { + label, + namePrefix, + data, + prevData, + withDiff, + } = props; + + const nameKey = `${namePrefix}_name` satisfies FieldKeys; + const titleKey = `${namePrefix}_title` satisfies FieldKeys; + const emailKey = `${namePrefix}_email` satisfies FieldKeys; + const phoneNumberKey = `${namePrefix}_phone_number` satisfies FieldKeys; + + const value = [ + data?.[nameKey], + data?.[titleKey], + data?.[emailKey], + data?.[phoneNumberKey], + ].filter(isTruthyString).join(', '); + + const prevValue = [ + prevData?.[nameKey], + prevData?.[titleKey], + prevData?.[emailKey], + prevData?.[phoneNumberKey], + ].filter(isTruthyString).join(', '); + + return ( + + + + ); +} + +export default PrintableContactOutput; diff --git a/app/src/views/EapFullExport/TableOfContents/index.tsx b/app/src/views/EapFullExport/TableOfContents/index.tsx new file mode 100644 index 0000000000..a7c7c4790e --- /dev/null +++ b/app/src/views/EapFullExport/TableOfContents/index.tsx @@ -0,0 +1,82 @@ +import { + type RefObject, + useEffect, + useState, +} from 'react'; +import { randomString } from '@togglecorp/fujs'; + +import styles from './styles.module.css'; + +type HeadingData = { + id: string; + text: string; + level: number; + children?: HeadingData[]; +} + +interface Props { + mainRef: RefObject; +} + +function TableOfContents(props: Props) { + const { mainRef } = props; + const [headings, setHeadings] = useState([]); + + useEffect(() => { + const contentElement = mainRef.current; + + if (!contentElement) return; + + const elements = Array.from(contentElement.querySelectorAll('h2, h3')); + + const headingList: HeadingData[] = []; + + elements.forEach((elem) => { + const level = Number(elem.tagName.substring(1)); + + if (level === 2) { + headingList.push({ + id: randomString(), + text: elem.textContent || '', + level, + }); + } + + const lastHeadingData = headingList[headingList.length - 1]; + if (level === 3 && lastHeadingData) { + if (!lastHeadingData.children) { + lastHeadingData.children = []; + } + + lastHeadingData.children?.push({ + id: randomString(), + text: elem.textContent || '', + level, + }); + } + }); + + setHeadings(headingList); + }, [mainRef]); + + return ( +
    + {headings.map((heading) => ( +
  1. + {heading.text} + {heading.children && ( +
      + {heading.children?.map((subHeading) => ( +
    1. + {subHeading.text} +
      2. + ))} +
    + )} +
    2. + ))} +
+ ); +} + +export default TableOfContents; diff --git a/app/src/views/EapFullExport/TableOfContents/styles.module.css b/app/src/views/EapFullExport/TableOfContents/styles.module.css new file mode 100644 index 0000000000..804e5fcf38 --- /dev/null +++ b/app/src/views/EapFullExport/TableOfContents/styles.module.css @@ -0,0 +1,41 @@ +.table-of-contents { + padding-inline-start: 0; + list-style: none; + counter-reset: section; + + > li { + margin: unset; + font-weight: var(--go-ui-font-weight-bold); + margin-block-end: var(--go-ui-spacing-xs); + counter-reset: subsection; + counter-increment: section; + + &::before { + content: counter(section) ". "; + } + } + + ol { + padding-inline-start: 0; + list-style: none; + + > li { + margin: unset; + counter-increment: subsection; + margin-block-start: var(--go-ui-spacing-3xs); + + &::before { + content: counter(section) "." counter(subsection) " "; + } + } + } + + .sub-section { + font-weight: var(--go-ui-font-weight-light); + } +} + + + + + diff --git a/app/src/views/EapFullExport/i18n.json b/app/src/views/EapFullExport/i18n.json new file mode 100644 index 0000000000..c6dcb3fe31 --- /dev/null +++ b/app/src/views/EapFullExport/i18n.json @@ -0,0 +1,98 @@ +{ + "namespace": "eapFullExport", + "strings": { + "summaryPageTitle": "Early Action Protocol Summary", + "hazardLabel": "Hazard", + "prioritizedImpactsSummaryLabel": "Prioritized risks/impacts to be addressed by early actions", + "earlyActionsSummaryLabel": "Proposed Early Actions by based on the IFRC’s Planned Operation Matrix", + "houseHoldsSummaryLabel": "Potential No. of households to be reached", + "eapBudgetSummaryLabel": "EAP budget", + "pageTitleFullText": "Full", + "pageTitleEapText": "Early Action Protocol", + "overviewHeading": "Overview", + "eapNoLabel": "EAP No", + "eapTimeframeLabel": "EAP Timeframe", + "eapApprovedLabel": "EAP Approved", + "objectiveLabel": "Objective", + "nationalLabel": "National", + "nationalSocietyContactLabel": "National Society Contact", + "partnerNationalSocietyContactLabel": "Partner National Society Contact", + "delegationLabel": "Delegation", + "delegationFocalLabel": "IFRC Delegation AA Focal Point", + "delegationHeadLabel": "IFRC Head of Delegation", + "regionalGlobalLabel": "Regional and Global", + "drefFocalLabel": "DREF Focal Point", + "regionalFocalLabel":"IFRC Regional AA Focal Point", + "regionalOpsLabel":"IFRC Regional Ops Manager", + "regionalHeadLabel":"IFRC Regional Head of DCC", + "globalOpsLabel":"IFRC Global Ops Coordinator", + "stakeholdersHeading":"Stakeholders", + "workWithGovernmentLabel":"Did you work with the government and other relevant actors in the development of this EAP? *", + "workWithGovernmentDescription":"Please briefly describe the process", + "keyActorsHeading": "Key Actors", + "technicalWorkingHeading": "Technical working groups in place", + "isTechnicalLabel": "Is there TWG in place?", + "workingDescriptionLabel": "Please briefly describe the process", + "riskAnalysisHeading": "Risk Analysis", + "hazardSelectionHeading": "Hazard Selection", + "exposedElementsLabel": "Exposed elements and their vulnerability factors", + "prioritizedImpactHeading": "Prioritized Impact", + "listPrioritizedImpactLabel": "List of prioritized impacts", + "triggerModelHeading": "Trigger Model", + "triggerStatementLabel": "Trigger Statement", + "leadTimeLabel": "Lead Time", + "forecastSelectionLabel": "Forecast Selection", + "downloadForecastTableLabel": "Download forecast table", + "definitionJustificationLabel": "Definition and justification of impact level", + "identificationInterventionLabel": "Identification of the intervention area", + "selectionOfActionHeading": "Selection of Actions", + "listEarlyActionsLabel": "List of Early Actions", + "earlySelectionLabel": "Early Action Selection Process", + "downloadTheoryChangeTableLabel": "Download Theory of Change Table", + "evidenceBaseLabel": "Evidence Base", + "usefulnessActionsLabel": "Usefulness of actions in case of non-occurring event", + "totalBudgetLabel": "Total Budget", + "downloadBudgetLabel": "Download Full Budget Template", + "feasibilityLabel": "Feasibility", + "activationProcessHeading": "EAP Activation Process", + "actionProcessLabel": "Early Action implementation process", + "triggerActivationLabel": "Trigger activation system", + "peopleTargetLabel": "People Targeted", + "selectionTargetLabel": "Selection of target population", + "stopMechanismLabel": "Stop Mechanism", + "sourceInformationLabel": "Sources of Information", + "sourceForecastLabel": "Sources of Forecast", + "nameLabel": "Name", + "linkLabel": "Link", + "descriptionLabel": "Description", + "titleLabel": "Title", + "mealHeading": "Monitoring, Evaluation, Accountability Learning(Meal)", + "mealLabel": "Meal", + "nationalSocietyHeading": "National Society Capacity", + "operationalThematicLabel": "Operational, thematic and administrative capacity", + "strategiesPlanLabel": "Strategies and plans", + "financialCapacityLabel": "Financial capacity to advance funds", + "financeLogisticsHeading": "Finance and Logistics", + "budgetDescriptionLabel": "Budget Description", + "totalReadinessLabel": "Total Readiness", + "readinessBudgetDescriptionLabel": "Readiness Budget Description", + "totalPrepositioningLabel": "Total Pre-positioning", + "prepositioningBudgetDescriptionLabel": "Pre-positioning Budget Description", + "totalEarlyActionsLabel": "Total Early Actions", + "earlyActionsBudgetDescriptionLabel": "Early Actions Budget Description", + "eapEndorsementLabel": "EAP Endorsement", + "plannedOperationsHeading": "Planned Operations", + "operationBudgetLabel": "Budget", + "apCodeLabel": "AP Code", + "operationPeopleTargetedLabel": "No. people targeted", + "indicatorsHeading": "Indicators", + "indicatorTitleLabel": "Title", + "indicatorTargetLabel": "Target", + "readinessActivitiesHeading": "Readiness activities", + "prepositioningActivitiesHeading": "Prepositioning activities", + "earlyActionActivitiesHeading": "Prioritized early actions", + "enablingApproachesLabel": "Enabling Approaches", + "contactInformationHeading": "Contact information", + "contactInformationDescription": "For further information, specifically related to this simplified EAP please contact:" + } +} diff --git a/app/src/views/EapFullExport/index.tsx b/app/src/views/EapFullExport/index.tsx new file mode 100644 index 0000000000..697417ef94 --- /dev/null +++ b/app/src/views/EapFullExport/index.tsx @@ -0,0 +1,1857 @@ +import { + useMemo, + useRef, +} from 'react'; +import { + useParams, + useSearchParams, +} from 'react-router-dom'; +import { + Label, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { Image } from '@ifrc-go/ui/printable'; +import { + isDefined, + isFalsyString, + isNotDefined, + isTruthyString, + listToMap, +} from '@togglecorp/fujs'; + +import PrintableActivityOutput from '#components/domain/PrintableActivityOutput'; +import Link from '#components/printable/Link'; +import PrintableContainer from '#components/printable/PrintableContainer'; +import PrintableDataDisplay from '#components/printable/PrintableDataDisplay'; +import PrintableDescription from '#components/printable/PrintableDescription'; +import PrintableLabel from '#components/printable/PrintableLabel'; +import PrintablePage from '#components/printable/PrintablePage'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; +import { useRequest } from '#utils/restRequest'; + +import PrintableContactOutput from './PrintableContactOutput'; +import TableOfContents from './TableOfContents'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const { eapId } = useParams<{ eapId: string }>(); + + const { pending: eapRegistrationPending, response: eapRegistrationResponse } = useRequest({ + skip: isFalsyString(eapId), + url: '/api/v2/eap-registration/{id}/', + pathVariables: isTruthyString(eapId) + ? { + id: Number(eapId), + } + : undefined, + }); + + const mainRef = useRef(null); + const [searchParams] = useSearchParams(); + + const strings = useTranslation(i18n); + + const version = searchParams.get('version') ?? undefined; + const withDiff = searchParams.get('diff')?.toLowerCase() === 'true'; + + const selectedFullEap = eapRegistrationResponse?.full_eap_details?.find( + (fullEap) => String(fullEap.version) === String(version), + ); + + const latestFullEapVersion = eapRegistrationResponse?.latest_full_eap; + const latestFullEap = eapRegistrationResponse?.full_eap_details?.find( + (fullEap) => fullEap.version === latestFullEapVersion, + ); + + const currentFullEap = selectedFullEap ?? latestFullEap; + const currentFullEapId = currentFullEap?.id; + + const prevFullEapVersion = isDefined(currentFullEap?.version) && currentFullEap.version > 1 + ? currentFullEap.version - 1 + : undefined; + + const prevFullEap = eapRegistrationResponse?.full_eap_details.find( + (fullEap) => fullEap.version === prevFullEapVersion, + ); + + const { pending: fullEapPending, response: fullEapResponse } = useRequest({ + skip: isNotDefined(currentFullEapId), + url: '/api/v2/full-eap/{id}/', + pathVariables: isDefined(currentFullEapId) + ? { + id: Number(currentFullEapId), + } + : undefined, + }); + + const { pending: prevFullEapPending, response: prevFullEapResponse } = useRequest({ + skip: isNotDefined(prevFullEap) || !withDiff, + url: '/api/v2/full-eap/{id}/', + pathVariables: isDefined(prevFullEap) + ? { + id: Number(prevFullEap.id), + } + : undefined, + }); + + const { eap_sector, eap_approach } = useGlobalEnums(); + + const eapSectorTitleMap = listToMap( + eap_sector, + ({ key }) => key, + ({ value }) => value, + ); + + const eapApproachTitleMap = listToMap( + eap_approach, + ({ key }) => key, + ({ value }) => value, + ); + + const { disaster_type_details, country_details, approved_at } = eapRegistrationResponse ?? {}; + + const { + cover_image_file, + objective, + + partner_contacts, + + admin2_details, + is_worked_with_government, + worked_with_government_description, + key_actors, + is_technical_working_groups, + technically_working_group_title, + technical_working_groups_in_place_description, + + hazard_selection, + hazard_selection_images, + exposed_element_and_vulnerability_factor, + exposed_element_and_vulnerability_factor_images, + prioritized_impact, + prioritized_impact_images, + prioritized_impacts, + risk_analysis_source_of_information, + + trigger_statement, + trigger_statement_source_of_information, + lead_time, + forecast_selection, + forecast_selection_images, + forecast_table_file_details, + definition_and_justification_impact_level, + definition_and_justification_impact_level_images, + identification_of_the_intervention_area, + identification_of_the_intervention_area_images, + trigger_model_source_of_information, + + early_actions, + early_action_selection_process, + early_action_selection_process_images, + theory_of_change_table_file_details, + evidence_base, + evidence_base_source_of_information, + + planned_operations, + enabling_approaches, + usefulness_of_actions, + feasibility, + + early_action_implementation_process, + early_action_implementation_images, + trigger_activation_system, + trigger_activation_system_images, + people_targeted, + selection_of_target_population, + stop_mechanism, + activation_process_source_of_information, + + meal, + + operational_administrative_capacity, + strategies_and_plans, + advance_financial_capacity, + + total_budget, + budget_description, + budget_file_details, + readiness_budget, + readiness_cost_description, + pre_positioning_budget, + prepositioning_cost_description, + early_action_budget, + early_action_cost_description, + eap_endorsement, + } = fullEapResponse ?? {}; + + const { + objective: prev_objective, + + partner_contacts: prev_partner_contacts, + + is_worked_with_government: prev_is_worked_with_government, + worked_with_government_description: prev_worked_with_government_description, + key_actors: prev_key_actors, + is_technical_working_groups: prev_is_technical_working_groups, + technically_working_group_title: prev_technically_working_group_title, + technical_working_groups_in_place_description: + prev_technical_working_groups_in_place_description, + + hazard_selection: prev_hazard_selection, + exposed_element_and_vulnerability_factor: + prev_exposed_element_and_vulnerability_factor, + prioritized_impact: prev_prioritized_impact, + prioritized_impacts: prev_prioritized_impacts, + risk_analysis_source_of_information: + prev_risk_analysis_source_of_information, + + trigger_statement: prev_trigger_statement, + trigger_statement_source_of_information: + prev_trigger_statement_source_of_information, + lead_time: prev_lead_time, + forecast_selection: prev_forecast_selection, + definition_and_justification_impact_level: + prev_definition_and_justification_impact_level, + identification_of_the_intervention_area: + prev_identification_of_the_intervention_area, + trigger_model_source_of_information: + prev_trigger_model_source_of_information, + + early_actions: prev_early_actions, + early_action_selection_process: prev_early_action_selection_process, + evidence_base: prev_evidence_base, + evidence_base_source_of_information: + prev_evidence_base_source_of_information, + + planned_operations: prev_planned_operations, + enabling_approaches: prev_enabling_approaches, + usefulness_of_actions: prev_usefulness_of_actions, + feasibility: prev_feasibility, + + early_action_implementation_process: + prev_early_action_implementation_process, + trigger_activation_system: prev_trigger_activation_system, + people_targeted: prev_people_targeted, + selection_of_target_population: prev_selection_of_target_population, + stop_mechanism: prev_stop_mechanism, + activation_process_source_of_information: + prev_activation_process_source_of_information, + + meal: prev_meal, + + operational_administrative_capacity: + prev_operational_administrative_capacity, + strategies_and_plans: prev_strategies_and_plans, + advance_financial_capacity: prev_advance_financial_capacity, + + total_budget: prev_total_budget, + budget_description: prev_budget_description, + readiness_budget: prev_readiness_budget, + readiness_cost_description: prev_readiness_cost_description, + pre_positioning_budget: prev_pre_positioning_budget, + prepositioning_cost_description: prev_prepositioning_cost_description, + early_action_budget: prev_early_action_budget, + early_action_cost_description: prev_early_action_cost_description, + eap_endorsement: prev_eap_endorsement, + } = prevFullEapResponse ?? {}; + + const eapTitle = [ + country_details?.name, + admin2_details?.map(({ name }) => name).join(', '), + disaster_type_details?.name, + ] + .filter(isTruthyString) + .join(' | '); + + const prevKeyActorsMapping = useMemo( + () => listToMap(prev_key_actors ?? [], (actor) => actor.national_society), + [prev_key_actors], + ); + + const prevPartnerContactsMapping = useMemo( + () => listToMap(prev_partner_contacts ?? [], (partner) => partner.id!), + [prev_partner_contacts], + ); + + const prevRiskSourceInformationMapping = useMemo( + () => listToMap( + prev_risk_analysis_source_of_information ?? [], + (actor) => actor.id!, + ), + [prev_risk_analysis_source_of_information], + ); + + const prevTriggerStatementSourceInformationMapping = useMemo( + () => listToMap( + prev_trigger_statement_source_of_information ?? [], + (actor) => actor.id!, + ), + [prev_trigger_statement_source_of_information], + ); + + const prevTriggerModelSourceInformationMapping = useMemo( + () => listToMap( + prev_trigger_model_source_of_information ?? [], + (actor) => actor.id!, + ), + [prev_trigger_model_source_of_information], + ); + + const prevEvidenceBaseSourceInformationMapping = useMemo( + () => listToMap( + prev_evidence_base_source_of_information ?? [], + (actor) => actor.id!, + ), + [prev_evidence_base_source_of_information], + ); + + const prevPlannedOperationsMapping = useMemo( + () => listToMap(prev_planned_operations ?? [], (actor) => actor.sector!), + [prev_planned_operations], + ); + + const prevEnableApproachesMapping = useMemo( + () => listToMap(prev_enabling_approaches ?? [], (approach) => approach.id!), + [prev_enabling_approaches], + ); + + const prevActivationSourceInformationMapping = useMemo( + () => listToMap( + prev_activation_process_source_of_information ?? [], + (actor) => actor.id!, + ), + [prev_activation_process_source_of_information], + ); + + const prevPrioritizedImpactsMapping = useMemo( + () => listToMap(prev_prioritized_impacts ?? [], (impact) => impact.id!), + [prev_prioritized_impacts], + ); + + const prevEarlyActionsMapping = useMemo( + () => listToMap(prev_early_actions ?? [], (action) => action.id!), + [prev_early_actions], + ); + + const previewReady = !eapRegistrationPending && !fullEapPending && !prevFullEapPending; + + return ( + + {strings.pageTitleFullText} +
+ {strings.pageTitleEapText} + + )} + description={eapTitle ?? '--'} + dataReady={previewReady} + > + +
+ + + + {prioritized_impacts?.map((impact) => ( +
  • + +
    • + ))} + + )} + strongLabel + variant="contents" + withPadding + withBackground + withDiff={withDiff} + /> + + {early_actions?.map((action) => ( +
  • + +
    • + ))} + + )} + strongLabel + variant="contents" + withPadding + withBackground + withDiff={withDiff} + /> + + + ( + + ))} + variant="contents" + withPadding + withBackground + strongLabel + withDiff={withDiff} + /> + +
    +     + + + + + {isDefined(cover_image_file?.file) && ( + + + + )} + + + + + + + + + + + + + + + + + + {partner_contacts?.map((partner) => { + const prevPartner = prevPartnerContactsMapping[partner.id!]; + return ( + + ); + })} + + + + + + + + + + + + + + + + + + + + + + + + {key_actors?.map((actor) => ( + + )} + > + + + ))} + + + + + + + + + + + + + + + + + + + {hazard_selection_images?.map((hazard) => ( + + ))} + + + + + +
    + {exposed_element_and_vulnerability_factor_images?.map((element) => ( + + ))} +
    +     + + +
      + {prioritized_impacts?.map((impact) => ( +
    1. + +
      2. + ))} +
    +     +     + + + + +
    + {prioritized_impact_images?.map((element) => ( + + ))} +
    +     + + + {risk_analysis_source_of_information?.map((source) => ( + + + + + ))} + + +     + + + + + + + + + + + + {trigger_statement_source_of_information?.map((trigger) => ( + + + + + ))} + + + + + + +
    + {forecast_selection_images?.map((element) => ( + + ))} +
    +     + + + {strings.downloadForecastTableLabel} + + + + + + +
    + {definition_and_justification_impact_level_images?.map( + (element) => ( + + ), + )} +
    +     + + + + +
    + {identification_of_the_intervention_area_images?.map((element) => ( + + ))} +
    +     + + + {trigger_model_source_of_information?.map((trigger) => ( + + + + + ))} + + +     + + + +
      + {early_actions?.map((action) => ( +
    1. + +
      2. + ))} +
    +     +     + + + + +
    + {early_action_selection_process_images?.map((element) => ( + + ))} +
    +     + + + {strings.downloadTheoryChangeTableLabel} + + + + + + + + {evidence_base_source_of_information?.map((trigger) => ( + + + + + ))} + + + + + + + + +     + + {planned_operations?.map((operation) => { + const prevOperation = prevPlannedOperationsMapping?.[operation.sector]; + + const prevOperationIndicatorMap = listToMap( + prevOperation?.indicators, + ({ id }) => id!, + ); + const prevReadinessActivitiesMap = listToMap( + prevOperation?.readiness_activities, + ({ id }) => id!, + ); + const prevPrepositioningActivitiesMap = listToMap( + prevOperation?.prepositioning_activities, + ({ id }) => id!, + ); + const prevEarlyActionActivitiesMap = listToMap( + prevOperation?.early_action_activities, + ({ id }) => id!, + ); + + return ( + + + + + + + + + +
    + + + {operation.indicators.map((indicator) => { + const prevIndicator = isDefined(indicator.previous_id) + ? prevOperationIndicatorMap?.[indicator.previous_id] + : undefined; + + return ( + + )} + value={indicator.target} + prevValue={prevIndicator?.target} + valueType="number" + variant="contents" + withBackground + withPadding + withoutLabelColon + withDiff={withDiff} + /> + ); + })} +
    +     + +
    + {operation.readiness_activities.map((activity, index) => { + const prevActivity = isDefined(activity.previous_id) + ? prevReadinessActivitiesMap?.[activity.previous_id] + : undefined; + + return ( + + ); + })} +
    +     + +
    + {operation.prepositioning_activities.map( + (activity, index) => { + const prevActivity = prevPrepositioningActivitiesMap + ?.[activity.id!]; + return ( + + ); + }, + )} +
    +     + +
    + {operation.early_action_activities.map((activity, index) => { + const prevActivity = isDefined(activity.previous_id) + ? prevEarlyActionActivitiesMap?.[activity.previous_id] + : undefined; + + return ( + + ); + })} +
    +     +     + ); + })} +     + + {enabling_approaches?.map((approach) => { + const prevApproach = prevEnableApproachesMapping?.[approach.approach]; + + const prevApproachIndicatorMap = listToMap( + prevApproach?.indicators, + ({ id }) => id!, + ); + const prevReadinessActivitiesMap = listToMap( + prevApproach?.readiness_activities, + ({ id }) => id!, + ); + const prevPrepositioningActivitiesMap = listToMap( + prevApproach?.prepositioning_activities, + ({ id }) => id!, + ); + const prevEarlyActionActivitiesMap = listToMap( + prevApproach?.early_action_activities, + ({ id }) => id!, + ); + + return ( + + + + + + + + +
    + + + {approach.indicators.map((indicator) => { + const prevIndicator = isDefined(indicator.previous_id) + ? prevApproachIndicatorMap?.[indicator.previous_id] + : undefined; + + return ( + + )} + value={indicator.target} + prevValue={prevIndicator?.target} + valueType="number" + variant="contents" + withBackground + withPadding + withoutLabelColon + withDiff={withDiff} + /> + ); + })} +
    +     + +
    + {approach.readiness_activities.map((activity, index) => { + const prevActivity = isDefined(activity.previous_id) + ? prevReadinessActivitiesMap?.[activity.previous_id] + : undefined; + + return ( + + ); + })} +
    +     + +
    + {approach.prepositioning_activities.map((activity, index) => { + const prevActivity = isDefined(activity.previous_id) + ? prevPrepositioningActivitiesMap + ?.[activity.previous_id] + : undefined; + + return ( + + ); + })} +
    +     + +
    + {approach.early_action_activities.map((activity, index) => { + const prevActivity = isDefined(activity.previous_id) + ? prevEarlyActionActivitiesMap?.[activity.previous_id] + : undefined; + + return ( + + ); + })} +
    +     +     + ); + })} +     + + + + + +
    + {early_action_implementation_images?.map((element) => ( + + ))} +
    +     + + + + +
    + {trigger_activation_system_images?.map((element) => ( + + ))} +
    +     + + + + + + + + + + + + + + {activation_process_source_of_information?.map((source) => ( + + + + + ))} + + +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {strings.downloadBudgetLabel} + + + + + + + + + + + + + + + +     + ); +} + +Component.displayName = 'EapFullExport'; diff --git a/app/src/views/EapFullExport/styles.module.css b/app/src/views/EapFullExport/styles.module.css new file mode 100644 index 0000000000..c4f79b8b21 --- /dev/null +++ b/app/src/views/EapFullExport/styles.module.css @@ -0,0 +1,34 @@ +.summary { + display: grid; + grid-gap: var(--go-ui-width-separator-md); + grid-template-columns: 3fr 7fr; +} + +.meta-items { + display: flex; + flex-direction: column; + gap: var(--go-ui-width-separator-md); + + .meta-children-items { + display: grid; + grid-gap: var(--go-ui-width-separator-md); + grid-template-columns: 1fr 1fr 1fr; + } +} + +.activity-items, +.indicator-items { + display: grid; + grid-gap: var(--go-ui-width-separator-md); + grid-template-columns: 2fr 1fr; +} + +.image-items { + display: flex; + gap: var(--go-ui-width-separator-md); +} + +.sources { + display: flex; + gap: var(--go-ui-spacing-md); +} diff --git a/app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json b/app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json new file mode 100644 index 0000000000..fb51cf85e1 --- /dev/null +++ b/app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json @@ -0,0 +1,8 @@ +{ + "namespace": "eapFullForm", + "strings": { + "eapSourceInformationNameLabel": "Name", + "eapSourceInformationLinkLabel": "Link", + "eapSourceInformationDeleteButton": "Delete Source Information" + } +} diff --git a/app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx b/app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx new file mode 100644 index 0000000000..c096522555 --- /dev/null +++ b/app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx @@ -0,0 +1,120 @@ +import { useCallback } from 'react'; +import { DeleteBinTwoLineIcon } from '@ifrc-go/icons'; +import { + Container, + IconButton, + InlineView, + ListView, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { randomString } from '@togglecorp/fujs'; +import { + type ArrayError, + getErrorObject, + type PartialForm, + type SetValueArg, + useFormObject, +} from '@togglecorp/toggle-form'; + +import NonFieldError from '#components/NonFieldError'; +import { type components } from '#generated/types'; +import { formatSourceLink } from '#utils/common'; + +import i18n from './i18n.json'; + +type EAPSourceInformation = components['schemas']['EAPSourceInformation'] & { + client_id: string; +}; + +export type SourceInformationFormFields = PartialForm< + EAPSourceInformation, + 'client_id' +>; + +interface Props { + value: SourceInformationFormFields; + error: ArrayError | undefined; + onChange: ( + value: SetValueArg, + index: number + ) => void; + onRemove: (index: number) => void; + index: number; + disabled?: boolean; + readOnly?: boolean; +} + +function EAPSourceInformationInput(props: Props) { + const { + error: errorFromProps, + onChange, + value, + index, + onRemove, + disabled, + readOnly, + } = 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; + + const handleSourceFieldChange = useCallback( + (linkValue: string | undefined) => { + onFieldChange(formatSourceLink(linkValue), 'source_link'); + }, + [onFieldChange], + ); + + return ( + } + withPadding + withBorder + > + + + + )} + > + + + + + + + ); +} + +export default EAPSourceInformationInput; diff --git a/app/src/views/EapFullForm/EapActivationProcess/i18n.json b/app/src/views/EapFullForm/EapActivationProcess/i18n.json new file mode 100644 index 0000000000..0fc7e038cb --- /dev/null +++ b/app/src/views/EapFullForm/EapActivationProcess/i18n.json @@ -0,0 +1,54 @@ +{ + "namespace": "eapFullForm", + "strings": { + "activationProcessHeading": "EAP Activation Process", + "activationProcessTooltip": "It is crucial to select early actions that have the most potential to reduce the identified risks(s) and are feasible to implement given the lead time of the forecast. It is important to describe briefly: Who was involved? What data was consulted? Was research conducted? Were communities involved? For more guidance see FbF Manual, Chapter 4.2 Select Early Actions.", + "activationProcessTitle": "Early action implementation process", + "activationProcessDescription1": "Include a matrix/flowchart for a quick overview of the early action implementation process.", + "activationProcessDescription2": "Early Describe the step-by-step process from Day 1 to Day X for the implementation of the selected early actions. Indicate the day when the Stop Mechanism would occur. Include all critical and support tasks that are necessary for each of the steps. Each task should indicate the position of the person responsible (including when cash-based actions are planned liaison with the financial service provider)... implementation process", + "activationProcessDescriptionLabel": "Description", + "activationProcessExplanatoryLabel": "Explanatory Note", + "activationProcessRequiredPointsLabel": "Required Points", + "activationImplementationExplanatoryNote": "As a crucial component of the EAP, once the trigger has been reached, everyone involved should be knowledgeable about what will be done, where, when and by whom. The described implementation process shows that each step of the activation has been thought through and considered and that implementation in the lead time available is possible. The set of tasks described in this section should cover all activities from the moment the trigger is reached (Day 1) to the completion of post-impact surveys (Day X).", + "activationImplementationRequiredPoint1": "Include a matrix/flowchart for a quick overview of the early action implementation process.", + "activationImplementationRequiredPoint2": "Describe the step-by-step process from Day 1 to Day X for the implementation of the selected early actions. Indicate the day when the Stop Mechanism would occur. Include all critical and support tasks that are necessary for each of the steps. Each task should indicate the position of the person responsible (including when cash-based actions are planned liaison with the financial service provider).", + "activationImplementationRequiredPoint3": "For each action, include at which level it will take place (HQ, branch, community).", + "activationImplementationRequiredPoint4": "Each NS should have a detailed version of this process, including communication flows, for each task and the name of the person responsible with their contact information. This document should be regularly updated.", + "activationProcessUploadLabel": "Upload", + "activationTriggerTitle": "Trigger activation system", + "activationTriggerDescription1": "Describe the automatic system used to monitor the forecasts, generate the intervention map and send the alert message when the trigger is reached.", + "activationTriggerDescription2": "If this automatic system does not yet exist, explain how forecasts will be monitored, intervention maps generated and how the relevant actors will be informed that the trigger has been reached.", + "activationTriggerDescription3": "Indicate who gives the signal to start the activation.", + "activationTriggerExplanatoryNote": "The activation process starts with the message that the trigger has been reached (on Day 1). Ideally, there is a system in place to automatically monitor the forecasts and send an automatic message of alert to relevant actors as soon as a trigger is reached. It is expected that this will be executed by the national meteorological office and/or national DRM authority. If this automatic system does not exist, a mechanism needs to be in place to monitor the forecasts and alert relevant actors as soon as a trigger is reached to initiate the early actions.", + "activationTriggerRequiredPoint1": "Describe the automatic system used to monitor the forecasts, generate the intervention map and send the alert message when the trigger is reached.", + "activationTriggerRequiredPoint2": "If this automatic system does not yet exist, explain how forecasts will be monitored, intervention maps generated and how the relevant actors will be informed that the trigger has been reached.", + "activationTriggerRequiredPoint3": "Indicate who gives the signal to start the activation.", + "activationPeopleTargetedTitle": "People Targeted", + "activationPeopleTargetedDescription": "Specify number of people targeted", + "activationSelectionPopulationTitle": "Selection of target population", + "activationSelectionDescription1": "Provide a short summary of the target population, (the number, location etc.)", + "activationSelectionDescription2": "Describe how the target population will be selected, with a special focus on feasibility in the short period of time between forecast and event", + "activationSelectionDescription3": "If the EAP is intending to use Social Protection systems or other government beneficiary databases, indicate how the potential number of targeted households be selected", + "activationSelectionExplanatoryNote": "FbF aims to protect the most vulnerable from the impact of extreme weather events. Based on the analysis on vulnerability and exposure (in section 3) and on the described mechanism for identifying intervention areas/communities (in section 4- Intervention area), it needs to be clear, how vulnerability criteria and impact forecasts will be applied to determine who will be targeted.", + "activationStopMechanismTitle": "Stop Mechanism", + "activationStopMechanismDescription1": "Indicate on which day of activation the stop mechanism is foreseen, and who is responsible to give the signal to stop.", + "activationStopMechanismDescription2": "Describe when the stop mechanism begins and whether in-kind/cash distribution would be stopped or not. For cash actions cancelled, how would this be coordinated with the financial service provider? For in-kind distribution, what would happen with the perishable items?", + "activationStopMechanismDescription3": "Explain how it would be communicated to communities and stakeholders that the activities are being stopped.", + "activationStopMechanismExplanatoryNote": "For forecast triggers with a lead time of more than three days, the EAP should include the description of a stop mechanism. This means that if a later forecast – prior to the start of activities (related to the early action(s)) shows that the event is no longer likely to occur, the activation of the EAP will be stopped to avoid generating further use of resources. For example, if the 6-day forecast on Day 1 indicates high risk of heavy rainfall and thereby triggers the activation and the new 6-day-forecast released on Day 3 shows that the risk has significantly lowered, the trigger level is no longer reached. If the start of distributions was planned for Day 4, activation should be stopped. Items that have been purchased based on the trigger being reached and are not distributed due to the stop mechanism should be stored in the warehouse for a future activation. For forecast triggers with a lead time of less than 3 days, the EAP should include the description of what the National Society would do if the forecast changes in strength or location within the last three days before the event.", + "activationAttachFilesTitle": "Attach Relevant Files", + "activationAttachFilesDescription": "Attach any additional maps, documentation, files, images, etc.", + "activationSourceOfInformationTitle": "Sources of Information", + "activationSourceOfInformationAddNewLabel": "Add New Source of Information", + "activationSelectImagesLabel": "Select images", + "activationImageCountLabel": "5 images max(optional)", + "activationSourceOfInformationDescription": "Add the description of the sources one at a time. If the source has a link, add in the second field.", + "activationSectionCriteriaButtonLabel": "Section quality criteria", + "activationSectionHeading": "Quality Criteria: EAP activation process", + "activationSectionCriteriaIntroduction1": "There is a mechanism in place to monitor the forecasts (ad /or trigger related indicators) and alert relevant actors as soon as a trigger is reached to initiate the early actions. This implies that the process to trigger the FbF system is clearly understood by all the key staff of the NS and relevant partners.", + "activationSectionCriteriaComment1": "Ideally, there is a system in place to automatically monitor the forecasts and send an automatic message of alert to relevant actors as soon as a trigger is reached. It is expected that this will be executed by the national meteorological office and/or national DRM authority. If this automatic system does not exist, a mechanism needs to be in place to monitor the forecasts/indicators and alert relevant actors as soon as a trigger is reached to initiate the early actions\nIf the trigger is based on a combination of multiple indicators (e.g. for slow onset hazard) and no suitable product exists yet, the EAP needs to explain who will provide the data and how it will be combined and analyzed. This may need to be a consortium of institutions, each providing pieces of information, therefore a clear communication mechanism is vital.\nAny risk (e.g. certain data is not collected in time) and mitigation measures (e.g.MOU) should be outlined.", + "activationSectionCriteriaIntroduction2": "The EAP clearly explains how the target beneficiaries within the intervention areas will be selected.", + "activationSectionCriteriaComment2": "Once an intervention area has been identified, the NS still has to have a clear process to select which households in that area it will provide assistance to. The selection process needs to be feasible within the lead time.", + "activationSectionCriteriaIntroduction3": "The EAP includes the description of a stop mechanism for forecast triggers with a lead time of more than three days. For forecast triggers with a lead time of less than 3 days, the EAP should include the description of what the National Society would do if the forecast changes in strength or location within the last three days before the event.", + "activationSectionCriteriaComment3": "If the forecast triggers action, but then in subsequent days the forecast reduces below the trigger, the action should be able to stop. Exceptions might be accepted if the trigger chosen has a very high probability.\nIn some cases, a stop mechanism may not be possible (very short lead time or limited frequency of forecast for seasonal forecast)" + } +} diff --git a/app/src/views/EapFullForm/EapActivationProcess/index.tsx b/app/src/views/EapFullForm/EapActivationProcess/index.tsx new file mode 100644 index 0000000000..92715b08ec --- /dev/null +++ b/app/src/views/EapFullForm/EapActivationProcess/index.tsx @@ -0,0 +1,411 @@ +import { useCallback } from 'react'; +import { CheckboxMultipleBlankFillIcon } from '@ifrc-go/icons'; +import { + Button, + Heading, + InfoPopup, + InlineLayout, + InputSection, + ListView, + Modal, + NumberInput, + TextArea, + TextOutput, +} from '@ifrc-go/ui'; +import { + useBooleanState, + useTranslation, +} from '@ifrc-go/ui/hooks'; +import { randomString } from '@togglecorp/fujs'; +import { + type EntriesAsList, + type Error, + getErrorObject, + getErrorString, + useFormArray, +} from '@togglecorp/toggle-form'; + +import GoMultiFileInput from '#components/domain/GoMultiFileInput'; +import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput'; +import NonFieldError from '#components/NonFieldError'; +import TabPage from '#components/TabPage'; + +import EAPSourceInformationInput, { type SourceInformationFormFields } from '../EAPSourceInformationInput'; +import { type PartialEapFullFormType } from '../schema'; + +import i18n from './i18n.json'; + +interface Props { + value: PartialEapFullFormType; + setFieldValue: (...entries: EntriesAsList) => void; + error: Error | undefined; + disabled?: boolean; + fileIdToUrlMap: Record; + setFileIdToUrlMap?: React.Dispatch< + React.SetStateAction> + >; + readOnly?: boolean; +} + +function EapActivationProcess(props: Props) { + const { + value, + setFieldValue, + error: formError, + disabled, + fileIdToUrlMap, + setFileIdToUrlMap, + readOnly, + } = props; + + const strings = useTranslation(i18n); + + const error = getErrorObject(formError); + + const { + setValue: onRiskSourceInformationChange, + removeValue: onRiskSourceInformationRemove, + } = useFormArray< + 'activation_process_source_of_information', + SourceInformationFormFields + >('activation_process_source_of_information', setFieldValue); + + const [ + showQualityCriteria, + { + setTrue: setShowQualityCriteriaTrue, + setFalse: setShowQualityCriteriaFalse, + }, + ] = useBooleanState(false); + + const handleSourceInformationAdd = useCallback(() => { + const newSourceInformationItem: SourceInformationFormFields = { + client_id: randomString(), + }; + + setFieldValue( + (oldValue: SourceInformationFormFields[] | undefined) => [ + ...(oldValue ?? []), + newSourceInformationItem, + ], + 'activation_process_source_of_information' as const, + ); + }, [setFieldValue]); + + return ( + + )} + > + {strings.activationSectionCriteriaButtonLabel} + + )} + /> + + + {strings.activationProcessHeading} + + + + + + + +
  • {strings.activationImplementationRequiredPoint1}
    • +
  • {strings.activationImplementationRequiredPoint2}
    • +
  • {strings.activationImplementationRequiredPoint3}
    • +
  • {strings.activationImplementationRequiredPoint4}
    • + + )} + /> +     + )} + description={( +
      +
    • {strings.activationProcessDescription1}
      • +
    • {strings.activationProcessDescription2}
      • +
    + )} + withAsteriskOnTitle + > +