Getting error with summernote in meteor - javascript

After following the README in the autoform summernote package, whenever I try to submit the form I get this error:
Uncaught TypeError: undefined is not a function
Clicking on the error shows this code:
AutoForm.addInputType('summernote', {
template: 'afSummernote',
valueOut: function() {
return this.code(); //This as the offending line (marked with an x)
}});
I am not sure if I am doing something wrong or it is the package
schema
//Creating a new Collection
Todos = new Mongo.Collection("Todos");
//Defining the schema
Todos.attachSchema(new SimpleSchema({
name: {
type:String,
label: "Name",
max:200
},
description: {
type:String,
label: "Description",
autoform: {
afFieldInput: {
type: 'summernote'
}
}
},
todo_type: {
type: String,
label: "Todo Type",
allowedValues: ['normal', 'survey'],
defaultValue: "normal",
autoform: {
type: "select",
options: function () {
return [
{label: "normal", value: "normal"},
{label: "survey", value: "survey"}
];
}
}
},
survey_questions: {
type: [Number],
label: "Survey Questions",
optional: true,
autoform: {
type: "hidden"
},
},
user_id:{
type: String,
autoform: {
type: "hidden",
label: false
},
autoValue: function(){
if (this.isInsert) {
return Meteor.userId();
} else if (this.isUpsert) {
return {$setOnInsert: Meteor.userId()};
} else {
this.unset();
}
},
denyUpdate:true
},
last_modified: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue: function () {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
}
},
created_at: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue: function () {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
},
denyUpdate: true
}
}));
.html
<template name='todo_create'>
{{#autoForm collection="Todos" id="todo_create" type="insert"}}
<fieldset>
<legend>Add a Todo</legend>
<div style="float:left; margin-top:10px;">
<div class="textField">
{{> afQuickField name='name'}}
</div>
<div class="textField" style="margin-left:20px;">
{{> afQuickField name='todo_type'}}
</div>
</div>
<div class="descriptionText">
{{> afFieldInput name='description'}}
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Add a Todo</button>
{{/autoForm}}
<div class="tableHolder">
{{> tabular table=TabularTables.Todos class="table table-striped table-bordered table-condensed"}}
</div>
</template>

Related

meteor cannot validate user profile schema

I created in meteor.js a user profile edit page based on autoform and simpl-schema packages. I also added Tracker to schema.
I wanted to make field Profile.Username required but it's validate when field is empty. This field is also unique and handling this property works good.
Also Email field is required and there Tracker works good.
Here is my code:
users.js
import { Mongo } from 'meteor/mongo';
import { Tracker } from 'meteor/tracker';
import SimpleSchema from 'simpl-schema';
SimpleSchema.extendOptions(['autoform']);
Schema.User = new SimpleSchema({
emails: {
type: Array,
optional: true
},
'emails.$': {
type: Object,
optional: true,
},
'emails.$.address': {
type: String,
regEx: SimpleSchema.RegEx.Email
},
'emails.$.verified': {
type: Boolean,
optional: true,
autoform: {
type: 'boolean-checkbox'
}
},
createdAt: {
type: Date,
autoValue: function() {
return new Date();
},
autoform: {
type: 'hidden'
}
},
profile: {
type: Schema.UserProfile,
optional: true
},
services: {
type: Object,
optional: true,
blackbox: true,
autoform: {
type: 'hidden'
}
}
}, {tracker: Tracker});
Meteor.users.attachSchema(Schema.User);
Meteor.users.allow({
insert: function () { return true; },
update: function () { return true; },
remove: function () { return true; }
});
profile.js
import { Mongo } from 'meteor/mongo';
import { Tracker } from 'meteor/tracker';
import SimpleSchema from 'simpl-schema';
SimpleSchema.extendOptions(['autoform']);
Schema = {};
Schema.UserProfile = new SimpleSchema({
username: {
type: String,
label: 'Username',
unique: true,
},
firstName: {
type: String,
optional: true
},
lastName: {
type: String,
optional: true
},
birthday: {
type: Date,
optional: true,
autoform: {
type: 'bootstrap-datepicker',
datePickerOptions: {
autoclose: true
}
}
},
gender: {
type: String,
optional: true,
autoform: {
type:'select-radio',
options: function () {
return [
{ label: 'Male', value: 'Male'},
{ label: 'Female', value: 'Female'},
];
},
}
}
}, {tracker: Tracker});
and ProfileEdit.html
<template name="ProfileEdit">
{{> Header}}
{{> SideNav}}
<div class="main-layout">
<legend>Update Profile</legend>
{{#if Template.subscriptionsReady}}
{{# autoForm id="profileEdit" collection="Meteor.users"
doc=currentUser type="update"}}
{{> afObjectField name="emails.0"}}
{{> afObjectField name="profile"}}
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
{{/autoForm}}
{{/if}}
</div>
</template>
Please, help me.

how to assign dataSource to DetailgridOptions(dataItem)

I have a kendo grid which has buttons in every row, On click the buttons open a pop-up with different grid on each button click, and there is a detail teamplate in each row of pop-up grid which contains another grid.
Now the problem is how to assign dataSource to the 3rd grid when detailGridOptions(dataItem) function is called.
var p=0;
$scope.detailGridOptions = function (dataItem) {
return {
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
PId: { type: 'number' },
ParentId: { type: 'number' },
SLength: { type: 'number' },
SVolume: { type: 'number' },
Status: { type: "String" }
}
}
}
}),
//new kendo.data.dataSource({
//read: function (options) {
// options.success($scope.splGridData);
//},
filter: [
{ field: "ParentId", operator: "neq", value: p },
{ field: "ParentId", operator: "eq", value: dataItem.Id }
],
}),
columns: [
{
field: "SLength",
width: "55px"
},
{
field: "SVolume",
width: "55px"
}
]
};
}
ciSetUp.GetCurveDetailsData(Id).then(function () {
//debugger;
if (ciSetUp.getcurvedata.ReturnedResult.length > 0) {
$scope.CgridDataSource.data(ciSetUp.getcurvedata.ReturnedResult);
ciSetUp.GetCurveDetailsData(Id).then(function () {
$scope.detailGridOptions.data(ciSetUp.getcurvedata.ReturnedResult);
});
}
});
<div id="details-container" kendo-window="modal" k-title="'Pump Details'" k-visible="false" k-modal="true"> <!--style="height:370px;width:600px;"-->
<dl>
<dt id="pn"> Name : </dt>
<dt id="pk"> {{P}} </dt>
<dt id="sn">Status : </dt>
<dt id="sk"> {{Status}} </dt>
</dl>
<div class="tabcontainer">
<div class="cphPadd">
<div class="rowdiv">
<kendo-grid options="CgridOptions" k-data-source="CgridDataSource" style="margin-bottom:10px">
<div k-detail-template>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
</kendo-grid>
</div>
</div>
<button id="b3" class="button" ng-click="modal.close()">Cancel</button>
<button id="b2" class="button">Save</button>
<button id="b1" class="button" ng-click="modal.reload()">Refresh </button>
</div>
</div>
</div>
I'll be getting data from ciSetUp.
$scope.detailGriddataSource = new kendo.data.DataSource({
filter: [
{ field: "ParentId", operator: "neq", value: p },
],
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
PId: { type: 'number' },
ParentId: { type: 'number' },
SLength: { type: 'number' },
SVolume: { type: 'number' },
Status: { type: "String" }
}
}
}
}),
$scope.detailGridOptions = function (dataItem) {
var newData = $scope.detailGriddataSource.data().filter(function (el) {
return el.ParentId == dataItem.Id && el.ParentId != 0;
});
if (newData.length > 0) {
var Childdata = new kendo.data.DataSource({
data: newData,
});
return {
dataSource: Childdata,
columns: [
{
field: "SLength",
width: "55px"
},
{
field: "SVolume",
width: "55px"
}
]
};
}
}

