keerthi keerthi - 2 months ago 55
HTML Question

Filter Events with collections

I have projects and workflows with separate collections.

collections:
Project = new Meteor.Collection("project");
Workflow = new Meteor.Collection("workflow");


After creating project, I am selecting project in the form and displaying Work flow card.

HTML:
<!-- Workflow Card -->


<div id="wCard">

{{#each workflow}}
<div class="pheader">
<h2>{{project}}</h2>
<hr width="100%">
</div>
<br>
<div class="workflowcard">
<div class="module-card">
<div class="card-header wfmodule">{{workflowTitle}}</div>
<div class="casting">
<div class="assigned-tag">Assigned To:</div>
<div class="assigned-to">{{team}}<hr></div>
<div class="actions">No Actions Created</div>
</div>
<div class="due">

Due on:

<div>
<div class="day-stamp" >{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
</div>
<div class="btn-box showmuloption">
<button type="edit" class="editw" style="display:none">Edit Workflow</button>
<button type="hide" class="hidew" style="display:none">Hide Actions</button>
<div class="actionBtn"><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>

</div>
</div>
{{/each}}
</div>

.JS:

Template.workflow.events({
"submit .workflow-form": function(event){
event.preventDefault();
var workflowTitle = event.target.workflowTitle.value;
var project = event.target.project.value;
var description = event.target.description.value;
var team = event.target.team.value;
var s_date = event.target.s_date.value;
var d_date = event.target.d_date.value;
var link = event.target.link.value;


var obj={
workflowTitle : workflowTitle,
project : project,
description : description,
team : team,
s_date : s_date,
d_date : d_date,
link : link
};
event.target.workflowTitle.value="";
event.target.project.value="";
event.target.description.value="";
event.target.team.value="";
event.target.s_date.value="";
event.target.d_date.value="";
event.target.link.value="";

$('#wfCard').show();
$('#info').show();
$('#createWF').hide();




Meteor.call('insertWorkflow',obj);
alert("submitted");

},

"submit .workflow-action-form": function(event){
event.preventDefault();
var action_title = event.target.action_title.value;
var description = event.target.description.value;
var team = event.target.team.value;
var s_date = event.target.s_date.value;
var d_date = event.target.d_date.value;
var link = event.target.link.value;
var module_list = event.target.module_list.value;

var obj={
action_title : action_title,
description : description,
team : team,
s_date : s_date,
d_date : d_date,
link : link,
module_list : module_list
};
event.target.action_title.value="";
event.target.description.value="";
event.target.team.value="";
event.target.s_date.value="";
event.target.d_date.value="";
event.target.link.value="";
event.target.module_list.value="";

Meteor.call('insertNewaction',obj);
alert("submitted");

},
});

Template.workflow.helpers({
getWorkflow: function(){
return Workflow.find();
},
user: function(){
return Meteor.users.find({});
},
getNewaction: function(){
return Newaction.find();
},

});


Now the workflow cards are displaying in a list. I want to display workflows according to projects. If I select a project, the workflow should go to that project, and I create another workflow with same project, it should display in that project. And if I select another project, the workflow should display in that related project.

Please help through this.

Answer

I use reactive varrible for this. At first you need add meteor package:

$ meteor add reactive-var

Your form with project selecting might look like this:

<select id="project" value="{{getProject}}">
   {{#each getProjectsList}}
      <option id='{{_id}}' value="{{_id}}">{{projectname}}</option>
   {{/each}}
</select>

Don't forget create helpers getProject and getProjectsList. Now it's time for reactive varrible, you can initialise this in onCreated event.

Template.workflow.onCreated(function() {
   var instance = this;
   instance.projectId = new ReactiveVar(null);
});

When you change selected project, you should change you reactive varrible.

Template.workflow.events({
   'change #project': function(){
      Template.instance().projectId.set($("#project").val());
});

Every workflow need to have field with project id. You get workflows list like this

{{#each getWorkflows}}

And there is helper for getting workflow's list:

Template.workflow.helpers({
    getWorkflows: function() {
       var id = Template.instance().projectId.get();
       return Workflow.find({projectId: id});
    },

    ...// another helpers

})

So, when you will change project in form, list of workflow also will change, because it depends on reactive var. Also you can sibscribe only needed workflow object, and not all collection. I hope this will helpfull to someone.