113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
|
<template>
|
||
|
<el-dialog
|
||
|
title="List Memberships"
|
||
|
:visible.sync="listMembershipModal"
|
||
|
width="400px"
|
||
|
class="list-membership-modal"
|
||
|
>
|
||
|
<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',
|
||
|
data () {
|
||
|
return {
|
||
|
loading: false
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
...mapState({
|
||
|
account: state => state.TimelineSpace.Modals.ListMembership.account,
|
||
|
lists: state => state.TimelineSpace.Modals.ListMembership.lists
|
||
|
}),
|
||
|
listMembershipModal: {
|
||
|
get () {
|
||
|
return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
|
||
|
},
|
||
|
set (value) {
|
||
|
this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
|
||
|
}
|
||
|
},
|
||
|
belongToLists: {
|
||
|
get () {
|
||
|
return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists
|
||
|
},
|
||
|
set (value) {
|
||
|
return this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
|
||
|
.catch(() => {
|
||
|
this.$message({
|
||
|
message: 'Failed to update list memberships',
|
||
|
type: 'error'
|
||
|
})
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
listMembershipModal: function (newState, oldState) {
|
||
|
if (!oldState && newState) {
|
||
|
this.init()
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
async init () {
|
||
|
this.loading = true
|
||
|
try {
|
||
|
await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)
|
||
|
await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchLists')
|
||
|
} catch (err) {
|
||
|
this.$message({
|
||
|
message: 'Failed to fetch list',
|
||
|
type: 'error'
|
||
|
})
|
||
|
} finally {
|
||
|
this.loading = false
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</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>
|