Skip to content

Commit f42e2c1

Browse files
weimiao67weimiao67
authored
OP-5317: expanded BLI row layout adjustment (#5558)
1 parent 66c2bda commit f42e2c1

15 files changed

Lines changed: 319 additions & 130 deletions

File tree

‎frontend/src/components/BudgetLineItems/AllBudgetLinesTable/AllBLIRow.jsx‎

Lines changed: 25 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -101,48 +101,34 @@ const AllBLIRow = ({ budgetLine }) => {
101101

102102
const ExpandedData = (
103103
<td
104-
colSpan={12}
104+
colSpan={10}
105105
className="border-top-none"
106106
style={expandedRowBGColor}
107107
>
108-
<div className="display-flex flex-justify padding-right-10">
109-
<dl className="font-12px margin-top-0">
108+
<div className="grid-row grid-gap-3">
109+
<dl className="grid-col-auto margin-top-0 font-12px">
110110
<dt className="margin-0 text-base-dark">Created by</dt>
111-
<dd
112-
id={`created-by-name-${budgetLine?.id}`}
113-
className="margin-0"
114-
>
115-
{budgetLineCreatorName}
116-
</dd>
117-
<dt className="margin-0 text-base-dark margin-top-2">Created on</dt>
118-
<dd className="margin-0 display-flex flex-align-center">
119-
<FontAwesomeIcon
120-
icon={faClock}
121-
className="height-2 width-2 margin-right-1"
122-
aria-hidden={true}
123-
/>
124-
{getBudgetLineCreatedDate(budgetLine)}
111+
<dd className="margin-0">
112+
<div id={`created-by-name-${budgetLine?.id}`}>{budgetLineCreatorName}</div>
113+
<div className="margin-top-2 display-flex flex-align-center text-base-dark text-normal">
114+
<FontAwesomeIcon
115+
icon={faClock}
116+
className="height-2 width-2 margin-right-1"
117+
aria-hidden={true}
118+
/>
119+
{getBudgetLineCreatedDate(budgetLine)}
120+
</div>
125121
</dd>
126122
</dl>
127-
<dl className="font-12px margin-left-2 margin-top-0">
123+
<dl className="grid-col-4 margin-top-0 font-12px">
128124
<dt className="margin-0 text-base-dark">Description</dt>
129-
<dd
130-
className="margin-0 wrap-text"
131-
style={{ maxWidth: "25rem" }}
132-
>
133-
{budgetLine?.line_description}
134-
</dd>
125+
<dd className="margin-0 wrap-text">{budgetLine?.line_description}</dd>
135126
</dl>
136-
<dl className="font-12px margin-left-2 margin-top-0">
127+
<dl className="grid-col-auto margin-top-0 font-12px">
137128
<dt className="margin-0 text-base-dark">Procurement Shop</dt>
138-
<dd
139-
className="margin-0"
140-
style={{ maxWidth: "25rem" }}
141-
>
142-
{getProcurementShopLabel(budgetLine)}
143-
</dd>
129+
<dd className="margin-0">{getProcurementShopLabel(budgetLine)}</dd>
144130
</dl>
145-
<dl className="font-12px margin-left-2 margin-top-0">
131+
<dl className="grid-col-auto margin-top-0 font-12px">
146132
<dt className="margin-0 text-base-dark">Subtotal</dt>
147133
<dd className="margin-0">
148134
<CurrencyFormat
@@ -155,7 +141,7 @@ const AllBLIRow = ({ budgetLine }) => {
155141
/>
156142
</dd>
157143
</dl>
158-
<dl className="margin-left-2 font-12px margin-top-0">
144+
<dl className="grid-col-auto margin-top-0 font-12px">
159145
<dt className="margin-0 text-base-dark">Fees</dt>
160146
<dd className="margin-0">
161147
<CurrencyFormat
@@ -172,25 +158,20 @@ const AllBLIRow = ({ budgetLine }) => {
172158
<p className="font-12px margin-0 margin-top-1 text-base-dark">
173159
Agreement data associated to this budget line
174160
</p>
175-
<div className="display-flex flex-justify padding-right-10 ">
176-
<dl className="font-12px margin-top-0">
161+
<div className="grid-row grid-gap-6 padding-bottom-1">
162+
<dl className="grid-col-4 margin-top-0 font-12px">
177163
<dt className="margin-0 text-base-dark">Project</dt>
178-
<dd
179-
className="margin-0 wrap-text"
180-
style={{ maxWidth: "25rem" }}
181-
>
182-
{budgetLine.agreement?.project?.title ?? NO_DATA}
183-
</dd>
164+
<dd className="margin-0 wrap-text">{budgetLine.agreement?.project?.title ?? NO_DATA}</dd>
184165
</dl>
185-
<dl className="font-12px margin-left-2 margin-top-0">
166+
<dl className="grid-col-auto margin-top-0 font-12px">
186167
<dt className="margin-0 text-base-dark">Award Type</dt>
187168
<dd className="margin-0">{awardType}</dd>
188169
</dl>
189-
<dl className="font-12px margin-left-2 margin-top-0">
170+
<dl className="grid-col-auto margin-top-0 font-12px">
190171
<dt className="margin-0 text-base-dark">Research Type</dt>
191172
<dd className="margin-0">{NO_DATA}</dd>
192173
</dl>
193-
<dl className="font-12px margin-left-2 margin-top-0">
174+
<dl className="grid-col-auto margin-top-0 font-12px">
194175
<dt className="margin-0 text-base-dark">Vendor</dt>
195176
<dd className="margin-0">{vendor}</dd>
196177
</dl>

‎frontend/src/components/BudgetLineItems/AllBudgetLinesTable/AllBudgetLinesTable.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import ConfirmationModal from "../../UI/Modals/ConfirmationModal";
22
import PaginationNav from "../../UI/PaginationNav/PaginationNav";
33
import Table from "../../UI/Table";
4+
import tableStyles from "../../UI/Table/table.module.css";
45
import AllBLIRow from "./AllBLIRow";
56
import { All_BUDGET_LINES_TABLE_HEADINGS_LIST } from "./AllBudgetLinesTable.constants";
67
import useAllBudgetLinesTable from "./AllBudgetLinesTable.hooks";
@@ -57,6 +58,7 @@ const AllBudgetLinesTable = ({
5758
selectedHeader={sortConditions}
5859
onClickHeader={setSortConditions}
5960
sortDescending={sortDescending}
61+
className={tableStyles.verticalAlignTop}
6062
>
6163
{budgetLineItems?.length > 0 &&
6264
budgetLineItems.map((budgetLine) => (

‎frontend/src/components/BudgetLineItems/BLIDiffTable/BLIDiffRow.jsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import { faClock } from "@fortawesome/free-regular-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import CurrencyFormat from "react-currency-format";
44
import { useSelector } from "react-redux";
5-
import { BLI_STATUS, BLILabel, canLabel, getBudgetLineCreatedDate } from "../../../helpers/budgetLines.helpers";
5+
import {
6+
BLI_STATUS,
7+
BLILabel,
8+
canLabel,
9+
getBudgetLineCreatedDate,
10+
getProcurementShopLabel
11+
} from "../../../helpers/budgetLines.helpers";
612
import { getDecimalScale } from "../../../helpers/currencyFormat.helpers";
713
import { fiscalYearFromDate, formatDateNeeded } from "../../../helpers/utils";
814
import { useChangeRequestsForTooltip } from "../../../hooks/useChangeRequests.hooks";
@@ -146,28 +152,28 @@ const BLIDiffRow = ({ budgetLine, changeType, statusChangeTo = "" }) => {
146152
style={expandedRowBGColor}
147153
>
148154
<div className="grid-row grid-gap-4">
149-
<dl className="grid-col-3 margin-top-0 font-12px">
155+
<dl className="grid-col-auto margin-top-0 font-12px">
150156
<dt className="margin-0 text-base-dark">Created By</dt>
151-
<dd
152-
id={`created-by-name-${budgetLine?.id}`}
153-
className="margin-0"
154-
>
155-
{budgetLineCreatorName}
156-
</dd>
157-
<dt className="margin-0 text-base-dark margin-top-2">Created on</dt>
158-
<dd className="margin-0 display-flex flex-align-center">
159-
<FontAwesomeIcon
160-
icon={faClock}
161-
className="height-2 width-2 margin-right-1"
162-
aria-hidden={true}
163-
/>
164-
{getBudgetLineCreatedDate(budgetLine)}
157+
<dd className="margin-0">
158+
<div id={`created-by-name-${budgetLine?.id}`}>{budgetLineCreatorName}</div>
159+
<div className="margin-top-2 display-flex flex-align-center text-base-dark text-normal">
160+
<FontAwesomeIcon
161+
icon={faClock}
162+
className="height-2 width-2 margin-right-1"
163+
aria-hidden={true}
164+
/>
165+
{getBudgetLineCreatedDate(budgetLine)}
166+
</div>
165167
</dd>
166168
</dl>
167-
<dl className="grid-col-6 margin-top-0 font-12px">
169+
<dl className="grid-col-4 margin-top-0 font-12px">
168170
<dt className="margin-0 text-base-dark">Description</dt>
169171
<dd className="margin-0 wrap-text">{budgetLine?.line_description}</dd>
170172
</dl>
173+
<dl className="grid-col-auto margin-top-0 font-12px">
174+
<dt className="margin-0 text-base-dark">Procurement Shop</dt>
175+
<dd className="margin-0">{getProcurementShopLabel(budgetLine)}</dd>
176+
</dl>
171177
</div>
172178
</td>
173179
);

‎frontend/src/components/BudgetLineItems/BLIDiffTable/BLIDiffRow.test.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,13 @@ describe("BLIRow", () => {
136136
const createdBy = screen.getByText("TBD");
137137
const createdDate = screen.getByText("July 26, 2024");
138138
const notes = screen.getByText(/sc3/i);
139+
const procurementShopLabel = screen.getByText("Procurement Shop");
139140

140141
expect(expandedRow).toBeInTheDocument();
141142
expect(createdBy).toBeInTheDocument();
142143
expect(createdDate).toBeInTheDocument();
143144
expect(notes).toBeInTheDocument();
145+
expect(procurementShopLabel).toBeInTheDocument();
144146
});
145147

146148
it("should highlight changed fields for budget change", () => {

‎frontend/src/components/BudgetLineItems/BLIReviewTable/BLIReviewRow.jsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { faClock } from "@fortawesome/free-regular-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import CurrencyFormat from "react-currency-format";
4-
import { getBudgetLineCreatedDate } from "../../../helpers/budgetLines.helpers";
4+
import { getBudgetLineCreatedDate, getProcurementShopLabel } from "../../../helpers/budgetLines.helpers";
55
import { getDecimalScale } from "../../../helpers/currencyFormat.helpers";
66
import { fiscalYearFromDate, formatDateNeeded } from "../../../helpers/utils";
77
import useGetUserFullNameFromId, { useGetLoggedInUserFullName } from "../../../hooks/user.hooks";
@@ -219,29 +219,31 @@ const BLIReviewRow = ({
219219
style={expandedRowBGColor}
220220
>
221221
<div className="grid-row grid-gap-4">
222-
<dl className="grid-col-3 margin-top-0 font-12px">
222+
<dl className="grid-col-auto margin-top-0 font-12px">
223223
<dt className="margin-0 text-base-dark">Created By</dt>
224-
<dd
225-
id={`created-by-name-${budgetLine?.id}`}
226-
className="margin-0"
227-
>
228-
{/* NOTE: Show logged in user name when creating BLIs */}
229-
{budgetLine?.created_by ? budgetLineCreatorName : loggedInUserFullName}
230-
</dd>
231-
<dt className="margin-0 text-base-dark margin-top-2">Created on</dt>
232-
<dd className="margin-0 display-flex flex-align-center">
233-
<FontAwesomeIcon
234-
icon={faClock}
235-
className="height-2 width-2 margin-right-1"
236-
aria-hidden={true}
237-
/>
238-
{getBudgetLineCreatedDate(budgetLine)}
224+
<dd className="margin-0">
225+
<div id={`created-by-name-${budgetLine?.id}`}>
226+
{/* NOTE: Show logged in user name when creating BLIs */}
227+
{budgetLine?.created_by ? budgetLineCreatorName : loggedInUserFullName}
228+
</div>
229+
<div className="margin-top-2 display-flex flex-align-center text-base-dark text-normal">
230+
<FontAwesomeIcon
231+
icon={faClock}
232+
className="height-2 width-2 margin-right-1"
233+
aria-hidden={true}
234+
/>
235+
{getBudgetLineCreatedDate(budgetLine)}
236+
</div>
239237
</dd>
240238
</dl>
241-
<dl className="grid-col-6 margin-top-0 font-12px">
239+
<dl className="grid-col-4 margin-top-0 font-12px">
242240
<dt className="margin-0 text-base-dark">Description</dt>
243241
<dd className="margin-0 wrap-text">{budgetLine?.line_description}</dd>
244242
</dl>
243+
<dl className="grid-col-auto margin-top-0 font-12px">
244+
<dt className="margin-0 text-base-dark">Procurement Shop</dt>
245+
<dd className="margin-0">{getProcurementShopLabel(budgetLine)}</dd>
246+
</dl>
245247
</div>
246248
</td>
247249
);

0 commit comments

Comments
 (0)