Skip to content

Commit e1eb4d0

Browse files
authored
Merge pull request #383 from IFRCGo/feature/add-ops-update-export-budget-preview
Add budget preview in the ops update export
2 parents 3d7b78e + 6c3bed0 commit e1eb4d0

File tree

13 files changed

+148
-141
lines changed

13 files changed

+148
-141
lines changed

src/components/Button/styles.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@
4343

4444
&.primary,
4545
&.secondary {
46+
.children {
47+
text-align: center;
48+
}
49+
4650
&.no-spacing {
4751
--padding: 0;
4852
}

src/views/DrefApplicationForm/Actions/index.tsx

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -228,21 +228,22 @@ function Actions(props: Props) {
228228
/>
229229
</InputSection>
230230
)}
231-
<InputSection>
232-
<div className={styles.addNsActionContainer}>
233-
<SelectInput
234-
className={styles.input}
235-
label={strings.drefFormNationalSocietiesActionsLabel}
236-
name={undefined}
237-
options={filteredNsActionOptions}
238-
value={selectedNsAction}
239-
keySelector={nsActionKeySelector}
240-
labelSelector={stringValueSelector}
241-
onChange={setSelectedNsAction}
242-
disabled={disabled}
243-
/>
231+
<InputSection
232+
numPreferredColumns={2}
233+
title=" "
234+
>
235+
<SelectInput
236+
label={strings.drefFormNationalSocietiesActionsLabel}
237+
name={undefined}
238+
options={filteredNsActionOptions}
239+
value={selectedNsAction}
240+
keySelector={nsActionKeySelector}
241+
labelSelector={stringValueSelector}
242+
onChange={setSelectedNsAction}
243+
disabled={disabled}
244+
/>
245+
<div className={styles.addButtonContainer}>
244246
<Button
245-
className={styles.action}
246247
variant="secondary"
247248
name={selectedNsAction}
248249
onClick={handleNsActionAddButtonClick}
@@ -407,19 +408,22 @@ function Actions(props: Props) {
407408
</GoSingleFileInput>
408409
</InputSection>
409410
)}
410-
<InputSection>
411-
<div className={styles.addNeedContainer}>
412-
<SelectInput
413-
className={styles.input}
414-
label={strings.drefFormActionFieldsLabel}
415-
name={undefined}
416-
onChange={setSelectedNeed}
417-
keySelector={needOptionKeySelector}
418-
labelSelector={stringValueSelector}
419-
options={filteredNeedOptions}
420-
value={selectedNeed}
421-
disabled={disabled}
422-
/>
411+
<InputSection
412+
title=" "
413+
numPreferredColumns={2}
414+
>
415+
<SelectInput
416+
className={styles.input}
417+
label={strings.drefFormActionFieldsLabel}
418+
name={undefined}
419+
onChange={setSelectedNeed}
420+
keySelector={needOptionKeySelector}
421+
labelSelector={stringValueSelector}
422+
options={filteredNeedOptions}
423+
value={selectedNeed}
424+
disabled={disabled}
425+
/>
426+
<div className={styles.addButtonContainer}>
423427
<Button
424428
className={styles.action}
425429
variant="secondary"

src/views/DrefApplicationForm/Actions/styles.module.css

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,7 @@
33
flex-direction: column;
44
gap: var(--go-ui-spacing-2xl);
55

6-
.add-need-container,
7-
.add-ns-action-container {
8-
display: flex;
9-
align-items: center;
10-
gap: var(--go-ui-spacing-md);
11-
flex-wrap: wrap;
12-
13-
.input {
14-
flex-grow: 1;
15-
}
16-
17-
.action {
18-
flex-shrink: 0;
19-
}
6+
.add-button-container {
7+
align-self: end;
208
}
219
}

