2018-06-15 18:08:34 +02:00
|
|
|
<template>
|
2022-04-27 12:53:52 +02:00
|
|
|
<el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
|
2018-06-15 18:08:34 +02:00
|
|
|
<el-checkbox-group v-model="belongToLists" v-loading="loading">
|
|
|
|
<table class="lists">
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="list in lists" :key="list.id">
|
|
|
|
<td>
|
|
|
|
<el-checkbox :label="list.id">{{ list.title }}</el-checkbox>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</el-checkbox-group>
|
|
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { mapState } from 'vuex'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'list-membership',
|
2020-07-30 16:42:53 +02:00
|
|
|
data() {
|
2018-06-15 18:08:34 +02:00
|
|
|
return {
|
2022-04-19 12:18:29 +02:00
|
|
|
loading: false
|
2018-06-15 18:08:34 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
2022-04-19 12:18:29 +02:00
|
|
|
account: state => state.TimelineSpace.Modals.ListMembership.account,
|
|
|
|
lists: state => state.TimelineSpace.Modals.ListMembership.lists
|
2018-06-15 18:08:34 +02:00
|
|
|
}),
|
|
|
|
listMembershipModal: {
|
2020-07-30 16:42:53 +02:00
|
|
|
get() {
|
2018-06-15 18:08:34 +02:00
|
|
|
return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
|
|
|
|
},
|
2020-07-30 16:42:53 +02:00
|
|
|
set(value) {
|
2022-04-19 12:18:29 +02:00
|
|
|
this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
|
|
|
|
}
|
2018-06-15 18:08:34 +02:00
|
|
|
},
|
|
|
|
belongToLists: {
|
2020-07-30 16:42:53 +02:00
|
|
|
get() {
|
2022-04-19 12:18:29 +02:00
|
|
|
return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id)
|
2018-06-15 18:08:34 +02:00
|
|
|
},
|
2020-07-30 16:42:53 +02:00
|
|
|
set(value) {
|
|
|
|
this.loading = true
|
|
|
|
return this.$store
|
2022-04-19 12:18:29 +02:00
|
|
|
.dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
|
2018-06-15 18:08:34 +02:00
|
|
|
.catch(() => {
|
|
|
|
this.$message({
|
2018-08-13 08:27:53 +02:00
|
|
|
message: this.$t('message.update_list_memberships_error'),
|
2022-04-19 12:18:29 +02:00
|
|
|
type: 'error'
|
2018-06-15 18:08:34 +02:00
|
|
|
})
|
|
|
|
})
|
2020-07-30 16:42:53 +02:00
|
|
|
.finally(() => (this.loading = false))
|
2022-04-19 12:18:29 +02:00
|
|
|
}
|
|
|
|
}
|
2018-06-15 18:08:34 +02:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
listMembershipModal: function (newState, oldState) {
|
|
|
|
if (!oldState && newState) {
|
|
|
|
this.init()
|
|
|
|
}
|
2022-04-19 12:18:29 +02:00
|
|
|
}
|
2018-06-15 18:08:34 +02:00
|
|
|
},
|
|
|
|
methods: {
|
2020-07-30 16:42:53 +02:00
|
|
|
async init() {
|
2018-06-15 18:08:34 +02:00
|
|
|
this.loading = true
|
|
|
|
try {
|
2022-04-19 12:18:29 +02:00
|
|
|
await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)
|
|
|
|
await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchLists')
|
2018-06-15 18:08:34 +02:00
|
|
|
} catch (err) {
|
|
|
|
this.$message({
|
2018-08-13 08:27:53 +02:00
|
|
|
message: this.$t('message.lists_fetch_error'),
|
2022-04-19 12:18:29 +02:00
|
|
|
type: 'error'
|
2018-06-15 18:08:34 +02:00
|
|
|
})
|
|
|
|
} finally {
|
|
|
|
this.loading = false
|
|
|
|
}
|
2022-04-19 12:18:29 +02:00
|
|
|
}
|
|
|
|
}
|
2018-06-15 18:08:34 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.lists {
|
|
|
|
text-align: left;
|
|
|
|
border-collapse: collapse;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
tr {
|
|
|
|
border-bottom: solid 1px #ebeef5;
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
border-top: solid 1px #ebeef5;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:nth-child(even) {
|
|
|
|
background-color: #fafafa;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: #f2f6fc;
|
|
|
|
}
|
|
|
|
|
|
|
|
td {
|
|
|
|
padding: 4px 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|