Lists implementation

src/components/lists_edit/lists_edit.js

@@ -0,0 +1,91 @@
+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 UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListsNew = {
+  components: {
+    BasicUserCard,
+    UserAvatar,
+    ListsUserSearch
+  },
+  data () {
+    return {
+      title: '',
+      userIds: [],
+      selectedUserIds: []
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchList', { id: this.id })
+      .then(() => { this.title = this.findListTitle(this.id) })
+    this.$store.dispatch('fetchListAccounts', { id: this.id })
+      .then(() => {
+        this.selectedUserIds = this.findListAccounts(this.id)
+        this.selectedUserIds.forEach(userId => {
+          this.$store.dispatch('fetchUserIfMissing', userId)
+        })
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    },
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    selectedUsers () {
+      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
+  },
+  methods: {
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+      } else {
+        this.addUser(user)
+      }
+    },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    onResults (results) {
+      this.userIds = results
+    },
+    updateList () {
+      this.$store.dispatch('setList', { id: this.id, title: this.title })
+      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+
+      this.$router.push({ name: 'list-timeline', params: { id: this.id } })
+    },
+    deleteList () {
+      this.$store.dispatch('deleteList', { id: this.id })
+      this.$router.push({ name: 'lists' })
+    }
+  }
+}
+
+export default ListsNew

src/components/lists_edit/lists_edit.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="panel-default panel list-edit">
+    <div
+      ref="header"
+      class="panel-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+    </div>
+    <div class="input-wrap">
+      <input
+        ref="title"
+        v-model="title"
+        :placeholder="$t('lists.title')"
+      >
+    </div>
+    <div class="member-list">
+      <div
+        v-for="user in selectedUsers"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <ListsUserSearch @results="onResults" />
+    <div class="member-list">
+      <div
+        v-for="user in users"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <button
+      :disabled="title && title.length === 0"
+      class="btn button-default"
+      @click="updateList"
+    >
+      {{ $t('lists.save') }}
+    </button>
+    <button
+      class="btn button-default"
+      @click="deleteList"
+    >
+      {{ $t('lists.delete') }}
+    </button>
+  </div>
+</template>
+
+<script src="./lists_edit.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-edit {
+  .input-wrap {
+    display: flex;
+    margin: 0.7em 0.5em 0.7em 0.5em;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .search-icon {
+    margin-right: 0.3em;
+  }
+
+  .member-list {
+    padding-bottom: 0.7rem;
+  }
+
+  .basic-user-card:hover,
+  .basic-user-card.selected {
+    cursor: pointer;
+    background-color: var(--selectedPost, $fallback--lightBg);
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0.5em;
+  }
+}
+</style>