Quasar_Todo/src/store/store-tasks.js

import Vue from 'vue'
import { uid } from 'quasar'

const state = {
  tasks: {
    /*
    ID1: {
      name: 'Go to shop',
      completed: false,
      dueDate: '2021/03/05',
      dueTime: '18:30'
    },
    ID2: {
      name: 'Get bananas',
      completed: true,
      dueDate: '2021/03/07',
      dueTime: '14:30'
    },
    ID3: {
      name: 'Get apples',
      completed: false,
      dueDate: '2021/03/09',
      dueTime: '16:30'
    }
    */
  },
  search: '',
  sort: 'name'
}

const mutations = {
  updateTask (state, payload) {
    Object.assign(state.tasks[payload.id], payload.updates)
  },
  deleteTask (state, id) {
    Vue.delete(state.tasks, id)
  },
  addTask (state, payload) {
    Vue.set(state.tasks, payload.id, payload.task)
  },
  setSearch (state, value) {
    state.search = value
  },
  setSort (state, value) {
    state.sort = value
  }
}

const actions = {
  updateTask ({ commit }, payload) {
    commit('updateTask', payload)
  },
  deleteTask ({ commit }, id) {
    commit('deleteTask', id)
  },
  addTask ({ commit }, task) {
    const taskId = uid()
    const payload = {
      id: taskId,
      task: task
    }
    commit('addTask', payload)
  },
  setSearch ({ commit }, value) {
    commit('setSearch', value)
  },
  setSort ({ commit }, value) {
    commit('setSort', value)
  },
  fbReadData ({ commit }) {
    console.log('read data from database')
  }
}

const getters = {
  tasksSorted: (state) => {
    const tasksSorted = {}
    const keysOrdered = Object.keys(state.tasks)

    keysOrdered.sort((a, b) => {
      const taskAProp = state.tasks[a].[state.sort].toLowerCase()
      const taskBProp = state.tasks[b].[state.sort].toLowerCase()
      if (taskAProp > taskBProp) return 1
      else if (taskAProp < taskBProp) return -1
      else return 0
    })

    keysOrdered.forEach((key) => {
      tasksSorted[key] = state.tasks[key]
    })
    return tasksSorted
  },
  tasksFiltered: (state, getters) => {
    const tasksSorted = getters.tasksSorted
    const tasksFiltered = {}
    if (state.search) {
      Object.keys(tasksSorted).forEach(function (key) {
        const task = tasksSorted[key],
          taskNameLowerCase = task.name.toLowerCase(),
          searchLowerCase = state.search.toLowerCase()
        if (taskNameLowerCase.includes(searchLowerCase)) {
          tasksFiltered[key] = task
        }
      })
      return tasksFiltered
    }
    return tasksSorted
  },
  tasksTodo: (state, getters) => {
    const tasksFiltered = getters.tasksFiltered
    const tasks = {}
    Object.keys(tasksFiltered).forEach(function (key) {
      const task = tasksFiltered[key]
      if (!task.completed) {
        tasks[key] = task
      }
    })
    return tasks
  },
  tasksCompleted: (state, getters) => {
    const tasksFiltered = getters.tasksFiltered
    const tasks = {}
    Object.keys(tasksFiltered).forEach(function (key) {
      const task = tasksFiltered[key]
      if (task.completed) {
        tasks[key] = task
      }
    })
    return tasks
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}