Develop Reference

How can I add action menu in usermenu odoo15

In odoo 15, how can I add new action menu in user menu? In other odoo versions (13 and 14), it was possible by inheriting from UserMenu.Actions.
In odoo 15, I tried the following code but it is not working.
Thanks for any suggestion
/** #odoo-module **/
import { registry } from "#web/core/registry";
import { preferencesItem } from "#web/webclient/user_menu/user_menu_items";
export function UserLog(env) {
return Object.assign(
{},
preferencesItem(env),
{
type: "item",
id: "log",
description: env._t("UserRecent Log"),
callback: async function () {
const actionDescription = await env.services.orm.call("user.recent.log", "action_get");
actionDescription.res_id = env.services.user.userId;
env.services.action.doAction(actionDescription);
},
sequence: 70,
}
);
}
registry.category("user_menuitems").add('profile', UserLog, { force: true })
This is my model code.
class UserRecentLog(models.Model):
_name = 'user.recent.log'
_order = "last_visited_on desc"
#api.model
def action_get(self):
return self.env['ir.actions.act_window']._for_xml_id('user_recent_log.action_user_activity')
This is my xml view.
<!-- actions opening views on models -->
<record model="ir.actions.act_window" id="action_user_activity">
<field name="name">User Recent Log(s)</field>
<field name="res_model">user.recent.log</field>
<field name="view_mode">tree,form</field>
<field name="view_id" ref="user_activity_view_tree"/>
</record>

You don't need to change anything, your code should work. You can check the user preferences menu item in web module (similar to your menu item).
export function preferencesItem(env) {
return {
type: "item",
id: "settings",
description: env._t("Preferences"),
callback: async function () {
const actionDescription = await env.services.orm.call("res.users", "action_get");
actionDescription.res_id = env.services.user.userId;
env.services.action.doAction(actionDescription);
},
sequence: 50,
};
}
registry
.category("user_menuitems")
.add("profile", preferencesItem)
There is another implementation in hr module:
import { registry } from "#web/core/registry";
import { preferencesItem } from "#web/webclient/user_menu/user_menu_items";
export function hrPreferencesItem(env) {
return Object.assign(
{},
preferencesItem(env),
{
description: env._t('My Profile'),
}
);
}
registry.category("user_menuitems").add('profile', hrPreferencesItem, { force: true })
So you can rewrite your code above as following:
import { registry } from "#web/core/registry";
import { preferencesItem } from "#web/webclient/user_menu/user_menu_items";
export function UserLog(env) {
return Object.assign(
{},
preferencesItem(env),
{
type: "item",
id: "log",
description: env._t("Log"),
callback: async function () {
const actionDescription = await env.services.orm.call("res.users.log", "action_user_activity");
env.services.action.doAction(actionDescription);
},
sequence: 70,
}
);
}
registry.category("user_menuitems").add('profile', UserLog, { force: true })
Edit:
The tree view mode is ignored when executing the window action.
The _executeActWindowAction will check for the tree view type in the views registry to construct the views object and unfortunately, the tree view mode was not added to that registry.
To show the tree view, you can add [false, 'list'] to the views list and specify the view type (list) in the doAction options:
actionDescription.views.push([actionDescription.view_id[0], 'list'])
env.services.action.doAction(actionDescription, {viewType: 'list'});
Or update the views list and change tree to list:
actionDescription.views[0][1] = 'list';
Of course , you can do the same in the action_get method:
action = self.env['ir.actions.act_window']._for_xml_id('user_recent_log.action_user_activity')
action['views'][0] = action['view_id'][0], 'list'
return action

in case i have multiple monaco diff editor in the same page, diff will be only visible in the first instance

I have a Vue component that rendering diff editor of Monaco.
Once I have more than one instance of it on the same page, the diff is only shown in the first one.
template:
<template>
<div>
<div ref="diffEditor" class="vue--monaco-diff-editor"></div>
</div>
</template>
script:
async mounted(): Promise<void> {
await this.importMonacoPackage();
this.$nextTick(() => {
if (!monaco) {
throw new Error('monaco is not initialized');
}
const originalModel = monaco.editor.createModel(
this.versions[0].code,
MonacoHelper.markdownLangToMonacoLang(this.versions[0].lang),
);
const modifiedModel = monaco.editor.createModel(
this.versions[1].code,
MonacoHelper.markdownLangToMonacoLang(this.versions[1].lang),
);
let diffEditorElement = this.$refs.diffEditor;
this.diffEditor = monaco.editor.createDiffEditor(
diffEditorElement as HTMLElement,
{
scrollbar: {
vertical: 'hidden',
horizontal: 'hidden',
handleMouseWheel: true,
},
wordWrap: 'on',
readOnly: true,
scrollBeyondLastLine: false,
minimap: {
enabled: false,
},
automaticLayout: true,
},
);
if (!this.diffEditor) {
return;
}
this.diffEditor.setModel({
original: originalModel,
modified: modifiedModel,
});
// set the editor height to scale with the content height automatically
// see https://github.com/microsoft/monaco-editor/issues/794
const originalContentHeight = this.diffEditor
.getOriginalEditor()
.getContentHeight();
const modifiedContentHeight = this.diffEditor
.getModifiedEditor()
.getContentHeight();
let contentHeight = Math.max(
originalContentHeight,
modifiedContentHeight,
);
// allow for a single empty line at the bottom, default line height is 18px
contentHeight = contentHeight + 18;
const domNode = this.diffEditor.getDomNode();
domNode.style.height = `${contentHeight}px`;
this.diffEditor.layout();
});
},
methods: {
async importMonacoPackage() {
// eslint-disable-next-line import/no-unresolved
monaco = await import('../../../lib/monaco-editor');
},
},
I'm using
"monaco-editor": "^0.24.0","vue": "^2.6.13".
any ideas what I'm doing wrong ? and why just the first instance showing the diff highlights?

