Merge pull request #2075 from h3poteto/iss-2068

closes #2068 Add delete button for list

src/config/locales/en/translation.json

@@ -387,7 +387,15 @@
   "lists": {
     "index": {
       "new_list": "New List",
-      "edit": "Edit"
+      "edit": "Edit",
+      "delete": {
+        "confirm": {
+          "title": "Confirm",
+          "message": "This operation can not be undone, this list will be permanently deleted",
+          "ok": "Delete",
+          "cancel": "Cancel"
+        }
+      }
     }
   },
   "login": {

src/renderer/components/TimelineSpace/Contents/Lists/Index.vue

@@ -1,24 +1,27 @@
 <template>
-<div id="lists">
-  <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
-    <el-form :inline="true">
-      <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title"></input>
-      <el-button type="text" class="create" @click="createList">
-        <icon name="plus"></icon>
-      </el-button>
-    </el-form>
-  </div>
-  <div class="list" v-for="list in lists" :key="list.id">
-    <router-link tag="div" class="title" :to="`/${id()}/lists/${list.id}`">
-      {{ list.title }}
-    </router-link>
-    <div class="tools">
-      <el-button type="text" @click="edit(list)">
-        {{ $t('lists.index.edit') }}
-      </el-button>
+  <div id="lists">
+    <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
+      <el-form :inline="true">
+        <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
+        <el-button type="text" class="create" @click="createList">
+          <icon name="plus"></icon>
+        </el-button>
+      </el-form>
+    </div>
+    <div class="list" v-for="list in lists" :key="list.id">
+      <router-link tag="div" class="title" :to="`/${id()}/lists/${list.id}`">
+        {{ list.title }}
+      </router-link>
+      <div class="tools">
+        <el-button type="text" @click="edit(list)">
+          <icon name="regular/edit"></icon>
+        </el-button>
+        <el-button type="text" @click="del(list)">
+          <icon name="regular/trash-alt"></icon>
+        </el-button>
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -26,7 +29,7 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'lists',
-  data () {
+  data() {
     return {
       title: '',
       creating: false
@@ -38,27 +41,25 @@ export default {
       loadingBackground: state => state.App.theme.wrapper_mask_color
     })
   },
-  created () {
+  created() {
     this.$store.commit('TimelineSpace/changeLoading', true)
-    this.fetch()
-      .finally(() => {
-        this.$store.commit('TimelineSpace/changeLoading', false)
-      })
+    this.fetch().finally(() => {
+      this.$store.commit('TimelineSpace/changeLoading', false)
+    })
   },
   methods: {
-    id () {
+    id() {
       return this.$route.params.id
     },
-    fetch () {
-      return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
-        .catch(() => {
-          this.$message({
-            message: this.$t('message.lists_fetch_error'),
-            type: 'error'
-          })
+    fetch() {
+      return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists').catch(() => {
+        this.$message({
+          message: this.$t('message.lists_fetch_error'),
+          type: 'error'
         })
+      })
     },
-    async createList () {
+    async createList() {
       this.creating = true
       try {
         await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
@@ -73,8 +74,19 @@ export default {
       }
       await this.$store.dispatch('TimelineSpace/SideMenu/fetchLists')
     },
-    edit (list) {
+    edit(list) {
       return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
+    },
+    del(list) {
+      this.$confirm(this.$t('lists.index.delete.confirm.message'), this.$t('lists.index.delete.confirm.title'), {
+        confirmButtonText: this.$t('lists.index.delete.confirm.ok'),
+        cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
+        type: 'warning'
+      })
+        .then(() => {
+          this.$store.dispatch('TimelineSpace/Contents/Lists/Index/deleteList', list)
+        })
+        .catch(() => {})
     }
   }
 }

src/renderer/store/TimelineSpace/Contents/Lists/Index.ts

@@ -41,6 +41,17 @@ const actions: ActionTree<IndexState, RootState> = {
     )
     const res = await client.createList(title)
     return res.data
+  },
+  deleteList: async ({ dispatch, rootState }, list: Entity.List) => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    const res = await client.deleteList(list.id)
+    dispatch('fetchLists')
+    return res.data
   }
 }