Skip to content

Commit

Permalink
Change MUI components to CARE components in ResultList.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@JahnabDutta
JahnabDutta committed May 26, 2023
1 parent 96fcc41 commit c348b50
Showing 1 changed file with 97 additions and 92 deletions.
189 changes: 97 additions & 92 deletions src/Components/ExternalResult/ResultList.tsx
View file
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>
);
}

0 comments on commit c348b50

Please sign in to comment.