Skip to content

Commit

Permalink
fix(location): added duty staff section
Browse files Browse the repository at this point in the history
  • Loading branch information
@aeswibon
aeswibon committed Aug 4, 2023
1 parent 9249158 commit d1db85f
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 52 deletions.
105 changes: 83 additions & 22 deletions src/Components/Facility/AddLocationForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import loadable from "@loadable/component";
import React, { useState, useEffect } from "react";
import { navigate } from "raviger";
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import {
createFacilityAssetLocation,
getAnyFacility,
getFacilityAssetLocation,
getFacilityUsers,
updateFacilityAssetLocation,
} from "../../Redux/actions";
import * as Notification from "../../Utils/Notifications.js";
import { navigate } from "raviger";
import { Submit, Cancel } from "../Common/components/ButtonV2";
import TextFormField from "../Form/FormFields/TextFormField";
import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
import { Cancel, Submit } from "../Common/components/ButtonV2";
import Page from "../Common/components/Page";
import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
import TextFormField from "../Form/FormFields/TextFormField";

import { MultiSelectFormField } from "../Form/FormFields/SelectFormField";
const Loading = loadable(() => import("../Common/Loading"));

interface LocationFormProps {
Expand All @@ -29,6 +31,10 @@ export const AddLocationForm = (props: LocationFormProps) => {
const [description, setDescription] = useState("");
const [facilityName, setFacilityName] = useState("");
const [locationName, setLocationName] = useState("");
const [doctorList, setDoctorList] = useState<any[]>([]);
const [staffList, setStaffList] = useState<any[]>([]);
const [doctors, setDoctors] = useState<any[]>([]);
const [staff, setStaff] = useState<any[]>([]);
const [errors, setErrors] = useState<any>({
name: "",
description: "",
Expand All @@ -40,9 +46,21 @@ export const AddLocationForm = (props: LocationFormProps) => {
async function fetchFacilityName() {
setIsLoading(true);
if (facilityId) {
const res = await dispatchAction(getAnyFacility(facilityId));

setFacilityName(res?.data?.name || "");
const facility = await dispatchAction(getAnyFacility(facilityId));
const doctor = await dispatchAction(
getFacilityUsers(facilityId, {
user_type: "Doctor",
home_facility: facilityId,
})
);
const staff = await dispatchAction(
getFacilityUsers(facilityId, {
user_type: "Staff",
})
);
setFacilityName(facility?.data?.name || "");
setDoctorList(doctor?.data?.results || []);
setStaffList(staff?.data?.results || []);
}
if (locationId) {
const res = await dispatchAction(
Expand All @@ -52,6 +70,8 @@ export const AddLocationForm = (props: LocationFormProps) => {
setName(res?.data?.name || "");
setLocationName(res?.data?.name || "");
setDescription(res?.data?.description || "");
setDoctors(res?.data?.doctors || []);
setStaff(res?.data?.staff || []);
}
setIsLoading(false);
}
Expand All @@ -68,6 +88,8 @@ export const AddLocationForm = (props: LocationFormProps) => {
const data = {
name,
description,
doctors,
staff,
};

const res = await dispatchAction(
Expand All @@ -89,6 +111,7 @@ export const AddLocationForm = (props: LocationFormProps) => {
msg: notificationMessage,
});
} else if (res.status === 400) {
console.log(res.data);
Object.keys(res.data).forEach((key) => {
setErrors((prevState: any) => ({
...prevState,
Expand All @@ -105,53 +128,91 @@ export const AddLocationForm = (props: LocationFormProps) => {

return (
<Page
title={headerText}
backUrl={`/facility/${facilityId}/location`}
crumbsReplacements={{
title={ headerText }
backUrl={ `/facility/${facilityId}/location` }
crumbsReplacements={ {
[facilityId]: { name: facilityName },
...(locationId && {
[locationId]: {
name: locationName,
uri: `/facility/${facilityId}/location`,
},
}),
}}
} }
>
<div className="mt-10">
<div className="cui-card">
<form onSubmit={handleSubmit}>
<form onSubmit={ handleSubmit }>
<div className="mt-2 grid grid-cols-1 gap-4">
<div className="flex flex-row items-center">
<label className="text-lg font-bold text-gray-900">
General Details
</label>
<hr className="ml-6 flex-1 border border-gray-400" />
</div>
<div>
<TextFormField
name="name"
type="text"
label="Name"
required
value={name}
onChange={(e) => setName(e.value)}
error={errors.name}
value={ name }
onChange={ (e) => setName(e.value) }
error={ errors.name }
/>
</div>
<div>
<TextAreaFormField
rows={5}
rows={ 5 }
name="description"
label="Description"
value={description}
onChange={(e) => setDescription(e.value)}
error={errors.description}
value={ description }
onChange={ (e) => setDescription(e.value) }
error={ errors.description }
/>
</div>
<div className="flex flex-row items-center">
<label className="text-lg font-bold text-gray-900">
Duty Staff
</label>
<hr className="ml-6 flex-1 border border-gray-400" />
</div>
<div>
<MultiSelectFormField
name="doctors"
label="Doctors"
onChange={ (e) => setDoctors(e.value) }
options={ doctorList }
value={ doctors }
optionLabel={ (option: any) =>
`${option.first_name} ${option.last_name}`
}
optionValue={ (option: any) => option.id }
/>
</div>
<div>
<MultiSelectFormField
name="staff"
label="Staff"
onChange={ (e) => setStaff(e.value) }
options={ staffList }
value={ staff }
optionLabel={ (option: any) =>
`${option.first_name} ${option.last_name}`
}
optionValue={ (option: any) => option.id }
/>
</div>
</div>
<div className="mt-4 flex flex-col gap-3 sm:flex-row sm:justify-between">
<Cancel
onClick={() =>
onClick={ () =>
navigate(`/facility/${facilityId}/location`, {
replace: true,
})
}
/>
<Submit onClick={handleSubmit} label={buttonText} />
<Submit onClick={ handleSubmit } label={ buttonText } />
</div>
</form>
</div>
Expand Down
71 changes: 42 additions & 29 deletions src/Components/Facility/LocationManagement.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { useCallback, useState, ReactElement } from "react";
import loadable from "@loadable/component";
import { ReactElement, useCallback, useState } from "react";
import { useDispatch } from "react-redux";
import CareIcon from "../../CAREUI/icons/CareIcon";
import { statusType, useAbortableEffect } from "../../Common/utils";
import { listFacilityAssetLocation, getAnyFacility } from "../../Redux/actions";
import { getAnyFacility, listFacilityAssetLocation } from "../../Redux/actions";
import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
import Pagination from "../Common/Pagination";
import { LocationModel } from "./models";
import ButtonV2 from "../Common/components/ButtonV2";
import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
import CareIcon from "../../CAREUI/icons/CareIcon";
import Page from "../Common/components/Page";
import { UserAssignedModel } from "../Users/models";
import { LocationModel } from "./models";
const Loading = loadable(() => import("../Common/Loading"));

interface LocationManagementProps {
Expand All @@ -20,29 +21,39 @@ interface LocationRowProps {
facilityId: string;
name: string;
description: string;
doctors: UserAssignedModel[];
staff: UserAssignedModel[];
}

const LocationRow = (props: LocationRowProps) => {
const { id, facilityId, name, description } = props;
const { id, facilityId, name, description, doctors, staff } = props;

return (
<div
key={id}
key={ id }
className="w-full items-center justify-between border-b py-4 lg:flex"
>
<div className="px-4 lg:w-3/4">
<div className="w-full items-baseline lg:flex">
<p className="break-words text-xl lg:mr-4 lg:w-1/4">{name}</p>
<p className="break-all text-sm lg:w-3/4">{description}</p>
<p className="break-words text-xl lg:mr-4 lg:w-1/4">{ name }</p>
<p className="break-all text-sm lg:w-3/4">{ description }</p>
<p className="">
{ doctors.map(
(doctor) => `${doctor.first_name} ${doctor.last_name}`
) }
</p>
<p className="">
{ staff.map((s) => `${s.first_name} ${s.last_name}`) }
</p>
</div>
</div>
<div className="mt-4 flex flex-col gap-2 lg:mt-0 lg:flex-row">
<ButtonV2
variant="secondary"
border
className="w-full lg:w-auto"
href={`/facility/${facilityId}/location/${id}/update`}
authorizeFor={NonReadOnlyUsers}
href={ `/facility/${facilityId}/location/${id}/update` }
authorizeFor={ NonReadOnlyUsers }
>
<CareIcon className="care-l-pen text-lg" />
Edit
Expand All @@ -51,7 +62,7 @@ const LocationRow = (props: LocationRowProps) => {
variant="secondary"
border
className="w-full lg:w-auto"
href={`/facility/${facilityId}/location/${id}/beds`}
href={ `/facility/${facilityId}/location/${id}/beds` }
>
<CareIcon className="care-l-bed text-lg" />
Manage Beds
Expand Down Expand Up @@ -114,11 +125,13 @@ export const LocationManagement = (props: LocationManagementProps) => {
if (locations?.length) {
locationsList = locations.map((locationItem: LocationModel) => (
<LocationRow
key={locationItem.id}
id={locationItem.id || ""}
facilityId={facilityId || ""}
name={locationItem.name || ""}
description={locationItem.description || ""}
key={ locationItem.id }
id={ locationItem.id || "" }
facilityId={ facilityId || "" }
name={ locationItem.name || "" }
description={ locationItem.description || "" }
doctors={ locationItem.doctor_objects || [] }
staff={ locationItem.staff_objects || [] }
/>
));
} else if (locations && locations.length === 0) {
Expand All @@ -133,18 +146,18 @@ export const LocationManagement = (props: LocationManagementProps) => {
location = (
<>
<div className="mt-5 flex grow flex-wrap bg-white p-4">
{locationsList}
{ locationsList }
</div>
{totalCount > limit && (
{ totalCount > limit && (
<div className="mt-4 flex w-full justify-center">
<Pagination
cPage={currentPage}
defaultPerPage={limit}
data={{ totalCount }}
onChange={handlePagination}
cPage={ currentPage }
defaultPerPage={ limit }
data={ { totalCount } }
onChange={ handlePagination }
/>
</div>
)}
) }
</>
);
}
Expand All @@ -156,20 +169,20 @@ export const LocationManagement = (props: LocationManagementProps) => {
return (
<Page
title="Location Management"
crumbsReplacements={{ [facilityId]: { name: facilityName } }}
backUrl={`/facility/${facilityId}`}
crumbsReplacements={ { [facilityId]: { name: facilityName } } }
backUrl={ `/facility/${facilityId}` }
>
<div className="container mx-auto px-4 py-2 sm:px-8">
<div className="flex justify-end">
<ButtonV2
href={`/facility/${facilityId}/location/add`}
authorizeFor={NonReadOnlyUsers}
href={ `/facility/${facilityId}/location/add` }
authorizeFor={ NonReadOnlyUsers }
>
<CareIcon className="care-l-plus text-lg" />
Add New Location
</ButtonV2>
</div>
{location}
{ location }
</div>
</Page>
);
Expand Down
5 changes: 4 additions & 1 deletion src/Components/Facility/models.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { AssignedToObjectModel } from "../Patient/models";
import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
import { NormalPrescription, PRNPrescription } from "../Medicine/models";
import { AssignedToObjectModel } from "../Patient/models";
import { UserAssignedModel } from "../Users/models";

export interface LocalBodyModel {
name: string;
Expand Down Expand Up @@ -182,6 +183,8 @@ export interface LocationModel {
facility?: {
name: string;
};
doctor_objects?: UserAssignedModel[];
staff_objects?: UserAssignedModel[];
}

export interface BedModel {
Expand Down

0 comments on commit d1db85f

Please sign in to comment.