106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
|
<el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" custom-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 lang="ts">
|
|
import { defineComponent, ref, computed, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useI18next } from 'vue3-i18next'
|
|
import { useStore } from '@/store'
|
|
import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ListMembership'
|
|
|
|
export default defineComponent({
|
|
name: 'list-membership',
|
|
setup() {
|
|
const space = 'TimelineSpace/Modals/ListMembership'
|
|
const loading = ref<boolean>(false)
|
|
const store = useStore()
|
|
const i18n = useI18next()
|
|
|
|
const account = computed(() => store.state.TimelineSpace.Modals.ListMembership.account)
|
|
const lists = computed(() => store.state.TimelineSpace.Modals.ListMembership.lists)
|
|
const listMembershipModal = computed({
|
|
get: () => store.state.TimelineSpace.Modals.ListMembership.modalOpen,
|
|
set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
|
|
})
|
|
const belongToLists = computed({
|
|
get: () => store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id),
|
|
set: (value: Array<string>) => {
|
|
loading.value = true
|
|
store
|
|
.dispatch(`${space}/${ACTION_TYPES.CHANGE_BELONG_TO_LISTS}`, value)
|
|
.catch(() => {
|
|
ElMessage({
|
|
message: i18n.t('message.update_list_memberships_error'),
|
|
type: 'error'
|
|
})
|
|
})
|
|
.finally(() => (loading.value = false))
|
|
}
|
|
})
|
|
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
try {
|
|
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST_MEMBERSHIP}`, account.value)
|
|
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`)
|
|
} catch (err) {
|
|
ElMessage({
|
|
message: i18n.t('message.lists_fetch_error'),
|
|
type: 'error'
|
|
})
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
return {
|
|
loading,
|
|
lists,
|
|
listMembershipModal,
|
|
belongToLists
|
|
}
|
|
}
|
|
})
|
|
</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>
|