changes
This commit is contained in:
gsinghpal
@@ -601,110 +601,171 @@
|
||||
<p class="text-muted"><t t-out="fstep.help_text"/></p>
|
||||
</t>
|
||||
|
||||
<!-- Seating/Positioning sections with accordion -->
|
||||
<!-- Seating/Positioning sections with side tabs -->
|
||||
<t t-if="fstep.section_code == 'seating'">
|
||||
<p class="text-muted">Select seating and positioning devices. Choose Modular or Custom Fabricated for each.</p>
|
||||
<div class="accordion" id="seatingAccordion">
|
||||
<t t-foreach="sections" t-as="section">
|
||||
<t t-if="section.has_build_type and section.code != 'accessories'">
|
||||
<div class="accordion-item wc-equipment-section"
|
||||
t-att-data-equipment-type="section.equipment_type"
|
||||
t-att-style="'' if (section.equipment_type in ('both', equipment_type) or (section.equipment_type == 'wheelchair' and equipment_type in ('manual_wheelchair', 'power_wheelchair'))) else 'display:none;'">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button"
|
||||
data-bs-toggle="collapse"
|
||||
t-attf-data-bs-target="#collapse_#{section.code}">
|
||||
<i t-attf-class="fa #{section.icon or 'fa-cube'} me-2"/>
|
||||
<t t-out="section.name"/>
|
||||
</button>
|
||||
</h2>
|
||||
<div t-attf-id="collapse_#{section.code}" class="accordion-collapse collapse"
|
||||
data-bs-parent="#seatingAccordion">
|
||||
<div class="accordion-body">
|
||||
<!-- Build Type Toggle -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Build Type</label>
|
||||
<div class="d-flex gap-2">
|
||||
<label class="btn btn-sm btn-outline-secondary wc-radio-btn">
|
||||
<input type="radio" t-attf-name="section_build_#{section.code}"
|
||||
value="modular" checked="checked"
|
||||
class="wc-section-build-type"
|
||||
t-att-data-section="section.code"/>
|
||||
Modular
|
||||
</label>
|
||||
<label class="btn btn-sm btn-outline-secondary wc-radio-btn">
|
||||
<input type="radio" t-attf-name="section_build_#{section.code}"
|
||||
value="custom_fabricated"
|
||||
class="wc-section-build-type"
|
||||
t-att-data-section="section.code"/>
|
||||
Custom Fabricated
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted mb-3">Select seating and positioning devices. Choose Modular or Custom Fabricated for each.</p>
|
||||
<div class="wc-seating-tabs" id="seatingTabsContainer">
|
||||
<div class="row g-0">
|
||||
<!-- ── TAB NAV (left on desktop, top on mobile) ── -->
|
||||
<div class="col-md-3 wc-tab-nav-col">
|
||||
<div class="nav flex-md-column wc-tab-nav" id="seatingTabNav" role="tablist"
|
||||
aria-orientation="vertical">
|
||||
<t t-set="first_visible" t-value="True"/>
|
||||
<t t-foreach="sections" t-as="section">
|
||||
<t t-if="section.has_build_type and section.code != 'accessories'">
|
||||
<button type="button" role="tab"
|
||||
t-attf-class="wc-tab-btn wc-equipment-section #{'active' if first_visible and (section.equipment_type in ('both', equipment_type) or (section.equipment_type == 'wheelchair' and equipment_type in ('manual_wheelchair', 'power_wheelchair'))) else ''}"
|
||||
t-att-data-equipment-type="section.equipment_type"
|
||||
t-attf-id="tab_#{section.code}"
|
||||
t-attf-data-bs-target="#panel_#{section.code}"
|
||||
t-att-aria-controls="'panel_' + section.code"
|
||||
t-att-data-section-code="section.code"
|
||||
t-att-style="'' if (section.equipment_type in ('both', equipment_type) or (section.equipment_type == 'wheelchair' and equipment_type in ('manual_wheelchair', 'power_wheelchair'))) else 'display:none;'">
|
||||
<i t-attf-class="fa #{section.icon or 'fa-cube'} wc-tab-icon"/>
|
||||
<span class="wc-tab-label"><t t-out="section.name"/></span>
|
||||
<span class="wc-tab-badge" title="Selected items">0</span>
|
||||
</button>
|
||||
<t t-if="first_visible and (section.equipment_type in ('both', equipment_type) or (section.equipment_type == 'wheelchair' and equipment_type in ('manual_wheelchair', 'power_wheelchair')))">
|
||||
<t t-set="first_visible" t-value="False"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Measurement fields if section has them -->
|
||||
<t t-if="section.has_width or section.has_depth or section.has_height">
|
||||
<div class="row g-2 mb-3">
|
||||
<!-- ── TAB CONTENT (right on desktop, below on mobile) ── -->
|
||||
<div class="col-md-9 wc-tab-content-col">
|
||||
<div class="wc-tab-content" id="seatingTabContent">
|
||||
<t t-set="first_visible" t-value="True"/>
|
||||
<t t-foreach="sections" t-as="section">
|
||||
<t t-if="section.has_build_type and section.code != 'accessories'">
|
||||
<div role="tabpanel"
|
||||
t-attf-class="wc-tab-panel wc-equipment-section #{'active' if first_visible and (section.equipment_type in ('both', equipment_type) or (section.equipment_type == 'wheelchair' and equipment_type in ('manual_wheelchair', 'power_wheelchair'))) else ''}"
|
||||
t-attf-id="panel_#{section.code}"
|
||||
t-att-data-equipment-type="section.equipment_type"
|
||||
t-att-data-section-code="section.code"
|
||||
t-attf-aria-labelledby="tab_#{section.code}">
|
||||
|
||||
<!-- Build Type + Measurements row (always visible) -->
|
||||
<div class="d-flex flex-wrap align-items-end gap-3 mb-3">
|
||||
<div>
|
||||
<label class="form-label fw-bold mb-1" style="font-size:0.78rem;">Build Type</label>
|
||||
<div class="d-flex gap-2">
|
||||
<label class="btn btn-sm btn-outline-secondary wc-radio-btn">
|
||||
<input type="radio" t-attf-name="section_build_#{section.code}"
|
||||
value="modular" checked="checked"
|
||||
class="wc-section-build-type"
|
||||
t-att-data-section="section.code"/>
|
||||
Modular
|
||||
</label>
|
||||
<label class="btn btn-sm btn-outline-secondary wc-radio-btn">
|
||||
<input type="radio" t-attf-name="section_build_#{section.code}"
|
||||
value="custom_fabricated"
|
||||
class="wc-section-build-type"
|
||||
t-att-data-section="section.code"/>
|
||||
Custom Fabricated
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="section.has_width">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" t-out="section.width_label"/>
|
||||
<input type="number" step="0.25" class="form-control"
|
||||
<div style="min-width:100px;">
|
||||
<label class="form-label mb-1" style="font-size:0.78rem;" t-out="section.width_label"/>
|
||||
<input type="number" step="0.25" class="form-control form-control-sm"
|
||||
t-attf-name="section_width_#{section.code}"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="section.has_depth">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" t-out="section.depth_label"/>
|
||||
<input type="number" step="0.25" class="form-control"
|
||||
<div style="min-width:100px;">
|
||||
<label class="form-label mb-1" style="font-size:0.78rem;" t-out="section.depth_label"/>
|
||||
<input type="number" step="0.25" class="form-control form-control-sm"
|
||||
t-attf-name="section_depth_#{section.code}"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="section.has_height">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" t-out="section.height_label"/>
|
||||
<input type="number" step="0.25" class="form-control"
|
||||
<div style="min-width:100px;">
|
||||
<label class="form-label mb-1" style="font-size:0.78rem;" t-out="section.height_label"/>
|
||||
<input type="number" step="0.25" class="form-control form-control-sm"
|
||||
t-attf-name="section_height_#{section.code}"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Product options for this section -->
|
||||
<div class="wc-section-options" t-att-data-section="section.code"
|
||||
t-att-data-section-id="section.id">
|
||||
<div class="wc-options-grid row g-2"/>
|
||||
<!-- Custom search -->
|
||||
<div class="mt-2 wc-search-container">
|
||||
<input type="text" class="form-control form-control-sm wc-product-search"
|
||||
t-att-data-section="section.code"
|
||||
placeholder="Search for product..."
|
||||
autocomplete="off"/>
|
||||
<div class="wc-search-results list-group d-none"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── Collapsible section groups (accordion within tab) ── -->
|
||||
<div class="wc-section-groups">
|
||||
|
||||
<!-- Sub-sections -->
|
||||
<t t-foreach="section.child_ids" t-as="child">
|
||||
<div class="mt-3 ps-3 border-start">
|
||||
<h6><t t-out="child.name"/></h6>
|
||||
<div class="wc-section-options" t-att-data-section="child.code"
|
||||
t-att-data-section-id="child.id">
|
||||
<div class="wc-options-grid row g-2"/>
|
||||
<div class="mt-1 wc-search-container">
|
||||
<input type="text" class="form-control form-control-sm wc-product-search"
|
||||
t-att-data-section="child.code"
|
||||
placeholder="Search..."
|
||||
autocomplete="off"/>
|
||||
<div class="wc-search-results list-group d-none"/>
|
||||
<!-- Group: Main section products -->
|
||||
<div class="wc-section-group open">
|
||||
<button type="button" class="wc-group-header">
|
||||
<i t-attf-class="fa #{section.icon or 'fa-cube'} wc-group-icon"/>
|
||||
<span class="wc-group-title"><t t-out="section.name"/></span>
|
||||
<span class="wc-group-count">0</span>
|
||||
<i class="fa fa-chevron-down wc-group-chevron"/>
|
||||
</button>
|
||||
<div class="wc-group-body">
|
||||
<div class="wc-section-options" t-att-data-section="section.code"
|
||||
t-att-data-section-id="section.id">
|
||||
<div class="wc-option-filter-wrap mb-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="fa fa-filter"/></span>
|
||||
<input type="text" class="form-control wc-option-filter"
|
||||
placeholder="Filter products..."
|
||||
autocomplete="off"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wc-options-grid row g-2"/>
|
||||
<div class="mt-2 wc-search-container">
|
||||
<input type="text" class="form-control form-control-sm wc-product-search"
|
||||
t-att-data-section="section.code"
|
||||
placeholder="Search catalogue for more..."
|
||||
autocomplete="off"/>
|
||||
<div class="wc-search-results list-group d-none"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Group: Sub-sections (collapsed by default) -->
|
||||
<t t-foreach="section.child_ids" t-as="child">
|
||||
<div class="wc-section-group">
|
||||
<button type="button" class="wc-group-header">
|
||||
<i class="fa fa-cube wc-group-icon"/>
|
||||
<span class="wc-group-title"><t t-out="child.name"/></span>
|
||||
<span class="wc-group-count">0</span>
|
||||
<i class="fa fa-chevron-down wc-group-chevron"/>
|
||||
</button>
|
||||
<div class="wc-group-body">
|
||||
<div class="wc-section-options" t-att-data-section="child.code"
|
||||
t-att-data-section-id="child.id">
|
||||
<div class="wc-option-filter-wrap mb-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="fa fa-filter"/></span>
|
||||
<input type="text" class="form-control wc-option-filter"
|
||||
placeholder="Filter products..."
|
||||
autocomplete="off"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wc-options-grid row g-2"/>
|
||||
<div class="mt-1 wc-search-container">
|
||||
<input type="text" class="form-control form-control-sm wc-product-search"
|
||||
t-att-data-section="child.code"
|
||||
placeholder="Search catalogue for more..."
|
||||
autocomplete="off"/>
|
||||
<div class="wc-search-results list-group d-none"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="first_visible and (section.equipment_type in ('both', equipment_type) or (section.equipment_type == 'wheelchair' and equipment_type in ('manual_wheelchair', 'power_wheelchair')))">
|
||||
<t t-set="first_visible" t-value="False"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user