I am new in Angular5 so I started with creating a demo project in which their will be a form where one input field is their in which user can select emojis.I follow this link https://github.com/lbertenasco/ng-emoji-picker but the problem I am facing is that my inpute field doesnot show emoji selector.
My notification.module.ts code is as shown below:
import { NgModule } from '#angular/core';
import {EmojiPickerModule} from 'ng-emoji-picker';
import { NotificationComponent } from
'./components/notification.component';
#NgModule({
declarations: [
NotificationComponent
],
providers: [
],
imports: [
EmojiPickerModule,
]
})
export class NotificationsModule { }
My notification.component.html code is shown below:
<div>
<div fxLayout="row">
<div fxFlex="80" fxFlexOffset="10">
<mat-card>
<mat-card-title fxLayout="row">
<div class="padding-top-10 padding-right-
15">Notifications</div>
</mat-card-title>
<mat-card-content>
<form id="mainForm" name="mainForm" fxLayout="row" fxLayoutWrap
novalidate [formGroup]="notificationForm"
(submit)="submitInst()">
<emoji-input></emoji-input>
</mat-card-content>
</mat-card>
</div>
Problem: When I run command ng serve I am just able to see the input field but no emoji picker.Can Anyone tell me where I am going wrong?
You are missing emoji-input in notification.component.html file.
Add this for emoji-input
<emoji-input [(model)]="bindedVariable" [textArea]="{cols: 40, rows: 5 [onEnter]="onEnterFunction" [popupAnchor]="'bottom' (setPopupAction)="setPopupAction($event)">
</emoji-input>
And add the below in the notification.component.ts file inside the export class.
public openPopup: Function;
setPopupAction(fn: any) {
this.openPopup = fn;
}
Related
So from the backend I get a array of objects that look kind of like this
ItemsToAdd
{
Page: MemberPage
Feature: Search
Text: "Something to explain said feature"
}
So i match these values to enums in the frontend and then on for example the memberpage i do this check
private get itemsForPageFeatures(): ItemsToAdd[] {
return this.items.filter(
(f) =>
f.page== Pages.MemberPage &&
f.feature != null
);
}
What we get from the backend will change a lot over time and is only the same for weeks at most. So I would like to avoid to have to add the components in the template as it will become dead code fast and will become a huge thing to have to just go around and delete dead code. So preferably i would like to add it using a function and then for example for the search feature i would have a ref on the parent like
<SearchBox :ref="Features.Search" />
and in code just add elements where the ItemsToAdd objects Feature property match the ref
is this possible in Vue? things like appendChild and so on doesn't work in Vue but that is the closest thing i can think of to kind of what I want. This function would basically just loop through the itemsForPageFeatures and add the features belonging to the page it is run on.
For another example how the template looks
<template>
<div class="container-fluid mt-3">
<div
class="d-flex flex-row justify-content-between flex-wrap align-items-center"
>
<div class="d-align-self-end">
<SearchBox :ref="Features.Search" />
</div>
</div>
<MessagesFilter
:ref="Features.MessagesFilter"
/>
<DataChart
:ref="Features.DataChart"
/>
So say we got an answer from backend where it contains an object that has a feature property DataChart and another one with Search so now i would want components to be added under the DataChart component and the SearchBox component but not the messagesFilter one as we didnt get that from the backend. But then next week we change in backend so we no longer want to display the Search feature component under searchbox. so we only get the object with DataChart so then it should only render the DataChart one. So the solution would have to work without having to make changes to the frontend everytime we change what we want to display as the backend will only be database configs that dont require releases.
Closest i can come up with is this function that does not work for Vue as appendChild doesnt work there but to help with kind of what i imagine. So the component to be generated is known and will always be the same type of component. It is where it is to be placed that is the dynamic part.
private showTextBoxes() {
this.itemsForPageFeatures.forEach((element) => {
let el = this.$createElement(NewMinorFeatureTextBox, {
props: {
item: element,
},
});
var ref = `${element.feature}`
this.$refs.ref.appendChild(el);
});
}
You can use dynamic components for it. use it like this:
<component v-for="item in itemsForPageFeatures" :is="getComponent(item.Feature)" :key="item.Feature"/>
also inside your script:
export default {
data() {
return {
items: [
{
Page: "MemberPage",
Feature: "Search",
Text: "Something to explain said feature"
}
]
};
},
computed: {
itemsForPageFeatures() {
return this.items.filter(
f =>
f.Page === "MemberPage" &&
f.Feature != null
);
}
},
methods: {
getComponent(feature) {
switch (feature) {
case "Search":
return "search-box";
default:
return "";
}
}
}
};
I need to add events in some buttons in qweb template or maybe make a widget for this template. But I can't load js in this template, even if I add js file in web.assets_backend or web.assets_frontend.
controller.py
from odoo import http
class LogData(http.Controller):
#http.route("/log_data", type="http", auth="user")
def log_data_view(self, **kwargs):
return http.request.render(
"table_relation.log_data_template"
)
log_data_template.xml
<odoo>
<template id="log_data_template" name="Log Data">
<t t-call="web.layout">
<t t-set="head">
<t t-call-asssets="web.assets_common" t-js="false"/>
<t t-call-asssets="web.assets_frontend" t-js="false"/>
</t>
<div id="wrap" class="container">
<h1>Log Data</h1>
<div class="o_log_data">
<button id="start-log">日志</button>
<button id="cancel-log">停止</button>
<div id="log-content" style="height:500px;overflow: scroll;"/>
</div>
<button type="button" class="demo-btn">demo button</button>
</div>
</t>
</template>
</odoo>
log_data.js
odoo.define('log_data', function (require){
'use strict';
var publicWidget = require('web.public.widget');
console.log('==========')
publicWidget.registry.LogData = publicWidget.Widget.extend({
selector: '.o_log_data',
events: {
'click #start-log': '_startLog',
'click #cancel-log': '_cancelLog',
},
init: function () {
console.log('o_log_data')
},
start: function () {
console.log('o_log_data')
},
_startLog: function () {
console.log('_startLog')
},
});
publicWidget.registry.DemoBtn = publicWidget.Widget.extend({
selector: '.demo-btn',
events: {
click: '_onClick'
},
_onClick: function (e) {
console.log('_onClick')
},
});
})
manifest.py
'assets': {
'web.assets_backend': [
...
'table_relation/static/src/js/log_data.js',
]
'web.assets_frontend': [
...
'table_relation/static/src/js/log_data.js',
]
...
}
enter image description here
It seems not to load assets_backend bundle on this page, and log_data.js is not working.
As per the code you have mentioned above, it seems like you are trying to create a controller i.e a route that can be accessed by the User only but from the website side like the portal or eCommerce part.
So if that is the case, then you need to add your js files to web.assets_frontend instead of web.assets_backend in manifest.py file.
The answer is late but in case you still need this you can try the following code. It works in Odoo14 and should definitely work in Odoo15 as well since class Widget still have this statement:
// Now this class can simply be used with the following syntax::
// var myWidget = new MyWidget(this);
// myWidget.appendTo($(".some-div"));
You can find the reference here:
https://github.com/odoo/odoo/blob/f1f3fcef6cc471fc01da574da26712e643315da6/addons/web/static/src/legacy/js/core/widget.js#L49-L52
And your code refactored by following those instructions.
odoo.define('log_data', function (require){
'use strict';
var publicWidget = require('web.public.widget');
console.log('==========')
publicWidget.registry.LogData = publicWidget.Widget.extend({
selector: '.o_log_data',
events: {
'click #start-log': '_startLog',
'click #cancel-log': '_cancelLog',
},
init: function () {
console.log('o_log_data')
},
start: function () {
console.log('o_log_data')
},
_startLog: function () {
console.log('_startLog')
},
});
var LogData = new publicWidget.registry.LogData(this);
LogData.appendTo($(".o_log_data"));
publicWidget.registry.DemoBtn = publicWidget.Widget.extend({
selector: '.demo-btn',
events: {
click: '_onClick'
},
_onClick: function (e) {
console.log('_onClick')
},
});
var DemoBtn = new publicWidget.registry.DemoBtn(this);
DemoBtn.appendTo($(".demo-btn"));
});
I think that publicWidget are only rendered, as Krutarth Patel said, in the scope of some layout like 'website.layout'. I cannot provide much info about this because I still have to figure out the layouts, for example 'portal.layout' scope was not rendering the publicWidget extension for me.
But the Widget class is designed in a way that allows to 'force' render of the widget by inserting it into the dom, render, bound to specific selector and events.
So you can (probably?) automatically render by wrapping your template with the proper t-call, otherwise you can use the 'appendTo' syntax and append the widget to the DOM, make an istance out of it and use that istance.
I've been struggling with this for a couple of days before I could make it work, and I found a couple of post like this.
I hope this will help you, or other users to figure out some of the use you can make of odoo widgets.
This seems like it should be pretty straight forward... within a stepper, you're collecting info, and you want to make sure an email is an email. But it seems like the shared 'form' tag causes some issues where the error checker gets messed up and doesn't work?
Further clarification... the issue seems to actually be in the following tag element...
formControlName="emailCtrl"
When I remove this line, and remove it's sibling line from the .ts (emailCtrl: ['', Validators.required],) the error check starts working. However, that means that the stepper can't verify that this step is required.
How can I make sure the stepper validates an entry and at the same time make sure that the ErrorStateMatcher works?
Here is my combined HTML...
<mat-step [stepControl]="infoFormGroup">
<form [formGroup]="infoFormGroup">
<ng-template matStepLabel>Profile Information</ng-template>
<div>
<!-- <form class="emailForm"> -->
<mat-form-field class="full-width">
<input matInput placeholder="Username" [formControl]="emailFormControl"
formControlName="emailCtrl"
[errorStateMatcher]="infoMatcher">
<mat-hint>Must be a valid email address</mat-hint>
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address for a username
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
A username is <strong>required</strong>
</mat-error>
</mat-form-field>
<!-- </form> -->
</div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</form>
</mat-step>
As you can see, I have commented out the nested 'form' for the email slot. In testing, I have tried it commented and not commented out. Either way, the error checking doesn't work right.
Here are some of the pertinent .ts snippets...
import { FormControl, FormGroupDirective, NgForm, Validators } from '#angular/forms';
import { FormBuilder, FormGroup } from '#angular/forms';
import { ErrorStateMatcher } from '#angular/material/core';
export class Pg2ErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
...
export class Pg2Dialog {
...
emailFormControl = new FormControl('', [
Validators.required,
Validators.email,
]);
infoMatcher = new Pg2ErrorStateMatcher();
...
this.infoFormGroup = this._formBuilder.group({
emailCtrl: ['', Validators.required],
});
I believe I figured this out. the ErrorStateMatcher requires a named form control. In this case, it's emailFormControl. This is declared as the following...
emailFormControl = new FormControl('', [
Validators.required,
Validators.email,
]);
Also, the stepper requires a named form group, that in itself declares a new form control. In this case, it was emailCtrl. It was declared as the following...
this.infoFormGroup = this._formBuilder.group({
emailCtrl: ['', Validators.required],
});
To have the stepper form control utilize the ErrorStateMatcher form control, simply drop the square brackets inside the .group assignment and assign emailFormControl to the emailCtrl. Like this...
this.infoFormGroup = this._formBuilder.group({
emailCtrl: this.emailFormControl
});
I tested this in a different code section with a similar problem and it worked in both places!
I'm using react-select and I was wondering how I could use the optionRenderer to display my options inline. See the picture below:
#react-select
You can use JSX inside label option
const options = [
{
label: <div className="label-item">ORA</div>,
value="ORA"
}, ....
]
Then modify class of react-select to customize it (maybe use styled-components)
import 'styled' from 'styled-component'
import 'select' from 'react-select'
const StyleSelect = styled(select).`
.select {
.select-control { ... }
}
`
Just use StyleSelect like normal select
I'm creating a custom element that dynamically generates a user input form. So far it's working quite well, but I'm having problems setting up Aurelia-Validation on it and need some help.
my-form.html
<div class="form-group" repeat.for="control of controls">
<label>${control.label}</label>
<div>
<compose containerless
view-model="resources/elements/${control.type}/${control.type}"
model.bind="{'control': control, 'model': model, 'readonly': readonly}"
class="form-control"></compose>
</div>
</div>
I have several different control.type's available and working (my-textbox, my-dropdown, my-datepicker) -- each of them is a custom element. For instance:
Example control (my-textbox.html)
<template>
<input type="text"
class="form-control"
value.bind="model[control.bind] & validate">
</template>
Parent view:
<my-form controls.bind="controls" model.bind="model" if.bind="controls"></my-form>
Parent view-model:
controls = [
{label: 'Username', type: 'my-textbox', bind: 'user_username'},
{label: 'Status', type: 'my-dropdown', bind: 'user_status', enum: 'ActiveInactive', default: '(Choose)'},
{label: 'Last_login', type: 'my-datepicker', bind: 'user_lastlogin', vc: 'date'}];
ValidationRules
.ensure('user_username').required().minLength(1).maxLength(10)
.ensure('user_status').required()
.ensure('user_lastlogin').required()
.on(this.model);
I'm getting the error Error: A ValidationController has not been registered. at ValidateBindingBehaviorBase.bind.... However, I only want one validator for the whole dynamically-built form, so I don't want to import validation in each of the controls. What do I do?
It actually works to import the Validation Controller and related resources in the parent form, even though the & validate is attached to the child controls.
Parent view-model
import {inject} from 'aurelia-framework';
import {ValidationControllerFactory, ValidationRules} from 'aurelia-validation';
import {BootstrapFormRenderer} from 'common/bootstrap-form-renderer';
#inject(Core, ValidationControllerFactory)
export class MyForm {
constructor(validationControllerFactory) {
this.validationCtrl = validationControllerFactory.createForCurrentScope();
this.validationCtrl.addRenderer(new BootstrapFormRenderer());
}
setupValidator() {
let rules = [];
this.controls.map(control => {
if (control.validation) {
rules.push(ValidationRules.ensure(control.bind).required().rules[0]);
}
this.validationCtrl.addObject(this.modelEdit, rules);
}
}