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.

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

Fix: Layout update of Asset Page #9466

Open
wants to merge 41 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
35f5e5c
updated layout of asset page
AdityaJ2305 Dec 16, 2024
67f8536
updated some css
AdityaJ2305 Dec 16, 2024
ca7cb2e
cypress failed fix
AdityaJ2305 Dec 16, 2024
aaf7b9a
update import
AdityaJ2305 Dec 17, 2024
d0fa0c9
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 17, 2024
0d84f46
Fix minor typo error
AdityaJ2305 Dec 17, 2024
ddcdbf4
Merge branch 'issue/9349/button_layout_in_asset_page' of https://gith…
AdityaJ2305 Dec 17, 2024
85e0417
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 17, 2024
ac674d2
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 18, 2024
296254b
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 18, 2024
d9a94d5
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 18, 2024
a4e8e03
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
nihal467 Dec 19, 2024
d6e856e
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 19, 2024
0db3dd1
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 20, 2024
8d0ac4a
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 20, 2024
d5f2645
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 21, 2024
093fb9e
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 22, 2024
1874cca
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 22, 2024
6bbf58e
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
nihal467 Dec 23, 2024
f71839a
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 23, 2024
98a4a80
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 23, 2024
7851d0e
just minor key fix
AdityaJ2305 Dec 23, 2024
35d1b3e
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 23, 2024
043aa9f
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 23, 2024
e36eb05
Fix: the spacing update to shadcn button
AdityaJ2305 Dec 23, 2024
48450a8
Fix: cypress failing
AdityaJ2305 Dec 23, 2024
e3adf77
Fix: cypress failing
AdityaJ2305 Dec 23, 2024
c1adae7
Add support of shadcn dropdown button in export
AdityaJ2305 Dec 24, 2024
27b55b8
Fix linting issue
AdityaJ2305 Dec 24, 2024
d70981f
Fix linting issue
AdityaJ2305 Dec 24, 2024
88d0685
Fix linting issue
AdityaJ2305 Dec 24, 2024
a1d19d3
move out as ExportItem func comp
AdityaJ2305 Dec 24, 2024
6bc0559
use Anyone for auth
AdityaJ2305 Dec 24, 2024
e64ff5a
fix onclick
AdityaJ2305 Dec 24, 2024
e2f6337
fix onclick
AdityaJ2305 Dec 24, 2024
2d721bd
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
AdityaJ2305 Dec 24, 2024
7febc9d
import fix
AdityaJ2305 Dec 24, 2024
7278966
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
nihal467 Dec 24, 2024
37af4c5
Merge branch 'develop' into issue/9349/button_layout_in_asset_page
nihal467 Dec 24, 2024
8a1d0ff
Empty-Commit
AdityaJ2305 Dec 24, 2024
a24b580
removed buttonv2 fully
AdityaJ2305 Dec 24, 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
3 changes: 1 addition & 2 deletions cypress/pageobject/Asset/AssetCreation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

