Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Resource Page #9743

Closed
wants to merge 4 commits into from
Closed

Enhanced Resource Page #9743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b8b1819
enhanced-resource-page
manmeetnagii Jan 4, 2025
af7a267
Merge branch 'develop' of https://github.com/ohcnetwork/care_fe into …
manmeetnagii Jan 4, 2025
88597fe
enhanced-resource-page
manmeetnagii Jan 5, 2025
5f7aeb8
Merge branch 'develop' of https://github.com/ohcnetwork/care_fe into …
manmeetnagii Jan 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/locale/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1612,6 +1612,7 @@
"select_role": "Select Role",
"select_seven_day_period": "Select a seven day period",
"select_skills": "Select and add some skills",
"select_status": "Select Status",
"select_time": "Select time",
"select_time_slot": "Select time slot",
"select_wards": "Select wards",
Expand Down
12 changes: 2 additions & 10 deletions src/Routers/routes/ResourceRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@
import { Redirect } from "raviger";

import BoardView from "@/components/Resource/ResourceBoard";
import ResourceDetails from "@/components/Resource/ResourceDetails";
import { ResourceDetailsUpdate } from "@/components/Resource/ResourceDetailsUpdate";
import ListView from "@/components/Resource/ResourceList";
import ResourcePage from "@/components/Resource/ResourcePage";

import { AppRoutes } from "@/Routers/AppRouter";

const getDefaultView = () =>
localStorage.getItem("defaultResourceView") === "list" ? "list" : "board";

