Skip to content

Commit

Permalink
refactor: migrated bed tag components to use the modal system
Browse files Browse the repository at this point in the history
  • Loading branch information
@amosmachora
amosmachora committed Dec 9, 2024
1 parent 9722f2c commit eea4e30
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 49 deletions.
44 changes: 19 additions & 25 deletions packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@ import {
Tile,
} from '@carbon/react';
import { Add, Edit } from '@carbon/react/icons';
import { ErrorState, isDesktop as desktopLayout, useLayoutType } from '@openmrs/esm-framework';
import { ErrorState, isDesktop as desktopLayout, showModal, useLayoutType } from '@openmrs/esm-framework';
import type { BedTagData } from '../types';
import { useBedTags } from '../summary/summary.resource';
import BedTagForm from './new-tag-form.component';
import CardHeader from '../card-header/card-header.component';
import EditBedTagForm from './edit-tag-form.component';
import Header from '../header/header.component';
import styles from '../bed-administration/bed-administration-table.scss';

Expand All @@ -35,12 +33,24 @@ const BedTagAdministrationTable: React.FC = () => {
const { bedTags, errorLoadingBedTags, isLoadingBedTags, isValidatingBedTags, mutateBedTags } = useBedTags();

const [isBedDataLoading] = useState(false);
const [showBedTagsModal, setAddBedTagsModal] = useState(false);
const [showEditBedModal, setShowEditBedModal] = useState(false);
const [editData, setEditData] = useState<BedTagData>();
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);

const openNewBedTagModal = () => {
const dispose = showModal('new-bed-tag-modal', {
closeModal: () => dispose(),
mutate: mutateBedTags,
});
};

const openEditBedTagModal = (editData: BedTagData) => {
const dispose = showModal('edit-bed-tag-modal', {
closeModal: () => dispose(),
mutate: mutateBedTags,
editData: editData,
});
};

const tableHeaders = [
{
header: t('ids', 'ID'),
Expand All @@ -67,9 +77,7 @@ const BedTagAdministrationTable: React.FC = () => {
renderIcon={Edit}
onClick={(e) => {
e.preventDefault();
setEditData(entry);
setShowEditBedModal(true);
setAddBedTagsModal(false);
openEditBedTagModal(entry);
}}
kind={'ghost'}
iconDescription={t('editBedTag', 'Edit Bed Tag')}
Expand Down Expand Up @@ -109,26 +117,12 @@ const BedTagAdministrationTable: React.FC = () => {
<Header title={t('bedTags', 'Bed tags')} />

<div className={styles.widgetCard}>
{showBedTagsModal ? (
<BedTagForm onModalChange={setAddBedTagsModal} showModal={showBedTagsModal} mutate={mutateBedTags} />
) : null}
{showEditBedModal ? (
<EditBedTagForm
onModalChange={setShowEditBedModal}
showModal={showEditBedModal}
editData={editData}
mutate={mutateBedTags}
/>
) : null}
<CardHeader title={headerTitle}>
<span className={styles.backgroundDataFetchingIndicator}>
<span>{isValidatingBedTags ? <InlineLoading /> : null}</span>
</span>
{bedTags?.length ? (
<Button
kind="ghost"
renderIcon={(props) => <Add size={16} {...props} />}
onClick={() => setAddBedTagsModal(true)}>
<Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={openNewBedTagModal}>
{t('addBedTag', 'Add bed tag')}
</Button>
) : null}
Expand Down Expand Up @@ -166,7 +160,7 @@ const BedTagAdministrationTable: React.FC = () => {
kind="ghost"
size="sm"
renderIcon={(props) => <Add size={16} {...props} />}
onClick={() => setAddBedTagsModal(true)}>
onClick={openNewBedTagModal}>
{t('addBedTag', 'Add bed tag')}
</Button>
</Tile>
Expand Down
10 changes: 4 additions & 6 deletions packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ interface BedTagAdministrationFormProps {
handleDeleteBedTag?: () => void;
headerTitle: string;
initialData: BedTagData;
onModalChange: (showModal: boolean) => void;
showModal: boolean;
closeModal: () => void;
}

interface ErrorType {
Expand All @@ -41,8 +40,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
handleCreateBedTag,
headerTitle,
initialData,
onModalChange,
showModal,
closeModal,
}) => {
const { t } = useTranslation();

Expand Down Expand Up @@ -76,7 +74,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({

return (
<React.Fragment>
<ModalHeader title={headerTitle} closeModal={() => onModalChange(false)} />
<ModalHeader title={headerTitle} closeModal={closeModal} />
<ModalBody hasScrollingContent>
<Form>
<Stack gap={3}>
Expand Down Expand Up @@ -113,7 +111,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
</Form>
</ModalBody>
<ModalFooter>
<Button onClick={() => onModalChange(false)} kind="secondary">
<Button onClick={closeModal} kind="secondary">
{getCoreTranslation('cancel', 'Cancel')}
</Button>
<Button disabled={!isDirty} onClick={handleSubmit(onSubmit, onError)}>
Expand Down
14 changes: 5 additions & 9 deletions packages/esm-bed-management-app/src/bed-tag/edit-tag-form.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@ import BedTagsAdministrationForm from './bed-tags-admin-form.component';
interface EditBedTagFormProps {
editData: BedTagData;
mutate: Mutator<BedTagData>;
onModalChange: (showModal: boolean) => void;
showModal: boolean;
closeModal: () => void;
}

const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ editData, mutate, onModalChange, showModal }) => {
const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ editData, mutate, closeModal }) => {
const { t } = useTranslation();
const { bedTags } = useBedTags();
const headerTitle = t('editTag', 'Edit Tag');
Expand Down Expand Up @@ -45,11 +44,9 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ editData, mutate, onMod
subtitle: error?.message,
});
})
.finally(() => {
onModalChange(false);
});
.finally(closeModal);
},
[onModalChange, mutate, editData, t],
[editData.uuid, closeModal, t, mutate],
);

