Deleting categories

2021-08-07 17:11:36 +03:00
parent 0215790d90
commit f271fe30d2
8 changed files with 278 additions and 7 deletions
--- 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",
--- 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"
  }
--- a/src/components/TheCategoryBar.vue
+++ b/src/components/TheCategoryBar.vue
@@ -12,10 +12,12 @@
      <div
        class="category"
        v-for="category in categories" :key="category"
-        :style="{ background: stringToColor(category) }"
+        :style="{background: stringToColor(category)}"
+        :class="{selected: selectedCategory===category}"
+        @click="selectCategory(category)"
      >
        {{ category }}
-        <span @click="removeCategory(category)">×</span>
+        <span @click.stop="removeCategory(category)">×</span>
      </div>
    </div>
  </div>
@@ -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;
+      }
    }
  }
 }
--- 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) {
--- 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;
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="home">
-    <TheCategoryBar />
-    <TheTaskList />
+    <TheCategoryBar @select="select" />
+    <TheTaskList :selectedCategory="selectedCategory" />
  </div>
 </template>

@@ -15,5 +15,15 @@ export default {
    TheCategoryBar,
    TheTaskList,
  },
+  data() {
+    return {
+      selectedCategory: undefined,
+    };
+  },
+  methods: {
+    select(category) {
+      this.selectedCategory = category;
+    },
+  },
 };
 </script>
--- a/src/views/Home/TheTaskList.vue
+++ b/src/views/Home/TheTaskList.vue
@@ -7,7 +7,7 @@
      @keypress.enter="addTask"
    />
    <Task
-      v-for="task in tasks"
+      v-for="task in filteredTasks"
      :key="task.startedAt"
      :task=task
    />
@@ -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;
+    },
  },
 };
 </script>
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,10 @@
 module.exports = {
+  pwa: {
+    workboxOptions: {
+      skipWaiting: true,
+      clientsClaim: true,
+    },
+  },
  css: {
    loaderOptions: {
      sass: {