simple-schema ignoring my updates

Trying to create an event that changes a String called status in my NetworkApp collection.
Event:
Template.app_detail.events({
'click .accept': function (e, t) {
console.log("Accept");
NetworkApp.update(this._id, {$set:{
status: "Accepted"
}});
},
'click .reject': function (e, t) {
console.log("Reject");
NetworkApp.update(this._id, {$set:{
status: "Rejected"
}});
}
})
It updates the last time the application was modified but not the status. No errors appear in the console but it does log Accepted or Rejected so the code can connect to the db and the helper is being triggered by the buttons. Any help is appreciated!~
Simple Schema:
NetworkAppSchema = new SimpleSchema({
ign: {
type: String,
label: "IGN"
},
discordName: {
type: String,
label: "Discord Name"
},
memberlength: {
type: String,
label: "How long have you been a member at Digital Hazards?"
},
languageKnown: {
type: String,
label: "What languages do you know?",
autoform: {
type: 'textarea'
}
},
whyyou: {
type: String,
label: "Why do you want to join the Network staff?",
autoform: {
type: 'textarea'
}
},
applicant: {
type: String,
label: "Applicant",
autoValue: function() {
return Meteor.userId();
},
autoform: {
type: "hidden"
}
},
createdAt: {
type: Date,
label: "Applied At",
autoValue: function() {
return new Date();
},
autoform: {
type: "hidden"
}
},
status: {
type: String,
label: "Status",
autoValue: function() {
return "Pending";
},
autoform: {
type: "hidden",
}
}
});
autoValue does not mean initial value: your autoValue functions are running every time.
For createdAt for example you should have:
createdAt: {
type: Date,
denyUpdate: true,
autoValue() {
if (this.isInsert) return new Date();
},
},
this will avoid the createdAt ever changing after insert.
Similarly for status:
status: {
type: String,
label: "Status",
autoValue() {
if (this.isInsert) return "Pending";
},
autoform: {
type: "hidden",
}
}

