2. Odoo saas-19.1
3. web_studio
4. Vietnamese

Are you sure you want to remove the %(node)s %(field)s from the view?
If you need it back, add it from the list of existing fields.

Bạn có chắc chắn muốn xóa trường " %(node)s %(field)s " khỏi giao diệnchế độ xem không?
Nếu bạn cần khôi phục lại trường này, hãy thêm nó từ danh sách các trường hiện có.

Are you sure you want to remove the %(node)s %(field)s from the view?
If you need it back, add it from the list of existing fields.

Bạn có chắc chắn muốn xóa trường " %(node)s %(field)s " khỏi giao diện xem không?
Nếu bạn cần khôi phục lại trường này, hãy thêm nó từ danh sách các trường hiện có.

Set a fixed width (e.g. 100) or a minimum width (e.g. [100]) or a width range (e.g. [100, 200]). If not set, the width is automatically computed to fit optimally.

Đặt chiều rộng cố định (ví dụ: 100) hoặc chiều rộng tối thiểu (ví dụ: [100]) hoặc khoảng chiều rộng (ví dụ: [100, 200]). Nếu không được đặt, chiều rộng sẽ được tính toán tự động để phù hợp tối ưu.

;

const nodes = getNodesFromXpath(fullXpath, toRaw(this.viewEditorModel).xmlDoc);
this.autoClick = null; // Early reset of that variable
if (nodes.length !== 1) {
return;
}
const atPosition = countPreviousSiblings(nodes[0]) + 1;
xpathToClick =

;

const nodes = getNodesFromXpath(fullXpath, toRaw(this.viewEditorModel).xmlDoc);
this.autoClick = null; // Đặt lại biến này sớm
if (nodes.length !== 1) {
return;
}
const atPosition = countPreviousSiblings(nodes[0]) + 1;
xpathToClick =

);
return domEl && domEl.isConnected;
}).catch(() => true);

if (domEl) {
domEl.click();
}
};

useSubEnv({
setAutoClick: (targetInfo, nodeDescr) => this.setAutoClick(targetInfo, nodeDescr),
});
}

get viewEditorModel() {
return this.env.viewEditorModel;
}

get viewRef() {
return this.viewEditorModel.viewRef;
}

getNearestHook(draggedEl, { x, y }) {
const viewRefEl = this.viewRef.el;
cleanHooks(viewRefEl);

const mouseToleranceRect = {
x: x - hookPositionTolerance,
y: y - hookPositionTolerance,
width: hookPositionTolerance * 2,
height: hookPositionTolerance * 2,
};

const touchingEls = touching(getHooks(viewRefEl), mouseToleranceRect);
const closestHookEl = closest(touchingEls, { x, y });

return closestHookEl;
}

openViewInForm() {
return this.action.doAction(
{
type: "ir.actions.act_window",
res_model: "ir.ui.view",
res_id: this.env.viewEditorModel.mainView.id,
views: [[false, "form"]],
target: "current",
},
{ clearBreadcrumbs: true }
);
}

openDefaultValues() {
const resModel = this.env.viewEditorModel.resModel;
this.action.doAction(
{
name: _t("Default Values"),
type: "ir.actions.act_window",
res_model: "ir.default",
target: "current",
views: [
[false, "list"],
[false, "form"],
],
domain: [["field_id.model", "=", resModel]],
},
{ clearBreadcrumbs: true }
);
}

setAutoClick(targetInfo, nodeDescr) {
if (!targetInfo) {
this.autoClick = null;
return;
}
if (targetInfo && !nodeDescr) {
this.autoClick = {
targetInfo,
};
return;
}
let nameAttr = nodeDescr.attrs?.name;
if (nodeDescr.tag === "field" && !nameAttr) {
nameAttr = nodeDescr.field_description.name;
} else if (!nameAttr) {
this.autoClick = {
targetInfo,
};
return;
}

this.autoClick = {
targetInfo,
tag: nodeDescr.tag,
attrs: { name: nameAttr },
};
}

async addField(droppedData) {
const data = droppedData;
const isExistingField = "fieldName" in data;

let newNode;
if (!isExistingField) {
newNode = await this.getNewFieldNode(data);
} else {
newNode = {
tag: "field",
attrs: { name: data.fieldName },
};

const field = this.viewEditorModel.fields[data.fieldName];
if (field.type === "monetary") {
this.setCurrencyInfos(newNode.attrs);
}
if (
field.type === "binary" &&
this.viewEditorModel.fields[data.fieldName + "_filename"]
) {
newNode.attrs["filename"] = data.fieldName + "_filename";
}
}
if (!newNode) {
return;
}
if (!isExistingField) {
this.viewEditorModel.setRenameableField(newNode.field_description?.name, true);
}

if (this.viewEditorModel.viewType === "kanban") {
newNode.attrs.display = "full";
}

if (this.viewEditorModel.viewType === "list") {
newNode.attrs.optional = "show";
}

return {
node: newNode,
};
}

