5137.3 Requisition line edit + UI updates to line columns #5308

roxy-dao · 2024-11-04T23:16:40Z

Part 3 of #5137

👩🏻‍💻 What does this PR do?

Allows the users to add lines to the response requisition if it is a general manual requisition.
Adds new ListOption component that lists an array of options
Create new response requisition line page which:
- Lists the lines for the response requisition the left side of the page
- Allows users to edit the columns in the right side of the page
The user can select the previous/next buttons on the page to go to the previous or next buttons OR click on the item in the list to navigate to that line
The tick will toggle on if the user has entered suggested quantity
Refactored insert response line to only accept id, item_id and requisition_id

Screen.Recording.2024-11-05.at.12.03.28.PM.mov

💌 Any notes for the reviewer?

P.S. I forgot about the charts and only just remembered while writing up this PR so there will be a part 4 incoming! 😓
Carryover: Don't let user navigate away from page if reason isn't inputted and is required?

🧪 Testing

📃 Documentation

Part of an epic: documentation will be completed for the feature as a whole
No documentation required: no user facing changes or a bug fix which isn't a change in behaviour
These areas should be updated or checked:
1.
2.

…ns' into 5137.3

github-actions · 2024-11-04T23:21:23Z

Bundle size difference

Comparing this PR to main

Old size	New size	Diff
4.95 MB	4.95 MB	-5.28 KB (-0.10%)

roxy-dao · 2024-11-04T23:17:46Z

client/packages/coldchain/src/Equipment/DetailView/UpdateStatusButton.tsx

