Meteor change collection on user dropdown selection - meteor

I'm using Meteor in combination with autoForm / quickForm. I have on collection, lets call it "Sports" for this example. The collection asks the question which sports the user has done this week using a dropdown (allowedValues in autoForm). Now if the user selects running, I want to show 'distance', 'area', etc. If the user selects basketball, I might want to show 'shots taken', etc.
How should I go about this? Create multiple Collections or SimpleSchema's, or is there a different preferred approach? Could not find anything on Google, though I am sure this is not an uncommon question. If anyone has a link with more info that is already very much appreciated.
Update:
I am using an 'each' loop to loop through all possible sports I have defined earlier. Do you think it would make more sense to create a form item for each different sport? If so, how can I make sure this is correctly configured in the schema? Thank you in advance!
{{#autoForm collection="Sports" type="update" doc=this id="FieldValueIsForm"}}
{{#each sports}}
<h3>{{this.name}}</h3>
{{> afQuickField name="sports.$.sportTrue" noselect=true }}
{{#if afFieldValueIs name="sports.$.sportTrue" value=true}}
{{> afQuickField name="sports.$.sportDistance" value=this.frequency}}
{{/if}}
{{/each}}
<div>
<button type="submit">Submit</button>
</div>
{{/autoForm}}
Update 2:
My schema can be found here: http://pastebin.com/SbBSbqW2
I simplified it a bit, but this is the main content. For different sports I would need different input fields.

Sounds like you want to use the afQuickField option with a conditional. The documentation talks about it here. There is also a demo of what the code should look like here; however, it looks like this:
{{#autoForm collection="FieldValueIs" type="insert" id="FieldValueIsForm"}}
{{> afQuickField name="a" options="allowed" noselect=true}}
{{#if afFieldValueIs name="a" value="foo"}}
{{> afQuickField name="b"}}
{{/if}}
{{/autoForm}}
You would just need to make sure you set up "a" and "b" to be the select fields you want by setting them up properly in your schema.
UPDATE:
I assume you want to store the distance, shots taken, etc. in the SingleSport collection. Exactly how you store it is up to you, but it could look something like the following:
SingleSport = new SimpleSchema({
sportType: {
type: String
},
distanceRun: {
type: Number,
decimal: true,
optional: true
},
shotsTaken: {
type: Number,
optional: true
},
sportTrue: {
type: Boolean,
label: "Sport completed",
autoform:{
type: "boolean-radios",
trueLabel: "Enabled",
falseLabel: "Disabled",
value: false
}
}
});
Then, you could change the conditional section of your form like so:
{{#if afFieldValueIs name="sportType" value="running"}}
{{> afQuickField name="distanceRun"}}
{{/if}}
{{#if afFieldValueIs name="sportType" value="basketball"}}
{{> afQuickField name="shotsTaken"}}
{{/if}}

Related

Meteor: Custom AutoForm with array of objects in afEachArrayItem blocks

I'm working on dictionary app, and schema have a nested structure.
articles (collection)
-words (array of objects {"note", "word"} )
-translations (array of objects {"translation", "examples"} )
--examples (array of objects {"example", "translation"} ) that means
examples of word usage with it's translation.
The {{> quickForm collection=articles ... }} are working fine, but I want to change template and functionality by some conditions...
I tried to use
{{#autoForm collection=articles id="insertArticleForm" class="article-form" }}
{{#afEachArrayItem name='words'}}
{{> afFieldInput name=this.current.note placeholder='schemaLabel' class="note"}}
{{> afFieldInput name=this.current.word placeholder='schemaLabel' class="word"}}
<button type="button" class="autoform-remove-item"><span class="glyphicon glyphicon-remove"></span></button>
{{/afEachArrayItem}}
<button type="button" class="autoform-add-item" data-autoform-field="words"><span class="glyphicon glyphicon-plus"></span></button>
{{/autoForm}}
But it doesn't work.
It looks like this old issue: Meteor: Custom AutoForm with array of objects
but it seems after some recent updates of Meteor/Autoform, this syntax doesn't work.... and author of plugin doesn't answer on issues for months (
When I changed {{> afFieldInput name=this.current.note }} to {{> afFieldInput name='words.$.note' }} it seems like working , form appears with all need fields, but nothing are submit on the server. Even in this simple example, without nested fields...

Meteor Autoform update a nested collection

I'm trying to create a form in order to insert a new element inside a nested array in a collection.
Here are my schemas :
Schemas.CampaignsSchema = new SimpleSchema({
'name': {
type: String
}
});
​
Schemas.ElectionsSchema = new SimpleSchema({
'campaigns': {
type: [Schemas.CampaignsSchema],
defaultValue: []
}
});
Here is my template :
Template.campaignsNew.helpers({
schema() { return Schemas.CampaignsSchema; },
});
​
​
<template name="campaignsNew">
{{#autoForm
collection='Elections'
schema=schema
doc=doc
scope='campaigns'
id='insertCampaignForm'
type='update-pushArray'}}
<fieldset>
<legend>Add a Campaign</legend>
{{> afQuickField name='campaigns.$.name'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
So a field is generated by autoform but nothing happens when I hit submit.
If I enable Autoform.debug() I got :
SimpleSchema.clean: filtered out value that would have affected key "campaigns", which is not allowed by the schema
SimpleSchema.clean: filtered out value that would have affected key "campaigns.$", which is not allowed by the schema
SimpleSchema.clean: filtered out value that would have affected key "campaigns.$.name", which is not allowed by the schema
Does someone have any idea?
It seems that the schema attribute of #autoform doesn't work with the type update-pushArray.
Here is the template that works with the reste of the code :
<template name="campaignsNew">
{{#autoForm
collection='Elections'
doc=election
id='insertCampaignForm'
type='update-pushArray'
scope='campaigns'}}
<fieldset>
<legend>Add a Campaign</legend>
{{> afQuickField name='name'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
The only issue is that the name field is pre-filled with the Election name...
It seems that your nested document mustn't have a field with the same name as the main document.
Yet the created nested document has the good name and the main document's name remain unchanged.

Meteor autoform "afFieldValueIs" with a boolean checkbox only triggers once

I have a checkbox that needs to show/hide another input box. I'm doing the following:
Schema:
isFlexibleTime:
type: Boolean
label: 'Is the start time flexible?'
flexibleTimeDetails:
type: String
label: 'Flexible time details'
optional: true
Template:
+afQuickField(name='isFlexibleTime')
if afFieldValueIs name='isFlexibleTime' value=true
+afQuickField(name='flexibleTimeDetails')
The helper will trigger one time and show the other field but it won't trigger again. Any help into what is wrong would be much appreciated.
EDIT
Actually on further inspection it seems there is currently a bug with the checkbox event as of AutoForm 5.1.2 https://github.com/aldeed/meteor-autoform/issues/861
The issue has been open a little while, so you can use a quick workaround like:
In your template event:
'click [name=isFlexibleTime]': function() {
Session.set('isFlexibleTime', AutoForm.getFieldValue('isFlexibleTime','ID_OF_YOUR_AUTOFORM'));
}
Template helper:
isChecked: function() {
return Session.get('isFlexibleTime');
}
then:
{{#if isChecked}}
{{> afQuickField name="flexibleTimeDetails"}}
{{/if}}
I'm not sure if that's your actual syntax but following the example from: http://autoform.meteor.com/fieldvalues it should look like this:
{{> afQuickField name="isFlexibleTime"}}
{{#if afFieldValueIs name="isFlexibleTime" value="true"}}
{{> afQuickField name="flexibleTimeDetails"}}
{{/if}}

Meteor autoform access nested property

I've got some linked schemas and am trying to access properties of a subschema from the form for the primary schema. It's a mouthful, I know. Code may help:
//js
Collection = new Meteor.Collection('collection');
Schemas = {};
Schemas.secondary = new SimpleSchema({
unitType: {
type: String,
autoform: {
type: 'select',
options: //function with all the options
}
}
});
Schemas.primary= new SimpleSchema({
name: {
type: String,
},
units: {
type: [ Schemas.secondary ]
}
});
Collection.attachSchema(Schemas.primary);
//HTML
{{#autoForm collection="Collection" id="someId" type="insert"}}
{{> afQuickField name='name'}} // this works
{{> afQuickField name='units'}} // this works
{{> afQuickField name='units.unitType'}} // this doesn't work :-(
{{/autoForm}}
The reason I'm doing this is because there are other properties in the secondary schema that I want to show conditionally, based on the value of the select box. I also tried to put a form inside a form and then run {{#each afFieldNames name='"units"}} but that didn't quite work either. Instead of giving me just the fields contained in units (i.e., the secondary schema), it looped through all fields of both primary and secondary.
Thoughts? I'm not married to this pattern but I can't think of another way.
Thanks again, all.
db
I had this issue myself.
Give this a go
{{> afQuickField scope='units.unitType' name='units.unitType'}}
If you dump your modifier in your before submit hook you should be able to see the subdocument successfully filled out
AutoForm.hooks({
someId: {
before: {
'insert': function(modifier) {
console.log(modifier);
}
}
}
});
Let me know if this works for you!
All the best,
Elliott

Comparing current user to a meteor list

I'm currently making a simple web app with meteor.js . I'm trying to implement a simple feature for my fantasy football league's custom site that I'm building.
Here's my code that's not working.
{{#each users}}
{{#if Meteor.userId() {{_id}} }}
{{> ownTradingBlock}}
{{else}}
{{> userTradingBlock}}
{{/if}}
{{/each}}
So basically I want to render a different template if the user in the list of league members is the current user that is logged in. Does anybody have any thoughts on how this is creating an error, and/or if there's a better way to do it?
Here's the error code I'm getting.
.html:67 : expected space
You cannot use a Meteor method within Spacebars. For this you will need to create a helper:
Template.yourTemplate.helpers({
isEq: function (id) {
if (Meteor.userId() === id)
return true;
return false;
}
});
Then in your template:
{{#each users}}
{{#if isEq _id}} }}
{{> ownTradingBlock}}
{{else}}
{{> userTradingBlock}}
{{/if}}
{{/each}}

Resources