diff --git a/package-lock.json b/package-lock.json index cb02bd1..33d449a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-vue": "^7.0.0", + "gh-pages": "^3.2.3", "sass": "^1.26.5", "sass-loader": "^8.0.2" } @@ -5805,6 +5806,12 @@ "integrity": "sha1-d1s/J477uXGO7HNh9IP7Nvu/6og=", "dev": true }, + "node_modules/email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==", + "dev": true + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-8.0.0.tgz?cache=0&sync_timestamp=1614682798745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Femoji-regex%2Fdownload%2Femoji-regex-8.0.0.tgz", @@ -7068,6 +7075,32 @@ "dev": true, "optional": true }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/filesize": { "version": "3.6.1", "resolved": "https://registry.nlark.com/filesize/download/filesize-3.6.1.tgz", @@ -7430,6 +7463,73 @@ "assert-plus": "^1.0.0" } }, + "node_modules/gh-pages": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", + "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "dev": true, + "dependencies": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gh-pages/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/gh-pages/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/gh-pages/node_modules/globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "dev": true, + "dependencies": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/glob": { "version": "7.1.7", "resolved": "https://registry.nlark.com/glob/download/glob-7.1.7.tgz?cache=0&sync_timestamp=1620337555606&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob%2Fdownload%2Fglob-7.1.7.tgz", @@ -13548,6 +13648,18 @@ "node": ">=8" } }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/stylehacks": { "version": "4.0.3", "resolved": "https://registry.nlark.com/stylehacks/download/stylehacks-4.0.3.tgz?cache=0&sync_timestamp=1621449647075&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fstylehacks%2Fdownload%2Fstylehacks-4.0.3.tgz", @@ -14092,6 +14204,18 @@ "node": ">=0.8" } }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz", @@ -20849,6 +20973,12 @@ } } }, + "email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==", + "dev": true + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-8.0.0.tgz?cache=0&sync_timestamp=1614682798745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Femoji-regex%2Fdownload%2Femoji-regex-8.0.0.tgz", @@ -21875,6 +22005,23 @@ "dev": true, "optional": true }, + "filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=", + "dev": true + }, + "filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, + "requires": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + } + }, "filesize": { "version": "3.6.1", "resolved": "https://registry.nlark.com/filesize/download/filesize-3.6.1.tgz", @@ -22177,6 +22324,59 @@ "assert-plus": "^1.0.0" } }, + "gh-pages": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", + "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "dev": true, + "requires": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + } + } + }, "glob": { "version": "7.1.7", "resolved": "https://registry.nlark.com/glob/download/glob-7.1.7.tgz?cache=0&sync_timestamp=1620337555606&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob%2Fdownload%2Fglob-7.1.7.tgz", @@ -27262,6 +27462,15 @@ "integrity": "sha1-MfEoGzgyYwQ0gxwxDAHMzajL4AY=", "dev": true }, + "strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.nlark.com/stylehacks/download/stylehacks-4.0.3.tgz?cache=0&sync_timestamp=1621449647075&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fstylehacks%2Fdownload%2Fstylehacks-4.0.3.tgz", @@ -27709,6 +27918,15 @@ "punycode": "^2.1.1" } }, + "trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz", diff --git a/package.json b/package.json index 3c23f87..ebc48db 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "predeploy": "npm run build", + "deploy": "gh-pages -d dist" }, "dependencies": { "core-js": "^3.6.5", @@ -29,6 +31,7 @@ "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-vue": "^7.0.0", + "gh-pages": "^3.2.3", "sass": "^1.26.5", "sass-loader": "^8.0.2" } diff --git a/src/components/TheCategoryBar.vue b/src/components/TheCategoryBar.vue index 95cabd6..26fdd77 100644 --- a/src/components/TheCategoryBar.vue +++ b/src/components/TheCategoryBar.vue @@ -12,10 +12,12 @@
{{ category }} - × + ×
@@ -29,6 +31,7 @@ export default { data() { return { newCategory: '+', + selectedCategory: undefined, }; }, methods: { @@ -38,6 +41,9 @@ export default { }, removeCategory(category) { this.$store.commit('removeCategory', category); + if (category === this.selectedCategory) { + this.selectedCategory(); + } }, blurInput(event) { this.newCategory = '+'; @@ -46,6 +52,14 @@ export default { stringToColor(str) { return toColor(str); }, + selectCategory(category) { + if (this.selectedCategory === category) { + this.selectedCategory = undefined; + } else { + this.selectedCategory = category; + } + this.$emit('select', this.selectedCategory); + }, }, computed: { ...mapState({ @@ -88,6 +102,11 @@ export default { .category { margin-right: 16px; + border: 3px solid transparent; + + &.selected { + border: 3px double $dark; + } } } } diff --git a/src/store/index.js b/src/store/index.js index 099ba7b..0e4fe35 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -18,6 +18,11 @@ export default createStore({ }, removeCategory(state, category) { state.categories = state.categories.filter((element) => element !== category); + state.tasks = state.tasks.map((task) => { + const newTask = task; + if (newTask.category === category) newTask.category = undefined; + return newTask; + }); }, addTask(state, name) { diff --git a/src/views/Home/CategoryDropdown.vue b/src/views/Home/CategoryDropdown.vue index 2502d2d..72c5bf9 100644 --- a/src/views/Home/CategoryDropdown.vue +++ b/src/views/Home/CategoryDropdown.vue @@ -37,7 +37,8 @@ export default { background: $light; padding: 48px 12px 12px 12px; border-radius: 16px; - width: max-content; + min-width: 200px; + max-width: max-content; left: 50%; top: -12px; z-index: 100; diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue index 7d58972..aa71ba3 100644 --- a/src/views/Home/Index.vue +++ b/src/views/Home/Index.vue @@ -1,7 +1,7 @@ @@ -15,5 +15,15 @@ export default { TheCategoryBar, TheTaskList, }, + data() { + return { + selectedCategory: undefined, + }; + }, + methods: { + select(category) { + this.selectedCategory = category; + }, + }, }; diff --git a/src/views/Home/TheTaskList.vue b/src/views/Home/TheTaskList.vue index 9a7ff65..acf9861 100644 --- a/src/views/Home/TheTaskList.vue +++ b/src/views/Home/TheTaskList.vue @@ -7,7 +7,7 @@ @keypress.enter="addTask" /> @@ -23,6 +23,9 @@ export default { components: { Task, }, + props: { + selectedCategory: String, + }, data() { return { newTask: '', @@ -38,6 +41,12 @@ export default { ...mapState({ tasks: (state) => state.tasks, }), + filteredTasks() { + if (this.selectedCategory) { + return this.tasks.filter((task) => task.category === this.selectedCategory); + } + return this.tasks; + }, }, }; diff --git a/vue.config.js b/vue.config.js index 815adda..111535c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,4 +1,10 @@ module.exports = { + pwa: { + workboxOptions: { + skipWaiting: true, + clientsClaim: true, + }, + }, css: { loaderOptions: { sass: {