Quasar_Todo/src/store/store-tasks.js

import Vue from 'vue'
import { uid } from 'quasar'
import { firebaseDb, firebaseAuth } from 'boot/firebase'

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',
  tasksDownloaded: false
}

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
  },
  setTasksDownloaded (state, value) {
    state.tasksDownloaded = value
  }
}

const actions = {
  updateTask ({ dispatch }, payload) {
    dispatch('fbUpdateTask', payload)
  },
  deleteTask ({ dispatch }, id) {
    dispatch('fbDeleteTask', id)
  },
  addTask ({ dispatch }, task) {
    const taskId = uid()
    const payload = {
      id: taskId,
      task: task
    }
    dispatch('fbAddTask', payload)
  },
  setSearch ({ commit }, value) {
    commit('setSearch', value)
  },
  setSort ({ commit }, value) {
    commit('setSort', value)
  },
  fbReadData ({ commit }) {
    const userId = firebaseAuth.currentUser.uid
    const userTasks = firebaseDb.ref('tasks/' + userId)

    // child added
    userTasks.on('child_added', snapshot => {
      const task = snapshot.val()
      const payload = {
        id: snapshot.key,
        task: task
      }
      commit('addTask', payload)
    })

    // child changed
    userTasks.on('child_changed', snapshot => {
      const task = snapshot.val()
      const payload = {
        id: snapshot.key,
        updates: task
      }
      commit('updateTask', payload)
    })

    // child deleted
    userTasks.on('child_removed', snapshot => {
      const taskId = snapshot.key
      commit('deleteTask', taskId)
    })
  },
  fbAddTask ({ commit }, payload) {
    const userId = firebaseAuth.currentUser.uid
    const taskRef = firebaseDb.ref('tasks/' + userId + '/' + payload.id)
    taskRef.set(payload.task)
  },
  fbUpdateTask ({ commit }, payload) {
    const userId = firebaseAuth.currentUser.uid
    const taskRef = firebaseDb.ref('tasks/' + userId + '/' + payload.id)
    taskRef.update(payload.updates)
  },
  fbDeleteTask ({ commit }, taskId) {
    const userId = firebaseAuth.currentUser.uid
    const taskRef = firebaseDb.ref('tasks/' + userId + '/' + taskId)
    taskRef.remove()
  }
}

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
}