[BUU] See products in my catalogue

[mariocarabotta]

Context

In this story we are starting to build the actual table and display product data in the page. This is also an opportunity to spike some foundational behaviours for the table itself, especially lateral scrolling when there are too many columns to read the fields comfortably.

Some work has been done in the past on this, and can be seen in /admin/new_products. We might decide to build on that or restart.
Issues related to previous work can be found in #8996, #8930, #10350
Some of the above issues are still in progress, once we kick off this card we will archive them so that we can have a cleaner board.

Out of scope

• display variants
• edit any field
• display columns that are variant specific
• pagination (displayed in the mockups just for future reference)

Description

- As an: enterprise user
- On page: /admin/products
- I want to be able to: see the products in my catalogue
- So that: I can review what I am selling and its stock levels

Acceptance Criteria & Tests

Scenario 1: Seeing products - single enterprise
Given I have one enterprise only
And I have products in my catalogue
And I am in /admin/products
And the page is loading my catalogue
When my catalogue has been loaded successfully
Then I see the list of my products ordered by name

Scenario 2: Seeing products - multiple enterprises
Given I have multiple enterprises
And I am in /admin/products
And the page is loading my catalogue
When my catalogue has been loaded successfully
Then I see the list of the products of all my enterprises ordered by name

Columns and fields to be displayed

Note: these are in display order

Column	Display for single enterprise	Display for multiple enterprises	Mandatory	Display style & format
Name	Yes	Yes	Yes	Semibold, left aligned
SKU	Yes	Yes	No	Regular, right aligned
Unit type - EXCLUDE ITEM LABEL	Yes	Yes	Yes	Regular, right aligned
On hand - DISPLAY ON DEMAND IF ALL VARIANTS ARE ON DEMAND	Yes	Yes	Yes	Regular, right aligned
Producer	NO	Yes	Yes	Regular, left aligned
Category	Yes	Yes	Yes	Regular, left aligned
Tax category	Yes	Yes	No	Regular, left aligned
Inherits properties - DISPLAY AS YES / NO	Yes	Yes	Yes	Regular, left aligned
Available on	Yes	Yes	Yes	Regular, right aligned, YYYY-MM-DD
TBD - Import date	Yes	Yes	No	Regular, right aligned, YYYY-MM-DD

Design specs

The screen for specs is here
https://www.figma.com/file/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery?node-id=24%3A645&t=rIk1MTfvkQenGndx-1

A prototype to try the lateral scrolling is here (you need to click and drag on the table to interact)
https://www.figma.com/proto/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery?page-id=24%3A642&node-id=24-645&viewport=486%2C678%2C0.64&scaling=min-zoom

New components and styles

Component	Example
Table header
Table row with text and relaxed height (we'll build different heights later)
Scoll bar (might not be needed if browser handles well

[mariocarabotta]

we could test this component as part of the spike > https://boringrails.com/articles/responsive-tables-stimulus-intersection-observer/

[mariocarabotta]

based on this Slack thread, Available on and Import date will not be included in the table.

[mariocarabotta]

Comment from @kirstenalarsen we want/need to keep 'available on' as an option, not shown by default. It will likely become more used if /as we connect up on-farm data about potential harvest dates etc

We are going to keep the field.

[kirstenalarsen]

I have been overruled by @Matt-Yorkley in another thread. It is being removed from product model as doesn't work /bad code. So if we need it later we can put it in properly

…

On Thu, 8 Jun 2023 at 12:56, mariocarabotta ***@***.***> wrote: Comment from @kirstenalarsen <https://github.com/kirstenalarsen> *we want/need to keep 'available on' as an option, not shown by default. It will likely become more used if /as we connect up on-farm data about potential harvest dates etc* We are going to keep the field. — Reply to this email directly, view it on GitHub <#10694 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAWGXSAJCHUXPHVF4HTL33DXKE5PFANCNFSM6AAAAAAW5XZLCA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mariocarabotta]

@dacook I have tested this in staging, and from a UI point of view I've got a couple of tweaks below

• change title row size to 14px (sorry this was my bad in figma)
• the right side of the table needs a 4px Light grey (Porcelain) margin, like the left side

NOT NEEDING TO BE FIXED RIGHT NOW BELOW
I can see that the title label and the actual field are not exactly aligned, but we can leave that as is for now. there's going to be quite a bit of work with the inline editing, we can fix it at that point

There is also something odd happening with the Unit field, but again we can sort it out when we introduce the variants row. you can see the difference in the two shots below

Other than these, it's good to go from my side, good stuff!