Issue when login and register with Facebook in Meteor

I'm trying to use Facebook to connect and register into my Meteor.js application. In my login template I put a button to do this. I call the function Meteor.loginWithFacebook() but it doesn't work... I'm guessing that Meteor try to create a new user and that it doesn't find the username information but I don't know how to manage that.
My handler to call the login :
'click #facebook-login': function(event) {
Meteor.loginWithFacebook({}, function(err){
if (err) {
throw new Meteor.Error("Facebook login failed");
Materialize.toast('Echec de connexion!', 4000);
}
else {
Router.go(Utils.pathFor('home'));
Materialize.toast('Bon retour parmis nous ' + Meteor.user().username + ' !', 5000);
}
});
}
The error I have :
I20160428-12:44:56.099(2)? Exception while invoking method 'login' Error: Nom d'utilisateur is required
I20160428-12:44:56.100(2)? at getErrorObject (packages/aldeed_collection2-core/lib/collection2.js:437:1)
I20160428-12:44:56.101(2)? at [object Object].doValidate (packages/aldeed_collection2-core/lib/collection2.js:420:1)
I20160428-12:44:56.101(2)? at [object Object].Mongo.Collection. (anonymous function) [as insert] (packages/aldeed_collection2-core/lib/collection2.js:173:1)
I20160428-12:44:56.101(2)? at AccountsServer.Ap.insertUserDoc (packages/accounts-base/accounts_server.js:1250:25)
I20160428-12:44:56.101(2)? at AccountsServer.Ap.updateOrCreateUserFromExternalService (packages/accounts-base/accounts_server.js:1386:20)
I20160428-12:44:56.102(2)? at [object Object].Package (packages/accounts-oauth/oauth_server.js:55:1)
I20160428-12:44:56.103(2)? at packages/accounts-base/accounts_server.js:464:32
I20160428-12:44:56.103(2)? at tryLoginMethod (packages/accounts-base/accounts_server.js:241:14)
I20160428-12:44:56.103(2)? at AccountsServer.Ap._runLoginHandlers (packages/accounts-base/accounts_server.js:461:18)
I20160428-12:44:56.103(2)? at [object Object].methods.login (packages/accounts-base/accounts_server.js:524:27)
I20160428-12:44:56.129(2)? Sanitized and reported to the client as: Nom d'utilisateur is required [400]
User schema :
Globals.schemas.UserProfile = new SimpleSchema({
firstName: {
type: String,
regEx: /^[a-zA-Z-]{2,25}/,
optional: true,
label: "Prénom"
},
lastName: {
type: String,
regEx: /^[a-zA-Z-]{2,25}/,
optional: true,
label: "Nom"
},
birthDay: {
type: Date,
optional: true,
label: "Date de naissance",
min: new Date("1900-01-01T00:00:00.000Z"),
autoform: {
value: new Date("1900-10-18T00:00:00.000Z")
}
},
gender: {
type: String,
allowedValues: ['M', 'F'],
optional: true,
label: "Genre",
autoform: {
options: [
{
label: "Homme",
value: "M"
},
{
label: "Femme",
value: "F"
}
],
firstOption: "(Veuillez sélectionner une réponse)"
}
},
level: {
type: Number,
autoValue: function () {
if (this.isInsert) {
return 1;
}
},
autoform: {
omit: true
},
min: 0,
max: 1000,
label: "Niveau"
},
picture: {
type: String,
optional: true,
autoform: {
omit: true
},
label: "Photo"
}
});
// Schéma principal
Globals.schemas.User = new SimpleSchema({
username: {
type: String,
regEx: /^[a-z0-9A-Z_]{3,30}$/,
label: "Nom d'utilisateur"
},
password: {
type: String,
label: "Mot de passe",
optional: true,
autoform: {
afFieldInput: {
type: "password"
}
}
},
confirmation: {
type: String,
label: "Confirmation",
optional: true,
custom: function(){
if(this.value !== this.field('password').value){
return "passwordMissmatch";
}
},
autoform: {
afFieldInput: {
type: "password"
}
}
},
emails: {
type: [Object],
optional: false,
label: "Adresses Email"
},
"emails.$.address": {
type: String,
regEx: SimpleSchema.RegEx.Email,
label: "Adresses Email"
},
"emails.$.verified": {
type: Boolean,
optional: true,
autoform: {
omit: true
}
},
createdAt: {
type: Date,
autoValue: function () {
if (this.isInsert) {
return new Date;
} else {
this.unset();
}
},
autoform: {
omit: true
}
},
profile: {
type: Globals.schemas.UserProfile,
optional: true
},
services: {
type: Object,
optional: true,
blackbox: true,
autoform:{
omit: true
}
},
roles: {
type: Object,
optional: true,
blackbox: true,
autoform: {
omit: true
}
}
});
Thank's for any help !
The problem is that your schema requires Meteor.users to have a username field, which they don't contain by default. You can, however, generate this field by taking their name name from the Facebook profile.
Accounts.onCreateUser(function(options, user) {
user.username = user.services.facebook.name;
return user;
});
http://docs.meteor.com/#/full/accounts_oncreateuser