export class AssetPage {
createAsset() {
cy.get("button").should("contain", "Create Asset");
cy.get("[data-testid=create-asset-buttom] button").click();
cy.get("#create-asset-button").click();
}

selectFacility(facilityName: string) {
Expand Down
2 changes: 1 addition & 1 deletion cypress/pageobject/utils/advanceFilterHelpers.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const advanceFilters = {
clickAdvancedFiltersButton() {
cy.verifyAndClickElement("#advanced-filter", "Advanced Filters");
cy.verifyAndClickElement("#filter", "Filters");
AdityaJ2305 marked this conversation as resolved.
Show resolved Hide resolved
},

selectState(state: string) {
Expand Down
15 changes: 8 additions & 7 deletions src/CAREUI/interactive/FiltersSlideover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
import CareIcon from "@/CAREUI/icons/CareIcon";
import SlideOver from "@/CAREUI/interactive/SlideOver";

import { Button } from "@/components/ui/button";

AdityaJ2305 marked this conversation as resolved.
Show resolved Hide resolved
import ButtonV2 from "@/components/Common/ButtonV2";

import useFilters from "@/hooks/useFilters";
Expand Down Expand Up @@ -58,15 +60,14 @@ export default function FiltersSlideover({
export const AdvancedFilterButton = ({ onClick }: { onClick: () => void }) => {
const { t } = useTranslation();
return (
<ButtonV2
ghost
border
className="w-full bg-white md:w-auto"
<Button
variant="outline_primary"
className="w-full md:w-auto"
onClick={onClick}
id="advanced-filter"
id="filter"
>
<CareIcon icon="l-filter" />
<span className="py-0.5">{t("advanced_filters")}</span>
</ButtonV2>
<span className="py-0.5 ml-2">{t("filters")}</span>
</Button>
);
};
122 changes: 71 additions & 51 deletions src/components/Assets/AssetsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ import CountBlock from "@/CAREUI/display/Count";
import CareIcon from "@/CAREUI/icons/CareIcon";
import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";

import { Button } from "@/components/ui/button";

AdityaJ2305 marked this conversation as resolved.
Show resolved Hide resolved
import AssetFilter from "@/components/Assets/AssetFilter";
import AssetImportModal from "@/components/Assets/AssetImportModal";
import { AssetData, assetClassProps } from "@/components/Assets/AssetTypes";
import ButtonV2 from "@/components/Common/ButtonV2";
import ExportMenu from "@/components/Common/Export";
import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
import FacilitiesSelectDialogue from "@/components/ExternalResult/FacilitiesSelectDialogue";
import { FacilityModel } from "@/components/Facility/models";
import SearchInput from "@/components/Form/SearchInput";

import useFilters from "@/hooks/useFilters";
import { useIsAuthorized } from "@/hooks/useIsAuthorized";
Expand All @@ -38,6 +39,7 @@ const AssetsList = () => {
FilterBadges,
advancedFilter,
resultsPerPage,
clearSearch,
} = useFilters({
limit: 18,
cacheBlacklist: ["search"],
Expand Down Expand Up @@ -317,9 +319,54 @@ const AssetsList = () => {
breadcrumbs={false}
hideBack
options={
<>
<div className="flex flex-wrap items-center gap-3">
<div className="mb-2 flex w-full flex-col items-center gap-3 lg:mb-0 lg:w-fit lg:flex-row">
<div className="w-full lg:w-fit">
<Button
variant="primary"
size="default"
className="w-full p-[10px] md:w-auto"
onClick={() => setIsScannerActive(true)}
>
<CareIcon icon="l-search" className="text-base mr-2" />
Scan Asset QR
</Button>
</div>

<div className="w-full lg:w-fit">
<Button
variant="primary"
size="default"
id="create-asset-button"
disabled={!NonReadOnlyUsers}
className="w-full p-[10px] md:w-auto"
onClick={() => {
if (qParams.facility) {
navigate(`/facility/${qParams.facility}/assets/new`);
} else {
setShowFacilityDialog(true);
}
}}
>
<CareIcon icon="l-plus-circle" className="text-lg mr-2" />
<span>{t("create_asset")}</span>
</Button>
</div>
</div>

{/* Advanced Filter Button */}
<div className="w-full md:w-auto">
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
</div>

{/* Import/Export Menu */}
{authorizedForImportExport && (
<div className="tooltip" data-testid="import-asset-button">
<div
className="tooltip w-full md:w-auto"
data-testid="import-asset-button"
>
<ExportMenu
label={importAssetModalOpen ? "Importing..." : "Import/Export"}
exportItems={[
Expand Down Expand Up @@ -371,62 +418,35 @@ const AssetsList = () => {
/>
</div>
)}
</>
</div>
}
>
<div className="mt-5 gap-3 space-y-2 lg:flex">
<div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
<CountBlock
text="Total Assets"
count={totalCount}
loading={loading}
icon="d-folder"
className="flex-1"
className=""
/>
<SearchByMultipleFields
id="asset-search"
options={[
{
key: "Name/ Serial no./ QR code ID",
label: "name/serial no./QR code ID",
type: "text" as const,
placeholder: "Search by Name / Serial no. / QR code ID",
value: qParams.search || "",
shortcutKey: "n",
},
]}
className="w-full"
onSearch={(key, value) => updateQuery({ search: value })}
clearSearch={clearSearch}
/>
<div className="flex-1">
<SearchInput
id="asset-search"
name="search"
value={qParams.search}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder="Search by name/serial no./QR code ID"
/>
</div>
<div className="flex flex-col items-start justify-start gap-2 lg:ml-2">
<div className="flex w-full flex-col gap-2 md:flex-row lg:w-auto">
<div className="w-full">
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
</div>
<ButtonV2
className="w-full py-[11px]"
onClick={() => setIsScannerActive(true)}
>
<CareIcon icon="l-search" className="mr-1 text-base" /> Scan Asset
QR
</ButtonV2>
</div>
<div
className="flex w-full flex-col md:flex-row"
data-testid="create-asset-buttom"
>
<ButtonV2
authorizeFor={NonReadOnlyUsers}
className="inline-flex w-full items-center justify-center"
onClick={() => {
if (qParams.facility) {
navigate(`/facility/${qParams.facility}/assets/new`);
} else {
setShowFacilityDialog(true);
}
}}
>
<CareIcon icon="l-plus-circle" className="text-lg" />
<span>{t("create_asset")}</span>
</ButtonV2>
</div>
</div>
</div>

<AssetFilter {...advancedFilter} key={window.location.search} />
{isLoading ? (
<Loading />
Expand Down
14 changes: 8 additions & 6 deletions src/components/Common/Export.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import CareIcon from "@/CAREUI/icons/CareIcon";

import { Button } from "@/components/ui/button";

import ButtonV2 from "@/components/Common/ButtonV2";
import DropdownMenu, {
DropdownItem,
Expand Down Expand Up @@ -49,8 +51,9 @@ export const ExportMenu = ({
const item = exportItems[0];

return (
<ButtonV2
<Button
disabled={isExporting || disabled}
size="default"
onClick={() => {
let action = item.action;
if (item.route) {
Expand All @@ -63,13 +66,12 @@ export const ExportMenu = ({
exportFile(action, item.filePrefix, item.type, item.parse);
}
}}
border
ghost
variant="outline_primary"
className="py-2.5"
>
<CareIcon icon="l-export" />
{isExporting ? "Exporting..." : label}
</ButtonV2>
</Button>
);
}

Expand All @@ -79,7 +81,7 @@ export const ExportMenu = ({
disabled={isExporting || disabled}
title={isExporting ? "Exporting..." : label}
icon={<CareIcon icon="l-export" />}
className="tooltip border-primary-500 bg-white text-primary-500 hover:bg-primary-100 enabled:border"
className="border border-primary-700 text-primary-700 bg-white shadow-sm hover:bg-primary-700 hover:text-white h-9 px-4 py-2dark:border-primary-700 dark:bg-primary-700 dark:text-white"
>
{exportItems.map((item) => (
<DropdownItem
Expand Down Expand Up @@ -130,7 +132,7 @@ export const ExportButton = ({
exportFile(action, props.filenamePrefix, type, parse);
}
}}
className="tooltip mx-2 p-4 text-lg text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
className="tooltip mx-2 p-4 text-lg text-secondary-800 bg-red disabled:bg-transparent disabled:text-secondary-500"
variant="secondary"
ghost
circle
Expand Down
Loading