Meteor SimpleSchema with user dropdown - meteor

I have an app in Meteor and the idea is that an admin user can add a document and assign it to one of its customers (customers are stored in the user collection). So I would like to present a dropdownbox with customers on the document insert view. The relevant code of the schema is below:
customer: {
type: [String],
label: "Customers",
allowedValues: function () {
return Meteor.users.find().map(function (user) {
return user._id
});
},
autoform: {
options: function () {
return Meteor.users.find({}).map(function(user) {
return {
value: user._id,
label: user.profile.name
}
})
}
},
optional: true
}
When I put a type: String (instead of [String]) it shows the current user only in a dropdownbox. If I use [String] (as it should be), the dropdownbox actually turns in a text box (it does not have the typical dropdown behaviour) with 3 fields (for all the users it found), yet it only shows the first one again but leaves placeholders for the other 2.
The view uses:
{{> afQuickField name='customer'}}

IMPORTANT: The account package, by default doest not publish the users collection. You will have to write a new publication method in your server and corresponding subscription in your client for this to work.
No read on..
Well.. This is a bit tricky. Look at the code below and edit your 'autoform' section accordingly.
autoform: {
options: function () {
var options = [];
Meteor.users.find().forEach(function (element) {
options.push({
label: element.profile.name, value: element._id
})
});
return options;
}
}
the required syntax for selection box 'options' is:
options:{[label,value],...}
The above code reads all the rows from the user collection, and pushes each row to an array called 'options' as an array.
Hope this helps or gives you some insights.
Please note that the above only works if your collection subscription/publication are proper.
Look at the following code to get a simple idea.
if (Meteor.isClient) {
Meteor.subscribe('allUsers')
}
if (Meteor.isServer) {
Meteor.publish('allUsers', function() {
return Meteor.users.find({}, {fields:{username:1,emails:1}})
})
}

Related

Populating SELECT options from database in SimpleSchema

Using SimpleSchema in Meteor with the AutoForm + Select2 plugins , i am trying to generate the Options for a Select field from the database.
The 'occupation' collection is published, and a collection 'Occupation' is defined in Meteor.
In SimpleSchema I have this:-
occupations: {
type: [String],
optional:true,
label: 'Occupation',
autoform:{
type:"select2",
placeholder: 'Comma spaced list of occupations',
options: function () {
Meteor.subscribe('occupations');
return Occupations.find({});
}
}
},
But it does not return the collection results, and crashes the application without an error message.
It seems the best way to handle this is to supply the options list through a helper.
{{> afQuickField name='occupations' multiple=true tags=true options=listOccupations}}
Where listOccupations is a helper within the template containing the form.
Template.myForm.helpers({
listOccupations: function () {
Meteor.subscribe('occupations');
return Occupations.find({}).fetch();
}
});
And we remove the options object from the schena
occupations: {
type: [String],
optional:true,
label: 'Occupation',
autoform:{
type:"select2",
placeholder: 'Comma spaced list of occupations',
}
},
Have you tried, this approach:
autoform: {
options: {
var occupations = [];
Occupations.find().map(function(occ) {
occupations.push(
{label: occ.description, value: occ._id}
);
});
return occupations;
}
}
hope this helps..
I had the same issue. I'm defining my collections schema in /lib/collections folder, and that is running on both server and client side. Given that, the console.log that I had was printing the correct values on server side and an empty array on client side.
What I did was:
if (Meteor.isClient){
Meteor.subscribe('service-categories-list', {
onReady: function(){
const serviceCategories = ServiceCategories.find({}).map(function(item, index) {
return {
label: item.name,
value: item.slug
};
});
Schema2._schema.type.autoform.options = serviceCategories;
}
})
}
I know that using the _schema is not a good idea, but I accept suggestions :)

In Meteor how can I load the page links without subscribing to all the page content?

