List edit UI overhaul

1 files changed, 57 insertions, 23 deletions

diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
index e4d0c22a..b1516af0 100644
--- a/src/components/lists_edit/lists_edit.js
+++ b/src/components/lists_edit/lists_edit.js
@@ -1,7 +1,9 @@
 import { mapState, mapGetters } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSearch,
@@ -17,22 +19,32 @@ const ListsNew = {
   components: {
     BasicUserCard,
     UserAvatar,
-    ListsUserSearch
+    ListsUserSearch,
+    TabSwitcher,
+    PanelLoading
   },
   data () {
     return {
       title: '',
-      userIds: [],
-      selectedUserIds: []
+      titleDraft: '',
+      membersUserIds: [],
+      removedUserIds: new Set([]), // users we added for members, to undo
+      searchUserIds: [],
+      addedUserIds: new Set([]), // users we added from search, to undo
+      searchLoading: false,
+      reallyDelete: false
     }
   },
   created () {
     this.$store.dispatch('fetchList', { listId: this.id })
-      .then(() => { this.title = this.findListTitle(this.id) })
+      .then(() => {
+        this.title = this.findListTitle(this.id)
+        this.titleDraft = this.title
+      })
     this.$store.dispatch('fetchListAccounts', { listId: this.id })
       .then(() => {
-        this.selectedUserIds = this.findListAccounts(this.id)
-        this.selectedUserIds.forEach(userId => {
+        this.membersUserIds = this.findListAccounts(this.id)
+        this.membersUserIds.forEach(userId => {
           this.$store.dispatch('fetchUserIfMissing', userId)
         })
       })
@@ -41,11 +53,12 @@ const ListsNew = {
     id () {
       return this.$route.params.id
     },
-    users () {
-      return this.userIds.map(userId => this.findUser(userId))
+    membersUsers () {
+      return [...this.membersUserIds, ...this.addedUserIds]
+        .map(userId => this.findUser(userId)).filter(user => user)
     },
-    selectedUsers () {
-      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
+    searchUsers () {
+      return this.searchUserIds.map(userId => this.findUser(userId)).filter(user => user)
     },
     ...mapState({
       currentUser: state => state.users.currentUser
@@ -56,30 +69,51 @@ const ListsNew = {
     onInput () {
       this.search(this.query)
     },
-    selectUser (user) {
-      if (this.selectedUserIds.includes(user.id)) {
+    toggleRemoveMember (user) {
+      if (this.removedUserIds.has(user.id)) {
+        this.addUser(user)
+        this.removedUserIds.delete(user.id)
+      } else {
+        this.removeUser(user.id)
+        this.removedUserIds.add(user.id)
+      }
+    },
+    toggleAddFromSearch (user) {
+      if (this.addedUserIds.has(user.id)) {
         this.removeUser(user.id)
+        this.addedUserIds.delete(user.id)
       } else {
         this.addUser(user)
+        this.addedUserIds.add(user.id)
       }
     },
-    isSelected (user) {
-      return this.selectedUserIds.includes(user.id)
+    isRemoved (user) {
+      return this.removedUserIds.has(user.id)
+    },
+    isAdded (user) {
+      return this.addedUserIds.has(user.id)
     },
     addUser (user) {
-      this.selectedUserIds.push(user.id)
+      // this.selectedUserIds.push(user.id)
     },
     removeUser (userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+      // this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
     },
-    onResults (results) {
-      this.userIds = results
+    onSearchLoading (results) {
+      this.searchLoading = true
     },
-    updateList () {
-      this.$store.dispatch('setList', { listId: this.id, title: this.title })
-      this.$store.dispatch('setListAccounts', { listId: this.id, accountIds: this.selectedUserIds })
-
-      this.$router.push({ name: 'lists-timeline', params: { id: this.id } })
+    onSearchLoadingDone (results) {
+      this.searchLoading = false
+    },
+    onSearchResults (results) {
+      this.searchLoading = false
+      this.searchUserIds = results
+    },
+    updateListTitle () {
+      this.$store.dispatch('setList', { listId: this.id, title: this.titleDraft })
+        .then(() => {
+          this.title = this.findListTitle(this.id)
+        })
     },
     deleteList () {
       this.$store.dispatch('deleteList', { listId: this.id })