ppreeper/webtemplate
1
0
Fork 0
Code Issues 33 Projects Releases Packages Wiki Activity

27: ControlPanel — search bar, breadcrumbs, view switcher, pager, actions #28

New issue
Open
opened 2026-07-05 00:45:43 -06:00 by ppreeper · 0 comments
ppreeper commented 2026-07-05 00:45:43 -06:00
Owner
Copy link

Description

Build the control panel — Odoo's ControlPanel component.

Sub-Components

Breadcrumbs

Navigation trail showing current location with clickable segments.

type BreadcrumbItem struct {
    Label string
    Href  string
    Active bool
}

ViewSwitcher

Button group to toggle between view modes (list, kanban, form, graph, pivot, calendar).

type ViewEntry struct {
    Type   string    // list, kanban, form, graph, pivot, calendar
    Name   string
    Icon   string    // oi icon class
    Active bool
}

Pager

Record position indicator with prev/next buttons.

type PagerProps struct {
    Current int
    Total   int
    OnPrev  func()
    OnNext  func()
}

Spec

<div class="o_control_panel flex flex-col gap-3 px-3 pt-2 pb-3">
  <div class="flex flex-wrap justify-between items-start gap-2">
    <div class="flex items-center gap-1">
      <div class="main-buttons">{create button, save, discard, etc}</div>
      <Breadcrumbs items={breadcrumbs} />
    </div>
    <div class="flex items-center gap-1">
      <slot name="actions" />
    </div>
    <div class="flex items-center gap-1">
      <Pager current={pager.current} total={pager.total} />
      <ViewSwitcher views={viewEntries} onSwitch={onSwitchView} />
    </div>
  </div>
</div>

References

PRD-003 §2 control panel
Odoo: control_panel.xml

## Description Build the control panel — Odoo's `ControlPanel` component. ## Sub-Components ### Breadcrumbs Navigation trail showing current location with clickable segments. ```go type BreadcrumbItem struct { Label string Href string Active bool } ``` ### ViewSwitcher Button group to toggle between view modes (list, kanban, form, graph, pivot, calendar). ```go type ViewEntry struct { Type string // list, kanban, form, graph, pivot, calendar Name string Icon string // oi icon class Active bool } ``` ### Pager Record position indicator with prev/next buttons. ```go type PagerProps struct { Current int Total int OnPrev func() OnNext func() } ``` ## Spec ```html <div class="o_control_panel flex flex-col gap-3 px-3 pt-2 pb-3"> <div class="flex flex-wrap justify-between items-start gap-2"> <div class="flex items-center gap-1"> <div class="main-buttons">{create button, save, discard, etc}</div> <Breadcrumbs items={breadcrumbs} /> </div> <div class="flex items-center gap-1"> <slot name="actions" /> </div> <div class="flex items-center gap-1"> <Pager current={pager.current} total={pager.total} /> <ViewSwitcher views={viewEntries} onSwitch={onSwitchView} /> </div> </div> </div> ``` ## References PRD-003 §2 control panel Odoo: control_panel.xml
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ppreeper/webtemplate#28
No description provided.