refs #3301 Rewrite Settings/Timeline with composition API
This commit is contained in:
parent
8553757657
commit
13b6f3611f
|
@ -8,13 +8,13 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<el-form-item for="direct" :label="$t('settings.timeline.unread_notification.direct')">
|
<el-form-item for="direct" :label="$t('settings.timeline.unread_notification.direct')">
|
||||||
<el-switch v-model="direct" id="direct" />
|
<el-switch v-model="directNotify" id="direct" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item for="local" :label="$t('settings.timeline.unread_notification.local')">
|
<el-form-item for="local" :label="$t('settings.timeline.unread_notification.local')">
|
||||||
<el-switch v-model="local" id="local" />
|
<el-switch v-model="localNotify" id="local" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item for="public" :label="$t('settings.timeline.unread_notification.public')">
|
<el-form-item for="public" :label="$t('settings.timeline.unread_notification.public')">
|
||||||
<el-switch v-model="public" id="public" />
|
<el-switch v-model="publicNotify" id="public" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
|
@ -33,75 +33,74 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import { defineComponent, computed, onMounted } from 'vue'
|
||||||
|
import { useStore } from '@/store'
|
||||||
|
import { ACTION_TYPES } from '@/store/Settings/Timeline'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
name: 'Timeline',
|
name: 'Timeline',
|
||||||
computed: {
|
setup() {
|
||||||
direct: {
|
const space = 'Settings/Timeline'
|
||||||
get() {
|
const store = useStore()
|
||||||
return this.$store.state.Settings.Timeline.setting.unreadNotification.direct
|
|
||||||
},
|
const directNotify = computed({
|
||||||
set(value) {
|
get: () => store.state.Settings.Timeline.setting.unreadNotification.direct,
|
||||||
this.$store.dispatch('Settings/Timeline/changeUnreadNotification', {
|
set: value =>
|
||||||
|
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION}`, {
|
||||||
direct: value
|
direct: value
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
},
|
const localNotify = computed({
|
||||||
local: {
|
get: () => store.state.Settings.Timeline.setting.unreadNotification.local,
|
||||||
get() {
|
set: value =>
|
||||||
return this.$store.state.Settings.Timeline.setting.unreadNotification.local
|
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION}`, {
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('Settings/Timeline/changeUnreadNotification', {
|
|
||||||
local: value
|
local: value
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
},
|
const publicNotify = computed({
|
||||||
public: {
|
get: () => store.state.Settings.Timeline.setting.unreadNotification.public,
|
||||||
get() {
|
set: value =>
|
||||||
return this.$store.state.Settings.Timeline.setting.unreadNotification.public
|
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION}`, {
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('Settings/Timeline/changeUnreadNotification', {
|
|
||||||
public: value
|
public: value
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
},
|
const marker_home = computed({
|
||||||
marker_home: {
|
get: () => store.state.Settings.Timeline.setting.useMarker.home,
|
||||||
get() {
|
set: value =>
|
||||||
return this.$store.state.Settings.Timeline.setting.useMarker.home
|
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_USER_MARKER}`, {
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('Settings/Timeline/changeUseMarker', {
|
|
||||||
home: value
|
home: value
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
},
|
const marker_notifications = computed({
|
||||||
marker_notifications: {
|
get: () => store.state.Settings.Timeline.setting.useMarker.notifications,
|
||||||
get() {
|
set: value =>
|
||||||
return this.$store.state.Settings.Timeline.setting.useMarker.notifications
|
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_USER_MARKER}`, {
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('Settings/Timeline/changeUseMarker', {
|
|
||||||
notifications: value
|
notifications: value
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
},
|
const marker_mentions = computed({
|
||||||
marker_mentions: {
|
get: () => store.state.Settings.Timeline.setting.useMarker.mentions,
|
||||||
get() {
|
set: value =>
|
||||||
return this.$store.state.Settings.Timeline.setting.useMarker.mentions
|
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_USER_MARKER}`, {
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('Settings/Timeline/changeUseMarker', {
|
|
||||||
mentions: value
|
mentions: value
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
store.dispatch(`${space}/${ACTION_TYPES.LOAD_TIMELINE_SETTING}`)
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
directNotify,
|
||||||
|
localNotify,
|
||||||
|
publicNotify,
|
||||||
|
marker_home,
|
||||||
|
marker_notifications,
|
||||||
|
marker_mentions
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
async created() {
|
|
||||||
await this.$store.dispatch('Settings/Timeline/loadTimelineSetting')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -25,13 +25,19 @@ const mutations: MutationTree<TimelineState> = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ACTION_TYPES = {
|
||||||
|
LOAD_TIMELINE_SETTING: 'loadTimelineSetting',
|
||||||
|
CHANGE_UNREAD_NOTIFICATION: 'changeUnreadNotification',
|
||||||
|
CHANGE_USER_MARKER: 'changeUserMarker'
|
||||||
|
}
|
||||||
|
|
||||||
const actions: ActionTree<TimelineState, RootState> = {
|
const actions: ActionTree<TimelineState, RootState> = {
|
||||||
loadTimelineSetting: async ({ commit, rootState }): Promise<boolean> => {
|
[ACTION_TYPES.LOAD_TIMELINE_SETTING]: async ({ commit, rootState }): Promise<boolean> => {
|
||||||
const setting: Setting = await win.ipcRenderer.invoke('get-account-setting', rootState.Settings.accountID)
|
const setting: Setting = await win.ipcRenderer.invoke('get-account-setting', rootState.Settings.accountID)
|
||||||
commit(MUTATION_TYPES.UPDATE_TIMELINE_SETTING, setting.timeline)
|
commit(MUTATION_TYPES.UPDATE_TIMELINE_SETTING, setting.timeline)
|
||||||
return true
|
return true
|
||||||
},
|
},
|
||||||
changeUnreadNotification: async ({ dispatch, state, rootState }, timeline: { key: boolean }): Promise<boolean> => {
|
[ACTION_TYPES.CHANGE_UNREAD_NOTIFICATION]: async ({ dispatch, state, rootState }, timeline: { key: boolean }): Promise<boolean> => {
|
||||||
const unread: UnreadNotification = Object.assign({}, state.setting.unreadNotification, timeline)
|
const unread: UnreadNotification = Object.assign({}, state.setting.unreadNotification, timeline)
|
||||||
const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
|
const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
|
||||||
unreadNotification: unread
|
unreadNotification: unread
|
||||||
|
@ -44,7 +50,7 @@ const actions: ActionTree<TimelineState, RootState> = {
|
||||||
dispatch('loadTimelineSetting')
|
dispatch('loadTimelineSetting')
|
||||||
return true
|
return true
|
||||||
},
|
},
|
||||||
changeUseMarker: async ({ dispatch, state, rootState }, timeline: { key: boolean }) => {
|
[ACTION_TYPES.CHANGE_USER_MARKER]: async ({ dispatch, state, rootState }, timeline: { key: boolean }) => {
|
||||||
const marker: UseMarker = Object.assign({}, state.setting.useMarker, timeline)
|
const marker: UseMarker = Object.assign({}, state.setting.useMarker, timeline)
|
||||||
const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
|
const tl: TimelineSetting = Object.assign({}, toRaw(state.setting), {
|
||||||
useMarker: marker
|
useMarker: marker
|
||||||
|
|
Loading…
Reference in New Issue