front: delete category button

front/client/components/Category.vue

@@ -24,8 +24,20 @@
           <v-icon size="14" class="mr-1" left>$vuetify.icons.plus</v-icon>
           Add new item
         </v-btn>
+        <v-btn
+          icon
+          flat
+          class="ma-0 pa-0"
+          color="grey"
+          title="Delete category"
+          @click="deleteCategory"
+        >
+          <v-icon size="14">$vuetify.icons.trash-alt</v-icon>
+        </v-btn>
       </div>
+
       <category-description />
+
       <template v-if="category">
         <category-item
           v-for="value in category.items"
@@ -44,6 +56,7 @@
           :kind="value.kind"
         />
       </template>
+
       <v-btn
         flat
         class="ml-2"
@@ -53,7 +66,7 @@
         <v-icon size="14" class="mr-1" left>$vuetify.icons.plus</v-icon>
         Add new item
       </v-btn>
-      <add-item-dialog 
+      <add-item-dialog
         v-model="isDialogOpen"
         :categoryId="categoryId"
       />
@@ -69,6 +82,7 @@ import CategoryItem from 'client/components/CategoryItem.vue'
 import AddItemDialog from 'client/components/AddItemDialog.vue'
 import CategoryDescription from 'client/components/CategoryDescription.vue'
 import category from 'client/store/modules/category'
+import Confirm from 'client/helpers/ConfirmDecorator'
 
 @Component({
   components: {
@@ -82,17 +96,6 @@ export default class Category extends Vue {
 
   isDialogOpen: boolean = false
 
-  async asyncData () {
-    if (!this.categoryId) {
-      return
-    }
-    await this.$store.dispatch('category/loadCategory', this.categoryId)
-  }
-
-  beforeDestroy () {
-    this.$store.commit('category/setCategory', {})
-  }
-
   get category () {
     return this.$store.state.category.category
   }
@@ -101,9 +104,31 @@ export default class Category extends Vue {
     return this.category && `${_toKebabCase(this.category.title)}-${this.category.id}`
   }
 
+  // TODO handle case when category was deleted. Go back in that case
+  async asyncData () {
+    if (!this.categoryId) {
+      return
+    }
+    await this.$store.dispatch('category/loadCategory', this.categoryId)
+  }
+
+  beforeDestroy () {
+    this.$store.commit('category/setCategory', null)
+  }
+
   openAddItemDialog () {
     this.isDialogOpen = true
   }
+
+  @Confirm({ text: 'delete this category' })
+  async deleteCategory () {
+    if (!this.category) {
+      return
+    }
+
+    await this.$store.dispatch('category/deleteCategory', this.categoryId)
+    this.$router.back()
+  }
 }
 </script>
 

front/client/service/Category.ts

@@ -23,6 +23,10 @@ class CategoryService {
     })
     return data
   }
+
+  async deleteCategory (id: ICategoryInfo['id']): Promise<void> {
+    await axios.delete(`api/category/${id}`)
+  }
 }
 
 export enum CategoryStatus {

front/client/store/modules/category.ts

@@ -43,6 +43,12 @@ const actions: ActionTree<ICategoryState, any> = {
     })
     dispatch('loadCategoryList')
     return createdId
+  },
+  async deleteCategory (
+    { dispatch }: ActionContext<ICategoryState, any>,
+    id: ICategoryInfo['id']
+  ): Promise<void> {
+    await CategoryService.deleteCategory(id)
   }
 }
 

front/package.json

@@ -46,6 +46,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/vue-fontawesome": "^0.1.4",
     "@types/lodash": "^4.14.116",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
@@ -64,7 +65,7 @@
     "postcss-loader": "^2.1.5",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "testcafe": "^0.22.0",
+    "testcafe": "^15.1.317922",
     "testcafe-vue-selectors": "^3.0.0",
     "ts-loader": "^4.4.2",
     "tslint": "^5.11.0",