I installed the Vuetify upload button with npm (https://www.npmjs.com/package/vuetify-upload-button).
However there is little documentation on it and I am not sure how to read the data that is selected when the input button is used.
HTML(part):
<upload-btn title="select" name="pinimage">test</upload-btn>
<v-btn
:disabled="!valid"
#click="submit"
>
submit
</v-btn>
JS:
(See the submit function where I try to log the selected data)
<script>
import { mapState } from 'vuex';
import UploadButton from 'vuetify-upload-button';
export default {
name: "addinspiration",
components: {
'upload-btn': UploadButton
},
computed: {
...mapState([
'backenderror'
])
},
data: () => ({
backenderror: '',
valid: true,
email: '',
pinimage: '',
}),
methods: {
submit () {
console.log(this.pinimage.files);
this.$store.dispatch('AddInspiration', {
pinimage: this.pinimage.files,
});
},
clear () {
this.$refs.form.reset()
}
},
}
If I don't misunderstood your question then you could also try like this.
According to its documentation, fileChangedCallback is a callback for when a file is selected, returns a File object and its default value is undefined.
Thus, you could use FileReader() to read the data of the file.
HTML
<upload-btn :fileChangedCallback="getFile"></upload-btn>
JS
data() {
return {
myFile: ''
}
},
methods: {
getFile (file) {
let vm = this
let reader = new FileReader()
reader.onload = e => {
vm.myFile = e.target.result
}
reader.readAsDataURL(file)
}
}
Related
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
here's what I am trying to do: I want to populate a variable data with base 64 strings of all user selected images for uploading.
Where do I stand: I am able to do the load data field for a single image. I am able to for multiple images also, but I get an error for the last file in the list.
Error Received:
[Vue warn]: Error in v-on handler: "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable"
Here's the code:
<template>
<div id="Uploader">
<input type="file" id="file" ref="file" v-on:change="handleFileChanges" multiple/>
<button v-on:click="upload_picture">Submit</button>
<img v-bind:src="'data:image/jpeg;base64,'+result" style="width:200px;height:200px;"/> </div>
</template>
<script>
// import axios from 'axios';
export default {
name: 'Uploader',
data() {
return {
file: '',
values: '',
data: [],
};
},
methods: {
handleFileUpload() {
[this.file] = this.$refs.file.files;
},
handleFileChanges(e) {
const reader = new window.FileReader();
console.log(e.target.files);
const previewfile = (file) => {
console.log(file.name);
reader.onload = (event) => {
this.data.push(event.target.result);
};
reader.readAsDataURL(file);
};
e.target.files.forEach(previewfile);
},
upload_picture() {
console.log(this.data);
// axios.post('http://0.0.0.0:9094/analyze',
// this.data,
// {
// headers: {
// 'Content-Type': 'application/json',
// },
// }).then((response) => {
// console.log(response);
// this.result = response.data.blended_image;
// console.log('SUCCESS!!');
// }).catch((error) => {
// console.log(error);
// console.log('FAILURE!!');
// });
[this.result] = this.data;
},
},
};
</script> ```
I'm studying javascript and mithril.js 1.1.6. I'm writing down a simple web app in which users land on a page where he can login. Users who already did login land on a different page. I'm trying this using conditional routing, here is the main component:
const m = require("mithril");
...
import Eventbus from './whafodi/eventbus.js';
import WelcomePage from './ui/welcome.js';
import User from './model/user.js';
var eventbus = new Eventbus();
function MyApp() {
return {
usrAuth: function() {
m.route(document.body, "/", {
"/": { view: () => m("p", "hello")}
})
},
usrNotAuth: function() {
m.route(document.body, "/", {
"/": { render: v => m(WelcomePage, eventbus) }
})
},
oninit: function(vnode) {
vnode.state.user = new User();
eventbus.subscribe({
type: "login",
handle: function(action) {
vnode.state.user.token = action.token;
console.log(JSON.stringify(vnode.state.user));
}
});
},
view: function(vnode) {
if(vnode.state.user.token) {
this.usrAuth();
} else {
this.usrNotAuth();
}
}
}
};
m.mount(document.body, MyApp);
MyApp is the main component. It check if user has a token, then return the proper route. This is the component that is in charge to let users login:
const m = require("mithril");
const hellojs = require("hellojs");
function TopBar(node) {
var bus = node.attrs.eventbus;
function _login() {
hellojs('facebook').login({scope:'email'});
}
return {
oninit: function(vnode) {
hellojs.init({
facebook: XXXXXXX,
}, {
redirect_uri: 'http://localhost'
});
hellojs.on('auth.login', auth => {
var fbtoken = auth.authResponse.access_token;
m.request({
method:"POST",
url:"./myapp/login/fb/token",
data:auth.authResponse,
background: true
}).then(function(result){
console.log(result);
bus.publish({ type: "login", token: result.jwttoken });
m.route.set("/");
}, function(error){
console.log(error);
bus.publish({ type: "login", token: "" });
});
});
},
view: function(vnode) {
return m("div", [
m("button", { onclick: _login }, "Login")
]);
}
}
}
export default TopBar;
TopBar component occurs in the WelcomePage component mentioned in the main one. TopBar renders a button and use hello.js to login. It uses the EventBus bus parameter to tell main component user logged in (there is an handler in main component to update the user model). Once user logins, event is fired and main component updates the user model. Good. Now, how can trigger the main component to load the right route?
I read mithril'docs again and I found that RouteResolvers perfectly suit my needs. Here is an example:
var App = (function() {
var login;
function isLoggedIn(component) {
if(login) {
return component;
} else {
m.route.set("/hey");
}
}
return {
oninit: function(vnode) {
EventBus.subscribe({
type: "login",
handle: function(action) {
console.log("incoming action: " + JSON.stringify(action));
login = action.value;
}
});
},
oncreate: function(vnode) {
Foo.eventbus = EventBus;
Bar.eventbus = EventBus;
Hey.eventbus = EventBus;
m.route(document.body, "/hey", {
"/foo": {
onmatch: function(args, requestedPath, route) { return isLoggedIn(Foo); }
},
"/bar": {
onmatch: function(args, requestedPath, route) { return isLoggedIn(Bar); }
},
"/hey": Hey
});
},
view: function(vnode) {
return m("div", "home..");
}
};
})();
Eventbus is used to let components communicate with App. They fire events (login type events) that App can handle. I found convenient to pass Eventbus the way oncreate method shows, I can use Eventbus in each component's oncreate to let components fire events.
So I'm retrieving my data from my api using vue-resource which is happening correctly, the state is updated and from the console I am able to see the values I'm requesting. My problem is that when the application loads the data from the store doesn't seem to be impacting the application on load, but if for example I change between pages the information is displayed correctly. This is leading me to believe somewhere along the way I have gotten the life cycle hooks incorrect, or I have handled the state incorrectly inside vuex.
Vuex store
import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(Vuex)
const state = {
twitter: 0,
instagram: 0,
youtube: 0,
twitch: 0
}
const actions = {
LOAD_METRICS: ({commit}) => {
Vue.http.get('http://109.74.195.166:2000/metrics').then(response => {
let out = [{
twitter: Number(response.body[0].twitter),
instagram: Number(response.body[0].instagram),
youtube: Number(response.body[0].youtube),
twitch: Number(response.body[0].twitch)
}]
commit('SET_METRICS', out)
}).catch((e) => {
console.log(e)
})
}
}
const mutations = {
SET_METRICS (state, obj) {
state.twitter = obj[0].twitter
state.instagram = obj[0].instagram
state.youtube = obj[0].youtube
state.twitch = obj[0].twitch
}
}
const getters = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
Here I am trying to dispatch an event to gather the needed information using a mutation.
<template>
<div id="app">
<NavigationTop></NavigationTop>
<router-view></router-view>
<SocialBar></SocialBar>
<CopyrightBar></CopyrightBar>
</div>
</template>
<script>
export default {
name: 'app',
ready: function () {
this.$store.dispatch('LOAD_METRICS')
}
}
</script>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
#app {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: white;
background: url('./assets/Images/bodyBackground.jpg');
}
</style>
Then finally I am requesting the information inside of the component to be used by countup.js and also giving it to the method inside data.
<template>
<div class="hero">
<div class="container hero-content">
<div class="row hero-back align-items-end">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6" v-for="icons in socialIcons">
<Hero-Tile
:name="icons.name"
:icon="icons.iconName"
:count="icons.count"
:numeric="icons.numeric"
></Hero-Tile>
<h1>{{origin}}</h1>
</div>
</div>
</div>
</div>
</div>
<div class="diagonal-left-lines"></div>
<div class="home-hero-img"><img class="img-fluid" src="../../assets/Images/home-hero.jpg"></div>
</div>
</template>
<script>
import HeroTile from './Hero-Tile'
import CountUp from 'countup.js'
export default {
components: {HeroTile},
name: 'hero',
data () {
return {
origin: '',
socialIcons: [
{
name: 'twitter',
iconName: 'twitter',
count: this.$store.state.twitter,
numeric: 26000
},
{
name: 'instagram',
iconName: 'instagram',
count: this.$store.state.instagram,
numeric: 35000
},
{
name: 'youtube',
iconName: 'youtube-play',
count: this.$store.state.youtube,
numeric: 15000
},
{
name: 'twitch',
iconName: 'twitch',
count: this.$store.state.twitch,
numeric: 127000
}
]
}
},
methods: {
updateNumbers: function () {
let options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: 'K'
}
function kFormatter (num) {
return num > 999 ? (num / 1000).toFixed(1) : num
}
let twitter = new CountUp('twitter', 0, kFormatter(this.$store.state.twitter), 0, 3, options)
let instagram = new CountUp('instagram', 0, kFormatter(this.$store.state.instagram), 0, 3, options)
let youtube = new CountUp('youtube', 0, kFormatter(this.$store.state.youtube), 0, 3, options)
let twitch = new CountUp('twitch', 0, kFormatter(this.$store.state.twitch), 0, 3, options)
twitter.start()
instagram.start()
youtube.start()
twitch.start()
}
},
mounted: function () {
this.updateNumbers()
}
}
</script>
To be clear at the moment it seems to just load '0k' so it's as if there is some form of race condition occurring causing it not to actually load the information on load-up. Though I'm not sure what the correct approach is here.
This was eventually solved by what I'm going to describe as hacking as I don't actually know the exact correct answer at this time. Though what I have does work.
Points of Interest below:
Store
LOAD_METRICS: ({commit}, context) => {
console.log(context)
if (context === true) {
return new Promise((resolve) => {
resolve('loaded')
})
}
return new Promise((resolve) => {
Vue.http.get('real ip is normally here').then(response => {
let out = {
twitter: Number(response.body[0].twitter),
instagram: Number(response.body[0].instagram),
youtube: Number(response.body[0].youtube),
twitch: Number(response.body[0].twitch),
loaded: false
}
commit('SET_METRICS', out)
resolve(out)
}).catch((e) => {
console.log(e)
})
})
}
In the above I am now sending an instance of the current store.state.metrics.loaded when the dispatch event is sent. Which is then checked to see the truthness of the current value, Because the first load should always return false we then return a promise utilizing an API call while also mutating the store so we have the values from later. Thus onwards because we mutated the loaded event to be true the next further instances shall return a value of true and a new promise will be resolved so we can make sure the .then() handler is present.
Component
created: function () {
this.$store.dispatch('LOAD_METRICS', this.$store.state.metrics.loaded).then((res) => {
if (res !== 'loaded') {
this.updateNumbers(res)
} else {
this.socialIcons[0].count = this.kFormatter(this.$store.state.metrics.twitter) + 'K'
this.socialIcons[1].count = this.kFormatter(this.$store.state.metrics.instagram) + 'K'
this.socialIcons[2].count = this.kFormatter(this.$store.state.metrics.youtube) + 'K'
this.socialIcons[3].count = this.kFormatter(this.$store.state.metrics.twitch) + 'K'
}
})
}
Within our component created life cycle hook we then use the resulting values to identify the path to be taken when the components are created within the DOM again, this time just loading the values and allow normal data binding to update the DOM.
I believe there is a better method of approach then deliberating the logic of the state within the action setter and returning a promise that is essentially redundant other than for ensuring the .then() handle is present.
I've been trying to reproduce the button behavior that I've here, but with a different implementation. Basically, I'm trying to use Vuex instead of vue-i18n.js for internationalization purposes.
I now have the following code block, the purpose of which is to create language states and perform a XMLHttpRequest (for the .json files storing the various translations):
Vue.use(Vuex);
var storelang = new Vuex.Store({
state: {
lang: {}
},
mutations: {
LANG: function (state, ln) {
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', '../resources/i18n/' + ln + '.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
loadJSON(function (languageJSON) {
state.lang = JSON.parse(languageJSON);
})
},
strict: true
}
});
var mix = Vue.mixin({
computed: {
lang: function () {
return storelang.state.lang;
}
}
});
On my component constructor (created and initialized in the root Vue instance), I've the following:
components: {
lang: {
template: '<button type="button" class="btn btn-info" #click.prevent=activate(lang.code) #click="setActiveLang" v-show="!isActive">{{ lang.code }}</button>',
props: [
'active',
'lang'
],
computed: {
isActive: function() {
return this.lang.code == this.active.code
}
},
methods: {
activate: function(code) {
storelang.dispatch('LANG', code);
},
setActiveLang: function() {
this.active = this.lang;
}
},
ready: function() {
storelang.dispatch('LANG', 'en'); //default language
}
}
}
On my root Vue instance's data object, I've added the following:
langs: [{
code: "en"
}, {
code: "fr"
}, {
code: "pt"
}],
active: {
"code": "pt"
}
And finally, on my html:
<div v-for="lang in langs">
<p>
<lang :lang="lang" :active.sync="active"></lang>
</p>
</div>
I cannot figure out what I'm doing wrong here.
UPDATE
Here's a JsFiddle (I've exchanged the XMLHttpRequest request for json arrays). Also, this is a working example, but the language selector buttons do not hide when the respective language is selected, which is the opposite of what I want. Meaning that, I'm attempting to hide each individual language selector button when the user clicks it and selects the respective language (while showing the other language selector buttons).
The solution involves saving anactive state in the store, in addition to the lang state:
new Vuex.Store({
state: {
active: {},
lang: {}
Adding an ACTIVE mutation:
ACTIVE: function(state, ln) {
var langcode = 'en'
//portuguese
if (ln === 'pt') {
langcode = 'pt'
}
//french
if (ln === 'fr') {
langcode = 'fr'
}
state.active = langcode
}
On the computed properties block, one also needs to add getter functions for the active state and return the langcode that is currently active:
Vue.mixin({
computed: {
lang: function() {
return storelang.state.lang
},
enIsActive: function() {
return storelang.state.active == 'en'
},
frIsActive: function() {
return storelang.state.active == 'fr'
},
ptIsActive: function() {
return storelang.state.active == 'pt'
}
}
})
Then, it is just a question of conditionally displaying each of the buttons on the component template by adding v-show="!enIsActive", v-show="!frIsActive", etc.:
var langBtn = Vue.extend({
template: '<button type="button" class="btn btn-info" #click.prevent=activate("en") v-show="!enIsActive">en</button><button type="button" class="btn btn-info" #click.prevent=activate("pt") v-show="!ptIsActive">pt</button><button type="button" class="btn btn-info" #click.prevent=activate("fr") v-show="!frIsActive">fr</button>',
Finally, on the activate method, adding a new line to change the active state when the user clicks a button:
methods: {
activate: function(x) {
storelang.dispatch('LANG', x)
storelang.dispatch('ACTIVE', x)
}
},
The full working code here.