Retail Orders — filter bar, fetch modal, pagination, status pills #13

New Issue

2026-06-29T08:36:07Z

rob commented

2026-06-29 08:36:07 +00:00

No description provided.

rob added the Doing label 2026-06-29 08:36:07 +00:00

rob commented

2026-06-29 09:34:10 +00:00

Retail Orders — filter bar, fetch modal, pagination, status pills

Several improvements to the Retail Orders list page.
No shared files changed — all changes in the orders phtml and controller.

Files

orders-delivery.zip

File	Status	Path
`orders-preview-v4.html`	✅ Approved preview	reference only
`orders-index.phtml`	➕ Updated	`module/.../view/retail/orders/index.phtml`

1. Fetch Orders button + modal

Add a Fetch Orders button to the page header, left of "Create Order":

<button class="btn-es btn-es-ghost" data-bs-toggle="..." onclick="...">
    <i class="bi bi-cloud-download"></i> Fetch Orders
</button>

Clicking it opens a confirmation modal (es-modal-overlay). The modal:

Title: "Fetch Orders" with bi-cloud-download icon
Body copy: "eStack will import all available, un-imported orders from your active channels."
Active channels list — pulled from $this->activeChannels, shown with green check icons
Info note: "This may take a few minutes depending on order volume. You can continue working while the import runs."
Footer: Cancel (ghost) + Fetch Orders (green primary) — POSTs to fetch controller

No date range in the modal. It fetches all available unimported orders.

Controller variable needed:

$this->activeChannels // array of objects: ->name (string)

2. Filter bar — two rows

Row 1

[Name or Address ▼] [Search field — flex:0 1 300px] [Search] | [From date] [To date] | [All Channels ▼] [All Statuses ▼]

Search field: flex: 0 1 300px (wider than before, still shrinks on narrow viewports)
Search button sits immediately right of the search field
Divider, then From/To type="date" inputs with labels
Divider, then Channel and Status selects

Row 2

Quick: [Today] [Yesterday] [Last 7 days] [Last 30 days]  |  [✓ Hide FBA] [✓ Hide WFS]

Quick date shortcuts set the From/To inputs via JS (no page reload)
Divider separates shortcuts from Hide FBA / Hide WFS chips
Hide FBA and Hide WFS chips moved to this row (off the main filter row)

Date shortcut JS:

function setDateRange(range) {
    var now = new Date();
    var from, to = now;
    var pad = function(n){ return String(n).padStart(2,'0'); };
    var fmt = function(d){ return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate()); };
    switch(range) {
        case 'today':     from = to = now; break;
        case 'yesterday': from = to = new Date(now - 864e5); break;
        case '7d':        from = new Date(now - 6*864e5); break;
        case '30d':       from = new Date(now - 29*864e5); break;
    }
    document.getElementById('dateFrom').value = fmt(from);
    document.getElementById('dateTo').value   = fmt(to);
}

From/To inputs need id="dateFrom" and id="dateTo".

3. Pagination

Top of table card

Count left + prev/next chevrons right — no rows per page here:

100 of 2,231 orders                                    [←] [→]

Bottom pagination bar

Rows per page [100 ▼]  Showing 1–100 of 2,231 orders        First Prev 1 2 3 Next Last

Rows per page options: 50 / 100 / 300 (default 100).

Controller: pass $this->perPage (int, default 100), $this->perPageOptions ([50, 100, 300]).

4. Status pills — two fixes

4a. Stock Hold

Change pill text from Stock-hold → Stock Hold.
Class es-pill-holding unchanged.

In the view, wherever status is rendered:

// Before
'Stock-hold' => 'es-pill-holding'

// After
'Stock Hold' => 'es-pill-holding'

4b. MCF Processing — new pill

Replace the old plain text Mcf-processing status with a styled pill.

Add to _components.scss:

.es-pill-mcf {
    background: var(--es-slate-light);
    color: var(--es-slate);
}
[data-theme="dark"] .es-pill-mcf {
    background: #252f40;
    color: var(--es-muted);
}

In the view:

'MCF Processing' => 'es-pill-mcf'

Note: an MCF order's shipment column shows MCF as the type label.
The status column shows either MCF Processing or Complete — not both.

5. Filter form — date range

The From/To date inputs are part of the GET filter form alongside the existing
channel and status selects. Add startDate and endDate to the controller's
filter handling — same pattern as channel/status filters.

$startDate = $request->getQuery('startDate'); // Y-m-d or null
$endDate   = $request->getQuery('endDate');   // Y-m-d or null

Pass back to view for input repopulation:

$this->startDate = $startDate ?? '';
$this->endDate   = $endDate ?? '';

