refs #396 Show modal to add accounts to the list

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

@@ -1,9 +1,14 @@
 <template>
-  <div class="members">
-    <template v-for="account in members">
-      <user :user="account" :remove="true" @removeAccount="removeAccount"></user>
-    </template>
+<div class="members">
+  <div class="add-account">
+    <el-button type="text" class="add-button" @click="addAccount">
+      <icon name="plus"></icon>
+    </el-button>
   </div>
+  <template v-for="account in members">
+    <user :user="account" :remove="true" @removeAccount="removeAccount"></user>
+  </template>
+</div>
 </template>
 
 <script>
@@ -62,6 +67,10 @@ export default {
       } finally {
         loading.close()
       }
+    },
+    addAccount () {
+      this.$store.commit('TimelineSpace/Modals/AddListMember/setListId', this.list_id)
+      this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', true)
     }
   }
 }
@@ -69,5 +78,13 @@ export default {
 
 <style lang="scss" scoped>
 .members {
+  .add-account {
+    text-align: center;
+    border-bottom: 1px solid var(--theme-border-color);
+
+    .add-button {
+      width: 100%;
+    }
+  }
 }
 </style>

src/renderer/components/TimelineSpace/Modals.vue

@@ -4,6 +4,7 @@
     <jump></jump>
     <image-viewer></image-viewer>
     <list-membership></list-membership>
+    <add-list-member></add-list-member>
   </div>
 </template>
 
@@ -12,6 +13,7 @@ import NewToot from './Modals/NewToot'
 import Jump from './Modals/Jump'
 import ImageViewer from './Modals/ImageViewer'
 import ListMembership from './Modals/ListMembership'
+import AddListMember from './Modals/AddListMember'
 
 export default {
   name: 'modals',
@@ -19,7 +21,8 @@ export default {
     NewToot,
     Jump,
     ImageViewer,
-    ListMembership
+    ListMembership,
+    AddListMember
   }
 }
 </script>

src/renderer/components/TimelineSpace/Modals/AddListMember.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-dialog
+    title="Add Member to List"
+    :visible.sync="addListMemberModal"
+    width="400px"
+    class="add-member">
+    <div class="search-account" :element-loading-background="loadingBackground">
+      <el-form :inline="true">
+        <input v-model="name" placeholder="Account name" class="account-name" v-shortkey="['enter']" @shortkey="search" autofocus></input>
+        <el-button type="text" class="search" @click="search">
+          <icon name="search"></icon>
+        </el-button>
+      </el-form>
+      <div class="search-results">
+        <template v-for="user in accounts">
+          <div class="user">
+            <div class="icon">
+              <img :src="user.avatar" />
+            </div>
+            <div class="name">
+              <div class="username">
+                {{ username(user) }}
+              </div>
+              <div class="acct">
+                @{{ user.acct }}
+              </div>
+            </div>
+            <div class="add">
+              <el-button type="text" @click="add(user)">
+                <icon name="plus"></icon>
+              </el-button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'add-list-member',
+  data () {
+    return {
+      name: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      loadingBackground: state => state.App.theme.wrapper_mask_color,
+      accounts: state => state.TimelineSpace.Modals.AddListMember.accounts
+    }),
+    addListMemberModal: {
+      get () {
+        return this.$store.state.TimelineSpace.Modals.AddListMember.modalOpen
+      },
+      set (value) {
+        this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', value)
+      }
+    }
+  },
+  methods: {
+    username (account) {
+      if (account.display_name !== '') {
+        return account.display_name
+      } else {
+        return account.username
+      }
+    },
+    search () {
+      this.$store.dispatch('TimelineSpace/Modals/AddListMember/search', this.name)
+    },
+    add (user) {
+      this.$store.dispatch('TimelineSpace/Modals/AddListMember/add', user)
+        .then(() => {
+          this.addListMemberModal = false
+        })
+        .catch(() => {
+          this.$message({
+            message: 'Failed to add user',
+            type: 'error'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-member /deep/ {
+  .el-dialog__header {
+    background-color: var(--theme-header-menu-color);
+
+    .el-dialog__title {
+      color: var(--theme-secondary-color);
+    }
+  }
+
+  .el-dialog__body {
+    background-color: var(--theme-selected-background-color);
+    color: var(--theme-secondary-color);
+    padding: 8px 12px 30px;
+  }
+
+  .search-account {
+    background-color: var(--theme-selected-background-color);
+
+    .account-name {
+      width: calc(100% - 32px);
+      background-color: var(--theme-background-color);
+      border: none;
+      border-radius: 0 4px 4px 0;
+      color: var(--theme-primary-color);
+      line-height: 40px;
+      height: 40px;
+      padding: 0 15px;
+      outline: 0;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+
+    .search {
+      box-sizing: border-box;
+      width: 24px;
+      margin-left: 4px;
+      color: var(--theme-secondary-color);
+    }
+
+    .search-results {
+      margin-top: 12px;
+      height: 200px;
+      overflow: auto;
+
+      .user {
+        display: flex;
+        box-sizing: border-box;
+        padding: 4px 12px 8px;
+        border-bottom: 1px solid var(--theme-border-color);
+        cursor: pointer;
+
+        .icon {
+          display: inline-block;
+
+          img {
+            width: 36px;
+            height: 36px;
+            border-radius: 4px;
+          }
+        }
+
+        .name {
+          display: inline-block;
+          padding-left: 8px;
+
+          .acct {
+            color: #909399;
+          }
+
+          div {
+            width: auto;
+            word-wrap: break-word;
+          }
+        }
+
+        .add {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Modals.js

@@ -2,6 +2,7 @@ import NewToot from './Modals/NewToot'
 import ImageViewer from './Modals/ImageViewer'
 import Jump from './Modals/Jump'
 import ListMembership from './Modals/ListMembership'
+import AddListMember from './Modals/AddListMember'
 
 const Modals = {
   namespaced: true,
@@ -9,7 +10,8 @@ const Modals = {
     ImageViewer,
     NewToot,
     Jump,
-    ListMembership
+    ListMembership,
+    AddListMember
   }
 }
 

src/renderer/store/TimelineSpace/Modals/AddListMember.js

@@ -0,0 +1,49 @@
+import Mastodon from 'megalodon'
+
+export default {
+  namespaced: true,
+  state: {
+    modalOpen: false,
+    accounts: [],
+    targetListId: null
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    },
+    updateAccounts (state, accounts) {
+      state.accounts = accounts
+    },
+    setListId (state, id) {
+      state.targetListId = id
+    }
+  },
+  actions: {
+    changeModal ({ commit }, value) {
+      commit('changeModal', value)
+    },
+    search ({ commit, rootState }, name) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get('/accounts/search', {
+        q: name,
+        following: true
+      })
+        .then(data => {
+          commit('updateAccounts', data)
+          return data
+        })
+    },
+    add ({ state, rootState }, account) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.post(`/lists/${state.targetListId}/accounts`, {
+        account_ids: [account.id]
+      })
+    }
+  }
+}