Select the drop-down option to categorize the list by date

Question

Select the drop-down option to categorize the list by date

Currently, I am in the process of integrating Vue.js into my project step by step, particularly for data binding purposes. To achieve this, I have included the Vue.js script in the footer and created a main.js file to house my Vue scripts.

One of the challenges I am facing is sorting a data list by date using a dropdown select option that provides date ranges. Despite searching online for tutorials, I have yet to find a solution that aligns with my requirements. Could someone offer guidance on how to accomplish this task?

<div id="date-range">
    <h3>Activity Overview</h3>
    <select id="selected" class="activity-overview__select" v-model="selected">
        <option value="24hr">Past 24 Hours</option>
        <option value="7days">Past 7 Days</option>
        <option value="14days">Past 14 Days</option>
    </select>
    <ul>
        <li>{{ selected.id }}{{ selected.text }}{{ selected.date }}</li>
    </ul>
</div>

var incidentCount = new Vue({
    el: '#incidentCountID',
    data: {
        incidentList: [
        { id: 0, text: 'Run', date: '2018-07-11' },
        { id: 1, text: 'Jump', date: '2018-07-10' },
        { id: 2, text: 'Skip', date: '2018-07-06' },
        { id: 3, text: 'Dance', date: '2018-07-05' },
        { id: 4, text: 'Swing', date: '2018-07-01' },
        { id: 5, text: 'Hop', date: '2018-05-29' },
        { id: 6, text: 'Bounce', date: '2018-06-29' },
        { id: 7, text: 'Crawl', date: '2018-06-27' },
        { id: 8, text: 'Walk', date: '2018-06-26' },
        { id: 9, text: 'Spin', date: '2018-06-25' },
        { id: 10, text: 'Skate', date: '2018-06-07' },
        { id: 11, text: 'Hike', date: '2018-06-05' }
      ]
    },
    methods: {
        ???
    }
});

Any assistance would be greatly appreciated!

javascript sorting vue.js filtering frontend

Answer 1

Answer №1

Here is an example showcasing how it can be done. All it requires is a single computed property to sort data based on the selected date range. I've also modified some dates in your example to demonstrate how the filtering functionality operates.

(If you intend to handle dates, I suggest using the momentjs library, which simplifies working with dates (parsing, operations) significantly.)

var filterTypes = {
   Days: 0,
   Hours: 1
}