# Retail Orders — filter bar, fetch modal, pagination, status pills Several improvements to the Retail Orders list page. No shared files changed — all changes in the orders phtml and controller. --- ## Files [orders-delivery.zip](/attachments/7a6a5e9f-449f-4af3-b171-d137b596a2fa) | File | Status | Path | |---|---|---| | `orders-preview-v4.html` | ✅ Approved preview | reference only | | `orders-index.phtml` | ➕ Updated | `module/.../view/retail/orders/index.phtml` | --- ## 1. Fetch Orders button + modal Add a **Fetch Orders** button to the page header, left of "Create Order": ```html <button class="btn-es btn-es-ghost" data-bs-toggle="..." onclick="..."> <i class="bi bi-cloud-download"></i> Fetch Orders </button> ``` Clicking it opens a confirmation modal (`es-modal-overlay`). The modal: - Title: "Fetch Orders" with `bi-cloud-download` icon - Body copy: "eStack will import all available, un-imported orders from your active channels." - Active channels list — pulled from `$this->activeChannels`, shown with green check icons - Info note: "This may take a few minutes depending on order volume. You can continue working while the import runs." - Footer: Cancel (ghost) + **Fetch Orders** (green primary) — POSTs to fetch controller **No date range in the modal.** It fetches all available unimported orders. Controller variable needed: ```php $this->activeChannels // array of objects: ->name (string) ``` --- ## 2. Filter bar — two rows ### Row 1 ``` [Name or Address ▼] [Search field — flex:0 1 300px] [Search] | [From date] [To date] | [All Channels ▼] [All Statuses ▼] ``` - Search field: `flex: 0 1 300px` (wider than before, still shrinks on narrow viewports) - Search button sits immediately right of the search field - Divider, then From/To `type="date"` inputs with labels - Divider, then Channel and Status selects ### Row 2 ``` Quick: [Today] [Yesterday] [Last 7 days] [Last 30 days] | [✓ Hide FBA] [✓ Hide WFS] ``` - Quick date shortcuts set the From/To inputs via JS (no page reload) - Divider separates shortcuts from Hide FBA / Hide WFS chips - Hide FBA and Hide WFS chips moved to this row (off the main filter row) **Date shortcut JS:** ```javascript function setDateRange(range) { var now = new Date(); var from, to = now; var pad = function(n){ return String(n).padStart(2,'0'); }; var fmt = function(d){ return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate()); }; switch(range) { case 'today': from = to = now; break; case 'yesterday': from = to = new Date(now - 864e5); break; case '7d': from = new Date(now - 6*864e5); break; case '30d': from = new Date(now - 29*864e5); break; } document.getElementById('dateFrom').value = fmt(from); document.getElementById('dateTo').value = fmt(to); } ``` From/To inputs need `id="dateFrom"` and `id="dateTo"`. --- ## 3. Pagination ### Top of table card Count left + prev/next chevrons right — no rows per page here: ``` 100 of 2,231 orders [←] [→] ``` ### Bottom pagination bar ``` Rows per page [100 ▼] Showing 1–100 of 2,231 orders First Prev 1 2 3 Next Last ``` Rows per page options: **50 / 100 / 300** (default 100). Controller: pass `$this->perPage` (int, default 100), `$this->perPageOptions` ([50, 100, 300]). --- ## 4. Status pills — two fixes ### 4a. Stock Hold Change pill text from `Stock-hold` → `Stock Hold`. Class `es-pill-holding` unchanged. In the view, wherever status is rendered: ```php // Before 'Stock-hold' => 'es-pill-holding' // After 'Stock Hold' => 'es-pill-holding' ``` ### 4b. MCF Processing — new pill Replace the old plain text `Mcf-processing` status with a styled pill. Add to `_components.scss`: ```scss .es-pill-mcf { background: var(--es-slate-light); color: var(--es-slate); } [data-theme="dark"] .es-pill-mcf { background: #252f40; color: var(--es-muted); } ``` In the view: ```php 'MCF Processing' => 'es-pill-mcf' ``` Note: an MCF order's shipment column shows `MCF` as the type label. The status column shows **either** `MCF Processing` **or** `Complete` — not both. --- ## 5. Filter form — date range The From/To date inputs are part of the GET filter form alongside the existing channel and status selects. Add `startDate` and `endDate` to the controller's filter handling — same pattern as channel/status filters. ```php $startDate = $request->getQuery('startDate'); // Y-m-d or null $endDate = $request->getQuery('endDate'); // Y-m-d or null ``` Pass back to view for input repopulation: ```php $this->startDate = $startDate ?? ''; $this->endDate = $endDate ?? ''; ```

orders-delivery.zip

23 KiB

rob added this to the eStack Sprint Board project 2026-06-29 09:34:17 +00:00

rob moved this to Doing in eStack Sprint Board on 2026-06-29 09:34:36 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rob/estack-laminas#13