const ResourceRoutes: AppRoutes = {
"/resource": () => <Redirect to={`/resource/${getDefaultView()}`} />,
"/resource/board": () => <BoardView />,
"/resource/list": () => <ListView />,
"/resource": () => <ResourcePage />,
Comment on lines -15 to -16
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these components can be deleted too right since it's no longer used?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes this can be deleted

"/resource/:id": ({ id }) => <ResourceDetails id={id} />,
"/resource/:id/update": ({ id }) => <ResourceDetailsUpdate id={id} />,
};
Expand Down
25 changes: 4 additions & 21 deletions src/components/Kanban/Board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import { useInfiniteQuery } from "@tanstack/react-query";
import { ReactNode, RefObject, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";

import { callApi } from "@/Utils/request/query";
import { QueryRoute } from "@/Utils/request/types";
import { QueryOptions } from "@/Utils/request/useQuery";
Expand Down Expand Up @@ -37,25 +35,9 @@ export default function KanbanBoard<T extends { id: string }>(
const board = useRef<HTMLDivElement>(null);

return (
<div className="h-[calc(100vh-114px)] md:h-[calc(100vh-50px)]">
<div className="flex flex-col items-end justify-between md:flex-row">
<div>
<div className="flex flex-col justify-between md:flex-row">
<div>{props.title}</div>
<div className="flex items-center gap-2 py-2">
{[0, 1].map((button, i) => (
<button
key={i}
onClick={() => {
board.current?.scrollBy({
left: button ? 250 : -250,
behavior: "smooth",
});
}}
className="inline-flex aspect-square h-8 items-center justify-center rounded-full border border-secondary-400 bg-secondary-200 text-2xl hover:bg-secondary-300"
>
<CareIcon icon={`l-${button ? "arrow-right" : "arrow-left"}`} />
</button>
))}
</div>
</div>
<DragDropContext onDragEnd={props.onDragEnd}>
<div className="h-full overflow-x-auto scrollbar-hide" ref={board}>
Expand Down Expand Up @@ -152,7 +134,7 @@ export function KanbanSection<T extends { id: string }>(
</div>
<div
ref={sectionRef}
className="h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden"
className="h-[calc(100vh-340px)] overflow-y-auto overflow-x-hidden"
onScroll={(e) => {
const target = e.target as HTMLDivElement;
if (
Expand Down Expand Up @@ -184,6 +166,7 @@ export function KanbanSection<T extends { id: string }>(
)}
</Draggable>
))}

{provided.placeholder}
{isFetchingNextPage && (
<div className="mt-2 h-[300px] w-[284px] animate-pulse rounded-lg bg-secondary-300" />
Expand Down
162 changes: 0 additions & 162 deletions src/components/Resource/ResourceBoard.tsx
View file
Open in desktop

This file was deleted.

137 changes: 137 additions & 0 deletions src/components/Resource/ResourceCardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { Link } from "raviger";
import { useTranslation } from "react-i18next";

import Chip from "@/CAREUI/display/Chip";
import CareIcon from "@/CAREUI/icons/CareIcon";

import { formatDateTime } from "@/Utils/utils";
import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";

interface ResourceCardListProps {
data: ResourceRequest[];
}

const ResourceCardList = ({ data }: ResourceCardListProps) => {
const { t } = useTranslation();

if (data && !data.length) {
return (
<div className="w-full mt-64 flex flex-1 justify-center text-secondary-600">
{t("no_results_found")}
</div>
);
}

return data.map((resource: ResourceRequest, i) => (
<div
key={i}
className="w-full border border-b-2 border-gray-200 col-span-6"
>
<div className=" flex grid w-full gap-1 overflow-hidden bg-white p-4 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 px-3 text-left">
<div className="text-sm font-bold capitalize">{resource.title}</div>
</div>

<div className="col-span-1 flex flex-col px-3 text-left">
<div className="3xl:flex-row mb-2 flex gap-2 sm:flex-row md:flex-row lg:flex-col xl:flex-row 2xl:flex-row ">
{resource.status === "TRANSPORTATION TO BE ARRANGED" ? (
<dt
title={t("resource_status")}
className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center overflow-hidden whitespace-nowrap text-ellipsis truncate"
>
<Chip
size="small"
variant="secondary"
startIcon="l-truck"
text={t(`${resource.status}`)}
className="text-lg font-bold text-sky-600 truncate bg-gray-300 rounded-full uppercase text-center"
/>
</dt>
) : (
<dt
title={t("resource_status")}
className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full leading-4"
>
<Chip
size="small"
variant={
resource.status === "APPROVED" ? "primary" : "secondary"
}
startIcon="l-truck"
text={t(`${resource.status}`)}
className={`text-lg font-bold rounded-full uppercase ${
resource.status === "APPROVED"
? "bg-sky-200"
: "bg-yellow-200 "
}`}
/>
</dt>
)}

<div>
{resource.emergency && (
<span className="mt-1.5 inline-block shrink-0 rounded-full bg-red-100 px-2 py-1 text-xs font-medium leading-4 text-red-800">
{t("emergency")}
</span>
)}
</div>
</div>

<div className="text-center">
<dt
title={t("last_modified")}
className={"flex items-center text-sm font-medium leading-5"}
>
<CareIcon icon="l-stopwatch" className="mr-1" />
<dd className="text-xs font-medium leading-5">
{formatDateTime(resource.modified_date) || "--"}
</dd>
</dt>
</div>
</div>

<div className="col-span-1 text-left">
<dt
title={t("origin_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-departure" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{resource.origin_facility?.name}
</dd>
</dt>

<dt
title={t("resource_approving_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-user-check" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{resource.approving_facility?.name}
</dd>
</dt>

<dt
title={t("assigned_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-arrival" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{resource.assigned_facility?.name || t("yet_to_be_decided")}
</dd>
</dt>
</div>
<div className="col-span-1 mt-2 flex flex-col text-left">
<Link
href={`/resource/${resource.id}`}
className="flex w-full items-center justify-center gap-2 rounded-lg border border-secondary-300 bg-secondary-200 p-2 text-sm font-semibold text-inherit transition-all hover:bg-secondary-300"
>
<CareIcon icon="l-eye" className="text-lg" /> {t("all_details")}
</Link>
</div>
</div>
</div>
));
};

export default ResourceCardList;
Loading
Loading