return (
Expand All @@ -60,8 +57,7 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ editData, mutate, onMod
handleCreateBedTag={handleUpdateBedTag}
headerTitle={headerTitle}
initialData={editData}
onModalChange={onModalChange}
showModal={showModal}
closeModal={closeModal}
/>
</>
);
Expand Down
14 changes: 5 additions & 9 deletions packages/esm-bed-management-app/src/bed-tag/new-tag-form.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ import BedTagsAdministrationForm from './bed-tags-admin-form.component';

interface BedTagFormProps {
mutate: () => void;
onModalChange: (showModal: boolean) => void;
showModal: boolean;
closeModal: () => void;
}

const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutate }) => {
const NewTagForm: React.FC<BedTagFormProps> = ({ closeModal, mutate }) => {
const { t } = useTranslation();
const { admissionLocations } = useLocationsWithAdmissionTag();
const { bedTags } = useBedTags();
Expand Down Expand Up @@ -48,11 +47,9 @@ const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutat
subtitle: error?.message,
});
})
.finally(() => {
onModalChange(false);
});
.finally(closeModal);
},
[onModalChange, mutate, t],
[closeModal, t, mutate],
);

return (
Expand All @@ -62,8 +59,7 @@ const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutat
handleCreateBedTag={handleCreateBedTag}
headerTitle={headerTitle}
initialData={initialData}
onModalChange={onModalChange}
showModal={showModal}
closeModal={closeModal}
/>
);
};
Expand Down
2 changes: 2 additions & 0 deletions packages/esm-bed-management-app/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,5 @@ export const newBedModal = getAsyncLifecycle(() => import('./bed-administration/
export const editBedModal = getAsyncLifecycle(() => import('./bed-administration/edit-bed-form.component'), options);
export const newBedTypeModal = getAsyncLifecycle(() => import('./bed-type/new-bed-type-form.component'), options);
export const editBedTypeModal = getAsyncLifecycle(() => import('./bed-type/edit-bed-type.component'), options);
export const newBedTagModal = getAsyncLifecycle(() => import('./bed-tag/new-tag-form.component'), options);
export const editBedTagModal = getAsyncLifecycle(() => import('./bed-tag/edit-tag-form.component'), options);
8 changes: 8 additions & 0 deletions packages/esm-bed-management-app/src/routes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,14 @@
{
"name": "edit-bed-type-modal",
"component": "editBedTypeModal"
},
{
"name": "new-bed-tag-modal",
"component": "newBedTagModal"
},
{
"name": "edit-bed-tag-modal",
"component": "editBedTagModal"
}
]
}

0 comments on commit eea4e30

Please sign in to comment.