I want to load all the links to my pages. What I did it, created a seperate subscription with only the slug and title fields. Used this data in my navigation and it worked. But now I need to subscribe on every single page with all the fields. The problem is, it's showing only the slug and title fields. I think the two subscriptions are conflicting. Here's my subscriptions :
Meteor.publish("pageLinks", function() {
return Pages.find({}, {
fields: {
title: 1,
slug: 1
}
});
});
Meteor.publish("page", function(slug) {
check(slug, String);
return Pages.findOne({
slug: slug
});
});
And my subscriptions in the route for the single page :
FlowRouter.route('/page/:slug', {
name: 'pageSingle',
subscriptions: function(params, queryParams) {
this.register('page', Meteor.subscribe('page', params.slug));
},
action() {
BlazeLayout.render('panelLayout', {
content: 'pageSingle'
});
setTitle('Page');
}
});
For the links, I subscribed in the template like this :
Template.panelLinks.onCreated(function() {
this.autorun(function() {
Meteor.subscribe('pageLinks');
});
});
Template.panelLinks.helpers({
pageLinks: function() {
return Pages.find({});
}
});
Here's how I display the links :
{{#each pageLinks}}
{{> pageLink}}
{{/each}}
What is the best way to solve this conflict and load all the fields of a page only in that page's route?
First, there is mistake in your publish function:
Meteor.publish("page", function(slug) {
check(slug, String);
return Pages.findOne({
slug: slug
});
});
You should see in console error :
Error: Publish function can only return a Cursor or an array of Cursors
Replace Pages.findOne with Pages.find
If you correct mistake then you should be able to use different subscriptions of the same collection (Pages) and receive correct data.

How do you add values to AutoForm's form object without using a form?

I've got a form created through AutoForm.
As far as data sources, I can fill in parts of the form and use:
AutoForm.getFormValues('form-id').insertDoc // returns the contents of the form
When I validate the form I can do:
var formValues = AutoForm.getFormValues('form-id').insertDoc;
var isValid = MyCollection.simpleSchema().namedContext("myContext").validate(formValues);
// if isValid returns true, then I enable the Submit button
Instead of filling in parts of the form, I want to manually add information into whatever object Autoform uses for validation and submission to a collection.
For example, there are data fields in the schema that simply don't need to appear in the form itself.
Take a shopping cart:
ShoppingCartSchema = {
totalPrice: {
type: Number,
optional: false
},
itemsSelected: {
type: [Object],
optional: false
}
};
The data for itemsSelected is obviously provided through user input on the form.
The data for totalPrice is something that should not be from a form input. It's generated in the code.
But totalPrice still needs to be validated as a required field before AutoForm submits the form to a collection.
So how do you add totalPrice onto the object that Autoform eventually validates?
You could use an autovalue if you wanted to.
ShoppingCartSchema = new SimpleSchema({
'items': {
type: [Object],
},
'items.$.name': {
type: String
},
'items.$.price': {
type: Number
},
totalPrice: {
type: Number,
autoValue: function () {
if (this.field('items').isSet) {
let total = this.field('items').value.reduce(function (sum, item) {
return sum + item.price;
}, 0);
if (this.isInsert) {
return total;
} else {
return { $set: total };
}
}
}
},
});
Autoform Hooks can help you manipulate the data before you save it into the Collection.
In your case .
AutoForm.hooks({
form-id: { // The Autoform ID
onSubmit: function (insertDoc, updateDoc, currentDoc) {
if (customHandler(insertDoc)) { // Your Logic here
this.done(); // This is Required
} else {
this.done(new Error("Submission failed"));
}
return false;
}
}
});
For More Information Please refer Autoform Readme

Meteor collection2 type Object

I'm trying to create a field modifiedBy with type: Object (to Meteor users).
I see you can setup blackbox: true for a Custom Object, but if I want to setup to a specific Object say a Group (collection) field modifiedBy is the logged in user, any pointers/help is greatly appreciated.
Thanks
As far as I see it, you have two options:
Store user-ids there with type: String
Denormalize it as you proposed
Denormalize it as you proposed
To denormalize it you can do something like this inside your schema:
...
modifiedBy: {
type: object
}
'modifiedBy._id': {
type: String,
autoValue: function () {
return Meteor.userId()
}
}
'modifiedBy.username': {
type: String,
autoValue: function () {
return Meteor.user().username
}
}
...
As you pointed out, you'd want to update these properties when they change:
server-side
Meteor.users.find().observe({
changed: function (newDoc) {
var updateThese = SomeCollection.find({'modifiedBy.username': {$eq: newDoc._id}})
updateThese.forEach () {
SomeCollection.update(updateThis._id, {$set: {name: newDoc.profile.name}})
}
}
})
Store user-ids there with type: String
I'd recommend storing user-ids. It's cleaner but it doesn't perform as well as the other solution. Here's how you could do that:
...
modifiedBy: {
type: String
}
...
You could also easily write a Custom Validator for this. Now retrieving the Users is a bit more complicated. You could use a transform function to get the user objects.
SomeCollection = new Mongo.Collection('SomeCollection', {
transform: function (doc) {
doc.modifiedBy = Meteor.users.findOne(doc.modifiedBy)
return doc
}
})
But there's a catch: "Transforms are not applied for the callbacks of observeChanges or to cursors returned from publish functions."
This means that to retrieve the doc reactively you'll have to write an abstraction:
getSome = (function getSomeClosure (query) {
var allDep = new Tacker.Dependency
var allChanged = allDep.changed.bind(allDep)
SomeCollection.find(query).observe({
added: allChanged,
changed: allChanged,
removed: allChanged
})
return function getSome () {
allDep.depend()
return SomeCollection.find(query).fetch()
}
})

How to generate a form to select a user using Autoform and Collection2 in Meteor?

I want to be able to select several users from a list of users.
I am user collection2, simple-schema and autoform.
I'd like to generate a simple quickForm for doing this. Here's my simple-schema:
Schemas.Item = new SimpleSchema({
name: {
type: String,
label: "Name",
max: 100
},
userIds: {
type: [String],
regEx: SimpleSchema.RegEx.Id
}
});
Looking at the autoform docs, I noticed that I want to have a select view so I need to pass in options.
I'd like to be able to do this right in my schema!
userIds: {
type: [String],
regEx: SimpleSchema.RegEx.Id
options: function() {
// return users with {value:_id, label:username}
}
}
Otherwise, I'd have to generate a template with quickFormFields just to pass in the options.
Just to pile things on, there shouldn't be any duplicate userIds...
Thanks for any help
Probably you have already found an answer, but maybe somebody will find it useful. I have lots of different things to specify once you select user, that's why my type for users is [Object]. In your case, you can modify that. The most important part is autoform.options method and seems to be the part you were looking for.
users: {
type: [Object]
},
"users.$.id": {
// you can use your own type, e.g. SimpleSchema.RegEx.Id, as I am using custom Schema for accounts
type: Schemas.Account._id,
label: 'Select user',
autoform: {
options: function () {
var options = [];
Meteor.users.find().forEach(function (element) {
options.push({
label: element.username, value: element._id
})
});
return options;
}
}
}
Snippet above will give you the list of all the users so you can easily select them from dropdown list.
Remember to add appropriate publish method to make that working as without that you will always get only currently logged one.

Resources