async addStructure(structure, droppedData, targetInfo) {
let _operation;
if (this.addViewStructure) {
_operation = await this.addViewStructure(structure, {
droppedData,
targetInfo,
addDialog: this.addDialog.bind(this),
});
}
if (!_operation && structure === "field") {
_operation = await this.addField(droppedData);
}
if (!_operation) {
return;
}

const operation = {
target:
_operation?.target ||
targetInfo.target ||
(targetInfo.xpath
? this.viewEditorModel.getFullTarget(targetInfo.xpath)
: undefined),
position: targetInfo.position,
type: "add",
..._operation,
};
const operations = targetInfo?.getOperations?.({ operation }) || [operation];
this.setAutoClick(targetInfo, operations.at(-1).node);
for (const operation of operations.slice(0, -1)) {
this.viewEditorModel.pushOperation(operation);
}
return this.viewEditorModel.doOperation(operations.at(-1));
}

async getNewFieldNode(data) {
const string = _t("New %s", data.string);

const newNode = {
field_description: {
field_description: string,
name: randomName(

);
return domEl && domEl.isConnected;
}).catch(() => true);

if (domEl) {
domEl.click();
}
};

useSubEnv({
setAutoClick: (targetInfo, nodeDescr) => this.setAutoClick(targetInfo, nodeDescr),
});
}

get viewEditorModel() {
return this.env.viewEditorModel;
}

get viewRef() {
return this.viewEditorModel.viewRef;
}

getNearestHook(draggedEl, { x, y }) {
const viewRefEl = this.viewRef.el;
cleanHooks(viewRefEl);

const mouseToleranceRect = {
x: x - hookPositionTolerance,
y: y - hookPositionTolerance,
width: hookPositionTolerance * 2,
height: hookPositionTolerance * 2,
};

const touchingEls = touching(getHooks(viewRefEl), mouseToleranceRect);
const closestHookEl = closest(touchingEls, { x, y });

return closestHookEl;
}

openViewInForm() {
return this.action.doAction(
{
type: "ir.actions.act_window",
res_model: "ir.ui.view",
res_id: this.env.viewEditorModel.mainView.id,
views: [[false, "form"]],
target: "current",
},
{ clearBreadcrumbs: true }
);
}

openDefaultValues() {
const resModel = this.env.viewEditorModel.resModel;
this.action.doAction(
{
name: _t("Default Values"),
type: "ir.actions.act_window",
res_model: "ir.default",
target: "current",
views: [
[false, "list"],
[false, "form"],
],
domain: [["field_id.model", "=", resModel]],
},
{ clearBreadcrumbs: true }
);
}

setAutoClick(targetInfo, nodeDescr) {
if (!targetInfo) {
this.autoClick = null;
return;
}
if (targetInfo && !nodeDescr) {
this.autoClick = {
targetInfo,
};
return;
}
let nameAttr = nodeDescr.attrs?.name;
if (nodeDescr.tag === "field" && !nameAttr) {
nameAttr = nodeDescr.field_description.name;
} else if (!nameAttr) {
this.autoClick = {
targetInfo,
};
return;
}

this.autoClick = {
targetInfo,
tag: nodeDescr.tag,
attrs: { name: nameAttr },
};
}

async addField(droppedData) {
const data = droppedData;
const isExistingField = "fieldName" in data;

let newNode;
if (!isExistingField) {
newNode = await this.getNewFieldNode(data);
} else {
newNode = {
tag: "field",
attrs: { name: data.fieldName },
};

const field = this.viewEditorModel.fields[data.fieldName];
if (field.type === "monetary") {
this.setCurrencyInfos(newNode.attrs);
}
if (
field.type === "binary" &&
this.viewEditorModel.fields[data.fieldName + "_filename"]
) {
newNode.attrs["filename"] = data.fieldName + "_filename";
}
}
if (!newNode) {
return;
}
if (!isExistingField) {
this.viewEditorModel.setRenameableField(newNode.field_description?.name, true);
}

if (this.viewEditorModel.viewType === "kanban") {
newNode.attrs.display = "full";
}

if (this.viewEditorModel.viewType === "list") {
newNode.attrs.optional = "show";
}

return {
node: newNode,
};
}

async addStructure(structure, droppedData, targetInfo) {
let _operation;
if (this.addViewStructure) {
_operation = await this.addViewStructure(structure, {
droppedData,
targetInfo,
addDialog: this.addDialog.bind(this),
});
}
if (!_operation && structure === "field") {
_operation = await this.addField(droppedData);
}
if (!_operation) {
return;
}

const operation = {
target:
_operation?.target ||
targetInfo.target ||
(targetInfo.xpath
? this.viewEditorModel.getFullTarget(targetInfo.xpath)
: undefined),
position: targetInfo.position,
type: "add",
..._operation,
};
const operations = targetInfo?.getOperations?.({ operation }) || [operation];
this.setAutoClick(targetInfo, operations.at(-1).node);
for (const operation of operations.slice(0, -1)) {
this.viewEditorModel.pushOperation(operation);
}
return this.viewEditorModel.doOperation(operations.at(-1));
}

