Merge pull request #7 from vycoder/feature/project-selection-when-adding-new-task

🛠️ Included Project within New Task

Author: vycoder

lib/commons/OpusDialog.vue

@@ -29,7 +29,7 @@
       </q-footer>
 
       <q-page-container>
-        <q-page padding>
+        <q-page class="q-px-sm q-pb-none">
           <q-card flat>
             <slot></slot>
           </q-card>

src/api/tasks.js

@@ -6,6 +6,7 @@ import { toJSON } from './helpers'
 export const createTask = async ({
   name,
   description,
+  project,
   urgent = false,
   important = false,
   timestamp = Date.now()
@@ -14,6 +15,7 @@ export const createTask = async ({
     id: uid(),
     name,
     description,
+    project,
     urgent,
     important,
     progress: 0,

src/components/projects/EditProjectDialog.vue

@@ -140,7 +140,8 @@ export default {
     showNewTaskDialog () {
       this.$q.dialog({
         component: NewTaskDialog,
-        parent: this
+        parent: this,
+        noProjectInput: true
       }).onOk(this.addTask)
     },
     addTask (task) {

src/components/projects/NewProjectDialog.vue

@@ -111,7 +111,8 @@ export default {
     showNewTaskDialog () {
       this.$q.dialog({
         component: NewTaskDialog,
-        parent: this
+        parent: this,
+        noProjectInput: true
       }).onOk(this.addTask)
     },
     addTask (task) {

src/components/tasks/EditTaskDialog.vue

@@ -14,7 +14,7 @@
       />
     </template>
     <template>
-      <q-card-section class="column q-gutter-y-lg">
+      <q-card-section class="column q-gutter-y-md">
         <q-input
           v-model.trim="model.name"
           :placeholder="task.name"
@@ -33,6 +33,18 @@
           counter
           hide-bottom-space
         />
+        <q-select
+          v-if="allProjects.length"
+          v-model="model.project"
+          :options="allProjects"
+          :placeholder="task.project"
+          label="Project Name"
+          option-value="id"
+          option-label="name"
+          emit-value map-options
+          clearable clear-icon="clear"
+          hint="Move to a different project?"
+          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"/>
         <div class="column q-pt-md">
           <div class="q-field__label q-mb-sm">Task Priority</div>
           <div class="column">
@@ -48,7 +60,7 @@
 import UseOpusDialog from 'lib/commons/opus-dialog-functions'
 import OpusDialog from 'lib/commons/OpusDialog'
 
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'EditTaskDialog',
@@ -64,16 +76,19 @@ export default {
     return {
       model: {
         name: '',
+        project: '',
         description: '',
         urgent: false,
         important: false
       }
     }
   },
   computed: {
+    ...mapGetters('projects', ['allProjects']),
     hasChanged () {
       return this.model.name !== this.task.name ||
         this.model.description !== this.task.description ||
+        this.model.project !== this.task.project ||
         this.model.urgent !== this.task.urgent ||
         this.model.important !== this.task.important
     }
@@ -82,11 +97,15 @@ export default {
     ...mapActions('tasks', ['updateTask']),
     initialize (task) {
       if (task) {
-        const { name, description, urgent, important } = task
-        this.model = { name, description, urgent, important }
+        const { name, description, project, urgent, important } = task
+        this.model = { name, description, project, urgent, important }
       }
     },
     async save () {
+      // the task schema is not nullable,
+      // QSelect sets it to null when cleared,
+      // Overriding to an empty string
+      this.model.project = this.model.project || ''
       await this.updateTask({ id: this.task.id, update: this.model })
       this.$emit('ok')
       this.hide()
@@ -95,6 +114,7 @@ export default {
       this.model = {
         name: '',
         description: '',
+        project: '',
         urgent: false,
         important: false
       }

src/components/tasks/NewTaskDialog.vue

@@ -14,7 +14,7 @@
       />
     </template>
     <template>
-      <q-card-section class="column q-gutter-y-lg">
+      <q-card-section class="column q-gutter-y-md">
         <q-input
           v-model.trim="model.name"
           label="Task Name"
@@ -33,6 +33,17 @@
           counter
           hide-bottom-space
         />
+        <q-select
+          v-if="isProjectSelectionEnabled"
+          v-model="projectSelection"
+          :options="allProjects"
+          label="Project Name"
+          option-value="id"
+          option-label="name"
+          emit-value map-options
+          clearable clear-icon="clear"
+          hint="Add to existing project (Optional)"
+          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"/>
         <div class="column q-pt-md">
           <div class="q-field__label q-mb-sm">Task Priority</div>
           <div class="column">
@@ -48,14 +59,18 @@
 import UseOpusDialog from 'lib/commons/opus-dialog-functions'
 import OpusDialog from 'lib/commons/OpusDialog'
 
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'NewTaskDialog',
   mixins: [UseOpusDialog],
   components: { OpusDialog },
+  props: {
+    noProjectInput: { type: Boolean, default: false }
+  },
   data () {
     return {
+      projectSelection: '',
       model: {
         name: '',
         description: '',
@@ -64,10 +79,19 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters('projects', ['allProjects']),
+    isProjectSelectionEnabled () {
+      return !this.noProjectInput && this.allProjects.length
+    }
+  },
   methods: {
     ...mapActions('tasks', ['createTask']),
     async save () {
-      const task = await this.createTask(this.model)
+      const payload = this.isProjectSelectionEnabled && this.projectSelection
+        ? { ...this.model, project: this.projectSelection }
+        : { ...this.model }
+      const task = await this.createTask(payload)
       this.$emit('ok', task)
       this.hide()
       this.clear()
@@ -79,6 +103,7 @@ export default {
         urgent: false,
         important: false
       }
+      this.projectSelection = null
     }
   }
 }

src/pages/desktop/Projects.vue

@@ -8,15 +8,14 @@
       </q-list>
       <q-list
         v-if="projects.length"
-        class="q-px-sm column q-gutter-y-sm">
+        class="q-px-sm column q-gutter-y-xs">
         <project-item
           v-for="project in projects"
           @click="selectedProject = project"
           :key="project.id"
           :project="project"
           hide-breakdown flat
-          bg-color="none"
-          class="q-py-md">
+          bg-color="none">
           <template v-slot:title="{ project }">
             <div class="text-subtitle2 text-black ellipsis">
               {{ project.name }}