Skip to content

Commit

Permalink
Enable Facility Cover Image Uploads on Mobile Screens (ohcnetwork#8402)
Browse files Browse the repository at this point in the history
* Optimize Facility Cover Image for Reload

* Fix Edit Cover Image for Mobile Screens

* Revert temp assignment

* fixed lint

---------

Co-authored-by: Khavin Shankar <[email protected]>
  • Loading branch information
2 people authored and UdaySagar-Git committed Aug 23, 2024
1 parent 1340a23 commit c26c3de
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions src/Components/Facility/FacilityHome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ import { LocationSelect } from "../Common/LocationSelect.js";
import { CameraFeedPermittedUserTypes } from "../../Utils/permissions.js";
import { FacilityStaffList } from "./FacilityStaffList.js";

type Props = {
facilityId: string;
};

const Loading = lazy(() => import("../Common/Loading"));

export const getFacilityFeatureIcon = (featureId: number) => {
Expand All @@ -50,12 +54,10 @@ export const getFacilityFeatureIcon = (featureId: number) => {
);
};

export const FacilityHome = (props: any) => {
export const FacilityHome = ({ facilityId }: Props) => {
const { t } = useTranslation();
const { facilityId } = props;
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
const [editCoverImage, setEditCoverImage] = useState(false);
const [imageKey, setImageKey] = useState(Date.now());
const authUser = useAuthUser();

useMessageListener((data) => console.log(data));
Expand Down Expand Up @@ -112,7 +114,10 @@ export const FacilityHome = (props: any) => {
const editCoverImageTooltip = hasPermissionToEditCoverImage && (
<div
id="facility-coverimage"
className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-secondary-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
className={
"absolute right-0 top-0 z-10 flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-t-lg bg-black text-sm text-secondary-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
}
onClick={() => setEditCoverImage(true)}
>
<CareIcon icon="l-pen" className="text-lg" />
<span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
Expand All @@ -121,7 +126,7 @@ export const FacilityHome = (props: any) => {

const CoverImage = () => (
<img
src={`${facilityData?.read_cover_image_url}?imgKey=${imageKey}`}
src={`${facilityData?.read_cover_image_url}`}
alt={facilityData?.name}
className="h-full w-full rounded-lg object-cover"
/>
Expand Down Expand Up @@ -150,11 +155,7 @@ export const FacilityHome = (props: any) => {
/>
<CoverImageEditModal
open={editCoverImage}
onSave={() =>
facilityData?.read_cover_image_url
? setImageKey(Date.now())
: facilityFetch()
}
onSave={() => facilityFetch()}
onClose={() => setEditCoverImage(false)}
onDelete={() => facilityFetch()}
facility={facilityData ?? ({} as FacilityModel)}
Expand Down

0 comments on commit c26c3de

Please sign in to comment.