@@ -145,7 +145,7 @@ export const UpdateStatusButtonComponent = ({
        nextButton={
          currentTab === Tabs.Status ? (
            <DialogButton
-              variant="next"
+              variant="next-and-ok"


Renaming of the next button so I can create an actual 'next' button not 'ok & next'

roxy-dao · 2024-11-04T23:18:20Z

client/packages/common/src/types/schema.ts

-  additionInUnits?: InputMaybe<Scalars['Float']['input']>;
-  averageMonthlyConsumption?: InputMaybe<Scalars['Float']['input']>;
-  comment?: InputMaybe<Scalars['String']['input']>;
-  daysOutOfStock?: InputMaybe<Scalars['Float']['input']>;
-  expiringUnits?: InputMaybe<Scalars['Float']['input']>;


Don't need all these fields on insert. We will do everything on update as everything is saved on blur except for the actual line creation itself

roxy-dao · 2024-11-04T23:18:44Z

client/packages/common/src/types/schema.ts

@@ -6469,6 +6457,7 @@ export type RequisitionLineNode = {
  remainingQuantityToSupply: Scalars['Float']['output'];
  /** Quantity requested */
  requestedQuantity: Scalars['Float']['output'];
+  requisitionNumber: Scalars['Int']['output'];


Needed for navigation

roxy-dao · 2024-11-04T23:19:29Z

client/packages/common/src/ui/components/navigation/ListOptions/ListOptions.tsx

+  const startIcon = (
+    <CheckIcon
+      style={{
+        backgroundColor: '#33A901',
+        borderRadius: '50%',
+        padding: '2px',
+        color: 'white',
+        height: 18,
+        width: 18,
+      }}
+    />
+  );
+
+  const endIcon = (
+    <ChevronDownIcon
+      style={{ width: 17, height: 17, transform: 'rotate(-90deg)' }}
+    />
+  );


I had them passed in as props at first since we might use different icons for different use cases, but can't think of them right now for what we will use it for. Easy to refactor later on if needed

roxy-dao · 2024-11-04T23:21:17Z

client/packages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/Footer.tsx

+            <DialogButton
+              variant="previous"
+              disabled={!hasPrevious}
+              onClick={() =>


Using existing buttons for now instead of re-designing to fit new UI designs

roxy-dao · 2024-11-04T23:21:42Z

...ckages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/ResponseEditPage.tsx

+  const lines =
+    data?.lines.nodes.sort((a, b) => a.item.name.localeCompare(b.item.name)) ??
+    [];


Sorting so the list is in alphabetical order

roxy-dao · 2024-11-04T23:22:41Z

client/packages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/hooks.tsx

+export const useDraftRequisitionLine = (item?: ItemRowFragment | null) => {
+  const { id: reqId, lines } = useResponse.document.fields(['id', 'lines']);


Using existing pattern for now, but this could be updated straight from endpoint instead of going through a draft

…on hand

…ns' into 5137.3

Chris-Petty

Some wee nit and comments but otherwise works great!

Chris-Petty · 2024-11-06T22:38:10Z

client/packages/common/src/intl/locales/en/common.json

  "button.next-step": "Next step",
  "button.ok": "OK",
  "button.ok-and-next": "OK & Next",
  "button.open-the-menu": "Open the menu",
  "button.order-more": "Order more",
+  "button.previous": "Previous",


Other than this and Next the rest of this is just your editor alphabetically sorting aye?

client/packages/common/src/intl/locales/en/common.json

client/packages/common/src/types/schema.ts

client/packages/common/src/ui/components/buttons/ButtonShowcase.stories.tsx

client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx

...ckages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/ResponseEditPage.tsx

...ckages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/ResponseLineEdit.tsx

Chris-Petty · 2024-11-07T01:47:49Z

...ckages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/ResponseLineEdit.tsx

+              />
+            }
+            labelWidth={LABEL_WIDTH}
+            label={t('label.outgoing')}


Guess it's just up the design but I'd have assumed we should have the header as "Outgoing Units". Maybe it's redundant given everything is in units though.

Chris-Petty · 2024-11-07T01:49:47Z

...ckages/requisitions/src/ResponseRequisition/DetailView/ResponseLineEdit/ResponseLineEdit.tsx

Sick looks great!

Chris-Petty · 2024-11-07T02:35:06Z

client/packages/common/src/ui/components/navigation/ListOptions/ListOptions.tsx

+                startIcon
+              ) : (
+                <Box style={{ visibility: 'hidden' }}>{startIcon}</Box>
+              )}


This one is quite funky - behind the scenes it appears to still be rendering the icon it's just invisible. But if you remove the icon JSX from here it renders the same anyway, just shadow dom doing less work?

Chris-Petty · 2024-11-07T03:09:39Z

client/packages/common/src/ui/components/navigation/ListOptions/ListOptions.tsx

-              )}
+              <Box
+                style={{
+                  visibility: enteredLineIds?.includes(option.id)


If this is in response to my comment I was more meaning that for this requisition of 21 items

It renders the checkbox component 63 times (3 times per row for whatever reason 😁) when only one row is actually showing the checkbox. Where as if you had

<Box>{enteredLineIds?.includes(option.id) && startIcon}</Box>

Instead it only renders a checkbox 3 times, for the one row it's actually displayed on. Same goes for the endIcon

Oh no it was just a refactor.

I have both icons hidden because I didn't want it to move the text when it appears... which happens... So, instead we render it in a hidden state so the text doesn't move

Right I had to fiddle around a bit to see only seems to happen on a small window, so probably would happen on tablet!

roxy-dao added 29 commits November 4, 2024 12:35

Add onBlur prop to reason options search input

9237b1f

Add requisition number to requisition line node

4883c67

Basic list options component

497c8e3

Basic list items component

7ed5c46

Pass in route to list item component

e4b4264

Add route to requisition line

1f63ef5

App bar buttons of requisition detail view

70d2bdc

Export reason option component

ea39dbb

Removed toggle

56ecd01

Show end icon based on current id

a884b6b

Only input req_id, id and item_id for requisition line insert

05bba09

Show start icon based on entered ids

1ec5867

Use check icon for start icon and pass in entered line ids

8d84927

Insert response requisition line hook

42fe9b2

Nothing here add item linkage

1934f51

Navigate away if row is clicked + add item modal

266df44

Response requisition line edit component

920175e

Response line edit page

bc610df

Add previous option to dialog option

4d9f5b0

Next and ok & next dialog buttons

593eaf5

Rename next -> next-and-ok for dialog button

d164bc6

Find both previous + next response lines

c459e4d

Footer for response edit page

79be92a

Add footer to edit response line page

52a8dd3

Sort lines

eba331a

Don't pass in icons as props

a6ce13d

Merge branch '5137.2-Requisition-line-edit-+-UI-updates-to-line-colum…

9f2a975

…ns' into 5137.3

Sort translation

e1f4e0b

Use correct field to get available

29029b6

github-actions bot added the enhancement New feature or request label Nov 4, 2024

github-actions bot added Team Ruru 🦉 Roxy, Ferg, Noel feature: manual requisition labels Nov 4, 2024

Change footer button to next

54ff080

roxy-dao commented Nov 4, 2024

View reviewed changes

roxy-dao changed the title ~~5137 Requisition line edit + UI updates to line columns~~ 5137.3 Requisition line edit + UI updates to line columns Nov 4, 2024

roxy-dao requested a review from Chris-Petty November 4, 2024 23:24

roxy-dao added 5 commits November 6, 2024 07:54

Show available stock on hand if not program instead of initial stock …

8af9e35

…on hand

Merge branch 'develop' into 5137.3

ae32c65

Fix merge issues

c0972f1

Disable input if linked requisition

63c3405

Merge branch '5137.2-Requisition-line-edit-+-UI-updates-to-line-colum…

25d0378

…ns' into 5137.3

Base automatically changed from 5137.2-Requisition-line-edit-+-UI-updates-to-line-columns to develop November 5, 2024 22:24

An error occurred while trying to automatically change base from 5137.2-Requisition-line-edit-+-UI-updates-to-line-columns to develop November 5, 2024 22:24

Chris-Petty self-assigned this Nov 6, 2024

Chris-Petty approved these changes Nov 7, 2024

View reviewed changes

roxy-dao added 2 commits November 7, 2024 15:56

Merge branch 'develop' into 5137.3

a5bebb2

ternary operator to show/hide icons

474db73

Chris-Petty reviewed Nov 7, 2024

View reviewed changes

roxy-dao merged commit 062328a into develop Nov 7, 2024
6 checks passed

roxy-dao deleted the 5137.3 branch November 7, 2024 03:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

5137.3 Requisition line edit + UI updates to line columns #5308

5137.3 Requisition line edit + UI updates to line columns #5308

roxy-dao commented Nov 4, 2024

github-actions bot commented Nov 4, 2024 •

edited

Loading

roxy-dao Nov 4, 2024

roxy-dao Nov 4, 2024

roxy-dao Nov 4, 2024

roxy-dao Nov 4, 2024

roxy-dao Nov 4, 2024

roxy-dao Nov 4, 2024

roxy-dao Nov 4, 2024

Chris-Petty left a comment

Chris-Petty Nov 6, 2024

roxy-dao Nov 7, 2024

Chris-Petty Nov 7, 2024

Chris-Petty Nov 7, 2024

Chris-Petty Nov 7, 2024

Chris-Petty Nov 7, 2024 •

edited

Loading

roxy-dao Nov 7, 2024 •

edited

Loading

Chris-Petty Nov 7, 2024

		export const useDraftRequisitionLine = (item?: ItemRowFragment \| null) => {
		const { id: reqId, lines } = useResponse.document.fields(['id', 'lines']);

5137.3 Requisition line edit + UI updates to line columns #5308

5137.3 Requisition line edit + UI updates to line columns #5308

Conversation

roxy-dao commented Nov 4, 2024

👩🏻‍💻 What does this PR do?

💌 Any notes for the reviewer?

🧪 Testing

📃 Documentation

github-actions bot commented Nov 4, 2024 • edited Loading

Bundle size difference

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chris-Petty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chris-Petty Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

roxy-dao Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 4, 2024 •

edited

Loading

Chris-Petty Nov 7, 2024 •

edited

Loading

roxy-dao Nov 7, 2024 •

edited

Loading