From bacb6c8fb38310a44e583e87b621cec4b61a7a79 Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Thu, 16 Jun 2022 01:52:24 +0300 Subject: [PATCH] Add list creation functionality --- src/components/list_new/list_new.js | 97 ++++++++++++++++++++++++++ src/components/list_new/list_new.vue | 100 +++++++++++++++++++++++++++ src/components/lists/lists.js | 17 ++++- src/components/lists/lists.vue | 14 +++- src/i18n/en.json | 6 +- src/services/api/api.service.js | 27 ++++++++ 6 files changed, 258 insertions(+), 3 deletions(-) create mode 100644 src/components/list_new/list_new.js create mode 100644 src/components/list_new/list_new.vue diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js new file mode 100644 index 00000000..7ac7e0f0 --- /dev/null +++ b/src/components/list_new/list_new.js @@ -0,0 +1,97 @@ +import { mapState, mapGetters } from 'vuex' +import BasicUserCard from '../basic_user_card/basic_user_card.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 ListNew = { + components: { + BasicUserCard, + UserAvatar + }, + data () { + return { + title: '', + suggestions: [], + userIds: [], + selectedUserIds: [], + loading: false, + query: '' + } + }, + computed: { + users () { + return this.userIds.map(userId => this.findUser(userId)) + }, + availableUsers () { + if (this.query.length !== 0) { + return this.users + } else { + return this.suggestions + } + }, + ...mapState({ + currentUser: state => state.users.currentUser, + backendInteractor: state => state.api.backendInteractor + }), + ...mapGetters(['findUser']) + }, + methods: { + goBack () { + this.$emit('cancel') + }, + onInput () { + this.search(this.query) + }, + selectUser (user, event) { + if (this.selectedUserIds.includes(user.id)) { + this.removeUser(user.id) + event.target.classList.remove('selected') + } else { + this.addUser(user) + event.target.classList.add('selected') + } + }, + addUser (user) { + this.selectedUserIds.push(user.id) + }, + removeUser (userId) { + this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) + }, + search (query) { + if (!query) { + this.loading = false + return + } + + this.loading = true + this.userIds = [] + this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: true }) + .then(data => { + this.loading = false + this.userIds = data.accounts.map(a => a.id) + }) + }, + createList () { + // the API has two different endpoints for "creating a list with a name" + // and "updating the accounts on the list". + this.$store.state.api.backendInteractor.createList({ title: this.title }) + .then((data) => { + this.$store.state.api.backendInteractor.addAccountsToList({ + id: data.id, accountIds: this.selectedUserIds + }) + this.$router.push({ name: 'list-timeline', params: { id: data.id } }) + }) + } + } +} + +export default ListNew diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue new file mode 100644 index 00000000..952f7732 --- /dev/null +++ b/src/components/list_new/list_new.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js index bb67fafb..f511f0f5 100644 --- a/src/components/lists/lists.js +++ b/src/components/lists/lists.js @@ -1,8 +1,15 @@ import ListCard from '../list_card/list_card.vue' +import ListNew from '../list_new/list_new.vue' const Lists = { + data () { + return { + isNew: false + } + }, components: { - ListCard + ListCard, + ListNew }, created () { this.$store.dispatch('startFetchingLists') @@ -11,6 +18,14 @@ const Lists = { lists () { return this.$store.state.api.lists } + }, + methods: { + cancelNewList () { + this.isNew = false + }, + newList () { + this.isNew = true + } } } diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue index 20dd46d8..f11a2a02 100644 --- a/src/components/lists/lists.vue +++ b/src/components/lists/lists.vue @@ -1,9 +1,21 @@