<template> <ui-card> <div slot="title"><fa :icon="['far', 'bell']"/> {{ $t('notification') }}</div> <section> <ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch"> {{ $t('auto-watch') }}<span slot="desc">{{ $t('auto-watch-desc') }}</span> </ui-switch> <section> <ui-button @click="readAllNotifications">{{ $t('mark-as-read-all-notifications') }}</ui-button> <ui-button @click="readAllUnreadNotes">{{ $t('mark-as-read-all-unread-notes') }}</ui-button> <ui-button @click="readAllMessagingMessages">{{ $t('mark-as-read-all-talk-messages') }}</ui-button> </section> </section> </ui-card> </template> <script lang="ts"> import Vue from 'vue'; import i18n from '../../../i18n'; export default Vue.extend({ i18n: i18n('common/views/components/notification-settings.vue'), methods: { onChangeAutoWatch(v) { this.$root.api('i/update', { autoWatch: v }); }, readAllUnreadNotes() { this.$root.api('i/read_all_unread_notes'); }, readAllMessagingMessages() { this.$root.api('i/read_all_messaging_messages'); }, readAllNotifications() { this.$root.api('notifications/mark_all_as_read'); } } }); </script>