async getNewFieldNode(data) {
const string = _t("New %s", data.string);

const newNode = {
field_description: {
field_description: string,
name: randomName(

);

function copyElementOnDrag() {
let element;
let copy;

function clone(_element) {
element = _element;
copy = element.cloneNode(true);
}

function insert() {
if (element) {
element.insertAdjacentElement("beforebegin", copy);
}
}

function clean() {
if (copy) {
copy.remove();
}
copy = null;
element = null;
}

return { clone, insert, clean };
}

export class InteractiveEditor extends Component {
static template = "web_studio.InteractiveEditor";
static components = {};
static props = {
editor: true,
slots: { type: Object },
editorContainerRef: { type: Object },
rendererRef: { type: Object },
};

setup() {
this.defaultSidebar = DefaultViewSidebar;

this.action = useService("action");
this.orm = useService("orm");
this.addDialog = useOwnedDialogs();
this.notification = useService("notification");
/* DagDrop: from sidebar to View, and within the view */
const getNearestHook = this.getNearestHook.bind(this);
// Those are fine because editor defines the t-key
const prepareForDrag = this.props.editor.prepareForDrag;

const editorHookValidation = this.props.editor.isValidHook || (() => true);
const isValidHook = ({ hook, element }) => {
if (hook.dataset.hookId) {
if (!this.viewEditorModel.dropHooks[hook.dataset.hookId].accept({ element })) {
return false;
}
} else if (
!editorHookValidation({ hook, element, viewEditorModel: this.viewEditorModel })
) {
return false;
}
return true;
};

this.addViewStructure = this.props.editor.addViewStructure;
const styleNearestHook =
this.props.editor.styleNearestHook ||
((ref, hook) => {
hook.classList.add("o_web_studio_nearest_hook");
});

function removeBootStrapClasses(element) {
const bootstrapClasses = Array.from(element.classList).filter(
(c) => c.startsWith("position-") || c.startsWith("w-") || c.startsWith("h-")
);
if (!bootstrapClasses.length) {
return () => {};
}
element.classList.remove(...bootstrapClasses);
return () => {
element.classList.add(...bootstrapClasses);
};
}

let cleanUps;
const copyOnDrag = copyElementOnDrag();

const editorHighlightHooks = this.props.editor.highlightHooks;
const highlightHooks = ({ element }) => {
const hooks = getHooks(this.viewRef.el).filter((hook) =>
isValidHook({ hook, element })
);
if (editorHighlightHooks) {
return editorHighlightHooks({ element, hooks });
}
return () => {};
};
useDraggable({
ref: this.props.editorContainerRef,
elements: ".o-draggable",
onWillStartDrag: ({ element }) => {
cleanUps = [];
if (element.closest(".o_web_studio_component")) {
copyOnDrag.clone(element);
}
},
onDragStart: ({ element }) => {
cleanUps.push(removeBootStrapClasses(element));
cleanUps.push(highlightHooks({ element }));
copyOnDrag.insert();
if (prepareForDrag) {
cleanUps.push(
prepareForDrag({
element,
viewEditorModel: this.viewEditorModel,
ref: this.props.editorContainerRef,
})
);
}
},
onDrag: ({ x, y, element }) => {
cleanHooks(this.viewRef.el);
element.classList.remove("o-draggable--drop-ready");
const hook = getNearestHook(element, { x, y });
if (!hook) {
return;
}
if (!isValidHook({ hook, element })) {
return;
}
styleNearestHook(this.props.rendererRef, hook);
element.classList.add("o-draggable--drop-ready");
},
onDrop: ({ element }) => {
const targetHook = getActiveHook(this.viewRef.el);
if (!targetHook) {
return;
}
let targetInfo = pick(targetHook.dataset, "xpath", "position", "type", "infos");
if (targetHook.dataset.hookId) {
targetInfo = this.viewEditorModel.dropHooks[
targetHook.dataset.hookId
].getHookConfig({ targetInfo });
}

const droppedData = element.dataset;
const isNew = element.classList.contains("o_web_studio_component");
const structure = isNew ? droppedData.structure : "field"; // only fields can be moved
if (isNew) {
const dropInfo = droppedData.drop ? JSON.parse(droppedData.drop) : undefined;
this.addStructure(structure, dropInfo, targetInfo);
} else {
this.moveStructure(structure, droppedData, {
xpath: targetInfo.xpath,
position: targetInfo.position,
});
}
},
onDragEnd: ({ element }) => {
cleanHooks(this.viewRef.el);
if (cleanUps) {
cleanUps.forEach((c) => c());
cleanUps = null;
}
copyOnDrag.clean();
},
});

this.applyAutoClick = async () => {
if (!this.autoClick) {
return;
}

const { targetInfo, tag, attrs } = this.autoClick;

// First step: locate node in new arch
let xpathToClick = targetInfo.xpath;
if (tag) {
// We are trying to select a new node of which targetInfo could be its parent
if (targetInfo.position !== "inside") {
xpathToClick = xpathToClick.split("/").slice(0, -1).join("/");
}

const attrForXpath = Object.entries(attrs)
.filter(([, value]) => !!value)
.map(([attName, value]) =>