refs #396 Create list edit page which can manage list memberships

src/renderer/components/TimelineSpace/Contents/Cards/User.vue

@@ -11,13 +11,28 @@
       @{{ user.acct }}
     </div>
   </div>
+  <div class="tool" v-if="remove">
+    <el-button type="text" @click.stop.prevent="removeAccount(user)">
+      <icon name="times"></icon>
+    </el-button>
+  </div>
+  </div>
 </div>
 </template>
 
 <script>
 export default {
   name: 'user',
-  props: [ 'user' ],
+  props: {
+    user: {
+      type: Object,
+      default: {}
+    },
+    remove: {
+      type: Boolean,
+      default: false
+    }
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -30,6 +45,9 @@ export default {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
       this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    },
+    removeAccount (account) {
+      this.$emit('removeAccount', account)
     }
   }
 }
@@ -66,5 +84,9 @@ export default {
       word-wrap: break-word;
     }
   }
+
+  .tool {
+    margin-left: auto;
+  }
 }
 </style>

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="members">
+    <template v-for="account in members">
+      <user :user="account" :remove="true" @removeAccount="removeAccount"></user>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import User from '../Cards/User'
+
+export default {
+  name: 'edit-list',
+  props: ['list_id'],
+  components: { User },
+  computed: {
+    ...mapState({
+      members: state => state.TimelineSpace.Contents.Lists.Edit.members
+    })
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    async init () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      try {
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.list_id)
+      } catch (err) {
+        this.$message({
+          message: 'Failed to fetch members',
+          type: 'error'
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    async removeAccount (account) {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      try {
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/removeAccount', {
+          account: account,
+          listId: this.list_id
+        })
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.list_id)
+      } catch (err) {
+        this.$message({
+          message: 'Failed to remove user',
+          type: 'error'
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.members {
+}
+</style>

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

@@ -9,9 +9,14 @@
     </el-form>
   </div>
   <div class="list" v-for="list in lists" :key="list.id">
-    <router-link tag="span" class="title" :to="`/${id()}/lists/${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)">
+        Edit
+      </el-button>
+    </div>
   </div>
 </div>
 </template>
@@ -71,6 +76,9 @@ export default {
       } finally {
         this.creating = false
       }
+    },
+    edit (list) {
+      return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
     }
   }
 }
@@ -105,7 +113,11 @@ export default {
   }
 
   .list {
-    padding: 12px 24px;
+    padding: 4px 24px;
+    display: flex;
+    flex-dirrection: row;
+    align-items: baseline;
+    justify-content: space-between;
     border-bottom: 1px solid var(--theme-border-color);
 
     .title {

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -57,6 +57,9 @@ export default {
         case 'lists':
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Lists')
           break
+        case 'edit-list':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Members')
+          break
         case 'list':
           this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
           break

src/renderer/router/index.js

@@ -94,6 +94,12 @@ export default new Router({
               name: 'lists',
               component: require('@/components/TimelineSpace/Contents/Lists/Index').default
             },
+            {
+              path: 'lists/:list_id/edit',
+              name: 'edit-list',
+              component: require('@/components/TimelineSpace/Contents/Lists/Edit').default,
+              props: true
+            },
             {
               path: 'lists/:list_id',
               name: 'list',

src/renderer/store/TimelineSpace/Contents/Lists.js

@@ -1,10 +1,12 @@
 import Index from './Lists/Index'
 import Show from './Lists/Show'
+import Edit from './Lists/Edit'
 
 export default {
   namespaced: true,
   modules: {
     Index,
-    Show
+    Show,
+    Edit
   }
 }

src/renderer/store/TimelineSpace/Contents/Lists/Edit.js

@@ -0,0 +1,36 @@
+import Mastodon from 'megalodon'
+
+export default {
+  namespaced: true,
+  state: {
+    members: []
+  },
+  mutations: {
+    changeMembers (state, members) {
+      state.members = members
+    }
+  },
+  actions: {
+    fetchMembers ({ commit, rootState }, listId) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get(`/lists/${listId}/accounts`, {
+        limit: 0
+      })
+        .then((data) => {
+          commit('changeMembers', data)
+        })
+    },
+    removeAccount ({ rootState }, obj) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.del(`/lists/${obj.listId}/accounts`, {
+        account_ids: [obj.account.id]
+      })
+    }
+  }
+}