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

Design of List View layout in Resource Page #9096

Merged
merged 9 commits into from
Nov 18, 2024
Merged

Design of List View layout in Resource Page #9096

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f7c0b57
Redesigned the Resource list view
AnveshNalimela Nov 12, 2024
4bb1ef0
Merge branch 'develop' into issue/#9090/listview-resources
AnveshNalimela Nov 12, 2024
cbeacc6
Merge branch 'ohcnetwork:develop' into issue/#9090/listview-resources
AnveshNalimela Nov 13, 2024
6d76dc2
made changes suggested by coderabbit
AnveshNalimela Nov 13, 2024
bb2e81f
Merge branch 'issue/#9090/listview-resources' of github.com:AnveshNal…
AnveshNalimela Nov 13, 2024
ea2942e
Merge branch 'develop' into issue/#9090/listview-resources
AnveshNalimela Nov 15, 2024
38eb8e6
added translations and used chip component
AnveshNalimela Nov 15, 2024
7f1d159
made few alignments and adjusted:
AnveshNalimela Nov 15, 2024
fab7498
Removed shadow and added proper borders
AnveshNalimela Nov 15, 2024
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 @@ -1099,6 +1099,7 @@
"resource_approving_facility": "Resource approving facility",
"resource_origin_facility": "Origin Facility",
"resource_request": "Resource Request",
"resource_status": "Resource Status",
"result": "Result",
"result_date": "Result Date",
"result_details": "Result details",
Expand Down
158 changes: 140 additions & 18 deletions src/components/Resource/ResourceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { navigate } from "raviger";
import { Link, navigate } from "raviger";
import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";
Expand All @@ -11,7 +11,6 @@ import Page from "@/components/Common/Page";
import { ResourceModel } from "@/components/Facility/models";
import SearchInput from "@/components/Form/SearchInput";
import BadgesList from "@/components/Resource/ResourceBadges";
import ResourceBlock from "@/components/Resource/ResourceBlock";
import { formatFilter } from "@/components/Resource/ResourceCommons";
import ListFilter from "@/components/Resource/ResourceFilter";

Expand All @@ -20,6 +19,7 @@ import useFilters from "@/hooks/useFilters";
import routes from "@/Utils/request/api";
import request from "@/Utils/request/request";
import useQuery from "@/Utils/request/useQuery";
import { formatDateTime } from "@/Utils/utils";

export default function ListView() {
const {
Expand Down Expand Up @@ -48,15 +48,125 @@ export default function ListView() {
const showResourceCardList = (data: ResourceModel[]) => {
if (data && !data.length) {
return (
<div className="mt-64 flex flex-1 justify-center text-secondary-600">
<div className="w-full mt-64 flex flex-1 justify-center text-secondary-600">
{t("no_results_found")}
</div>
);
}

return data.map((resource, i) => (
<div key={i} className="rounded-lg border border-secondary-300 bg-white">
<ResourceBlock resource={resource} />
return data.map((resource: ResourceModel, i) => (
<div key={i} className="w-full border-b-2 border-gray-100 col-span-6">
<div className="border-3 flex grid w-full gap-1 overflow-hidden bg-white p-4 shadow sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 px-3 text-left">
AnveshNalimela marked this conversation as resolved.
Show resolved Hide resolved
AnveshNalimela marked this conversation as resolved.
Show resolved Hide resolved
<div className="text-sm font-bold capitalize">{resource.title}</div>
</div>

<div className="col-span-1 flex flex-col px-2 text-left">
<div className="category">
<dt
title={t("LOG_UPDATE_FIELD_LABEL__patient_category")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-box" className="text-lg mr-1" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{resource.category || ""}
</dd>
</dt>
</div>
<div className="address mt-1">
<dd className="text-xs font-medium leading-5">
{resource.sub_category || "--"}
</dd>
</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 rounded-full px-2 py-0.5 text-xs font-medium leading-4 overflow-hidden whitespace-nowrap text-ellipsis truncate bg-gray-200"
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sky-600 truncate">{resource.status}</dd>
</dt>
AnveshNalimela marked this conversation as resolved.
Show resolved Hide resolved
) : (
<dt
title={t("resource_status")}
className={`w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 ${
resource.status === "APPROVED"
? "bg-sky-200"
: "bg-yellow-200 text-yellow-500"
}`}
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sky-600">{resource.status}</dd>
</dt>
)}
AnveshNalimela marked this conversation as resolved.
Show resolved Hide resolved

<div>
{resource.emergency && (
<span className="inline-block shrink-0 rounded-full bg-red-100 px-2 py-0.5 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_object?.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_object?.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_object?.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>
));
};
Expand All @@ -79,26 +189,24 @@ export default function ListView() {
breadcrumbs={false}
options={
<>
<div className="md:px-4">
<div className="md:px-4"></div>
<div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="title"
value={qParams.title}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_resource")}
/>
</div>
<div className="w-32">
{/* dummy div to align space as per board view */}
</div>
<div className="flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
<CareIcon icon="l-list-ul" className="rotate-90" />
{t("board_view")}
</ButtonV2>

<div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
<ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
<CareIcon icon="l-list-ul" className="rotate-90" />
{t("board_view")}
</ButtonV2>
</div>
</>
}
Expand All @@ -123,10 +231,24 @@ export default function ListView() {
{t("refresh_list")}
</button>
</div>

<div className="mb-5 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{data?.results && showResourceCardList(data?.results)}
<div className="mx-5 mt-5 grid w-full gap-2 border-b-2 border-gray-100 p-4 text-sm font-medium sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 uppercase sm:text-center md:text-center lg:block lg:text-left">
{t("resource")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("LOG_UPDATE_FIELD_LABEL__patient_category")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("consent__status")}
</div>
AnveshNalimela marked this conversation as resolved.
Show resolved Hide resolved
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("facilities")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("LOG_UPDATE_FIELD_LABEL__action")}
</div>
</div>
<div>{showResourceCardList(data?.results || [])}</div>
<div>
<Pagination totalCount={data?.count || 0} />
</div>
Expand Down
Loading