meteor update using aldeed autoform

I'm on the single page of a collection item (gigs) and I want to push to the item's array on the 'show' page I have. The idea is that I have a modal that pops up below and you can add another entry.
I've tried this using aldeed autoform but I get no push to the collection item. Why?
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="container">
<div class="modal-footer">
CLOSE
</div>
<div class="modal-content">
{{#autoForm collection="Gigs" id="myForm" }}
{{#afEachArrayItem name="gear"}}
{{> afQuickField name=this.current.item}}
{{> afQuickField name=this.current.description}}
{{/afEachArrayItem}}
<button type="submit" class="btn update-gig">Add</button>
{{/autoForm}}
</div>
</div>
</div>
Note I have tried to change the js too.
Gigs.allow({
insert: function(userId, doc){
return !!userId;
},
update: function(userId, doc){
return !!userId;
}
})
And added a method for the form in js
Meteor.methods({
addGig: function(id, gear){
Gigs.update(id,{ $addToSet: { gear: gear } })
}
});
And called it in the client trying:
Template.Gig.events({
'submit .update-gig': function(){
Meteor.call('addGig', this._id, this.gear)
}
})
Simple Schema
Gear = new SimpleSchema({
item: {
type: String,
label: "Item",
optional: false
},
description: {
type: String,
label: "Description",
optional: true
},
user:{
type: String,
label: "User",
autoValue: function() {
return this.userId
},
autoform: {
type: "hidden"
}
},
createdAt: {
type: Date,
label: "Created At",
autoValue: function(){
return new Date()
},
autoform: {
type: "hidden"
}
}
});
GigsSchema = new SimpleSchema({
gig: {
type: String,
label: 'Gig Name'
},
location: {
type: String,
label: 'Location'
},
gear: {
type: [Gear]
},
user:{
type: String,
label: "User",
autoValue: function() {
return this.userId
},
autoform: {
type: "hidden"
}
},
createdAt: {
type: Date,
label: "Created At",
autoValue: function(){
return new Date()
},
autoform: {
type: "hidden"
}
}
});
UPDATE: I have this working but if anyone has a simpler method using autoform that would be greatly appreciated!!
client code:
'submit .update-gig-form': function(event){
event.preventDefault();
var id = FlowRouter.getParam('id');
var item = event.target.form_item.value;
var desc = event.target.form_desc.value;
// jquery materialize css to close modal on page
$('#modal1').closeModal();
Meteor.call('addGear', id, item, desc);
//reset form
event.target.form_item.value = '';
event.target.form_desc.value = '';
}
server code
Meteor.methods({
addGear: function(id, form_item, form_desc){
console.log('yay method run');
Gigs.update(id,{ $addToSet: { gear: {
item: form_item,
description: form_desc
}}
});
}
});

Categories