src/views/DrefFinalReportForm/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,7 @@ export function Component() {
327327
const {
328328
retrigger: getDrefUsers,
329329
} = useRequest({
330+
skip: isNotDefined(drefId),
330331
url: '/api/v2/dref-share-user/{id}/',
331332
pathVariables: { id: Number(drefId) },
332333
onSuccess: (response) => {

src/views/DrefOperationalUpdateExport/i18n.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"countryLabel": "Country",
88
"hazardLabel": "Hazard",
99
"typeOfDrefLabel": "Type of DREF",
10+
"drefExportDownloadBudget": "Click here to download the budget file",
1011
"crisisCategoryLabel": "Crisis Category",
1112
"eventOnsetLabel": "Event Onset",
1213
"drefAllocationLabel": "Total DREF Allocation",

src/views/DrefOperationalUpdateExport/index.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,8 @@ export function Component() {
258258
|| pmerDefined
259259
|| communicationDefined;
260260

261+
const showBudgetOverview = isTruthyString(drefResponse?.budget_file_details?.file);
262+
261263
const nsContactText = [
262264
drefResponse?.national_society_contact_name,
263265
drefResponse?.national_society_contact_title,
@@ -1034,6 +1036,29 @@ export function Component() {
10341036
)}
10351037
</>
10361038
)}
1039+
{showBudgetOverview && (
1040+
<>
1041+
<div className={styles.pageBreak} />
1042+
<Container
1043+
heading={strings.budgetOverSectionHeading}
1044+
headingLevel={2}
1045+
>
1046+
<Image
1047+
imgElementClassName={styles.budgetFilePreview}
1048+
src={drefResponse?.budget_file_preview}
1049+
/>
1050+
</Container>
1051+
<Container>
1052+
<Link
1053+
href={drefResponse?.budget_file_details?.file}
1054+
external
1055+
withUnderline
1056+
>
1057+
{strings.drefExportDownloadBudget}
1058+
</Link>
1059+
</Container>
1060+
</>
1061+
)}
10371062
{showContactsSection && (
10381063
<>
10391064
<div className={styles.pageBreak} />

src/views/DrefOperationalUpdateExport/styles.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,13 @@
214214
}
215215
}
216216

217+
.budget-file-preview {
218+
height: 240mm;
219+
object-fit: contain;
220+
object-position: top center;
221+
max-height: unset;
222+
}
223+
217224
.contact-list {
218225
display: flex;
219226
flex-direction: column;

src/views/DrefOperationalUpdateForm/Actions/index.tsx

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,9 @@ function Actions(props: Props) {
230230
/>
231231
</InputSection>
232232
)}
233-
<InputSection>
233+
<InputSection
234+
title=" "
235+
>
234236
<MultiImageWithCaptionInput
235237
name="photos_file"
236238
url="/api/v2/dref-files/multiple/"
@@ -242,20 +244,23 @@ function Actions(props: Props) {
242244
label={strings.operationalUpdateCurrentNsImageLabel}
243245
disabled={disabled}
244246
/>
245-
<div className={styles.addNsActionContainer}>
246-
<SelectInput
247-
className={styles.input}
248-
label={strings.drefFormNationalSocietiesActionsLabel}
249-
name={undefined}
250-
options={filteredNsActionOptions}
251-
value={selectedNsAction}
252-
keySelector={nsActionKeySelector}
253-
labelSelector={stringValueSelector}
254-
onChange={setSelectedNsAction}
255-
disabled={disabled}
256-
/>
247+
</InputSection>
248+
<InputSection
249+
numPreferredColumns={2}
250+
title=" "
251+
>
252+
<SelectInput
253+
label={strings.drefFormNationalSocietiesActionsLabel}
254+
name={undefined}
255+
options={filteredNsActionOptions}
256+
value={selectedNsAction}
257+
keySelector={nsActionKeySelector}
258+
labelSelector={stringValueSelector}
259+
onChange={setSelectedNsAction}
260+
disabled={disabled}
261+
/>
262+
<div className={styles.addButtonContainer}>
257263
<Button
258-
className={styles.action}
259264
variant="secondary"
260265
name={selectedNsAction}
261266
onClick={handleNsActionAddButtonClick}
@@ -401,7 +406,7 @@ function Actions(props: Props) {
401406
>
402407
{/* NOTE: Only when RESPONSE */}
403408
{value?.type_of_dref !== TYPE_IMMINENT && (
404-
<InputSection>
409+
<InputSection title=" ">
405410
<GoSingleFileInput
406411
name="assessment_report"
407412
accept=".pdf, .docx, .pptx"
@@ -418,21 +423,22 @@ function Actions(props: Props) {
418423
</GoSingleFileInput>
419424
</InputSection>
420425
)}
421-
<InputSection>
422-
<div className={styles.addNeedContainer}>
423-
<SelectInput
424-
className={styles.input}
425-
label={strings.drefFormActionFieldsLabel}
426-
name={undefined}
427-
onChange={setSelectedNeed}
428-
keySelector={needOptionKeySelector}
429-
labelSelector={stringValueSelector}
430-
options={filteredNeedOptions}
431-
value={selectedNeed}
432-
disabled={disabled}
433-
/>
426+
<InputSection
427+
title=" "
428+
numPreferredColumns={2}
429+
>
430+
<SelectInput
431+
label={strings.drefFormActionFieldsLabel}
432+
name={undefined}
433+
onChange={setSelectedNeed}
434+
keySelector={needOptionKeySelector}
435+
labelSelector={stringValueSelector}
436+
options={filteredNeedOptions}
437+
value={selectedNeed}
438+
disabled={disabled}
439+
/>
440+
<div className={styles.addButtonContainer}>
434441
<Button
435-
className={styles.action}
436442
variant="secondary"
437443
name={selectedNeed}
438444
onClick={handleNeedAddButtonClick}

src/views/DrefOperationalUpdateForm/Actions/styles.module.css

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,7 @@
33
flex-direction: column;
44
gap: var(--go-ui-spacing-2xl);
55

6-
.add-need-container,
7-
.add-ns-action-container {
8-
display: flex;
9-
align-items: center;
10-
gap: var(--go-ui-spacing-md);
11-
flex-wrap: wrap;
12-
13-
.input {
14-
flex-grow: 1;
15-
}
16-
17-
.action {
18-
flex-shrink: 0;
19-
}
6+
.add-button-container {
7+
align-self: end;
208
}
219
}

src/views/DrefOperationalUpdateForm/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,7 @@ export function Component() {
418418
const {
419419
retrigger: getDrefUsers,
420420
} = useRequest({
421+
skip: isNotDefined(drefId),
421422
url: '/api/v2/dref-share-user/{id}/',
422423
pathVariables: { id: Number(drefId) },
423424
onSuccess: (response) => {

0 commit comments

Comments
 (0)