Connect Tasks and Lists in Meteor Todo app

I'm currently developing a task management application using the Meteor tutorial as a reference. I have created lists based on the task model, but I am struggling to figure out how to connect them and display all tasks associated with a specific list when it is clicked.

Here's a snippet of my code in Tasks.js:

    'tasks.insert'(text, privacy, priority, listId) {
        ...

        Tasks.insert({
            text,

            listId: listId,

            owner: this.userId,
            username: Meteor.users.findOne(this.userId).username,
        });
    },

In Body.js:

   Template.body.events({
      'submit .new-task' (event) {
           event.preventDefault();

    const listId = ???

    const target = event.target;
    const text = target.text.value;
    ...
    Meteor.call('tasks.insert', text, privacy, priority, listId);
    ...
},

When displaying the data:

Template.body.helpers({
    tasks() {
        const instance = Template.instance();

        if (instance.state.get('hideCompleted')) {
            return Tasks.find({ checked: { $ne: true } }, { sort: Session.get("sort_order") });
        }
        return Tasks.find({}, { sort: Session.get("sort_order")});
    },

    lists() {
        return Lists.find({}, { sort: { createdAt: -1 } });
    },

In my body.html file, I am currently displaying lists and tasks separately. However, I am struggling to establish the relationship between the two entities...

Any help or guidance would be greatly appreciated!

Thank you!

Answer №1

It appears that you are already utilizing Session in your code. The process involves using a Session variable to keep track of the list selected by the user and then filtering your tasks accordingly.

Within your HTML body where you list the names, include the list's id as an attribute:

{{#each lists}}
  <a href='#' class='list-name' data-id='{{this._id}}'>
    {{this.name}}
  </a>
{{/each}}

Create an event for when a user clicks on a list name, which will save its id to a Session variable:

Template.body.events({
  'click .list-name' (event) {
    event.preventDefault();

    Session.set('listId', event.currentTarget.attr('data-id'))
  }
})

In your tasks helper function, apply filters based on the Session variable:

return Tasks.find(
  { listId: Session.get('listId') },
  { sort: Session.get("sort_order") }
);

If anything is unclear or needs clarification, feel free to let me know.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for not allowing return statements in the ternary operator?

Imagine you have a basic form and you want to determine if the form has been modified. If it has changed, you want to submit it; otherwise, you want to prevent form submission. To tackle this, instead of using an if-else statement, I decided to go for a te ...

Trigger a JQuery popup by toggling a class with a button

Hey there! I have a modal popup that utilizes an active class. When this class is present, the modal appears, and when it is removed, the modal disappears. I am trying to create a button that, when pressed, will show the modal, and a close button inside th ...

Steps for triggering a modal within a function

I need help figuring out why my modal is not opening when clicking a button to export data to an Excel file. I am new to React so I'm not sure where I went wrong. Any assistance would be greatly appreciated. function QualityImprovementExcel(props) { ...

Sending an error code that is specific to the situation to the AJAX error function

I am attempting to send a custom error code to the client-side for ajax error handling. On the server side: $response = array(); if ( empty($post['parent_id']) ) { $response = array('error' => true, 'status_code' => ...

What could be causing my UI Bootstrap datepicker-popup to suddenly stop functioning?

After updating to UI Bootstrap 0.11.0, I encountered an issue where my datepickers were no longer appearing correctly. To demonstrate this problem, I have created a plunker which can be viewed here. Essentially, the code snippet causing the problem is as f ...

Deciphering JavaScript's Minus Equals Operator: What's the Significance?

Can you explain the significance of the minus equals symbol -= in the following code snippet? $('#wrapper').animate({ backgroundPosition: '-=2px' })(); Appreciate your help! ...

PHP-based user interface queue system

I am in the process of developing a website that enables users to manipulate a webcam by moving it from left to right. Each user will have a one-minute window to control the camera. I plan on implementing a queuing system on the site to ensure that users ...

Working with Java and Mongodb: Updating records not in array

Here is an array with numbers 1,2,3,4,5,6,7,8,9,10 { "number" : 11, ... }, { "number" : 9, ... }, { "number" : 3, ... }, { "number" : 20, ... }, { ...

Troubleshooting: Resolving issues with Bootstrap path in subfolders on your website

As a beginner using bootstrap 3, my goal was to create a header that I could easily call on any new page I create. However, I encountered an issue when I tried to place the code from the original file into a new folder with an index.php file. Here is an i ...

Exploring Facebook Graph API response with Angular 2 Mapping

I am using HTTP calls to access the Graph API in order to retrieve posts from a Facebook page. Here is the code snippet that fetches an array of posts: let url = 'https://graph.facebook.com/15087023444/posts?fields=likes.limit(0).summary(true),comme ...

Tips for concealing dynamically generated div elements within a VueJS v-for loop

Is there a way to hide dynamically generated div elements in VueJS? In my chatbot application, messages are passed through a prop called messages. These message arrays create multiple Divs on the screen displaying information. One particular Div is used to ...

What is the best way to resize an image to fit its surroundings within a nested box?

Have you ever heard of a website called SPAM? It has a unique homepage that I want to replicate using JavaScript, jQuery, and some CSS. My main challenge is figuring out how to adjust the image size to match the center box on the page. I want to create th ...

The problem with the Next.js 14 generateStaticParamsparams parameter is that it is currently

I'm using this documentation as a reference to extract parameters from the URL in my generateStaticParams function: https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-bottom-up This is the route I am w ...

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Currently, I am working with angular and need to trigger my function codeInputChanged() each time the content of a textarea is modified either manually or programmatically using JavaScript. This is how my HTML for the textarea appears: <textarea class ...

Experiencing Limitations with Node.JS node-hbase Scan Functionality, Unable to Retrieve More than 1000

I am facing an issue while trying to retrieve records from an HBase table in Node.JS using the node-hbase module, which connects to the rest server. I am able to fetch the first batch of records successfully, but I am struggling to get the next set of re ...

Express is unable to locate the specified property

Here is my controller code snippet: exports.showit = function(req, res){ res.render('showpost', { title: req.post.title, post: req.post }) } In my post model, I have included title and name objects: title: {type : String, default : &apos ...

Mobile devices seem to be constantly refreshing website images

I have a landing page consisting of multiple sections with images as the background, each section occupying the full screen. In one specific section, the images change every 5 seconds. The website works smoothly on desktop, but I encounter issues on mobil ...

What is the easiest way to clear browser cache automatically?

Hello, I have implemented an ajax auto complete function in one of my forms. However, I am facing an issue where over time, the suggestions get stored and the browser's suggestion list appears instead of the ajax auto complete list, making it difficul ...

Encountering problems with ajax technology

As a newcomer to Laravel and Ajax, I am facing an issue with displaying the state of the selected country in a dropdown list. Although the data is successfully fetched from Laravel and received through Ajax, I am struggling to dynamically add it to the H ...

Why isn't my JavaScript AJAX PHP if statement functioning properly?

I have been struggling with this issue for more than two hours now and cannot seem to find a logical solution. When I remove the If statement highlighted by --> this arrow, the alert() function works perfectly fine. It triggers when I simply use if(true ...