Add custom autocomplete to react-ace EUI Kibana

I'm trying to add custom autocomplete for the editor inside the Kibana EUI framework.
Basically, I have this code:
<EuiCodeEditor
mode="yaml"
theme="github"
width="100%"
height="100%"
className="ace-tm"
value={configurationText}
onChange={(e) => onChangeEventText(e)}
setOptions={{
fontSize: '14px',
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
}}
onBlur={() => {
console.log('blur');
}} // eslint-disable-line no-console
aria-label="Code Editor"
onLoad = {editor => {
console.log("EDITOR");
console.log(editor);
console.log(editor.completers);
// editor.completers = [staticWordCompleter];
/* var mode = editor.getMode();
mode.getCompletions = (state, session, pos, prefix) => {
return [];
} ;
editor.setMode(mode);
editor.completers = [staticWordCompleter];*/
}}
/>
And as you can see inside the onLoad I'm getting the editor pointer in order to add the custom autocomplete, but is not working. The ace editor documentation is not so good for the react-ace inside the Eui framework, so any help would be appreciated.
EDIT1
Resolved as you can read inside the answer, now I'm facing another problem: the autocomplete suggest either custom and keyword inside the document. I need only my custom suggestion. How can I do that?

Just resolved, I added this import:
import 'brace/ext/language_tools';
And wrote my onLoad as follow:
onLoad={editor => {
var mode = editor.getSession().getMode();
mode.getCompletions = (state, session, pos, prefix, callback) => {
var completions = [];
["example1", "example2"].forEach(function (w) {
completions.push({
value: w,
meta: "my completion",
snippet: `#{${w || ""}}`,
caption: w || ""
});
});
return completions;
}
editor.getSession().setMode(mode);
console.log("EDITOR");
console.log(editor.getSession().getMode().getCompletions());
}}
Now I'm facing another problem and I'm updating the question

Customizing dropdown button for CKeditor 5

Managed to add a custom dropdown button to the toolbar:
But I don't know how to add a label or an icon to it.
Here's my code:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
import Model from '#ckeditor/ckeditor5-ui/src/model';
import { createDropdown, addListToDropdown } from '#ckeditor/ckeditor5-ui/src/dropdown/utils';
import Collection from '#ckeditor/ckeditor5-utils/src/collection';
import imageIcon from '#ckeditor/ckeditor5-core/theme/icons/image.svg';
export default class ImageDropdown extends Plugin {
static get pluginName() {
return 'ImageDropdown';
}
init() {
const editor = this.editor;
const t = editor.t;
const defaultTitle = t('Add image');
const dropdownTooltip = t('Image');
// Register UI component
editor.ui.componentFactory.add('imageDropdown', locale => {
const dropdownView = createDropdown( locale );
dropdownView.set({
label: 'Image',
tooltip: true
});
dropdownView.buttonView.set( {
isOn: false,
withText: true,
tooltip: dropdownTooltip
});
dropdownView.extendTemplate( {
attributes: {
class: [
'ck-image-dropdown'
]
}
});
// The collection of the list items.
const items = new Collection();
items.add( {
type: 'button',
model: new Model( {
label: 'Uppload image',
icon: imageIcon
})
});
items.add( {
type: 'button',
model: new Model( {
label: 'Image URL',
icon: imageIcon
})
});
// Create a dropdown with a list inside the panel.
addListToDropdown( dropdownView, items );
return dropdownView;
});
}
}

Setting labels, icons etc. for a dropdown button should take place on the dropdown's view instance:
dropdownView.buttonView.set({
label: 'some-label',
icon: 'path/to/some/icon'
tooltip: true
});
Note that these properties are observable and can be dynamically evaluated based on some state using the ObservableMixin#bind function.
See an example here: https://github.com/ckeditor/ckeditor5-alignment/blob/894745ecb1e8bd94286b4089eb16079034eb8a0b/src/alignmentui.js#L107-L124

Convert document.querySelector() into Reactjs

I'am try to convert my code bellow into Reactjs. I use this code bellow to embed THEOplayer to my website, as long as i know we can use "ref" to replace the document.querySelector('.classname') instead to target particular DOM to change or modifiying it but i'm still confused and getting error, what is the best practice to change my code bellow.
var playerConfig = {
"libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
ui: {
fluid: true
},
};
var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);
player.source = {
sources : [{
src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source // //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
type : 'application/x-mpegurl' // sets type to HLS
}],
textTracks : [{
default: true, //optional
kind : 'subtitles',
src : 'example.srt',
srclang : 'en'
}]
};
player.addEventListener('sourcechange', function() {
player.removeEventListener('playing', firstplay);
player.addEventListener('playing', firstplay);
});

You could simple write a react component and add your custom event listeners in componentDidMount method
const playerConfig = {
"libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
ui: {
fluid: true
},
};
class App extends React.Component {
componentDidMount() {
const player = this.player;
player.addEventListener('sourcechange',() => {
player.removeEventListener('playing', this.firstplay);
player.addEventListener('playing', this.firstplay);
});
this.playerSrc = new THEOplayer.Player(player, playerConfig);
this.playerSrc.source = {
sources : [{
src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source // //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
type : 'application/x-mpegurl' // sets type to HLS
}],
textTracks : [{
default: true, //optional
kind : 'subtitles',
src : 'example.srt',
srclang : 'en'
}]
};
}
render() {
return <div className={video-container} ref={(ref) => this.player = ref}/>
}
}