OWL
data_display
Kanban Record
Odoo 19 OWL component — Kanban Record (views)
Live preview
Interactive
Source excerpt
web/static/src/views/kanban/kanban_record.js
import { _t } from "@web/core/l10n/translation";
import { browser } from "@web/core/browser/browser";
import { ColorList } from "@web/core/colorlist/colorlist";
import { evaluateBooleanExpr } from "@web/core/py_js/py";
import { hasTouch } from "@web/core/browser/feature_detection";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { imageUrl } from "@web/core/utils/urls";
import { useRecordObserver } from "@web/model/relational_model/utils";
import { Field } from "@web/views/fields/field";
import { fileTypeMagicWordMap } from "@web/views/fields/image/image_field";
import { ViewButton } from "@web/views/view_button/view_button";
import { useViewCompiler } from "@web/views/view_compiler";
import { Widget } from "@web/views/widgets/widget";
import { getFormattedValue } from "../utils";
import { KANBAN_CARD_ATTRIBUTE, KANBAN_MENU_ATTRIBUTE } from "./kanban_arch_parser";
import { KanbanCompiler } from "./kanban_compiler";
import { KanbanCoverImageDialog } from "./kanban_cover_image_dialog";
import { KanbanDropdownMenuWrapper } from "./kanban_dropdown_menu_wrapper";
import { Component, onWillUpdateProps, useRef, useState } from "@odoo/owl";
const { COLORS } = ColorList;
const formatters = registry.category("formatters");
// These classes determine whether a click on a record should open it.
export const CANCEL_GLOBAL_CLICK = ["a", ".dropdown", ".oe_kanban_action", "[data-bs-toggle]"].join(
","
);
/**
* Returns the index of a color determined by a given record.
*/
export function getColorIndex(value) {
if (typeof value === "number") {
return Math.round(value) % COLORS.length;
} else if (typeof value === "string") {
const charCodeSum = [...value].reduce((acc, _, i) => acc + value.charCodeAt(i), 0);
return charCodeSum % COLORS.length;
} else {
return 0;
}
}
/**
* Returns a "raw" version of the field value on a given record.
*
* @param {Record} record
* @param {string} fieldName
* @returns {any}
*/
export function getRawValue(record, fieldName) {
const field = record.fields[fieldName];
const value = record.data[fieldName];
switch (field.type) {
case "one2many":
case "many2many": {
return value.count ? value.currentIds : [];
}
case "many2one": {
return (value && value.id) || false;
}
case "date":
case "datetime": {
return value && value.toISO();
}
default: {
return value;
}
}
}
/**
* Returns a formatted version of the field value on a given record.
*
* @param {Record} record
* @param {string} fieldName
* @returns {string}
*/
function getValue(record, fieldName) {
const field = record.fields[fieldName];
const value = record.data[fieldName];
const formatter = formatters.get(field.type, String);
return formatter(value, { field, data: record.data });
}
export function getFormattedRecord(record) {
const formattedRecord = {
id: {
value: record.resId,
raw_value: record.resId,
},
};
for (const fieldName of record.fieldNames) {
formattedRecord[fieldName] = {
value: getValue(record, fieldName),
raw_value: getRawValue(record, fieldName),
};
}
return formattedRecord;
}
/**
* Returns the image URL of a given field on the record.
*
* @param {Record} record
* @param {string} [model] model name
* @param {string} [field] field name
* @param {number | [number, ...any[]]} [idOrIds] id or array
* starting with the id of the desired record.
* @param {string} [placeholder] fallback when the image does not
* exist
* @returns {string}
*/
export function getImageSrcFromRecordInfo(record, model, field, idOrIds, placeholder) {
const id = (Array.isArray(idOrIds) ? idOrIds[0] : idOrIds) || null;
Registry / API
- Registry name
KanbanRecord- Category
—- Module
web- Slug
kanban-record- Nav group
data_display