Skip to content

Commit

Permalink
fix: conditionally display view/edit options based on permissions and…
Browse files Browse the repository at this point in the history 
… hide contact details
  • Loading branch information
@samshara
samshara committed Nov 26, 2024
1 parent 2d5f7db commit d6a5006
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 59 deletions.
27 changes: 24 additions & 3 deletions ...ontextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import CountrySelectInput from '#components/domain/CountrySelectInput';
import NonFieldError from '#components/NonFieldError';
import { environment } from '#config';
import useGlobalEnums from '#hooks/domain/useGlobalEnums';
import usePermissions from '#hooks/domain/usePermissions';
import useAlert from '#hooks/useAlert';
import { getFirstTruthyString } from '#utils/common';
import { VISIBILITY_PUBLIC } from '#utils/constants';
Expand Down Expand Up @@ -129,10 +130,13 @@ function LocalUnitsForm(props: Props) {

const alert = useAlert();
const strings = useTranslation(i18n);
const { isSuperUser, isCountryAdmin } = usePermissions();
const formFieldsContainerRef = useRef<HTMLDivElement>(null);

const { api_visibility_choices: visibilityOptions } = useGlobalEnums();
const { countryId } = useOutletContext<CountryOutletContext>();
const hasAddEditLocalUnitPermission = isCountryAdmin(Number(countryId)) || isSuperUser;

const {
value,
error: formError,
Expand Down Expand Up @@ -317,7 +321,7 @@ function LocalUnitsForm(props: Props) {
<div className={styles.localUnitsForm}>
{readOnly && isDefined(actionsContainerRef.current) && (
<Portal container={actionsContainerRef.current}>
{(environment !== 'production') && (
{hasAddEditLocalUnitPermission && environment !== 'production' && (
<Button
name={undefined}
onClick={onEditButtonClick}
Expand Down Expand Up @@ -483,7 +487,7 @@ function LocalUnitsForm(props: Props) {
error={error?.level}
/>
)}
{value.type !== TYPE_HEALTH_CARE && (
{hasAddEditLocalUnitPermission && value.type !== TYPE_HEALTH_CARE && (
<>
<TextInput
name="focal_person_en"
Expand Down Expand Up @@ -705,8 +709,25 @@ function LocalUnitsForm(props: Props) {
/>
</>
)}
{value.type === TYPE_HEALTH_CARE && (
{hasAddEditLocalUnitPermission && value.type === TYPE_HEALTH_CARE && (
<>
<TextInput
name="focal_person_en"
label={strings.focalPersonEn}
value={value.focal_person_en}
onChange={setFieldValue}
readOnly={readOnly}
error={error?.focal_person_en}
/>
<TextInput
required
label={strings.focalPersonLocal}
name="focal_person_loc"
value={value.focal_person_loc}
onChange={setFieldValue}
readOnly={readOnly}
error={error?.focal_person_loc}
/>
<TextInput
label={strings.focalPointPosition}
name="focal_point_position"
Expand Down
4 changes: 2 additions & 2 deletions ...ws/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/i18n.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"localUnitDetailLastUpdate": "Last updated",
"localUnitDetailFocalPerson": "Focal person",
"localUnitTooltipMoreDetails": "More details",
"localUnitLocalUnitType": "Local unit types",
"localUnitHealthFacilityType": "Health facility types",
"localUnitType": "Local unit type",
"localUnitHealthFacilityType": "Health facility type",
"presentationModeButton":"Presentation mode",
"localUnitDetailEmail": "Email"
}
Expand Down
6 changes: 3 additions & 3 deletions ...ws/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function LocalUnitsMap(props: Props) {
localUnitsOptions,
} = props;
const { countryResponse } = useOutletContext<CountryOutletContext>();

const { isAuthenticated } = useAuth();
const [showLocalUnitModal, {
setTrue: setShowLocalUnitViewModalTrue,
setFalse: setShowLocalUnitViewModalFalse,
Expand All @@ -154,7 +154,6 @@ function LocalUnitsMap(props: Props) {
[filter, countryResponse],
);

const { isAuthenticated } = useAuth();
const { isGuestUser } = usePermissions();

const requestType = useMemo(
Expand Down Expand Up @@ -448,6 +447,7 @@ function LocalUnitsMap(props: Props) {
name=""
variant="tertiary"
onClick={handleLocalUnitHeadingClick}
disabled={!isAuthenticated}
>
{localUnitName}
</Button>
Expand All @@ -470,7 +470,7 @@ function LocalUnitsMap(props: Props) {
value={localUnitAddress}
/>
<TextOutput
label={strings.localUnitLocalUnitType}
label={strings.localUnitType}
strongLabel
value={localUnitDetail?.type_details.name}
/>
Expand Down
5 changes: 3 additions & 2 deletions ...extAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface Props {
localUnitId: number;
isValidated: boolean;
onActionSuccess: () => void;
hasAddEditLocalUnitPermission: boolean;
}

export type LocalUnitValidateResponsePostBody = GoApiResponse<'/api/v2/local-units/{id}/'>;
Expand All @@ -39,6 +40,7 @@ function LocalUnitsTableActions(props: Props) {
localUnitId,
isValidated,
onActionSuccess,
hasAddEditLocalUnitPermission,
} = props;

const { isCountryAdmin, isSuperUser } = usePermissions();
Expand Down Expand Up @@ -89,15 +91,14 @@ function LocalUnitsTableActions(props: Props) {
type="button"
name={localUnitId}
onClick={handleViewLocalUnitClick}
disabled={!hasValidatePermission}
>
{strings.localUnitsView}
</DropdownMenuItem>
<DropdownMenuItem
type="button"
name={localUnitId}
onClick={handleEditLocalUnitClick}
disabled={!hasValidatePermission}
disabled={!hasAddEditLocalUnitPermission}
>
{strings.localUnitsEdit}
</DropdownMenuItem>
Expand Down
151 changes: 104 additions & 47 deletions .../CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
isNotDefined,
} from '@togglecorp/fujs';

import usePermissions from '#hooks/domain/usePermissions';
import useFilterState from '#hooks/useFilterState';
import { getFirstTruthyString } from '#utils/common';
import { type CountryOutletContext } from '#utils/outletContext';
Expand Down Expand Up @@ -52,6 +53,8 @@ function LocalUnitsTable(props: Props) {

const strings = useTranslation(i18n);
const { countryResponse } = useOutletContext<CountryOutletContext>();
const { isSuperUser, isCountryAdmin } = usePermissions();
const hasAddEditLocalUnitPermission = isCountryAdmin(countryResponse?.id) || isSuperUser;

const {
limit,
Expand Down Expand Up @@ -89,57 +92,111 @@ function LocalUnitsTable(props: Props) {
});

const columns = useMemo(
() => ([
createStringColumn<LocalUnitsTableListItem, number>(
'branch_name',
strings.localUnitsTableName,
(item) => getFirstTruthyString(item.local_branch_name, item.english_branch_name),
),
createStringColumn<LocalUnitsTableListItem, number>(
'address',
strings.localUnitsTableAddress,
(item) => getFirstTruthyString(item.address_loc, item.address_en),
),
createStringColumn<LocalUnitsTableListItem, number>(
'type',
strings.localUnitsTableType,
(item) => item.type_details.name,
{ columnClassName: styles.type },
),
createStringColumn<LocalUnitsTableListItem, number>(
'focal',
strings.localUnitsTableFocal,
(item) => getFirstTruthyString(item.focal_person_loc, item.focal_person_en),
),
createStringColumn<LocalUnitsTableListItem, number>(
'phone',
strings.localUnitsTablePhoneNumber,
(item) => item.phone,
),
createStringColumn<LocalUnitsTableListItem, number>(
'email',
strings.localUnitsTableEmail,
(item) => item.email,
),
createElementColumn<LocalUnitsTableListItem, number, LocalUnitsTableActionsProps>(
'actions',
'',
LocalUnitsTableActions,
// FIXME: this should be added to a callback
(_, item) => ({
countryId: item.country,
localUnitId: item.id,
isValidated: item.validated,
localUnitName: getFirstTruthyString(
() => {
if (hasAddEditLocalUnitPermission) {
return [
createStringColumn<LocalUnitsTableListItem, number>(
'branch_name',
strings.localUnitsTableName,
(item) => getFirstTruthyString(
item.local_branch_name,
item.english_branch_name,
),
),
createStringColumn<LocalUnitsTableListItem, number>(
'address',
strings.localUnitsTableAddress,
(item) => getFirstTruthyString(item.address_loc, item.address_en),
),
createStringColumn<LocalUnitsTableListItem, number>(
'type',
strings.localUnitsTableType,
(item) => item.type_details.name,
{ columnClassName: styles.type },
),
createStringColumn<LocalUnitsTableListItem, number>(
'focal',
strings.localUnitsTableFocal,
(item) => getFirstTruthyString(
item.focal_person_loc,
item.focal_person_en,
),
),
createStringColumn<LocalUnitsTableListItem, number>(
'phone',
strings.localUnitsTablePhoneNumber,
(item) => item.phone,
),
createStringColumn<LocalUnitsTableListItem, number>(
'email',
strings.localUnitsTableEmail,
(item) => item.email,
),
createElementColumn<
LocalUnitsTableListItem,
number,
LocalUnitsTableActionsProps
>(
'actions',
'',
LocalUnitsTableActions,
// FIXME: this should be added to a callback
(_, item) => ({
countryId: item.country,
localUnitId: item.id,
isValidated: item.validated,
localUnitName: getFirstTruthyString(
item.local_branch_name,
item.english_branch_name,
),
onActionSuccess: refetchLocalUnits,
}),
{ columnClassName: styles.actions },
),
];
}
return [
createStringColumn<LocalUnitsTableListItem, number>(
'branch_name',
strings.localUnitsTableName,
(item) => getFirstTruthyString(
item.local_branch_name,
item.english_branch_name,
),
onActionSuccess: refetchLocalUnits,
}),
{ columnClassName: styles.actions },
),
]),
),
createStringColumn<LocalUnitsTableListItem, number>(
'address',
strings.localUnitsTableAddress,
(item) => getFirstTruthyString(item.address_loc, item.address_en),
),
createStringColumn<LocalUnitsTableListItem, number>(
'type',
strings.localUnitsTableType,
(item) => item.type_details.name,
{ columnClassName: styles.type },
),
createElementColumn<LocalUnitsTableListItem, number, LocalUnitsTableActionsProps>(
'actions',
'',
LocalUnitsTableActions,
// FIXME: this should be added to a callback
(_, item) => ({
countryId: item.country,
localUnitId: item.id,
isValidated: item.validated,
localUnitName: getFirstTruthyString(
item.local_branch_name,
item.english_branch_name,
),
onActionSuccess: refetchLocalUnits,
hasAddEditLocalUnitPermission,
}),
{ columnClassName: styles.actions },
),
];
},
[
hasAddEditLocalUnitPermission,
strings.localUnitsTableAddress,
strings.localUnitsTableName,
strings.localUnitsTableType,
Expand Down
4 changes: 2 additions & 2 deletions app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ function NationalSocietyLocalUnits(props: Props) {

const strings = useTranslation(i18n);

const hasAddLocalUnitPermission = isCountryAdmin(countryResponse?.id) || isSuperUser;
const hasAddEditLocalUnitPermission = isCountryAdmin(countryResponse?.id) || isSuperUser;

useEffect(() => {
document.addEventListener('fullscreenchange', handleFullScreenChange);
Expand Down Expand Up @@ -148,7 +148,7 @@ function NationalSocietyLocalUnits(props: Props) {
/>
)}
// NOTE: disable local units add/edit for now
actions={hasAddLocalUnitPermission && (environment !== 'production') && (
actions={hasAddEditLocalUnitPermission && (environment !== 'production') && (
<Button
name={undefined}
variant="secondary"
Expand Down

0 comments on commit d6a5006

Please sign in to comment.