var incidentCount = new Vue({
    el: '#app',
    data: {
        incidentList: [
        { id: 0, text: 'Run', date: '2018-07-19' },
        { id: 1, text: 'Jump', date: '2018-07-17' },
        { id: 2, text: 'Skip', date: '2018-07-11' },
        { id: 3, text: 'Dance', date: '2018-07-06' },
        { id: 4, text: 'Swing', date: '2018-07-01' },
        { id: 5, text: 'Hop', date: '2018-05-29' },
        { id: 6, text: 'Bounce', date: '2018-06-29' },
        { id: 7, text: 'Crawl', date: '2018-06-27' },
        { id: 8, text: 'Walk', date: '2018-06-26' },
        { id: 9, text: 'Spin', date: '2018-06-25' },
        { id: 10, text: 'Skate', date: '2018-06-07' },
        { id: 11, text: 'Hike', date: '2018-06-05' }
      ],
      filters: [
        {
           value: 24,
           type: filterTypes.Hours,
           title: 'Past 24 Hours'
        },
        {
           value: 7,
           type: filterTypes.Days,
           title: 'Past 7 Days'
        },
        {
           value: 14,
           type: filterTypes.Days,
           title: 'Past 14 Days'
        }
      ],
      selectedFilter: ''
    },
    computed: {
        filteredList() {
            if (!this.selectedFilter) {
                return this.incidentList;
            }
            let multiplier, date;
            switch(this.selectedFilter.type) {
               // one hour milliseconds
               case filterTypes.Hours: 
                   multiplier = 60 * 60 * 1000; break;
               // one day milliseconds
               case filterTypes.Days: 
                   multiplier = 60 * 60 * 1000 * 24; break;
            }
            date =  Date.now() - this.selectedFilter.value * multiplier;
            return this.incidentList.filter((item) => Date.parse(item.date) >= date);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div id="date-range">
    <h3>Activity Overview</h3>
    <select class="activity-overview__select" v-model="selectedFilter">
        <option value="">All</option>
        <option v-for="f in filters" :value="f">{{ f.title }}</option>
    </select>
    <ul>
        <li v-for="incident in filteredList" :key="incident.id">
            {{ incident.id }} {{ incident.text }} {{ incident.date }}
        </li>
    </ul>
</div>
</div>

Answer 2

Here is an example showcasing how it can be done. All it requires is a single computed property to sort data based on the selected date range. I've also modified some dates in your example to demonstrate how the filtering functionality operates.

(If you intend to handle dates, I suggest using the momentjs library, which simplifies working with dates (parsing, operations) significantly.)

var filterTypes = {
   Days: 0,
   Hours: 1
}

var incidentCount = new Vue({
    el: '#app',
    data: {
        incidentList: [
        { id: 0, text: 'Run', date: '2018-07-19' },
        { id: 1, text: 'Jump', date: '2018-07-17' },
        { id: 2, text: 'Skip', date: '2018-07-11' },
        { id: 3, text: 'Dance', date: '2018-07-06' },
        { id: 4, text: 'Swing', date: '2018-07-01' },
        { id: 5, text: 'Hop', date: '2018-05-29' },
        { id: 6, text: 'Bounce', date: '2018-06-29' },
        { id: 7, text: 'Crawl', date: '2018-06-27' },
        { id: 8, text: 'Walk', date: '2018-06-26' },
        { id: 9, text: 'Spin', date: '2018-06-25' },
        { id: 10, text: 'Skate', date: '2018-06-07' },
        { id: 11, text: 'Hike', date: '2018-06-05' }
      ],
      filters: [
        {
           value: 24,
           type: filterTypes.Hours,
           title: 'Past 24 Hours'
        },
        {
           value: 7,
           type: filterTypes.Days,
           title: 'Past 7 Days'
        },
        {
           value: 14,
           type: filterTypes.Days,
           title: 'Past 14 Days'
        }
      ],
      selectedFilter: ''
    },
    computed: {
        filteredList() {
            if (!this.selectedFilter) {
                return this.incidentList;
            }
            let multiplier, date;
            switch(this.selectedFilter.type) {
               // one hour milliseconds
               case filterTypes.Hours: 
                   multiplier = 60 * 60 * 1000; break;
               // one day milliseconds
               case filterTypes.Days: 
                   multiplier = 60 * 60 * 1000 * 24; break;
            }
            date =  Date.now() - this.selectedFilter.value * multiplier;
            return this.incidentList.filter((item) => Date.parse(item.date) >= date);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div id="date-range">
    <h3>Activity Overview</h3>
    <select class="activity-overview__select" v-model="selectedFilter">
        <option value="">All</option>
        <option v-for="f in filters" :value="f">{{ f.title }}</option>
    </select>
    <ul>
        <li v-for="incident in filteredList" :key="incident.id">
            {{ incident.id }} {{ incident.text }} {{ incident.date }}
        </li>
    </ul>
</div>
</div>

Select the drop-down option to categorize the list by date

Answer №1

Similar questions

Run JavaScript code before finalizing the "submit" action within a Ruby on Rails application

Retrieve the rowid from the first column of a jqGrid row

Discover if every single image contains a specific class

What is the process for modifying a Date type value in JavaScript?

AngularJS: Controller causing an unchecked error

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Sleek carousel design with optimal spacing between images

Utilizing JavaScript to trigger a series of click events on a single button in order to

Performing multiple AJAX calls from JavaScript

Transfer the address information to the billing address fields

What is the proper way to attach the form tag action value in an EJS template?

Tips for making immutable state changes in React

Type of variable that is not an array

Executing an Ajax callback function to navigate to a different page

An error popped up as I attempted to load an existing design within the vue-email-editor

How can Angular prevent displaying 404 errors in the console by utilizing fallback mechanisms?

Sending files using AJAX without FormData in Internet Explorer 9

Only grant API access to my frontend application with a daily rotating API key

Browsing through items within arrays to evaluate their values

What is the process of converting a value from an HTML form into a PHP variable?