Skip to content

Commit 2d7a6a5

Browse files
frozenheliumfrozenhelium
committed
Make all PER forms readOnly in case of language mismatch
1 parent 8df572c commit 2d7a6a5

File tree

9 files changed

+70
-37
lines changed

9 files changed

+70
-37
lines changed

‎.changeset/soft-dragons-change.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"go-web-app": patch
3+
---
4+
5+
- Enable ability to start PER in IFRC supported lanugages
6+
- Make PER forms readOnly in case of language mismatch

‎app/src/components/domain/LanguageMismatchMessage/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ interface Props {
1313

1414
// FIXME: typings should be fixed in the server
1515
// this should be of type Language
16-
originalLanguage: string;
16+
originalLanguage: string | undefined;
1717
}
1818

1919
function LanguageMismatchMessage(props: Props) {
2020
const strings = useTranslation(i18n);
2121

2222
const {
2323
title = strings.languageMismatchErrorTitle,
24-
originalLanguage,
24+
originalLanguage = 'en',
2525
} = props;
2626

2727
return (

‎app/src/utils/outletContext.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,5 @@ export interface PerProcessOutletContext {
4141
statusResponse: PerProcessStatusResponse | undefined,
4242
refetchStatusResponse: () => void,
4343
actionDivRef: React.RefObject<HTMLDivElement>,
44+
readOnly?: boolean;
4445
}

‎app/src/views/PerAssessmentForm/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export function Component() {
8888
statusResponse,
8989
refetchStatusResponse,
9090
actionDivRef,
91+
readOnly: readOnlyFromContext,
9192
} = useOutletContext<PerProcessOutletContext>();
9293

9394
const {
@@ -361,7 +362,8 @@ export function Component() {
361362
|| fetchingPerAssessment
362363
|| fetchingStatus;
363364

364-
const readOnlyMode = isNotDefined(currentPerStep)
365+
const readOnlyMode = readOnlyFromContext
366+
|| isNotDefined(currentPerStep)
365367
|| currentPerStep !== PER_PHASE_ASSESSMENT;
366368

367369
const error = useMemo(

‎app/src/views/PerOverviewForm/index.tsx‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,9 @@ export function Component() {
8585
statusResponse,
8686
actionDivRef,
8787
refetchStatusResponse,
88+
readOnly,
8889
} = useOutletContext<PerProcessOutletContext>();
90+
8991
const { per_overviewassessmentmethods } = useGlobalEnums();
9092
const userMe = useUserMe();
9193

@@ -101,6 +103,7 @@ export function Component() {
101103
validate,
102104
} = useForm(
103105
overviewSchema,
106+
// FIXME: use value from enum
104107
{ value: { assessment_method: 'per' } },
105108
isSettingUpProcess,
106109
);
@@ -338,10 +341,10 @@ export function Component() {
338341
const error = getErrorObject(formError);
339342

340343
const currentPerStep = statusResponse?.phase;
341-
const submissionDisabled = isDefined(currentPerStep)
342-
&& currentPerStep !== PER_PHASE_OVERVIEW;
344+
const submissionDisabled = readOnly
345+
|| (isDefined(currentPerStep) && currentPerStep !== PER_PHASE_OVERVIEW);
343346

344-
const partialReadonlyMode = value?.is_draft === false;
347+
const partialReadOnly = value?.is_draft === false;
345348

346349
const dataPending = fetchingPerOverview;
347350
const savePerPending = createPerPending || updatePerPending;
@@ -367,7 +370,7 @@ export function Component() {
367370
<Container
368371
headerElementRef={formContentRef}
369372
className={styles.overviewForm}
370-
heading={partialReadonlyMode
373+
heading={partialReadOnly
371374
? strings.overviewEditHeading
372375
: strings.overviewSetupHeading}
373376
headingLevel={2}
@@ -394,7 +397,7 @@ export function Component() {
394397
name={undefined}
395398
variant="secondary"
396399
onClick={handleSave}
397-
disabled={savePerPending}
400+
disabled={savePerPending || readOnly}
398401
>
399402
{strings.saveButtonLabel}
400403
</Button>
@@ -420,7 +423,7 @@ export function Component() {
420423
onChange={setFieldValue}
421424
value={value?.country}
422425
error={getErrorString(error?.country)}
423-
readOnly={partialReadonlyMode}
426+
readOnly={partialReadOnly || readOnly}
424427
disabled={disabled}
425428
regions={!userMe?.is_superuser
426429
? userMe?.is_per_admin_for_regions : undefined}
@@ -449,7 +452,7 @@ export function Component() {
449452
onChange={setFieldValue}
450453
value={value?.date_of_orientation}
451454
error={error?.date_of_orientation}
452-
readOnly={partialReadonlyMode}
455+
readOnly={partialReadOnly || readOnly}
453456
disabled={disabled}
454457
/>
455458
</InputSection>
@@ -467,6 +470,7 @@ export function Component() {
467470
setFileIdToUrlMap={setFileIdToUrlMap}
468471
error={getErrorString(error?.orientation_documents)}
469472
disabled={disabled}
473+
readOnly={readOnly}
470474
>
471475
{strings.uploadButtonLabel}
472476
</GoMultiFileInput>
@@ -491,7 +495,7 @@ export function Component() {
491495
onChange={setFieldValue}
492496
value={value?.date_of_assessment}
493497
error={error?.date_of_assessment}
494-
readOnly={partialReadonlyMode}
498+
readOnly={partialReadOnly || readOnly}
495499
disabled={disabled}
496500
/>
497501
</InputSection>
@@ -509,7 +513,7 @@ export function Component() {
509513
onChange={setFieldValue}
510514
value={value?.type_of_assessment}
511515
error={error?.type_of_assessment}
512-
readOnly={partialReadonlyMode}
516+
readOnly={partialReadOnly || readOnly}
513517
disabled={disabled || perOptionsPending}
514518
/>
515519
</InputSection>
@@ -554,7 +558,7 @@ export function Component() {
554558
value={value?.branches_involved}
555559
onChange={setFieldValue}
556560
error={error?.branches_involved}
557-
readOnly={partialReadonlyMode}
561+
readOnly={partialReadOnly || readOnly}
558562
disabled={disabled}
559563
/>
560564
</InputSection>
@@ -571,7 +575,7 @@ export function Component() {
571575
labelSelector={stringValueSelector}
572576
onChange={setFieldValue}
573577
error={error?.assessment_method}
574-
readOnly={partialReadonlyMode}
578+
readOnly={partialReadOnly || readOnly}
575579
disabled={disabled}
576580
/>
577581
</InputSection>
@@ -585,7 +589,7 @@ export function Component() {
585589
value={value?.assess_preparedness_of_country}
586590
onChange={setFieldValue}
587591
error={error?.assess_preparedness_of_country}
588-
readOnly={partialReadonlyMode}
592+
readOnly={partialReadOnly || readOnly}
589593
disabled={disabled}
590594
/>
591595
</InputSection>
@@ -599,7 +603,7 @@ export function Component() {
599603
value={value.assess_urban_aspect_of_country}
600604
onChange={setFieldValue}
601605
error={error?.assess_urban_aspect_of_country}
602-
readOnly={partialReadonlyMode}
606+
readOnly={partialReadOnly || readOnly}
603607
disabled={disabled}
604608
/>
605609
</InputSection>
@@ -614,7 +618,7 @@ export function Component() {
614618
value={value?.assess_climate_environment_of_country}
615619
onChange={setFieldValue}
616620
error={error?.assess_climate_environment_of_country}
617-
readOnly={partialReadonlyMode}
621+
readOnly={partialReadOnly || readOnly}
618622
disabled={disabled}
619623
/>
620624
</InputSection>
@@ -660,6 +664,7 @@ export function Component() {
660664
error={error?.workplan_development_date}
661665
onChange={setFieldValue}
662666
disabled={disabled}
667+
readOnly={readOnly}
663668
/>
664669
</InputSection>
665670
<InputSection
@@ -673,6 +678,7 @@ export function Component() {
673678
value={value?.workplan_revision_date}
674679
error={error?.workplan_revision_date}
675680
disabled={disabled}
681+
readOnly={readOnly}
676682
/>
677683
</InputSection>
678684
</Container>
@@ -696,6 +702,7 @@ export function Component() {
696702
onChange={setFieldValue}
697703
error={error?.ns_focal_point_name}
698704
disabled={disabled}
705+
readOnly={readOnly}
699706
/>
700707
<TextInput
701708
label={strings.focalPointEmailInputLabel}
@@ -704,6 +711,7 @@ export function Component() {
704711
onChange={setFieldValue}
705712
error={error?.ns_focal_point_email}
706713
disabled={disabled}
714+
readOnly={readOnly}
707715
/>
708716
<TextInput
709717
label={strings.focalPointPhoneNumberInputLabel}
@@ -712,6 +720,7 @@ export function Component() {
712720
onChange={setFieldValue}
713721
error={error?.ns_focal_point_phone}
714722
disabled={disabled}
723+
readOnly={readOnly}
715724
/>
716725
</InputSection>
717726
<InputSection
@@ -727,6 +736,7 @@ export function Component() {
727736
onChange={setFieldValue}
728737
error={error?.ns_second_focal_point_name}
729738
disabled={disabled}
739+
readOnly={readOnly}
730740
/>
731741
<TextInput
732742
label={strings.focalPointEmailInputLabel}
@@ -735,6 +745,7 @@ export function Component() {
735745
onChange={setFieldValue}
736746
error={error?.ns_second_focal_point_email}
737747
disabled={disabled}
748+
readOnly={readOnly}
738749
/>
739750
<TextInput
740751
label={strings.focalPointPhoneNumberInputLabel}
@@ -743,6 +754,7 @@ export function Component() {
743754
onChange={setFieldValue}
744755
error={error?.ns_second_focal_point_phone}
745756
disabled={disabled}
757+
readOnly={readOnly}
746758
/>
747759
</InputSection>
748760
<InputSection
@@ -757,6 +769,7 @@ export function Component() {
757769
onChange={setFieldValue}
758770
error={error?.partner_focal_point_name}
759771
disabled={disabled}
772+
readOnly={readOnly}
760773
/>
761774
<TextInput
762775
label={strings.focalPointEmailInputLabel}
@@ -765,6 +778,7 @@ export function Component() {
765778
onChange={setFieldValue}
766779
error={error?.partner_focal_point_email}
767780
disabled={disabled}
781+
readOnly={readOnly}
768782
/>
769783
<TextInput
770784
label={strings.focalPointPhoneNumberInputLabel}
@@ -773,6 +787,7 @@ export function Component() {
773787
onChange={setFieldValue}
774788
error={error?.partner_focal_point_phone}
775789
disabled={disabled}
790+
readOnly={readOnly}
776791
/>
777792
<TextInput
778793
label={strings.focalPointOrganizationInputLabel}
@@ -781,6 +796,7 @@ export function Component() {
781796
onChange={setFieldValue}
782797
error={error?.partner_focal_point_organization}
783798
disabled={disabled}
799+
readOnly={readOnly}
784800
/>
785801
</InputSection>
786802
<InputSection
@@ -795,6 +811,7 @@ export function Component() {
795811
onChange={setFieldValue}
796812
error={error?.facilitator_name}
797813
disabled={disabled}
814+
readOnly={readOnly}
798815
/>
799816
<TextInput
800817
label={strings.focalPointEmailInputLabel}
@@ -803,6 +820,7 @@ export function Component() {
803820
onChange={setFieldValue}
804821
error={error?.facilitator_email}
805822
disabled={disabled}
823+
readOnly={readOnly}
806824
/>
807825
<TextInput
808826
label={strings.focalPointPhoneNumberInputLabel}
@@ -811,6 +829,7 @@ export function Component() {
811829
onChange={setFieldValue}
812830
error={error?.facilitator_phone}
813831
disabled={disabled}
832+
readOnly={readOnly}
814833
/>
815834
<TextInput
816835
label={strings.otherContactMethodInputLabel}
@@ -819,6 +838,7 @@ export function Component() {
819838
onChange={setFieldValue}
820839
error={error?.facilitator_contact}
821840
disabled={disabled}
841+
readOnly={readOnly}
822842
/>
823843
</InputSection>
824844
</Container>

‎app/src/views/PerPrioritizationForm/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export function Component() {
7979
statusResponse,
8080
refetchStatusResponse,
8181
actionDivRef,
82+
readOnly: readOnlyFromContext,
8283
} = useOutletContext<PerProcessOutletContext>();
8384

8485
const {
@@ -335,7 +336,8 @@ export function Component() {
335336
);
336337

337338
const currentPerStep = statusResponse?.phase;
338-
const readOnlyMode = isNotDefined(currentPerStep)
339+
const readOnlyMode = readOnlyFromContext
340+
|| isNotDefined(currentPerStep)
339341
|| currentPerStep < PER_PHASE_PRIORITIZATION;
340342

341343
const sortedFormComponents = useMemo(

‎app/src/views/PerProcessForm/index.tsx‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515

1616
import FormFailedToLoadMessage from '#components/domain/FormFailedToLoadMessage';
1717
import LanguageMismatchMessage from '#components/domain/LanguageMismatchMessage';
18-
import NonEnglishFormCreationMessage from '#components/domain/NonEnglishFormCreationMessage';
1918
import Link from '#components/Link';
2019
import NavigationTab from '#components/NavigationTab';
2120
import Page from '#components/Page';
@@ -61,35 +60,33 @@ export function Component() {
6160
?? getCurrentPerProcessStep(statusResponse)
6261
?? PER_PHASE_OVERVIEW;
6362

63+
const contentOriginalLanguage = statusResponse
64+
?.translation_module_original_language;
65+
const languageMismatch = isDefined(perId)
66+
&& currentLanguage !== contentOriginalLanguage;
67+
68+
const shouldHideForm = isDefined(statusResponseError);
69+
6470
const actionDivRef = useRef<HTMLDivElement>(null);
65-
const outletContext: PerProcessOutletContext = useMemo(
71+
const outletContext = useMemo<PerProcessOutletContext>(
6672
() => ({
6773
fetchingStatus,
6874
statusResponse,
6975
refetchStatusResponse,
7076
actionDivRef,
77+
readOnly: languageMismatch,
7178
}),
72-
[fetchingStatus, statusResponse, refetchStatusResponse, actionDivRef],
79+
[fetchingStatus, statusResponse, refetchStatusResponse, actionDivRef, languageMismatch],
7380
);
7481

75-
// TODO: Use content language from server if applicable
76-
// const contentOriginalLanguage = perOverviewResponse
77-
// ?.translation_module_original_language ?? 'en';
78-
const contentOriginalLanguage = 'en';
79-
const nonEnglishCreate = isNotDefined(perId) && currentLanguage !== 'en';
80-
const languageMismatch = isDefined(perId)
81-
&& currentLanguage !== contentOriginalLanguage;
82-
83-
const shouldHideForm = languageMismatch
84-
|| nonEnglishCreate
85-
|| isDefined(statusResponseError);
86-
8782
return (
8883
<Page
8984
className={styles.perProcessForm}
85+
mainSectionClassName={styles.mainSection}
9086
title={strings.perFormTitle}
9187
heading={strings.perFormHeading}
9288
description={strings.perFormProcessDescription}
89+
contentOriginalLanguage={contentOriginalLanguage}
9390
actions={(
9491
<>
9592
<Link
@@ -144,9 +141,6 @@ export function Component() {
144141
</NavigationTabList>
145142
)}
146143
>
147-
{nonEnglishCreate && (
148-
<NonEnglishFormCreationMessage />
149-
)}
150144
{languageMismatch && (
151145
<LanguageMismatchMessage
152146
originalLanguage={contentOriginalLanguage}

0 commit comments

Comments
 (0)