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

Replace Material UI components in src/Components/ExternalResult/ResultList.tsx: Fixes #4940 #5538

Merged
merged 5 commits into from
May 30, 2023
+97 −92
Merged

Replace Material UI components in src/Components/ExternalResult/ResultList.tsx: Fixes #4940 #5538

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
96fcc41
Merge pull request #1 from coronasafe/develop
JahnabDutta May 26, 2023
c348b50
Change MUI components to CARE components in ResultList.tsx
JahnabDutta May 26, 2023
b1fea78
Merge pull request #2 from coronasafe/develop
JahnabDutta May 26, 2023
393e374
Merge pull request #3 from coronasafe/develop
JahnabDutta May 26, 2023
0657d09
Merge branch 'develop' into develop
khavinshankar May 30, 2023
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
189 changes: 97 additions & 92 deletions src/Components/ExternalResult/ResultList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import loadable from "@loadable/component";
import { Button } from "@material-ui/core";
import ButtonV2 from "../Common/components/ButtonV2";
import { navigate } from "raviger";
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
Expand All @@ -14,9 +14,9 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
import ExportMenu from "../Common/Export";
import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
import CountBlock from "../../CAREUI/display/Count";
import Page from "../Common/components/Page";

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

export default function ResultList() {
const dispatch: any = useDispatch();
Expand Down Expand Up @@ -173,16 +173,17 @@ export default function ResultList() {
{result.result_date || "-"}
</td>
<td className="px-6 py-4 text-left whitespace-nowrap text-sm leading-5 text-gray-500">
<Button
variant="outlined"
color="primary"
<ButtonV2
variant="primary"
border
ghost
onClick={() => {
setShowDialog(true);
setResultId(result.id);
}}
>
Create
</Button>
CREATE
</ButtonV2>
</td>
</tr>
);
Expand Down Expand Up @@ -214,7 +215,7 @@ export default function ResultList() {
}

return (
<div className="px-6">
<div>
<FacilitiesSelectDialogue
show={showDialog}
setSelected={(e) => setSelectedFacility(e)}
Expand All @@ -226,9 +227,12 @@ export default function ResultList() {
}
handleCancel={() => setShowDialog(false)}
/>
<div className="flex flex-wrap items-center justify-between">
<PageTitle title="External Results" hideBack breadcrumbs={false} />
<div className="w-full sm:w-auto">

<Page
title="External Results"
hideBack
breadcrumbs={false}
options={
<ExportMenu
label="Import/Export"
exportItems={[
Expand All @@ -253,92 +257,93 @@ export default function ResultList() {
},
]}
/>
</div>
</div>
<div className="lg:grid grid-cols-1 gap-5 sm:grid-cols-3 my-4 px-2 md:px-0 relative">
<CountBlock
text="Total Results"
count={totalCount}
loading={isLoading}
icon={"clipboard-notes"}
/>
<div className="mt-2">
<SearchInput
name="name"
onChange={(e) => updateQuery({ [e.name]: e.value })}
value={qParams.name}
placeholder="Search by name"
}
>
<div className="lg:grid grid-cols-1 gap-5 sm:grid-cols-3 my-4 px-2 md:px-0 relative">
<CountBlock
text="Total Results"
count={totalCount}
loading={isLoading}
icon={"clipboard-notes"}
/>
<div className="text-sm font-medium my-2">Search by number</div>
<div className="w-full max-w-sm">
<PhoneNumberFormField
name="mobile_number"
labelClassName="hidden"
value={qParams.mobile_number || "+91"}
onChange={(event) => updateQuery({ [event.name]: event.value })}
placeholder="Search by Phone Number"
noAutoFormat
<div className="mt-2">
<SearchInput
name="name"
onChange={(e) => updateQuery({ [e.name]: e.value })}
value={qParams.name}
placeholder="Search by name"
/>
<div className="text-sm font-medium my-2">Search by number</div>
<div className="w-full max-w-sm">
<PhoneNumberFormField
name="mobile_number"
labelClassName="hidden"
value={qParams.mobile_number || "+91"}
onChange={(event) => updateQuery({ [event.name]: event.value })}
placeholder="Search by Phone Number"
noAutoFormat
/>
</div>
</div>
</div>
<div className="mt-4 lg:mt-0 ml-auto flex flex-col justify-evenly gap-4">
<div className="flex ml-auto gap-2 md:pt-0 pt-2">
<button
className="flex leading-none border-2 border-gray-200 bg-white rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 focus:text-primary-600 focus:border-gray-400 hover:border-gray-400 rounded-r-full px-4 py-2 text-sm"
onClick={() => advancedFilter.setShow(true)}
>
<i className="fa fa-filter mr-1" aria-hidden="true"></i>
<span>Filters</span>
</button>
<div className="mt-4 lg:mt-0 ml-auto flex flex-col justify-evenly gap-4">
<div className="flex ml-auto gap-2 md:pt-0 pt-2">
<button
className="flex leading-none border-2 border-gray-200 bg-white rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 focus:text-primary-600 focus:border-gray-400 hover:border-gray-400 rounded-r-full px-4 py-2 text-sm"
onClick={() => advancedFilter.setShow(true)}
>
<i className="fa fa-filter mr-1" aria-hidden="true"></i>
<span>Filters</span>
</button>
</div>
</div>
</div>
</div>
<FilterBadges
badges={({ badge, phoneNumber, dateRange }) => [
badge("Name", "name"),
phoneNumber("Phone no.", "mobile_number"),
...dateRange("Created", "created_date"),
...dateRange("Result", "result_date"),
...dateRange("Sample created", "sample_collection_date"),
badge("SRF ID", "srf_id"),
]}
/>
<div className="flex items-center flex-wrap gap-2 mb-4">
{dataList.lsgList.map((x) => lsgWardBadge("LSG", x, "local_bodies"))}
{dataList.wardList.map((x) => lsgWardBadge("Ward", x, "wards"))}
</div>
<div className="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-t-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Test Type
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wide">
Status
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Result Date
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Create Patient
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{manageResults}
</tbody>
</table>
</div>
<Pagination totalCount={totalCount} />
<ListFilter
{...advancedFilter}
dataList={lsgWardData}
key={window.location.search}
/>
<FilterBadges
badges={({ badge, phoneNumber, dateRange }) => [
badge("Name", "name"),
phoneNumber("Phone no.", "mobile_number"),
...dateRange("Created", "created_date"),
...dateRange("Result", "result_date"),
...dateRange("Sample created", "sample_collection_date"),
badge("SRF ID", "srf_id"),
]}
/>
<div className="flex items-center flex-wrap gap-2 mb-4">
{dataList.lsgList.map((x) => lsgWardBadge("LSG", x, "local_bodies"))}
{dataList.wardList.map((x) => lsgWardBadge("Ward", x, "wards"))}
</div>
<div className="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-t-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Test Type
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wide">
Status
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Result Date
</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Create Patient
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{manageResults}
</tbody>
</table>
</div>
<Pagination totalCount={totalCount} />
<ListFilter
{...advancedFilter}
dataList={lsgWardData}
key={window.location.search}
/>
</Page>
</div>
);
}