From 1a762bbb78527796cf39f8d1cb02be6f4b8cd530 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 24 May 2024 14:22:33 +0200 Subject: [PATCH 01/23] Add React key to mapped fee list items to solve consol errors --- src/apps/fee-list/list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/apps/fee-list/list.tsx b/src/apps/fee-list/list.tsx index a1462c77d7..be55d1536c 100644 --- a/src/apps/fee-list/list.tsx +++ b/src/apps/fee-list/list.tsx @@ -34,6 +34,7 @@ const List: FC = ({ materialItemNumber={itemData.materials[0].materialItemNumber} feeData={itemData} openDetailsModalClickEvent={openDetailsModalClickEvent} + key={itemData.feeId} /> ))}
From 2cfaa9e8a6969c5c0a4d2bd8607d914734156044 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 24 May 2024 14:24:13 +0200 Subject: [PATCH 02/23] Add loan group modal text props to FeeList These are needed in preparation for addind the overdue fees modal into the fees page. Props added: - groupModalArgs - groupModalLoansArgs - materialDetailsModalArgs - renewalArgs --- src/apps/fee-list/FeeList.dev.tsx | 12 ++++++++++++ src/apps/fee-list/FeeList.entry.tsx | 22 ++++++++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/apps/fee-list/FeeList.dev.tsx b/src/apps/fee-list/FeeList.dev.tsx index 435b9a7482..a81546edc9 100644 --- a/src/apps/fee-list/FeeList.dev.tsx +++ b/src/apps/fee-list/FeeList.dev.tsx @@ -7,6 +7,10 @@ import FeeList from "./FeeList.entry"; import { getModalIds } from "../../core/utils/helpers/modal-helpers"; import globalTextArgs from "../../core/storybook/globalTextArgs"; import globalConfigArgs from "../../core/storybook/globalConfigArgs"; +import groupModalArgs from "../../core/storybook/groupModalArgs"; +import groupModalLoansArgs from "../../core/storybook/loanGroupModalArgs"; +import materialDetailsModalArgs from "../../core/storybook/materialDetailsModalArgs"; +import renewalArgs from "../../core/storybook/renewalArgs"; export default { title: "Apps / Fee list", @@ -16,6 +20,10 @@ export default { ...blockedArgs, ...globalTextArgs, ...globalConfigArgs, + ...groupModalArgs, + ...groupModalLoansArgs, + ...materialDetailsModalArgs, + ...renewalArgs, feeListHeadlineText: { defaultValue: "Fees & Replacement costs", control: { type: "text" } @@ -179,6 +187,10 @@ export default { defaultValue: "Go to the loan list page to see your overdue loans", control: { type: "text" } }, + loansOverdueText: { + defaultValue: "Returned too late", + control: { type: "text" } + }, // Urls physicalLoansUrl: { defaultValue: "/user/me/loans", diff --git a/src/apps/fee-list/FeeList.entry.tsx b/src/apps/fee-list/FeeList.entry.tsx index 40d807285f..bb08b495fd 100644 --- a/src/apps/fee-list/FeeList.entry.tsx +++ b/src/apps/fee-list/FeeList.entry.tsx @@ -7,6 +7,11 @@ import FeeList from "./FeeList"; import GlobalUrlEntryPropsInterface from "../../core/utils/types/global-url-props"; import { withConfig } from "../../core/utils/config"; import { GlobalEntryTextProps } from "../../core/storybook/globalTextArgs"; +import { pageSizeGlobal } from "../../core/utils/helpers/general"; +import { GroupModalProps } from "../../core/storybook/groupModalArgs"; +import { GroupModalLoansProps } from "../../core/storybook/loanGroupModalArgs"; +import { MaterialDetailsModalProps } from "../../core/storybook/materialDetailsModalArgs"; +import { RenewalArgs } from "../../core/storybook/renewalArgs"; export interface IntermedateListEntryConfigProps { expirationWarningDaysBeforeConfig: string; @@ -62,8 +67,21 @@ const FeeListEntry: FC< BlockedPatronEntryTextProps & IntermedateListEntryConfigProps & GlobalEntryTextProps & - GlobalUrlEntryPropsInterface -> = () => ; + GlobalUrlEntryPropsInterface & + GroupModalProps & + GroupModalLoansProps & + MaterialDetailsModalProps & + RenewalArgs +> = ({ pageSizeDesktop, pageSizeMobile }) => { + const pageSize = pageSizeGlobal( + { + desktop: pageSizeDesktop, + mobile: pageSizeMobile + }, + "pageSizeLoanList" + ); + return ; +}; export default withUrls( withText(withIsPatronBlockedHoc(withConfig(FeeListEntry))) From 26c86ee45cde041c5d63ded9dac17b73fc5aa6bb Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 24 May 2024 14:36:42 +0200 Subject: [PATCH 03/23] Adjust Warning bar to accept action instead of link for the right button So instead of linking places, we can now, e.g. open modals and such. --- .../loan-list/materials/utils/warning-bar.tsx | 41 +++++++++++++------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/src/apps/loan-list/materials/utils/warning-bar.tsx b/src/apps/loan-list/materials/utils/warning-bar.tsx index e25e6db32b..e1fddc70e4 100644 --- a/src/apps/loan-list/materials/utils/warning-bar.tsx +++ b/src/apps/loan-list/materials/utils/warning-bar.tsx @@ -2,6 +2,7 @@ import React, { FC, useId } from "react"; import IconWarning from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/basic/icon-warning.svg"; import Link from "../../../../components/atoms/links/Link"; import LinkButton from "../../../../components/Buttons/LinkButton"; +import { Button } from "../../../../components/Buttons/Button"; interface WarningBarProps { linkText?: string; @@ -12,6 +13,7 @@ interface WarningBarProps { leftLink?: URL; rightLink?: URL; classNames?: string; + rightAction?: () => void; } const WarningBar: FC = ({ @@ -22,7 +24,8 @@ const WarningBar: FC = ({ rightButtonAriaLabelText, leftLink, rightLink, - classNames + classNames, + rightAction }) => { const labelId = useId(); @@ -50,7 +53,7 @@ const WarningBar: FC = ({

- {(rightText || rightLink) && ( + {(rightText || rightLink || rightAction) && (
{rightText && (

= ({ {rightText}

)}{" "} - - {rightButtonAriaLabelText} - {rightLink && ( - + + {rightButtonAriaLabelText} + + + + {rightButtonText} + + + )} + {!!rightAction && !!rightButtonText && ( +
)} From c89ebd2e4bc1f81517fdb6ad0eecc683709c2252 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 24 May 2024 14:37:44 +0200 Subject: [PATCH 04/23] Move createLoanModalId into the modal helper file from LoansGroupModal Will be reused by feelist --- src/components/GroupModal/LoansGroupModal.tsx | 7 +++++-- src/core/utils/helpers/modal-helpers.ts | 6 ++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/GroupModal/LoansGroupModal.tsx b/src/components/GroupModal/LoansGroupModal.tsx index 4612c27d9d..0683911835 100644 --- a/src/components/GroupModal/LoansGroupModal.tsx +++ b/src/components/GroupModal/LoansGroupModal.tsx @@ -16,7 +16,10 @@ import RenewalModalMessage from "../renewal/RenewalModalMessage"; import { succeededRenewalCount } from "../../core/utils/helpers/renewal"; import { useSingleRequestWithStatus } from "../../core/utils/useRequestsWithStatus"; import { ListType } from "../../core/utils/types/list-type"; -import { getModalIds } from "../../core/utils/helpers/modal-helpers"; +import { + createLoanModalId, + getModalIds +} from "../../core/utils/helpers/modal-helpers"; import { useStatistics } from "../../core/statistics/useStatistics"; import { statistics } from "../../core/statistics/statistics"; @@ -39,7 +42,7 @@ const LoansGroupModal: FC = ({ const { mutate } = useRenewLoansV2(); const { dueDateModal, allLoansId } = getModalIds(); const queryClient = useQueryClient(); - const modalIdUsed = dueDate ? `${dueDateModal}-${dueDate}` : allLoansId; + const modalIdUsed = createLoanModalId(dueDate, dueDateModal, allLoansId); const renewableMaterials = getAmountOfRenewableLoans(loansModal); const [materialsToRenew, setMaterialsToRenew] = useState([]); const [renewingResponse, setRenewingResponse] = useState< diff --git a/src/core/utils/helpers/modal-helpers.ts b/src/core/utils/helpers/modal-helpers.ts index 297305f91f..8a79401202 100644 --- a/src/core/utils/helpers/modal-helpers.ts +++ b/src/core/utils/helpers/modal-helpers.ts @@ -45,3 +45,9 @@ export const getDetailsModalId = (queryParam: string, prefix: string) => { } return ""; }; + +export const createLoanModalId = ( + dueDate: string | null | undefined, + dueDateModal: string | number | Record, + allLoansId: string | number | Record +) => (dueDate ? `${dueDateModal}-${dueDate}` : String(allLoansId)); From 9069cf58a9b52402fc6511a1f8e675dbcac26abb Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 24 May 2024 14:38:24 +0200 Subject: [PATCH 05/23] Add overdue loans group modal onto the fee list page --- src/apps/fee-list/FeeList.tsx | 59 +++++++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 3 deletions(-) diff --git a/src/apps/fee-list/FeeList.tsx b/src/apps/fee-list/FeeList.tsx index 0f1a0250ef..dba1ce6bfb 100644 --- a/src/apps/fee-list/FeeList.tsx +++ b/src/apps/fee-list/FeeList.tsx @@ -23,11 +23,24 @@ import FeeListSkeleton from "./FeeListSkeleton"; import WarningBar from "../loan-list/materials/utils/warning-bar"; import useLoans from "../../core/utils/useLoans"; import { LoanType } from "../../core/utils/types/loan-type"; +import LoansGroupModal from "../../components/GroupModal/LoansGroupModal"; +import MaterialDetailsModal, { + loanDetailsModalId +} from "../loan-list/modal/material-details-modal"; +import SimpleModalHeader from "../../components/GroupModal/SimpleModalHeader"; +import { + createLoanModalId, + getModalIds +} from "../../core/utils/helpers/modal-helpers"; +import MaterialDetails from "../loan-list/modal/material-details"; + +interface FeeListProps { + pageSize: number; +} -const FeeList: FC = () => { +const FeeList: FC = ({ pageSize }) => { const t = useText(); const u = useUrls(); - const physicalLoansUrl = u("physicalLoansUrl"); const viewFeesAndCompensationRatesUrl = u("viewFeesAndCompensationRatesUrl"); const [feeDetailsModalId, setFeeDetailsModalId] = useState(""); const { open } = useModalButtonHandler(); @@ -41,6 +54,9 @@ const FeeList: FC = () => { } = useLoans(); const [overdueLoans, setOverdueLoans] = useState([]); const [feeDetailsData, setFeeDetailsData] = useState(); + const dueDate: string | number = "yesterday"; + const { dueDateModal, allLoansId } = getModalIds(); + const [modalLoan, setModalLoan] = useState(null); const openDetailsModalClickEvent = useCallback( (feeId: number) => { if (feeId) { @@ -61,6 +77,13 @@ const FeeList: FC = () => { }, [fbsFees]); const shouldShowWarningBar = overdueLoans.length > 0 && !isLoadingFbs && !isLoadingPublizon; + const openLoanDetailsModal = useCallback( + (loan: LoanType) => { + setModalLoan(loan); + open(loanDetailsModalId(loan)); + }, + [open] + ); useEffect(() => { if (!isLoadingFbs && !isLoadingPublizon) { @@ -71,6 +94,17 @@ const FeeList: FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isLoadingFbs, isLoadingPublizon]); + const openLoanModal = useCallback( + (loans: LoanType[]) => { + if (loans.length === 1) { + openLoanDetailsModal(loans[0]); + } else { + open(createLoanModalId(dueDate, dueDateModal, allLoansId)); + } + }, + [openLoanDetailsModal, open, allLoansId, dueDateModal] + ); + return ( <>
@@ -92,8 +126,8 @@ const FeeList: FC = () => { })} rightButtonText={t("feeListSeeYourOverdueLoansText")} rightButtonAriaLabelText={t("feeListSeeYourOverdueLoansAriaText")} - rightLink={physicalLoansUrl} classNames="my-64" + rightAction={() => openLoanModal(overdueLoans)} /> )}
@@ -155,6 +189,25 @@ const FeeList: FC = () => { )} + {!isLoadingFbs && ( + + + + )} + {modalLoan && ( + + + + )} ); }; From ac3e1146c9acd06e6cdc700ccac44646aacd11c6 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 11:27:37 +0200 Subject: [PATCH 06/23] Update design system package to release/brahma-17 version --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b96c3aa989..d56f1f058f 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated." }, "dependencies": { - "@danskernesdigitalebibliotek/dpl-design-system": "^2024.20.1-dbc6110e263c0be00ca1fc8350a4cf6330ade2e0", + "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-2ce2ec91bd8d630eb381e3a39221c3d4eb01222a", "@fullcalendar/core": "^6.1.11", "@fullcalendar/daygrid": "^6.1.11", "@fullcalendar/interaction": "^6.1.11", diff --git a/yarn.lock b/yarn.lock index a737b06863..6b71fc53de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1574,10 +1574,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@danskernesdigitalebibliotek/dpl-design-system@^2024.20.1-dbc6110e263c0be00ca1fc8350a4cf6330ade2e0": - version "2024.20.1-dbc6110e263c0be00ca1fc8350a4cf6330ade2e0" - resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/2024.20.1-dbc6110e263c0be00ca1fc8350a4cf6330ade2e0/f24422a8d68ff4da24df841c7100d7e86b6a2c13#f24422a8d68ff4da24df841c7100d7e86b6a2c13" - integrity sha512-FIJa3K/WuKIo1UssdDdMgGPpBq+Wv3VvaYClLWkTQIpxKpkjJBA9oWHBrsyhVfSbFUP9DoGoDlBBDDJPxIJhRQ== +"@danskernesdigitalebibliotek/dpl-design-system@0.0.0-2ce2ec91bd8d630eb381e3a39221c3d4eb01222a": + version "0.0.0-2ce2ec91bd8d630eb381e3a39221c3d4eb01222a" + resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-2ce2ec91bd8d630eb381e3a39221c3d4eb01222a/9ed9a7ccb2cb6f4aafa71e0fcefa9e061f55df8e#9ed9a7ccb2cb6f4aafa71e0fcefa9e061f55df8e" + integrity sha512-oz+JNSBTegUKrhGAQS9fB4OnBUn7KXhNEMoWCvgtvoIKYrzILUO5kKeVWaqcqdDl4TN9q8o1wVZaItMrdT7R5w== "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3": version "0.5.7" From 33c34d742c14517eb5ba50e123977006b19014ce Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 14:22:43 +0200 Subject: [PATCH 07/23] Add dashboardLoansLinkText & dashboardReservationsLinkText to dashboard --- src/apps/dashboard/dashboard.dev.tsx | 8 ++++++++ src/apps/dashboard/dashboard.entry.tsx | 2 ++ 2 files changed, 10 insertions(+) diff --git a/src/apps/dashboard/dashboard.dev.tsx b/src/apps/dashboard/dashboard.dev.tsx index 21c1785e6c..65833b034d 100644 --- a/src/apps/dashboard/dashboard.dev.tsx +++ b/src/apps/dashboard/dashboard.dev.tsx @@ -157,6 +157,14 @@ export default { expirationWarningDaysBeforeConfig: { defaultValue: "6", control: { type: "text" } + }, + dashboardLoansLinkText: { + defaultValue: "All loans", + control: { type: "text" } + }, + dashboardReservationsLinkText: { + defaultValue: "All reservations", + control: { type: "text" } } }, component: DashBoard diff --git a/src/apps/dashboard/dashboard.entry.tsx b/src/apps/dashboard/dashboard.entry.tsx index ded773c30e..477e27129d 100644 --- a/src/apps/dashboard/dashboard.entry.tsx +++ b/src/apps/dashboard/dashboard.entry.tsx @@ -58,6 +58,8 @@ export interface DashBoardProps { totalAmountFeeText: string; totalOwedText: string; yourProfileText: string; + dashboardLoansLinkText: string; + dashboardReservationsLinkText: string; } const DashboardEntry: FC< From 90672437818e1fa75507e8808f261fd6aff607c6 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 14:23:12 +0200 Subject: [PATCH 08/23] Add option to show text link at the end of dashboard notification column --- .../NotificationColumn.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/apps/dashboard/dashboard-notification-list/NotificationColumn.tsx b/src/apps/dashboard/dashboard-notification-list/NotificationColumn.tsx index a0448b2436..2e87af1154 100644 --- a/src/apps/dashboard/dashboard-notification-list/NotificationColumn.tsx +++ b/src/apps/dashboard/dashboard-notification-list/NotificationColumn.tsx @@ -2,6 +2,7 @@ import React, { FC } from "react"; import EmptyList from "../../../components/empty-list/empty-list"; import Notifications, { NotificationMaterialsList } from "./Notifications"; import NotificationSkeleton from "../dashboard-notification/notification-skeleton"; +import Link from "../../../components/atoms/links/Link"; export interface NotificationColumnProps { materials: NotificationMaterialsList[]; @@ -9,6 +10,8 @@ export interface NotificationColumnProps { header: string; emptyListText: string; isLoading?: boolean; + linkText?: string; + linkUrl?: URL; } const NotificationColumn: FC = ({ @@ -16,7 +19,9 @@ const NotificationColumn: FC = ({ materialsCount, emptyListText, header, - isLoading = false + isLoading = false, + linkText, + linkUrl }) => { return (
@@ -39,6 +44,14 @@ const NotificationColumn: FC = ({ {materialsCount !== 0 && ( )} + {linkText && linkUrl && ( +
+ + {linkText} + + {materialsCount} +
+ )}
); }; From 0f4e2ca9285c05f0f436893151b462b746090221 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 14:23:55 +0200 Subject: [PATCH 09/23] Show link text at the bottom of dashboard notification columns --- .../dashboard-notification-list.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx b/src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx index d2c4f0e5f0..78f1a023f3 100644 --- a/src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx +++ b/src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx @@ -25,6 +25,7 @@ import { getModalIds } from "../../../core/utils/helpers/modal-helpers"; import { ListType } from "../../../core/utils/types/list-type"; +import { useUrls } from "../../../core/utils/url"; export interface DashboardNotificationListProps { pageSize: number; @@ -36,6 +37,9 @@ const DashboardNotificationList: FC = ({ columns }) => { const t = useText(); + const u = useUrls(); + const physicalLoansUrl = u("physicalLoansUrl"); + const reservationsUrl = u("reservationsUrl"); const { all: { reservations, @@ -215,6 +219,8 @@ const DashboardNotificationList: FC = ({ header={t("physicalLoansText")} emptyListText={t("noPhysicalLoansText")} isLoading={isLoadingLoans || isLoadingLoansPhysical} + linkText={t("dashboardLoansLinkText")} + linkUrl={physicalLoansUrl} /> = ({ header={t("reservationsText")} emptyListText={t("noReservationsText")} isLoading={isLoadingReservations} + linkText={t("dashboardReservationsLinkText")} + linkUrl={reservationsUrl} /> )} From bc7168dbe5a65336b59e78c99f7e9604d6e63a12 Mon Sep 17 00:00:00 2001 From: clausbruun Date: Mon, 27 May 2024 15:47:23 +0200 Subject: [PATCH 10/23] Handle libraryProfile zero values correctly --- .../patron-page/sections/StatusSection.tsx | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/src/apps/patron-page/sections/StatusSection.tsx b/src/apps/patron-page/sections/StatusSection.tsx index e5f4613340..fd92c34c5b 100644 --- a/src/apps/patron-page/sections/StatusSection.tsx +++ b/src/apps/patron-page/sections/StatusSection.tsx @@ -35,8 +35,8 @@ const StatusSection: FC = () => { const { maxConcurrentAudioLoansPerBorrower, maxConcurrentEbookLoansPerBorrower, - maxConcurrentAudioReservationsPerBorrower, - maxConcurrentEbookReservationsPerBorrower + maxConcurrentAudioReservationsPerBorrower = 0, + maxConcurrentEbookReservationsPerBorrower = 0 } = libraryProfile || {}; let patronEbookLoans = 0; @@ -72,18 +72,14 @@ const StatusSection: FC = () => { {t("patronPageStatusSectionLinkText")}
- {maxConcurrentEbookReservationsPerBorrower && - maxConcurrentAudioReservationsPerBorrower && ( -
- {t("patronPageStatusSectionReservationsText", { - placeholders: { - "@countEbooks": maxConcurrentEbookReservationsPerBorrower, - "@countAudiobooks": - maxConcurrentAudioReservationsPerBorrower - } - })} -
- )} +
+ {t("patronPageStatusSectionReservationsText", { + placeholders: { + "@countEbooks": maxConcurrentEbookReservationsPerBorrower, + "@countAudiobooks": maxConcurrentAudioReservationsPerBorrower + } + })} +

@@ -97,7 +93,7 @@ const StatusSection: FC = () => { > {t("patronPageStatusSectionLoansEbooksText")} - {maxConcurrentEbookLoansPerBorrower && ( + {maxConcurrentEbookLoansPerBorrower !== undefined && (
{ )}
- {maxConcurrentEbookLoansPerBorrower && ( + {maxConcurrentEbookLoansPerBorrower !== undefined && (
{ > {t("patronPageStatusSectionLoansAudioBooksText")} - {maxConcurrentAudioLoansPerBorrower && ( + {maxConcurrentAudioLoansPerBorrower !== undefined && (
{ )}
- {maxConcurrentEbookLoansPerBorrower && ( + {maxConcurrentAudioLoansPerBorrower !== undefined && (
{ { placeholders: { "@this": patronEbookLoans, - "@that": maxConcurrentEbookLoansPerBorrower + "@that": maxConcurrentAudioLoansPerBorrower } } )} From 18e77e69130ce9d215279cba7abded2e61a6bf0b Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 28 May 2024 11:35:19 +0200 Subject: [PATCH 11/23] Use previous state to negate it when interacting with header dropdown This makes sure to use the precise last state, even when clicking fast. --- src/components/search-bar/search-bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx index 8232b62ab5..c3650da4f3 100644 --- a/src/components/search-bar/search-bar.tsx +++ b/src/components/search-bar/search-bar.tsx @@ -32,7 +32,7 @@ const SearchBar: React.FC = ({ }) => { const t = useText(); const handleDropdownMenu = () => { - setIsHeaderDropdownOpen(!isHeaderDropdownOpen); + setIsHeaderDropdownOpen((prev) => !prev); }; return ( From dff040c69820bbfc102a8916c647837db158aa05 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 28 May 2024 11:36:43 +0200 Subject: [PATCH 12/23] Use new classes to animate opening/closing of header dropdown --- src/components/search-bar/search-bar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx index c3650da4f3..d224b0223f 100644 --- a/src/components/search-bar/search-bar.tsx +++ b/src/components/search-bar/search-bar.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import searchIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/basic/icon-search.svg"; import expandIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/ExpandMore.svg"; import { UseComboboxPropGetters } from "downshift"; +import clsx from "clsx"; import { useText } from "../../core/utils/text"; import { redirectTo } from "../../core/utils/helpers/url"; @@ -87,7 +88,9 @@ const SearchBar: React.FC = ({ type="image" src={expandIcon} alt={t("searchHeaderDropdownText")} - className="header__menu-dropdown-icon" + className={clsx("header__menu-dropdown-icon", { + "header__menu-dropdown-icon--expanded": isHeaderDropdownOpen + })} onClick={(e) => { e.preventDefault(); e.stopPropagation(); From f16b799ef201c566b2f39e54dfb3679013643130 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 28 May 2024 11:37:30 +0200 Subject: [PATCH 13/23] Communicate to screen readers that header dropdown is open/closed Using aria-expanded prop. --- src/components/search-bar/search-bar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx index d224b0223f..d891a2a136 100644 --- a/src/components/search-bar/search-bar.tsx +++ b/src/components/search-bar/search-bar.tsx @@ -106,6 +106,7 @@ const SearchBar: React.FC = ({ tabIndex={0} aria-label={t("searchHeaderDropdownText")} data-cy="search-header-dropdown-icon" + aria-expanded={isHeaderDropdownOpen} /> ); From 61349c8c614e616edefe1bef4b34950022ddaf9e Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 10:50:32 +0200 Subject: [PATCH 14/23] Swap user login icon aria labels - logged in /vs/ logged out --- src/apps/menu/menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/apps/menu/menu.tsx b/src/apps/menu/menu.tsx index 7bd7281052..687f1e9bda 100644 --- a/src/apps/menu/menu.tsx +++ b/src/apps/menu/menu.tsx @@ -51,8 +51,8 @@ const Menu: FC = ({ pageSize }) => { type="button" aria-label={ userData - ? t("menuUserIconAriaLabelText") - : t("menuUserIconAriaLabelLoggedOutText") + ? t("menuUserIconAriaLabelLoggedOutText") + : t("menuUserIconAriaLabelText") } onClick={() => openMenu()} onKeyDown={(e) => e.key === "Enter" && openMenu()} From fbf37a718b4509a1d963bd47b9dd5b21faea305d Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 11:01:43 +0200 Subject: [PATCH 15/23] Only show "login" user menu text if we're done loading --- src/apps/menu/menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/apps/menu/menu.tsx b/src/apps/menu/menu.tsx index 687f1e9bda..3fb6dc2ccd 100644 --- a/src/apps/menu/menu.tsx +++ b/src/apps/menu/menu.tsx @@ -64,12 +64,12 @@ const Menu: FC = ({ pageSize }) => { )} - {!userData?.patron?.name && ( + {!isLoading && !userData?.patron?.name && ( {t("searchHeaderLoginText")} )} - {userData?.patron?.name && ( + {!isLoading && userData?.patron?.name && ( {userData.patron.name} )} From dac9f8c4d35897ea5c376e2a1ead60da984aa4e2 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 11:54:10 +0200 Subject: [PATCH 16/23] Focus on the new last advanced search row when deleting last row --- src/apps/advanced-search/AdvancedSearchRow.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/apps/advanced-search/AdvancedSearchRow.tsx b/src/apps/advanced-search/AdvancedSearchRow.tsx index 79e81c225e..7f8cde88c4 100644 --- a/src/apps/advanced-search/AdvancedSearchRow.tsx +++ b/src/apps/advanced-search/AdvancedSearchRow.tsx @@ -78,13 +78,17 @@ const AdvancedSearchRow: React.FC = ({ newData.rows.splice(index, 1); updateData(newData); // Update the focus. If we're removing the first row, focus the new first row. - setFocusedRow(index); + if (newData.rows.length === index) { + setFocusedRow(index - 1); + } else { + setFocusedRow(index); + } }; const inputElement = useRef(null); useEffect(() => { - if (inputElement.current && isFocused) { - inputElement.current.focus(); + if (isFocused) { + inputElement.current?.focus(); } }, [isFocused]); From 2d0a12397f9e17cac2d0ce297b8cbe77a4e39ffc Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 12:02:15 +0200 Subject: [PATCH 17/23] Document why we're using pageSizeLoanList confic for fees page --- src/apps/fee-list/FeeList.entry.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/apps/fee-list/FeeList.entry.tsx b/src/apps/fee-list/FeeList.entry.tsx index bb08b495fd..1c5f4ebc1e 100644 --- a/src/apps/fee-list/FeeList.entry.tsx +++ b/src/apps/fee-list/FeeList.entry.tsx @@ -78,6 +78,7 @@ const FeeListEntry: FC< desktop: pageSizeDesktop, mobile: pageSizeMobile }, + // We use page size from loan list for overdue loans modal on the fees page. "pageSizeLoanList" ); return ; From b4323f10bfe7523539b189d1cb54427a3170266c Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 12:58:29 +0200 Subject: [PATCH 18/23] Show aria labels for user menu depending on whether patron data exists --- src/apps/menu/menu.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/apps/menu/menu.tsx b/src/apps/menu/menu.tsx index 3fb6dc2ccd..2fe44a853a 100644 --- a/src/apps/menu/menu.tsx +++ b/src/apps/menu/menu.tsx @@ -23,7 +23,6 @@ const Menu: FC = ({ pageSize }) => { userMenuUnregistered: userMenuUnregisteredModalId } = getModalIds(); const { isLoading, data: userData } = usePatronData(); - const openMenu = () => { if (isUnregistered()) { open(userMenuUnregisteredModalId as string); @@ -35,25 +34,25 @@ const Menu: FC = ({ pageSize }) => { } open(userMenuAuthenticatedModalId as string); }; + const getAriaLabel = () => { + if (isLoading) { + return t("searchHeaderLoginText"); + } + return userData?.patron + ? t("menuUserIconAriaLabelText") + : t("menuUserIconAriaLabelLoggedOutText"); + }; /* TODO: Add data-cy to all elements regarding cypress tests in this file, for reduced flakyness. */ - - /* - TODO: Find a way generally to handle loading state in app. - */ return ( <>