feat(configurator): Express form CSS-Grid rebuild — match mockup pixel layout
Previous rebuild used Odoo's <group col='4'> which renders as an HTML table — colspan+nesting broke into a vertical stack. Replaced entirely with raw <div> + CSS Grid (display: grid; grid-template-columns: repeat(4, 1fr)) so the header layout matches the mockup exactly: - Row 1: Customer (span 2) + Shipping Address (span 2) - Row 2: PO block (span 2, accent-bordered card with PO#/PDF/Pending toggle/Expected date stacked + chase warning) + Customer Job # + Job Sorting - Row 3: Material/Process Tag + Lead Time (inline X to Y) + Payment Terms + Delivery Method - Row 4: Blanket SO + Currency/Pricelist + Quote Validity + Invoice Strategy Footer also rebuilt as CSS Grid (1fr 320px) — Notes/Terms cards stacked in the left column, Totals card with Grand Total + currency pill in the right column. Each card has a title + subtitle + body matching the mockup's card chrome. SCSS overrides Odoo's default field chrome inside .o_fp_xpr_cell so inputs render with the mockup's underline style (no Bootstrap form- control border, just a 1px bottom-border that thickens on focus).
This commit is contained in:
gsinghpal
@@ -2,21 +2,14 @@
|
||||
<odoo>
|
||||
|
||||
<!-- ============================================================
|
||||
Express Orders form view (2026-05-26 — Phase C v1.5 rebuild)
|
||||
Express Orders form view (2026-05-26 — rebuild #2)
|
||||
|
||||
Spreadsheet-style flat entry — header as a 4-column grid,
|
||||
PO block as a consolidated multi-row mini-card, lines with
|
||||
inline DWG/OPEN/+bulk action buttons, footer as side-by-side
|
||||
Notes/Terms cards + Totals card with the currency pill.
|
||||
Uses raw <div> + CSS Grid for the header to match the mockup's
|
||||
4-column flat grid layout. Odoo's <group col="4"> renders as
|
||||
an HTML table with broken cells when colspan + nested groups
|
||||
are involved — switching to manual divs.
|
||||
|
||||
Matches docs/superpowers/2026-05-25-express-orders-brainstorm-handoff
|
||||
+ .claude/mockups/express_orders.html as closely as Odoo's
|
||||
form-view constraints allow.
|
||||
|
||||
Still deferred (separate OWL widget pass):
|
||||
- Multi-row Part cell (FpExpressPartCell — part# stacked
|
||||
over description over serial list + bulk button)
|
||||
- Click-to-edit Bake pill (FpExpressBakePill)
|
||||
Same model (fp.direct.order.wizard) as the legacy view.
|
||||
============================================================ -->
|
||||
|
||||
<record id="view_fp_express_order_form" model="ir.ui.view">
|
||||
@@ -24,7 +17,7 @@
|
||||
<field name="model">fp.direct.order.wizard</field>
|
||||
<field name="priority">10</field>
|
||||
<field name="arch" type="xml">
|
||||
<form string="Express Order Entry" class="o_fp_express_order">
|
||||
<form string="Express Order Entry" class="o_fp_xpr">
|
||||
<header>
|
||||
<button name="action_create_order" type="object"
|
||||
string="Confirm Order"
|
||||
@@ -68,7 +61,7 @@
|
||||
<label for="name" class="o_form_label"/>
|
||||
<h1 class="d-flex align-items-center gap-2">
|
||||
<field name="name" readonly="1"/>
|
||||
<span class="badge text-bg-info" style="font-size: 10px;">EXPRESS</span>
|
||||
<span class="o_fp_xpr_pill">EXPRESS</span>
|
||||
</h1>
|
||||
<field name="user_id" readonly="state != 'draft'"
|
||||
options="{'no_create': True}"/>
|
||||
@@ -76,84 +69,116 @@
|
||||
</div>
|
||||
|
||||
<!-- =========================================================
|
||||
ROW 1 — Customer (span 2) + Shipping (span 2) — 4-col grid
|
||||
HEADER GRID — pure CSS Grid (4 cols × 4 rows)
|
||||
========================================================= -->
|
||||
<group col="4" class="o_fp_express_header">
|
||||
<field name="partner_id"
|
||||
colspan="2"
|
||||
options="{'no_create_edit': True}"/>
|
||||
<field name="partner_shipping_id"
|
||||
colspan="2"
|
||||
options="{'no_create_edit': False}"
|
||||
invisible="not partner_id"/>
|
||||
<div class="o_fp_xpr_grid">
|
||||
|
||||
<!-- ============================================
|
||||
ROW 2 — PO Block (span 2) + Job# + Job Sorting
|
||||
============================================ -->
|
||||
<group colspan="2" class="o_fp_po_block">
|
||||
<separator string="Customer PO" colspan="2"/>
|
||||
<field name="po_number"
|
||||
placeholder="Enter the customer PO number"/>
|
||||
<field name="po_attachment_file"
|
||||
filename="po_attachment_filename"
|
||||
string="PO Document (PDF)"/>
|
||||
<field name="po_attachment_filename" invisible="1"/>
|
||||
<field name="po_pending" widget="boolean_toggle"
|
||||
string="PO Pending"/>
|
||||
<field name="po_expected_date"
|
||||
string="PO Expected By"
|
||||
invisible="not po_pending"/>
|
||||
<div colspan="2" class="alert alert-warning py-1 my-1 small"
|
||||
role="alert"
|
||||
invisible="not po_pending">
|
||||
<!-- ROW 1 -->
|
||||
<div class="o_fp_xpr_cell span-2 required">
|
||||
<label for="partner_id">Customer</label>
|
||||
<field name="partner_id" nolabel="1"
|
||||
options="{'no_create_edit': True}"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell span-2">
|
||||
<label for="partner_shipping_id">Shipping Address</label>
|
||||
<field name="partner_shipping_id" nolabel="1"
|
||||
options="{'no_create_edit': False}"
|
||||
invisible="not partner_id"/>
|
||||
</div>
|
||||
|
||||
<!-- ROW 2 — PO block (span 2) + Job# + Job Sorting -->
|
||||
<div class="o_fp_xpr_cell span-2 o_fp_xpr_po_block">
|
||||
<div class="o_fp_xpr_po_head">CUSTOMER PO</div>
|
||||
<div class="o_fp_xpr_po_row">
|
||||
<label for="po_number">PO #</label>
|
||||
<field name="po_number" nolabel="1"
|
||||
placeholder="Enter the customer PO number"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_po_row">
|
||||
<label for="po_attachment_file">PDF</label>
|
||||
<field name="po_attachment_file" nolabel="1"
|
||||
filename="po_attachment_filename"/>
|
||||
<field name="po_attachment_filename" invisible="1"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_po_row">
|
||||
<label for="po_pending">PO Pending</label>
|
||||
<field name="po_pending" nolabel="1"
|
||||
widget="boolean_toggle"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_po_row" invisible="not po_pending">
|
||||
<label for="po_expected_date">Expected By</label>
|
||||
<field name="po_expected_date" nolabel="1"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_po_chase" invisible="not po_pending">
|
||||
<i class="fa fa-clock-o me-1"/>
|
||||
Order will confirm without a PO. A chase activity
|
||||
will be scheduled for the expected date.
|
||||
will fire on the expected date.
|
||||
</div>
|
||||
</group>
|
||||
<field name="customer_job_number"
|
||||
string="Customer Job #"/>
|
||||
<field name="job_sort_id"
|
||||
string="Job Sorting"
|
||||
options="{'no_create_edit': False, 'no_open': True}"
|
||||
placeholder="Type to create a new bucket..."/>
|
||||
|
||||
<!-- ============================================
|
||||
ROW 3 — Material + Lead Time + Payment + Delivery
|
||||
============================================ -->
|
||||
<field name="material_process"
|
||||
string="Material / Process Tag"
|
||||
placeholder="e.g. ENP-STEEL-HP-ADVANCED"/>
|
||||
<label for="lead_time_min_days" string="Lead Time (days)"/>
|
||||
<div class="o_row">
|
||||
<field name="lead_time_min_days" class="oe_inline" style="width: 3em;"/>
|
||||
<span> to </span>
|
||||
<field name="lead_time_max_days" class="oe_inline" style="width: 3em;"/>
|
||||
</div>
|
||||
<field name="payment_term_id"
|
||||
string="Payment Terms"
|
||||
options="{'no_create': True}"/>
|
||||
<field name="delivery_method"
|
||||
string="Delivery Method"/>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="customer_job_number">Customer Job #</label>
|
||||
<field name="customer_job_number" nolabel="1"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="job_sort_id">Job Sorting</label>
|
||||
<field name="job_sort_id" nolabel="1"
|
||||
options="{'no_create_edit': False, 'no_open': True}"
|
||||
placeholder="Type to create a new bucket..."/>
|
||||
</div>
|
||||
|
||||
<!-- ============================================
|
||||
ROW 4 — Blanket + Currency + Quote Valid + Invoice
|
||||
============================================ -->
|
||||
<field name="is_blanket_order"
|
||||
string="Blanket SO"
|
||||
widget="boolean_toggle"/>
|
||||
<field name="pricelist_id"
|
||||
string="Currency / Pricelist"
|
||||
context="{'fp_express_currency_picker': True}"
|
||||
options="{'no_create_edit': True}"/>
|
||||
<field name="validity_date"
|
||||
string="Quote Validity"/>
|
||||
<field name="invoice_strategy"
|
||||
string="Invoice Strategy"/>
|
||||
</group>
|
||||
<!-- ROW 3 — Material + Lead + Payment + Delivery -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="material_process">Material / Process Tag</label>
|
||||
<field name="material_process" nolabel="1"
|
||||
placeholder="e.g. ENP-STEEL-HP-ADVANCED"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="lead_time_min_days">Lead Time (days)</label>
|
||||
<div class="o_fp_xpr_range">
|
||||
<field name="lead_time_min_days" nolabel="1"
|
||||
class="o_fp_xpr_range_input"/>
|
||||
<span class="o_fp_xpr_range_sep">to</span>
|
||||
<field name="lead_time_max_days" nolabel="1"
|
||||
class="o_fp_xpr_range_input"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="payment_term_id">Payment Terms</label>
|
||||
<field name="payment_term_id" nolabel="1"
|
||||
options="{'no_create': True}"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="delivery_method">Delivery Method</label>
|
||||
<field name="delivery_method" nolabel="1"/>
|
||||
</div>
|
||||
|
||||
<!-- ====== Order Lines — the spreadsheet ====== -->
|
||||
<separator string="Order Lines"/>
|
||||
<!-- ROW 4 — Blanket + Currency + Quote Valid + Invoice -->
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="is_blanket_order">Blanket SO</label>
|
||||
<field name="is_blanket_order" nolabel="1"
|
||||
widget="boolean_toggle"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="pricelist_id">Currency / Pricelist</label>
|
||||
<field name="pricelist_id" nolabel="1"
|
||||
context="{'fp_express_currency_picker': True}"
|
||||
options="{'no_create_edit': True}"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="validity_date">Quote Validity</label>
|
||||
<field name="validity_date" nolabel="1"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_cell">
|
||||
<label for="invoice_strategy">Invoice Strategy</label>
|
||||
<field name="invoice_strategy" nolabel="1"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =========================================================
|
||||
ORDER LINES — spreadsheet
|
||||
========================================================= -->
|
||||
<div class="o_fp_xpr_section_title">Order Lines</div>
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<button name="action_add_from_prior_so"
|
||||
type="object"
|
||||
@@ -166,7 +191,7 @@
|
||||
class="btn-secondary btn-sm"
|
||||
invisible="not partner_id"/>
|
||||
</div>
|
||||
<field name="line_ids" class="o_fp_express_lines">
|
||||
<field name="line_ids" class="o_fp_xpr_lines">
|
||||
<list editable="bottom"
|
||||
decoration-warning="is_missing_info">
|
||||
<field name="is_missing_info" column_invisible="1"/>
|
||||
@@ -176,23 +201,12 @@
|
||||
context="{'default_partner_id': parent.partner_id, 'default_revision': 'A'}"
|
||||
domain="[('partner_id', '=', parent.partner_id), ('is_latest_revision', '=', True)]"
|
||||
options="{'no_quick_create': True}"/>
|
||||
<field name="line_description"
|
||||
string="Specification"/>
|
||||
<field name="customer_line_ref"
|
||||
string="Line Job #"
|
||||
placeholder="ABC"/>
|
||||
<field name="thickness_range"
|
||||
string="Thickness"
|
||||
placeholder=".0005-.0010"/>
|
||||
<field name="masking_enabled"
|
||||
string="Mask"
|
||||
widget="boolean_toggle"/>
|
||||
<field name="bake_instructions"
|
||||
string="Bake"
|
||||
placeholder="no bake"/>
|
||||
<field name="internal_description"
|
||||
string="Internal Notes"
|
||||
optional="show"/>
|
||||
<field name="line_description" string="Specification"/>
|
||||
<field name="customer_line_ref" string="Line Job #" placeholder="ABC"/>
|
||||
<field name="thickness_range" string="Thickness" placeholder=".0005-.0010"/>
|
||||
<field name="masking_enabled" string="Mask" widget="boolean_toggle"/>
|
||||
<field name="bake_instructions" string="Bake" placeholder="no bake"/>
|
||||
<field name="internal_description" string="Internal Notes" optional="show"/>
|
||||
<field name="serial_ids"
|
||||
widget="many2many_tags"
|
||||
options="{'no_quick_create': False, 'color_field': 'state_color'}"
|
||||
@@ -200,8 +214,8 @@
|
||||
optional="show"/>
|
||||
<button name="action_open_serial_bulk_add" type="object"
|
||||
string="+ bulk"
|
||||
class="btn-link btn-sm o_fp_inline_btn"
|
||||
title="Bulk-add serial numbers (paste list or range fill)"
|
||||
class="btn-link btn-sm o_fp_xpr_inline_btn"
|
||||
title="Bulk-add serial numbers"
|
||||
invisible="not part_catalog_id"/>
|
||||
<field name="quantity"/>
|
||||
<field name="unit_price"
|
||||
@@ -213,13 +227,13 @@
|
||||
sum="Total"/>
|
||||
<button name="action_upload_drawing" type="object"
|
||||
string="DWG"
|
||||
class="btn-link btn-sm o_fp_inline_btn"
|
||||
title="Upload a drawing for this part (saves to the part record)"
|
||||
class="btn-link btn-sm o_fp_xpr_inline_btn"
|
||||
title="Upload a drawing for this part"
|
||||
invisible="not part_catalog_id"/>
|
||||
<button name="action_open_part" type="object"
|
||||
string="OPEN"
|
||||
class="btn-link btn-sm o_fp_inline_btn"
|
||||
title="Open the part record in a modal"
|
||||
class="btn-link btn-sm o_fp_xpr_inline_btn"
|
||||
title="Open part record"
|
||||
invisible="not part_catalog_id"/>
|
||||
<field name="process_variant_id"
|
||||
string="Process / Recipe"
|
||||
@@ -230,44 +244,54 @@
|
||||
</list>
|
||||
</field>
|
||||
|
||||
<!-- ====== Footer — Notes/Terms (left card) + Totals (right card) ====== -->
|
||||
<div class="o_fp_express_footer mt-3">
|
||||
<group col="2">
|
||||
<!-- LEFT — Notes + Terms stacked -->
|
||||
<group class="o_fp_footer_left">
|
||||
<separator string="Order-Level Internal Notes"/>
|
||||
<field name="internal_notes" nolabel="1"
|
||||
placeholder="Visible only to estimator / planner / shop. Never prints."/>
|
||||
<separator string="Terms & Conditions"/>
|
||||
<field name="terms_and_conditions" nolabel="1"
|
||||
placeholder="Customer-facing terms — prints on quote / SO / invoice."/>
|
||||
</group>
|
||||
<!-- =========================================================
|
||||
FOOTER GRID — Notes/Terms left + Totals right
|
||||
========================================================= -->
|
||||
<div class="o_fp_xpr_footer">
|
||||
|
||||
<!-- RIGHT — Totals card with currency pill -->
|
||||
<group class="o_fp_footer_totals">
|
||||
<separator string="Totals"/>
|
||||
<field name="total_line_count"
|
||||
string="Total Lines"
|
||||
readonly="1"/>
|
||||
<field name="total_qty"
|
||||
string="Total Quantity"
|
||||
readonly="1"/>
|
||||
<label for="total_amount" string="Grand Total"
|
||||
class="o_fp_grand_total_label"/>
|
||||
<div class="d-flex align-items-center gap-2 o_fp_grand_total">
|
||||
<field name="total_amount"
|
||||
widget="monetary"
|
||||
options="{'currency_field': 'currency_id'}"
|
||||
readonly="1"
|
||||
nolabel="1"
|
||||
class="oe_inline"/>
|
||||
<field name="currency_id"
|
||||
readonly="1"
|
||||
nolabel="1"
|
||||
class="o_fp_currency_pill"/>
|
||||
<div class="o_fp_xpr_footer_left">
|
||||
<div class="o_fp_xpr_card">
|
||||
<div class="o_fp_xpr_card_title">Order-Level Internal Notes</div>
|
||||
<div class="o_fp_xpr_card_sub">Visible only to estimator / planner / shop. Never prints.</div>
|
||||
<field name="internal_notes" nolabel="1"
|
||||
placeholder="Type internal notes..."/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_card">
|
||||
<div class="o_fp_xpr_card_title">Terms & Conditions
|
||||
<span class="o_fp_xpr_chip">PRINTS</span>
|
||||
</div>
|
||||
</group>
|
||||
</group>
|
||||
<div class="o_fp_xpr_card_sub">Customer-facing — prints on quote / SO / invoice.</div>
|
||||
<field name="terms_and_conditions" nolabel="1"
|
||||
placeholder="Customer-facing terms..."/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="o_fp_xpr_footer_right">
|
||||
<div class="o_fp_xpr_card o_fp_xpr_totals">
|
||||
<div class="o_fp_xpr_card_title">Totals</div>
|
||||
<div class="o_fp_xpr_total_row">
|
||||
<span class="o_fp_xpr_total_label">Total Lines</span>
|
||||
<field name="total_line_count" readonly="1" nolabel="1"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_total_row">
|
||||
<span class="o_fp_xpr_total_label">Total Quantity</span>
|
||||
<field name="total_qty" readonly="1" nolabel="1"/>
|
||||
</div>
|
||||
<div class="o_fp_xpr_total_row o_fp_xpr_grand">
|
||||
<span class="o_fp_xpr_total_label">Grand Total</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<field name="total_amount"
|
||||
widget="monetary"
|
||||
options="{'currency_field': 'currency_id'}"
|
||||
readonly="1" nolabel="1"/>
|
||||
<field name="currency_id"
|
||||
readonly="1" nolabel="1"
|
||||
class="o_fp_xpr_currency_pill"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</sheet>
|
||||
|
||||
Reference in New Issue
Block a user