Skip to content

Commit 6f4d637

Browse files
Ghostdev9410Ghostdev9410
committed
[IMP] iot_oca: modernize kanban view for Odoo 18.0 standards
- Refactored kanban card layout using modern vertical structure - Fixed colorpicker widget crash and interaction issues - Re-added all original fields and labels with improved aesthetics - Ensured vertical alignment of dropdown menu and title - Verified compliance with OCA pre-commit hooks
1 parent 954b38d commit 6f4d637

1 file changed

Lines changed: 100 additions & 70 deletions

File tree

‎iot_oca/views/iot_device_views.xml‎

Lines changed: 100 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
<field name="name">iot.device.kanban</field>
9494
<field name="model">iot.device</field>
9595
<field name="arch" type="xml">
96-
<kanban class="o_kanban_dashboard">
96+
<kanban class="o_kanban_dashboard" delete="1">
9797
<field name="name" />
9898
<field name="state" />
9999
<field name="communication_system_id" />
@@ -102,94 +102,124 @@
102102
<field name="id" />
103103
<field name="image_128" />
104104
<field name="icon" />
105+
<field name="tag_ids" />
106+
<field name="last_contact_date" />
105107
<templates>
106-
<t t-name="card">
108+
<t t-name="kanban-box">
107109
<div
108-
t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_global_click"
110+
t-attf-class="oe_kanban_global_click o_kanban_record #{kanban_color(record.color.raw_value)} d-flex flex-column p-3"
109111
>
110-
<div class="o_dropdown_kanban dropdown">
111-
<a
112-
role="button"
113-
class="dropdown-toggle o-no-caret btn"
114-
data-toggle="dropdown"
115-
data-display="static"
116-
href="#"
117-
aria-label="Dropdown menu"
118-
title="Dropdown menu"
119-
>
120-
<span class="fa fa-ellipsis-v" />
121-
</a>
122-
<div class="dropdown-menu" role="menu">
123-
<t t-if="widget.editable">
112+
<div
113+
class="o_kanban_record_top d-flex justify-content-between align-items-center mb-2"
114+
>
115+
<div class="o_kanban_record_headings overflow-hidden">
116+
<strong
117+
class="o_kanban_record_title fs-5 text-truncate d-block mb-0"
118+
>
119+
<field name="name" />
120+
</strong>
121+
</div>
122+
<div class="o_dropdown_kanban dropdown px-0">
123+
<a
124+
class="dropdown-toggle o-no-caret btn btn-sm text-muted opacity-75 opacity-100-hover"
125+
data-bs-toggle="dropdown"
126+
href="#"
127+
role="button"
128+
title="Menu"
129+
>
130+
<i class="fa fa-ellipsis-v fa-lg" />
131+
</a>
132+
<div class="dropdown-menu shadow-sm" role="menu">
124133
<a
125134
role="menuitem"
126135
type="edit"
127136
class="dropdown-item"
128-
>Edit...</a>
129-
</t>
130-
<t t-if="widget.deletable">
137+
>Edit</a>
131138
<a
132139
role="menuitem"
133140
type="delete"
134141
class="dropdown-item"
135142
>Delete</a>
136-
</t>
137-
<ul
138-
class="oe_kanban_colorpicker"
139-
data-field="color"
143+
<div
144+
role="separator"
145+
class="dropdown-divider"
146+
/>
147+
<ul
148+
class="oe_kanban_colorpicker"
149+
data-field="color"
150+
/>
151+
</div>
152+
</div>
153+
</div>
154+
<div class="o_kanban_record_body flex-grow-1">
155+
<div
156+
t-if="record.group_id.raw_value"
157+
class="text-muted small mb-1"
158+
>
159+
<i class="fa fa-folder-open-o me-1" />
160+
<field name="group_id" />
161+
</div>
162+
<div
163+
t-if="record.ip.raw_value"
164+
class="text-primary small fw-bold mb-1"
165+
>
166+
<i class="fa fa-plug me-1" />
167+
IP: <field name="ip" />
168+
</div>
169+
<div
170+
t-if="record.last_contact_date.raw_value"
171+
class="text-muted small mb-2"
172+
>
173+
<i class="fa fa-clock-o me-1" />
174+
Last contact: <field name="last_contact_date" />
175+
</div>
176+
<div class="o_kanban_tags_section mt-2">
177+
<field
178+
name="tag_ids"
179+
widget="many2many_tags"
180+
options="{'color_field': 'color'}"
140181
/>
141182
</div>
142183
</div>
143-
<div class="oe_kanban_content">
144-
<div class="o_kanban_image">
184+
<div
185+
class="o_kanban_record_bottom d-flex justify-content-between align-items-center mt-3 pt-2 border-top border-light"
186+
>
187+
<div
188+
class="oe_kanban_bottom_left d-flex align-items-center"
189+
>
190+
<field
191+
name="state"
192+
widget="label_selection"
193+
options="{'classes': {'connected': 'success', 'error': 'danger'}}"
194+
/>
195+
</div>
196+
<div
197+
class="oe_kanban_bottom_right d-flex align-items-center text-truncate"
198+
>
199+
<span
200+
class="badge rounded-pill bg-light border text-muted px-2 py-1 me-2 shadow-sm"
201+
t-if="record.communication_system_id.raw_value"
202+
>
203+
<field name="communication_system_id" />
204+
</span>
145205
<img
146-
t-attf-src="/web/image/iot.device/#{record.id.raw_value}/image_128"
147-
alt="default_image"
148206
t-if="record.image_128.raw_value"
207+
t-attf-src="/web/image/iot.device/#{record.id.raw_value}/image_128"
208+
class="o_avatar rounded border bg-white"
209+
style="width: 26px; height: 26px;"
210+
alt="Device"
149211
/>
150-
<i
151-
t-attf-class="{{record.icon.raw_value}}"
152-
t-if="!record.image_128.raw_value and record.icon.raw_value"
153-
/>
154-
<i
155-
t-attf-class="fa fa-question fa-6x"
156-
title="Unknown device"
157-
t-if="!record.image_128.raw_value and !record.icon.raw_value"
158-
/>
159-
</div>
160-
<div class="o_kanban_details">
161-
<div class="o_kanban_record_top">
162-
<b class="o_kanban_record_title">
163-
<field name="name" />
164-
</b>
165-
</div>
166-
<div class="o_kanban_record_body">
167-
<div t-if="record.group_id.raw_value">
168-
<field name="group_id" />
169-
</div>
170-
<div t-if="record.ip">IP: <field
171-
name="ip"
172-
/></div>
173-
<div
174-
t-if="record.last_contact_date"
175-
>Last contact: <field
176-
name="last_contact_date"
177-
/></div>
178-
<field
179-
name="tag_ids"
180-
widget="many2many_tags"
181-
options="{'color_field': 'color'}"
212+
<t t-else="">
213+
<i
214+
t-if="record.icon.raw_value"
215+
t-attf-class="{{record.icon.raw_value}} text-muted fs-5"
182216
/>
183-
<div class="row">
184-
<div
185-
class="col-xs-6 o_kanban_primary_left"
186-
id="actions"
187-
>
188-
<!-- TODO: Delete this on 14, actions should go to dropdown menu -->
189-
</div>
190-
</div>
191-
</div>
192-
<div class="o_kanban_record_bottom" />
217+
<i
218+
t-else=""
219+
class="fa fa-question text-muted fs-5"
220+
title="Unknown device"
221+
/>
222+
</t>
193223
</div>
194224
</div>
195225
</div>

0 commit comments

Comments
 (0)