Skip to content

Commit

Permalink
Merge branch 'develop' into pr/8016
Browse files Browse the repository at this point in the history
  • Loading branch information
@nihal467
nihal467 committed Oct 9, 2024
2 parents 6be5d78 + aa90ad5 commit 5033438
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 111 deletions.
64 changes: 46 additions & 18 deletions src/Components/Facility/CoverImageEditModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {
import React, {
useState,
ChangeEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { Success } from "../../Utils/Notifications";
import { Success, Warn } from "../../Utils/Notifications";
import useDragAndDrop from "../../Utils/useDragAndDrop";
import { sleep } from "../../Utils/utils";
import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
Expand Down Expand Up @@ -67,9 +67,11 @@ const CoverImageEditModal = ({
const LaptopScreenBreakpoint = 640;
const isLaptopScreen = width >= LaptopScreenBreakpoint;
const { t } = useTranslation();
const [isDragging, setIsDragging] = useState(false);

const handleSwitchCamera = useCallback(() => {
setConstraint((prev) =>
prev.facingMode === "user"
setConstraint(
constraint.facingMode === "user"
? VideoConstraints.environment
: VideoConstraints.user,
);
Expand All @@ -85,6 +87,7 @@ const CoverImageEditModal = ({
setSelectedFile(myFile);
});
};

const closeModal = () => {
setPreview(undefined);
setSelectedFile(undefined);
Expand Down Expand Up @@ -162,11 +165,25 @@ const CoverImageEditModal = ({
const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
dragProps.setDragOver(false);
const dropedFile = e?.dataTransfer?.files[0];
if (dropedFile.type.split("/")[0] !== "image")
setIsDragging(false);
const droppedFile = e?.dataTransfer?.files[0];
if (droppedFile.type.split("/")[0] !== "image")
return dragProps.setFileDropError("Please drop an image file to upload!");
setSelectedFile(dropedFile);
setSelectedFile(droppedFile);
};

const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
dragProps.onDragOver(e);
setIsDragging(true);
};

const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
dragProps.onDragLeave();
setIsDragging(false);
};

const commonHint = (
<>
{t("max_size_for_image_uploaded_should_be")} 1mb.
Expand Down Expand Up @@ -202,24 +219,28 @@ const CoverImageEditModal = ({
</>
) : (
<div
onDragOver={dragProps.onDragOver}
onDragLeave={dragProps.onDragLeave}
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
className={`mt-8 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
dragProps.dragOver && "border-primary-500"
} ${
dragProps.fileDropError !== ""
? "border-red-500"
: "border-secondary-500"
}`}
isDragging
? "border-primary-800 bg-primary-100"
: dragProps.dragOver
? "border-primary-500"
: "border-secondary-500"
} ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
>
<svg
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
className={`h-12 w-12 stroke-[2px] ${
dragProps.dragOver && "text-primary-500"
isDragging
? "text-green-500"
: dragProps.dragOver
? "text-primary-500"
: "text-secondary-600"
} ${
dragProps.fileDropError !== ""
? "text-red-500"
Expand All @@ -230,7 +251,9 @@ const CoverImageEditModal = ({
</svg>
<p
className={`text-sm ${
dragProps.dragOver && "text-primary-500"
dragProps.dragOver
? "text-primary-500"
: "text-secondary-700"
} ${
dragProps.fileDropError !== ""
? "text-red-500"
Expand Down Expand Up @@ -267,6 +290,7 @@ const CoverImageEditModal = ({
<div className="sm:flex-1" />
<ButtonV2
onClick={() => {
setConstraint(() => VideoConstraints.user);
setIsCameraOpen(true);
}}
>
Expand Down Expand Up @@ -322,6 +346,10 @@ const CoverImageEditModal = ({
width={1280}
ref={webRef}
videoConstraints={constraint}
onUserMediaError={(_e) => {
setIsCameraOpen(false);
Warn({ msg: t("camera_permission_denied") });
}}
/>
</>
) : (
Expand Down
10 changes: 5 additions & 5 deletions src/Components/Facility/FacilityCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -850,14 +850,14 @@ export const FacilityCreate = (props: FacilityProps) => {
required
types={["mobile", "landline"]}
/>
<div className="py-4 md:col-span-2">
<h4 className="mb-4">{t("spokes")}</h4>
{facilityId && (
{facilityId && (
<div className="py-4 md:col-span-2">
<h4 className="mb-4">{t("spokes")}</h4>
<SpokeFacilityEditor
facility={{ ...facilityQuery.data, id: facilityId }}
/>
)}
</div>
</div>
)}
<div className="grid grid-cols-1 gap-4 py-4 sm:grid-cols-2 md:col-span-2 xl:grid-cols-4">
<TextFormField
{...field("oxygen_capacity")}
Expand Down
196 changes: 110 additions & 86 deletions src/Components/Facility/LocationManagement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ConfirmDialog from "../Common/ConfirmDialog";
import DialogModal from "../Common/Dialog";
import Uptime from "../Common/Uptime";
import useAuthUser from "../../Common/hooks/useAuthUser";
import useQuery from "../../Utils/request/useQuery";

import Loading from "@/Components/Common/Loading";
interface Props {
Expand Down Expand Up @@ -223,97 +224,120 @@ const Location = ({
disabled,
setShowDeletePopup,
facilityId,
}: LocationProps) => (
<div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
<div className="flex-1">
<div className="flex w-full items-start justify-between gap-2">
<div className="flex items-end gap-3">
<p className="break-all text-xl font-medium" id="view-location-name">
{name}
</p>
<div
className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
id="location-type"
>
<p className="text-xs font-bold text-primary-500">
{location_type}
}: LocationProps) => {
const { loading, data } = useQuery(routes.listFacilityBeds, {
query: {
facility: facilityId,
location: id,
},
});

const totalBeds = data?.count ?? 0;

if (loading) {
return <Loading />;
}

return (
<div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
<div className="flex-1">
<div className="flex w-full items-start justify-between gap-2">
<div className="flex items-end gap-3">
<p
className="break-all text-xl font-medium"
id="view-location-name"
>
{name}
</p>
<div
className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
id="location-type"
>
<p className="text-xs font-bold text-primary-500">
{location_type}
</p>
</div>
</div>
</div>
</div>
<p
className="mt-3 break-all text-sm font-medium text-secondary-700"
id="view-location-description"
>
{description || "-"}
</p>
<p className="mt-3 text-sm font-semibold text-secondary-700">
Middleware Address:
</p>
<p
className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
id="view-location-middleware"
>
{middleware_address || "-"}
</p>
<Uptime
route={routes.listFacilityAssetLocationAvailability}
params={{ external_id: id, facility_external_id: facilityId }}
header={
<p className="mt-3 text-sm font-semibold text-secondary-700">
Middleware Uptime
</p>
}
centerInfoPanel
/>
</div>

<ButtonV2
id="manage-bed-button"
variant="secondary"
border
className="mt-3 w-full"
href={`location/${id}/beds`}
>
<CareIcon icon="l-bed" className="text-lg" />
Manage Beds
</ButtonV2>
<div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
<div className="w-full md:w-1/2">
<ButtonV2
id="edit-location-button"
variant="secondary"
border
className="w-full"
href={`location/${id}/update`}
authorizeFor={NonReadOnlyUsers}
<p
className="mt-3 break-all text-sm font-medium text-secondary-700"
id="view-location-description"
>
<CareIcon icon="l-pen" className="text-lg" />
Edit
</ButtonV2>
</div>
<div className="w-full md:w-1/2">
<ButtonV2
authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
id="delete-location-button"
variant="secondary"
border
className="w-full"
tooltip={disabled ? "Contact your admin to delete the location" : ""}
tooltipClassName=" text-xs w-full lg:w-auto"
onClick={() =>
setShowDeletePopup({ open: true, name: name ?? "", id: id ?? "" })
}
{description || "-"}
</p>
<p className="mt-3 text-sm font-semibold text-secondary-700">
Middleware Address:
</p>
<p
className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
id="view-location-middleware"
>
<CareIcon icon="l-trash" className="text-lg" />
Delete
</ButtonV2>
{middleware_address || "-"}
</p>
<Uptime
route={routes.listFacilityAssetLocationAvailability}
params={{ external_id: id, facility_external_id: facilityId }}
header={
<p className="mt-3 text-sm font-semibold text-secondary-700">
Middleware Uptime
</p>
}
centerInfoPanel
/>
</div>
</div>

<div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-secondary-700">
<RecordMeta time={created_date} prefix="Created:" />
<RecordMeta time={modified_date} prefix="Modified:" />
<ButtonV2
id="manage-bed-button"
variant="secondary"
border
className="mt-3 flex w-full items-center justify-between"
href={`location/${id}/beds`}
>
Manage Beds
<span className="flex items-center justify-center gap-2">
<CareIcon icon="l-bed" className="text-lg" />
{totalBeds}
</span>
</ButtonV2>
<div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
<div className="w-full md:w-1/2">
<ButtonV2
id="edit-location-button"
variant="secondary"
border
className="w-full"
href={`location/${id}/update`}
authorizeFor={NonReadOnlyUsers}
>
<CareIcon icon="l-pen" className="text-lg" />
Edit
</ButtonV2>
</div>
<div className="w-full md:w-1/2">
<ButtonV2
authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
id="delete-location-button"
variant="secondary"
border
className="w-full"
tooltip={
disabled ? "Contact your admin to delete the location" : ""
}
tooltipClassName=" text-xs w-full lg:w-auto"
onClick={() =>
setShowDeletePopup({ open: true, name: name ?? "", id: id ?? "" })
}
>
<CareIcon icon="l-trash" className="text-lg" />
Delete
</ButtonV2>
</div>
</div>

<div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-secondary-700">
<RecordMeta time={created_date} prefix="Created:" />
<RecordMeta time={modified_date} prefix="Modified:" />
</div>
</div>
</div>
);
);
};
4 changes: 4 additions & 0 deletions src/Components/Users/UserAdd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,24 +294,28 @@ export const UserAdd = (props: UserProps) => {

const handleDateChange = (e: FieldChangeEvent<Date>) => {
if (dayjs(e.value).isValid()) {
const errors = { ...state.errors, [e.name]: "" };
dispatch({
type: "set_form",
form: {
...state.form,
[e.name]: dayjs(e.value).format("YYYY-MM-DD"),
},
});
dispatch({ type: "set_errors", errors });
}
};

const handleFieldChange = (event: FieldChangeEvent<unknown>) => {
const errors = { ...state.errors, [event.name]: "" };
dispatch({
type: "set_form",
form: {
...state.form,
[event.name]: event.value,
},
});
dispatch({ type: "set_errors", errors });
};

useAbortableEffect(() => {
Expand Down
Loading

0 comments on commit 5033438

Please sign in to comment.