├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── README.md
├── TasksPage.png
├── assets
    ├── README.md
    └── variables.scss
├── components
    ├── Logo.vue
    ├── README.md
    ├── VuetifyLogo.vue
    └── tasks
    │   └── TaskList.vue
├── jest.config.js
├── jsconfig.json
├── layouts
    ├── README.md
    ├── default.vue
    └── error.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── Lists
    │   └── index.vue
    ├── README.md
    ├── Tasks
    │   ├── _id
    │   │   └── index.vue
    │   └── index.vue
    ├── index.vue
    └── inspire.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    ├── favicon.ico
    ├── icon.png
    ├── v.png
    └── vuetify-logo.svg
├── store
    ├── README.md
    ├── index.js
    ├── lists.js
    ├── projects.js
    └── tasks.js
└── test
    └── Logo.spec.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "test": {
 4 |       "presets": [
 5 |         [
 6 |           "@babel/preset-env",
 7 |           {
 8 |             "targets": {
 9 |               "node": "current"
10 |             }
11 |           }
12 |         ]
13 |       ]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     // 'prettier',
13 |     // 'prettier/vue',
14 |     // 'plugin:prettier/recommended',
15 |     // 'plugin:nuxt/recommended'
16 |   ],
17 |   plugins: [
18 |     // 'prettier'
19 |   ],
20 |   // add your custom rules here
21 |   rules: {
22 |     'comma-dangle': 'warn'
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "arrowParens": "always",
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Reasonable Productivity Front-End
 2 | 
 3 | Productivity application built with Vue.js.
 4 | 
 5 | ## Overview
 6 | 
 7 | This app manages tasks and lists. Future versions will also handle and syncing calendar and contacts to use with tasks.
 8 | 
 9 | ### Technologies
10 | 
11 | * Vue.js
12 | * Nuxt
13 | * Vuex
14 | * VueRouter
15 | * Vuetify
16 | * Axios
17 | 
18 | ## Build Setup
19 | 
20 | ```bash
21 | # install dependencies
22 | $ npm install
23 | 
24 | # serve with hot reload at localhost:3000
25 | $ npm run dev
26 | 
27 | # build for production and launch server
28 | $ npm run build
29 | $ npm run start
30 | 
31 | # generate static project
32 | $ npm run generate
33 | ```
34 | 
35 | ## Routes
36 | 
37 | ### Tasks
38 | 
39 | **/tasks**
40 | 
41 | **/tasks/:taskId**
42 | 
43 | ### Lists
44 | 
45 | **/lists**
46 | 
47 | **/lists/:listId**
48 | 
49 | ### Auth
50 | 
51 | **/login**
52 | 
53 | **/register**
54 | 
55 | **/verify**
56 | 
57 | **/forgot-password**
58 | 
59 | **/reset-password**
60 | 
61 | ### Other
62 | 
63 | **/settings**
64 | 
65 | ## Mockups
66 | 
67 | <img src="TasksPage.png">
68 | 
69 | 


--------------------------------------------------------------------------------
/TasksPage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reasonable-productivity/web-front-end/155a31cdea6cdb36d4afa444b1ffdaf1f2a0c002/TasksPage.png


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/assets/variables.scss:
--------------------------------------------------------------------------------
1 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
2 | //
3 | // The variables you want to modify
4 | // $font-size-root: 20px;
5 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two" />
 4 |     <div class="Triangle Triangle--one" />
 5 |     <div class="Triangle Triangle--three" />
 6 |     <div class="Triangle Triangle--four" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41b883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3b8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495e;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/VuetifyLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg">
 3 | </template>
 4 | 
 5 | <style>
 6 | .VuetifyLogo {
 7 |   height: 180px;
 8 |   width: 180px;
 9 |   transform: rotateY(560deg);
10 |   animation: turn 3.5s ease-out forwards 1s;
11 | }
12 | 
13 | @keyframes turn {
14 |   100% {
15 |     transform: rotateY(0deg);
16 |   }
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/components/tasks/TaskList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-list dense>
 3 |     <v-list-item-group color="primary">
 4 |       <v-list-item v-for="(task, i) in tasks" :key="i">
 5 |         <template v-slot:default>
 6 |           <v-list-item-action>
 7 |             <v-checkbox
 8 |               @click.stop="toggleChecked(task)"
 9 |               :input-value="task.completed"
10 |               :disabled="!crud"
11 |             />
12 |           </v-list-item-action>
13 | 
14 |           <v-list-item-content>
15 |             <span
16 |               v-if="editingTask.id === task.id"
17 |               class="d-flex justify-space-between"
18 |             >
19 |               <v-text-field
20 |                 v-model="editingTask.title"
21 |                 append-outer-icon="mdi-check"
22 |                 @click:append-outer="saveEdit"
23 |                 @keypress.enter="saveEdit"
24 |               />
25 |               <v-icon @click.stop="cancelEdit">
26 |                 mdi-close-circle
27 |               </v-icon>
28 |             </span>
29 |             <span
30 |               v-else
31 |               class="d-flex justify-space-between"
32 |             >
33 |               <span :class="{'text--disabled text-decoration-line-through': task.completed}">
34 |                 {{ task.title }}
35 |               </span>
36 |               <span v-if="crud">
37 |                 <v-icon @click.stop="editTask(i)">
38 |                   mdi-pencil
39 |                 </v-icon>
40 |                 <v-icon @click.stop="removeTask(task.id)">
41 |                   mdi-delete-outline
42 |                 </v-icon>
43 |               </span>
44 |             </span>
45 |           </v-list-item-content>
46 |         </template>
47 |       </v-list-item>
48 |     </v-list-item-group>
49 |   </v-list>
50 | </template>
51 | 
52 | <script>
53 | export default {
54 |   props: {
55 |     tasks: {
56 |       required: true,
57 |       type: Function
58 |     },
59 |     editingTask: {
60 |       required: true,
61 |       type: Object
62 |     },
63 |     saveEdit: {
64 |       required: true,
65 |       type: Function
66 |     },
67 |     cancelEdit: {
68 |       required: true,
69 |       type: Function
70 |     },
71 |     toggleChecked: {
72 |       required: true,
73 |       type: Function
74 |     },
75 |     crud: {
76 |       type: Boolean,
77 |       default: false
78 |     }
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleNameMapper: {
 3 |     '^@/(.*)$': '<rootDir>/$1',
 4 |     '^~/(.*)$': '<rootDir>/$1',
 5 |     '^vue$': 'vue/dist/vue.common.js'
 6 |   },
 7 |   moduleFileExtensions: ['js', 'vue', 'json'],
 8 |   transform: {
 9 |     '^.+\\.js$': 'babel-jest',
10 |     '.*\\.(vue)$': 'vue-jest'
11 |   },
12 |   collectCoverage: true,
13 |   collectCoverageFrom: [
14 |     '<rootDir>/components/**/*.vue',
15 |     '<rootDir>/pages/**/*.vue'
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app dark>
 3 |     <v-app-bar :clipped-left="clipped" fixed app>
 4 |       <v-toolbar-title v-text="title" />
 5 | 
 6 |       <v-spacer />
 7 | 
 8 |       <v-toolbar-items>
 9 |         <v-btn text to="/tasks">
10 |           Tasks
11 |         </v-btn>
12 |         <v-btn text>
13 |           Calendar
14 |         </v-btn>
15 |         <v-btn text>
16 |           Lists
17 |         </v-btn>
18 |       </v-toolbar-items>
19 |       <v-btn icon @click.stop="rightDrawer = !rightDrawer">
20 |         <v-icon>mdi-menu</v-icon>
21 |       </v-btn>
22 |     </v-app-bar>
23 |     <v-content>
24 |       <v-container>
25 |         <nuxt />
26 |       </v-container>
27 |     </v-content>
28 | 
29 |     <!-- <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
30 |       <v-list>
31 |         <v-list-item @click.native="right = !right">
32 |           <v-list-item-action>
33 |             <v-icon light>
34 |               mdi-repeat
35 |             </v-icon>
36 |           </v-list-item-action>
37 |           <v-list-item-title>Switch drawer (click me)</v-list-item-title>
38 |         </v-list-item>
39 |       </v-list>
40 |     </v-navigation-drawer> -->
41 |     <v-footer :fixed="fixed" app>
42 |       <span>&copy; {{ new Date().getFullYear() }}</span>
43 |     </v-footer>
44 |   </v-app>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 |   data () {
50 |     return {
51 |       clipped: false,
52 |       drawer: false,
53 |       fixed: false,
54 |       items: [
55 |         {
56 |           icon: 'mdi-apps',
57 |           title: 'Welcome',
58 |           to: '/'
59 |         },
60 |         {
61 |           icon: 'mdi-chart-bubble',
62 |           title: 'Inspire',
63 |           to: '/inspire'
64 |         }
65 |       ],
66 |       miniVariant: false,
67 |       right: true,
68 |       rightDrawer: false,
69 |       title: 'Reasonable Productivity'
70 |     }
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app dark>
 3 |     <h1 v-if="error.statusCode === 404">
 4 |       {{ pageNotFound }}
 5 |     </h1>
 6 |     <h1 v-else>
 7 |       {{ otherError }}
 8 |     </h1>
 9 |     <NuxtLink to="/">
10 |       Home page
11 |     </NuxtLink>
12 |   </v-app>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   layout: 'empty',
18 |   props: {
19 |     error: {
20 |       type: Object,
21 |       default: null
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |       pageNotFound: '404 Not Found',
27 |       otherError: 'An error occurred'
28 |     }
29 |   },
30 |   head () {
31 |     const title =
32 |       this.error.statusCode === 404 ? this.pageNotFound : this.otherError
33 |     return {
34 |       title
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style scoped>
41 | h1 {
42 |   font-size: 20px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import colors from 'vuetify/es5/util/colors'
 2 | 
 3 | export default {
 4 |   mode: 'spa',
 5 |   /*
 6 |    ** Headers of the page
 7 |    */
 8 |   head: {
 9 |     titleTemplate: '%s - ' + process.env.npm_package_name,
10 |     title: process.env.npm_package_name || '',
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14 |       {
15 |         hid: 'description',
16 |         name: 'description',
17 |         content: process.env.npm_package_description || ''
18 |       }
19 |     ],
20 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
21 |   },
22 |   /*
23 |    ** Customize the progress-bar color
24 |    */
25 |   loading: { color: '#fff' },
26 |   /*
27 |    ** Global CSS
28 |    */
29 |   css: [],
30 |   /*
31 |    ** Plugins to load before mounting the App
32 |    */
33 |   plugins: [],
34 |   /*
35 |    ** Nuxt.js dev-modules
36 |    */
37 |   buildModules: [
38 |     // Doc: https://github.com/nuxt-community/eslint-module
39 |     '@nuxtjs/eslint-module',
40 |     '@nuxtjs/vuetify'
41 |   ],
42 |   /*
43 |    ** Nuxt.js modules
44 |    */
45 |   modules: [
46 |     // Doc: https://axios.nuxtjs.org/usage
47 |     '@nuxtjs/axios',
48 |     '@nuxtjs/pwa',
49 |     // Doc: https://github.com/nuxt-community/dotenv-module
50 |     '@nuxtjs/dotenv'
51 |   ],
52 |   /*
53 |    ** Axios module configuration
54 |    ** See https://axios.nuxtjs.org/options
55 |    */
56 |   axios: {},
57 |   /*
58 |    ** vuetify module configuration
59 |    ** https://github.com/nuxt-community/vuetify-module
60 |    */
61 |   vuetify: {
62 |     customVariables: ['~/assets/variables.scss'],
63 |     theme: {
64 |       dark: false,
65 |       themes: {
66 |         dark: {
67 |           primary: colors.blue.darken2,
68 |           accent: colors.grey.darken3,
69 |           secondary: colors.amber.darken3,
70 |           info: colors.teal.lighten1,
71 |           warning: colors.amber.base,
72 |           error: colors.deepOrange.accent4,
73 |           success: colors.green.accent3
74 |         }
75 |       }
76 |     }
77 |   },
78 |   /*
79 |    ** Build configuration
80 |    */
81 |   build: {
82 |     /*
83 |      ** You can extend webpack config here
84 |      */
85 |     extend (config, ctx) {}
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "productivity-front-end",
 3 |   "version": "1.0.0",
 4 |   "description": "My great Nuxt.js project",
 5 |   "author": "gwenf",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "test": "jest"
14 |   },
15 |   "dependencies": {
16 |     "nuxt": "^2.0.0",
17 |     "@nuxtjs/axios": "^5.3.6",
18 |     "@nuxtjs/pwa": "^3.0.0-0",
19 |     "@nuxtjs/dotenv": "^1.4.0"
20 |   },
21 |   "devDependencies": {
22 |     "@nuxtjs/eslint-config": "^2.0.0",
23 |     "@nuxtjs/eslint-module": "^1.0.0",
24 |     "@nuxtjs/vuetify": "1.11.2",
25 |     "@vue/test-utils": "^1.0.0-beta.27",
26 |     "babel-eslint": "^10.0.1",
27 |     "babel-jest": "^24.1.0",
28 |     "eslint": "^6.1.0",
29 |     "eslint-config-prettier": "^6.10.0",
30 |     "eslint-plugin-nuxt": ">=0.4.2",
31 |     "eslint-plugin-prettier": "^3.1.2",
32 |     "jest": "^24.1.0",
33 |     "prettier": "^1.19.1",
34 |     "vue-jest": "^4.0.0-0"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/pages/Lists/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col sm="6" offset-sm="3">
  5 |         <v-text-field v-model="newListName">
  6 |           <template v-slot:append-outer>
  7 |             <v-btn color="primary" @click="addItem">
  8 |               Add List Item
  9 |             </v-btn>
 10 |           </template>
 11 |         </v-text-field>
 12 |         <v-treeview :items="lists">
 13 |           <template v-slot:append="{ item }">
 14 |             <v-icon @click.stop="editList(item)">
 15 |               mdi-pencil
 16 |             </v-icon>
 17 |             <v-icon @click.stop="removeList(item)">
 18 |               mdi-delete-outline
 19 |             </v-icon>
 20 |           </template>
 21 |         </v-treeview>
 22 |       </v-col>
 23 |     </v-row>
 24 |     <!-- <v-btn
 25 |       color="primary"
 26 |       dark
 27 |       @click.stop="dialog = true"
 28 |     >
 29 |       Open Dialog
 30 |     </v-btn> -->
 31 | 
 32 |     <v-dialog
 33 |       v-model="editDialog"
 34 |       max-width="290"
 35 |     >
 36 |       <v-card>
 37 |         <v-card-title class="headline">
 38 |           Edit Item
 39 |         </v-card-title>
 40 | 
 41 |         <v-card-text>
 42 |           <v-text-field v-model="selectedList.name" />
 43 |         </v-card-text>
 44 | 
 45 |         <v-card-actions>
 46 |           <v-spacer />
 47 | 
 48 |           <v-btn
 49 |             color="green darken-1"
 50 |             text
 51 |             @click="editDialog = false"
 52 |           >
 53 |             Cancel
 54 |           </v-btn>
 55 | 
 56 |           <v-btn
 57 |             color="green darken-1"
 58 |             text
 59 |             @click.stop="saveEdit"
 60 |           >
 61 |             Save
 62 |           </v-btn>
 63 |         </v-card-actions>
 64 |       </v-card>
 65 |     </v-dialog>
 66 |   </v-container>
 67 | </template>
 68 | 
 69 | <script>
 70 | import { mapActions, mapState } from 'vuex'
 71 | 
 72 | export default {
 73 |   data () {
 74 |     return {
 75 |       newListName: '',
 76 |       selectedList: {},
 77 |       editDialog: false
 78 |     }
 79 |   },
 80 |   created () {
 81 |     this.getAllLists()
 82 |   },
 83 |   computed: {
 84 |     ...mapState('lists', ['lists'])
 85 |   },
 86 |   methods: {
 87 |     ...mapActions('lists', [
 88 |       'getAllLists',
 89 |       'postNewList',
 90 |       'patchList'
 91 |     ]),
 92 |     addItem () {
 93 |       const payload = {
 94 |         user: 1,
 95 |         name: this.newListName
 96 |       }
 97 |       this.postNewList(payload)
 98 |     },
 99 |     editList (item) {
100 |       this.selectedList = { ...item }
101 |       this.editDialog = true
102 |     },
103 |     removeList (item) {
104 | 
105 |     },
106 |     saveEdit () {
107 |       const payload = {
108 |         listId: this.selectedList.id,
109 |         data: {
110 |           user: 1,
111 |           name: this.selectedList.name
112 |         }
113 |       }
114 |       this.patchList(payload)
115 |       this.editDialog = false
116 |       this.selectedList = {}
117 |     }
118 |   }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/Tasks/_id/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     {{ $route.params.id }}
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/pages/Tasks/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col sm="8" offset-sm="2">
  5 |         <v-tabs v-model="tab">
  6 |           <v-tab>All</v-tab>
  7 |           <v-tab>Next</v-tab>
  8 |           <v-tab>Inbox</v-tab>
  9 |           <v-tab>Maybe</v-tab>
 10 |           <v-tab>Projects</v-tab>
 11 |         </v-tabs>
 12 | 
 13 |         <!-- <v-text-field
 14 |           v-model="newTask.title"
 15 |           label="Enter Task (press enter)"
 16 |           @keypress.enter="addTask"
 17 |         /> -->
 18 | 
 19 |         <v-text-field
 20 |           v-model="searchValue"
 21 |           placeholder="Search..."
 22 |           append-icon="mdi-magnify"
 23 |         />
 24 | 
 25 |         <v-card v-if="newTask.show" outlined>
 26 |           <v-card-text>
 27 |             <v-text-field
 28 |               ref="newTaskTitle"
 29 |               v-model="newTask.title"
 30 |               label="Title"
 31 |               outlined
 32 |             />
 33 |             <v-textarea
 34 |               v-model="newTask.description"
 35 |               label="Description"
 36 |               outlined
 37 |             />
 38 |             <v-select
 39 |               :items="categories"
 40 |               item-text="label"
 41 |               item-value="value"
 42 |               label="Category"
 43 |               v-model="newTask.category"
 44 |               dense
 45 |             />
 46 |           </v-card-text>
 47 |           <v-card-actions>
 48 |             <v-btn
 49 |               @click="addTask"
 50 |               color="success"
 51 |             >
 52 |               Save
 53 |             </v-btn>
 54 |             <v-btn
 55 |               color="secondary"
 56 |               @click="toggleNewTask"
 57 |             >
 58 |               Cancel
 59 |             </v-btn>
 60 |           </v-card-actions>
 61 |         </v-card>
 62 | 
 63 |         <v-tabs-items v-model="tab">
 64 |           <v-tab-item>
 65 |             <v-row class="d-flex flex-wrap">
 66 |               <v-card class="ma-2" width="240px">
 67 |                 <v-card-title>
 68 |                   <v-btn @click="tab = 1" text>
 69 |                     Actions
 70 |                   </v-btn>
 71 |                 </v-card-title>
 72 |                 <v-card-text>
 73 |                   <TaskList
 74 |                     :tasks="filteredTasks(2)"
 75 |                     :editingTask="editingTask"
 76 |                     :saveEdit="saveEdit"
 77 |                     :cancelEdit="cancelEdit"
 78 |                     :toggleChecked="toggleChecked"
 79 |                   />
 80 |                 </v-card-text>
 81 |               </v-card>
 82 |               <v-card class="ma-2" width="240px">
 83 |                 <v-card-title>
 84 |                   <v-btn @click="tab = 2" text>
 85 |                     Inbox
 86 |                   </v-btn>
 87 |                 </v-card-title>
 88 |                 <v-card-text>
 89 |                   <TaskList
 90 |                     :tasks="filteredTasks(1)"
 91 |                     :editingTask="editingTask"
 92 |                     :saveEdit="saveEdit"
 93 |                     :cancelEdit="cancelEdit"
 94 |                     :toggleChecked="toggleChecked"
 95 |                   />
 96 |                 </v-card-text>
 97 |               </v-card>
 98 |               <v-card class="ma-2" width="240px">
 99 |                 <v-card-title>
100 |                   <v-btn @click="tab = 3" text>
101 |                     Maybe
102 |                   </v-btn>
103 |                 </v-card-title>
104 |                 <v-card-text>
105 |                   <TaskList
106 |                     :tasks="filteredTasks(3)"
107 |                     :editingTask="editingTask"
108 |                     :saveEdit="saveEdit"
109 |                     :cancelEdit="cancelEdit"
110 |                     :toggleChecked="toggleChecked"
111 |                   />
112 |                 </v-card-text>
113 |               </v-card>
114 |             </v-row>
115 |           </v-tab-item>
116 | 
117 |           <v-tab-item
118 |             v-for="n in regularTabs"
119 |             :key="`task${n}`"
120 |           >
121 |             <TaskList
122 |               :tasks="filteredTasks()"
123 |               :editingTask="editingTask"
124 |               :saveEdit="saveEdit"
125 |               :cancelEdit="cancelEdit"
126 |               :toggleChecked="toggleChecked"
127 |               :crud="true"
128 |             />
129 |           </v-tab-item>
130 | 
131 |           <v-tab-item>
132 |             <v-expansion-panels accordion>
133 |               <v-expansion-panel
134 |                 v-for="project in projects"
135 |                 :key="project.id"
136 |               >
137 |                 <v-expansion-panel-header>
138 |                   {{ project.title }}
139 |                 </v-expansion-panel-header>
140 |                 <v-expansion-panel-content>
141 |                   {{ project.description }}
142 |                 </v-expansion-panel-content>
143 |               </v-expansion-panel>
144 |             </v-expansion-panels>
145 |           </v-tab-item>
146 |         </v-tabs-items>
147 | 
148 |         <v-btn color="primary" fab @click="toggleNewTask">
149 |           <v-icon>mdi-plus</v-icon>
150 |         </v-btn>
151 |       </v-col>
152 |     </v-row>
153 |   </v-container>
154 | </template>
155 | 
156 | <script>
157 | import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
158 | import TaskList from '../../components/tasks/TaskList.vue'
159 | 
160 | export default {
161 |   components: {
162 |     TaskList
163 |   },
164 |   data () {
165 |     return {
166 |       newTask: {
167 |         show: false,
168 |         title: '',
169 |         description: '',
170 |         category: 1,
171 |         user: 1
172 |       },
173 |       searchValue: '',
174 |       editingTask: {},
175 |       tab: 1,
176 |       regularTabs: [...Array(3).keys()],
177 |       categories: [
178 |         {
179 |           value: 1,
180 |           label: 'inbox'
181 |         },
182 |         {
183 |           value: 2,
184 |           label: 'next'
185 |         },
186 |         {
187 |           value: 3,
188 |           label: 'maybe'
189 |         }
190 |       ]
191 |     }
192 |   },
193 |   computed: {
194 |     ...mapState('tasks', ['tasks']),
195 |     ...mapState('projects', ['projects']),
196 |     ...mapGetters('tasks', ['sortedTasks'])
197 |   },
198 |   created () {
199 |     this.getAllTasks()
200 |     this.getProjects()
201 |   },
202 |   methods: {
203 |     ...mapMutations('tasks', ['edit', 'toggle']),
204 |     ...mapActions('tasks',
205 |       ['getAllTasks', 'postNewTask', 'deleteTask', 'patchTask']
206 |     ),
207 |     ...mapActions('projects',
208 |       ['getProjects']
209 |     ),
210 |     filteredTasks (cat) {
211 |       let category = cat || 1
212 |       if (this.tab === 1) {
213 |         category = 2
214 |       } else if (this.tab === 3) {
215 |         category = 3
216 |       }
217 |       return this.sortedTasks.filter((task) => {
218 |         return task.category === category
219 |       })
220 |     },
221 |     toggleNewTask () {
222 |       this.newTask.show = !this.newTask.show
223 |       if (this.newTask.show) {
224 |         this.$nextTick(function () {
225 |           this.$refs.newTaskTitle.focus()
226 |         })
227 |       }
228 |     },
229 |     addTask () {
230 |       this.postNewTask(this.newTask)
231 |       this.newTask = ''
232 |     },
233 |     editTask (index) {
234 |       this.editingTask = {
235 |         ...this.tasks[index]
236 |       }
237 |     },
238 |     removeTask (taskId) {
239 |       this.deleteTask(taskId)
240 |     },
241 |     cancelEdit () {
242 |       this.editingTask = {}
243 |     },
244 |     saveEdit () {
245 |       const payload = {
246 |         id: this.editingTask.id,
247 |         taskData: this.editingTask
248 |       }
249 |       delete payload.taskData.id
250 |       this.patchTask(payload)
251 |       this.cancelEdit()
252 |     },
253 |     toggleChecked (task) {
254 |       const payload = {
255 |         id: task.id,
256 |         task: {
257 |           completed: !task.completed
258 |         }
259 |       }
260 |       this.patchTask(payload)
261 |     }
262 |   }
263 | }
264 | </script>
265 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-row>
 4 |       <v-col>
 5 |         Reasonable Productivity
 6 |       </v-col>
 7 |     </v-row>
 8 |   </v-container>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   components: {}
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/pages/inspire.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-layout>
 3 |     <v-flex class="text-center">
 4 |       <img src="/v.png" alt="Vuetify.js" class="mb-5">
 5 |       <blockquote class="blockquote">
 6 |         &#8220;First, solve the problem. Then, write the code.&#8221;
 7 |         <footer>
 8 |           <small>
 9 |             <em>&mdash;John Johnson</em>
10 |           </small>
11 |         </footer>
12 |       </blockquote>
13 |     </v-flex>
14 |   </v-layout>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reasonable-productivity/web-front-end/155a31cdea6cdb36d4afa444b1ffdaf1f2a0c002/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reasonable-productivity/web-front-end/155a31cdea6cdb36d4afa444b1ffdaf1f2a0c002/static/icon.png


--------------------------------------------------------------------------------
/static/v.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reasonable-productivity/web-front-end/155a31cdea6cdb36d4afa444b1ffdaf1f2a0c002/static/v.png


--------------------------------------------------------------------------------
/static/vuetify-logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   counter: 0
 3 | })
 4 | 
 5 | export const mutations = {
 6 |   increment (state) {
 7 |     state.counter++
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/store/lists.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const API_URL = 'http://localhost:8000'
 4 | 
 5 | export const state = {
 6 |   lists: []
 7 | }
 8 | 
 9 | export const actions = {
10 |   async getAllLists ({ commit }) {
11 |     const { data } = await axios.get(`${API_URL}/lists`)
12 |     commit('set', data)
13 |   },
14 |   async postNewList ({ commit }, payload) {
15 |     const { data } = await axios.post(`${API_URL}/lists/`, payload)
16 |     commit('addList', data)
17 |   },
18 |   async patchList ({ commit }, payload) {
19 |     const { data, listId } = payload
20 |     await axios.patch(`${API_URL}/lists/${listId}/`, data)
21 |     commit('editList', payload)
22 |   }
23 | }
24 | 
25 | export const mutations = {
26 |   set (state, payload) {
27 |     state.lists = payload
28 |   },
29 |   addList (state, payload) {
30 |     state.lists.push(payload)
31 |   },
32 |   editList (state, payload) {
33 |     const index = state.lists.findIndex((list) => {
34 |       return list.id === payload.listId
35 |     })
36 |     const updatedList = {
37 |       ...state.lists[index],
38 |       name: payload.data.name
39 |     }
40 |     state.lists.splice(index, 1, updatedList)
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/store/projects.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const API_URL = 'http://localhost:8000'
 4 | 
 5 | export const state = () => ({
 6 |   projects: []
 7 | })
 8 | 
 9 | export const actions = {
10 |   async getProjects ({ commit }) {
11 |     const { data } = await axios.get(`${API_URL}/projects`)
12 |     commit('setProjects', data)
13 |   }
14 | }
15 | 
16 | export const mutations = {
17 |   setProjects (state, payload) {
18 |     state.projects = payload
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/store/tasks.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const API_URL = 'http://localhost:8000'
 4 | 
 5 | export const state = () => ({
 6 |   tasks: []
 7 | })
 8 | 
 9 | export const getters = {
10 |   sortedTasks (state) {
11 |     const tasks = [...state.tasks]
12 |     return tasks.sort((taskA, taskB) => {
13 |       if (taskA.completed) {
14 |         return 1
15 |       }
16 |       return -1
17 |     })
18 |   }
19 | }
20 | 
21 | export const actions = {
22 |   async getAllTasks ({ commit }) {
23 |     const { data } = await axios.get(`${API_URL}/tasks/`)
24 |     commit('set', data)
25 |   },
26 |   async postNewTask ({ commit }, payload) {
27 |     const { data } = await axios.post(`${API_URL}/tasks/`, payload)
28 |     commit('add', data)
29 |   },
30 |   async deleteTask ({ commit }, id) {
31 |     await axios.delete(`${API_URL}/tasks/${id}/`)
32 |     commit('remove', id)
33 |   },
34 |   async patchTask ({ commit }, payload) {
35 |     const { id, task } = payload
36 |     await axios.patch(`${API_URL}/tasks/${id}/`, task)
37 |     commit('edit', payload)
38 |   }
39 | }
40 | 
41 | export const mutations = {
42 |   set (state, tasks) {
43 |     state.tasks = tasks
44 |   },
45 |   add (state, task) {
46 |     state.tasks.push(task)
47 |   },
48 |   edit (state, payload) {
49 |     const { id, task } = payload
50 | 
51 |     const index = state.tasks.findIndex((task) => {
52 |       return task.id === id
53 |     })
54 |     const updatedTask = {
55 |       ...state.tasks[index],
56 |       ...task
57 |     }
58 |     state.tasks.splice(index, 1, updatedTask)
59 |   },
60 |   remove (state, id) {
61 |     const index = state.tasks.findIndex((task) => {
62 |       return task.id === id
63 |     })
64 |     state.tasks.splice(index, 1)
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/test/Logo.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import Logo from '@/components/Logo.vue'
 3 | 
 4 | describe('Logo', () => {
 5 |   test('is a Vue instance', () => {
 6 |     const wrapper = mount(Logo)
 7 |     expect(wrapper.isVueInstance()).toBeTruthy()
 8 |   })
 9 | })
10 | 


--------------------------------------------------------------------------------