chore: cleanup notification item
This commit is contained in:
Muhsin Keloth
+206
-45
@@ -1,41 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="profile-settings-notifications" class="flex flex-col gap-6">
|
||||
<form-select
|
||||
name="timezone"
|
||||
v-model="alertTone"
|
||||
name="alertTone"
|
||||
spacing="compact"
|
||||
label="Alert tone"
|
||||
placeholder="Ding"
|
||||
:value="alertTone"
|
||||
:options="alertTones"
|
||||
:label="
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
|
||||
)
|
||||
"
|
||||
class="max-w-xl"
|
||||
@input="handleAudioToneChange"
|
||||
>
|
||||
<option v-for="file in audioFiles" :key="file.label" :value="file.value">
|
||||
{{ file.label }}
|
||||
<option
|
||||
v-for="tone in alertTones"
|
||||
:key="tone.label"
|
||||
:value="tone.value"
|
||||
:selected="tone.value === alertTone"
|
||||
>
|
||||
{{ tone.label }}
|
||||
</option>
|
||||
</form-select>
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
|
||||
>
|
||||
Alert events for conversations
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
<div
|
||||
class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-slate-75 dark:border-slate-600"
|
||||
class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
|
||||
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
|
||||
>
|
||||
<input type="radio" name="hotkey" value="enter" checked />
|
||||
<label>None</label>
|
||||
<input
|
||||
id="audio_enable_alert_none"
|
||||
v-model="enableAudioAlerts"
|
||||
class="accent-primary-600"
|
||||
type="radio"
|
||||
value="none"
|
||||
@input="handleAudioInput"
|
||||
/>
|
||||
<label
|
||||
class="text-sm font-medium text-ash-900"
|
||||
:class="{ 'text-ash-400': enableAudioAlerts !== 'none' }"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.NONE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
|
||||
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
|
||||
>
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>Assigned</label>
|
||||
<input
|
||||
id="audio_enable_alert_mine"
|
||||
v-model="enableAudioAlerts"
|
||||
class="accent-primary-600"
|
||||
type="radio"
|
||||
value="mine"
|
||||
@input="handleAudioInput"
|
||||
/>
|
||||
<label
|
||||
class="text-sm font-medium text-ash-900"
|
||||
:class="{ 'text-ash-400': enableAudioAlerts !== 'mine' }"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ASSIGNED'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-center gap-1 grow">
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>All</label>
|
||||
<div class="flex flex-row items-center justify-center gap-2 px-4 grow">
|
||||
<input
|
||||
id="audio_enable_alert_all"
|
||||
v-model="enableAudioAlerts"
|
||||
class="accent-primary-600"
|
||||
type="radio"
|
||||
value="all"
|
||||
@input="handleAudioInput"
|
||||
/>
|
||||
<label
|
||||
class="text-sm font-medium text-ash-900"
|
||||
:class="{ 'text-ash-400': enableAudioAlerts !== 'all' }"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ALL_CONVERSATIONS'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,37 +107,134 @@
|
||||
<label
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
||||
>
|
||||
Alert conditions
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="send"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
<label>
|
||||
Send audio alerts only if the browser window is not active
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="send"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
<label>
|
||||
Send alerts every 30s until all the assigned conversations are read
|
||||
</label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-row items-start gap-2">
|
||||
<input
|
||||
id="audio_alert_when_tab_is_inactive"
|
||||
v-model="playAudioWhenTabIsInactive"
|
||||
type="checkbox"
|
||||
value="tab_is_inactive"
|
||||
class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handleAudioAlertConditions"
|
||||
/>
|
||||
<label class="text-sm font-normal text-ash-900">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-start gap-2">
|
||||
<input
|
||||
v-model="alertIfUnreadConversationExist"
|
||||
class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
type="checkbox"
|
||||
value="conversations_are_read"
|
||||
@input="handleAudioAlertConditions"
|
||||
/>
|
||||
<label class="text-sm font-normal text-ash-900">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import configMixin from 'shared/mixins/configMixin';
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
import FormSelect from 'v3/components/Form/Select.vue';
|
||||
const audioFiles = [
|
||||
{ label: 'Ding', value: 'ding' },
|
||||
{ label: 'Dong', value: 'dong' },
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormSelect,
|
||||
},
|
||||
mixins: [alertMixin, configMixin, uiSettingsMixin],
|
||||
data() {
|
||||
return {
|
||||
enableAudioAlerts: false,
|
||||
playAudioWhenTabIsInactive: false,
|
||||
alertIfUnreadConversationExist: false,
|
||||
alertTone: 'ding',
|
||||
alertTones: [
|
||||
{
|
||||
value: 'ding',
|
||||
label: 'Ding',
|
||||
},
|
||||
{
|
||||
value: 'bell',
|
||||
label: 'Bell',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
accountId: 'getCurrentAccountId',
|
||||
uiSettings: 'getUISettings',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
uiSettings(value) {
|
||||
this.notificationUISettings(value);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.notificationUISettings(this.uiSettings);
|
||||
this.$store.dispatch('userNotificationSettings/get');
|
||||
},
|
||||
methods: {
|
||||
notificationUISettings(uiSettings) {
|
||||
const {
|
||||
enable_audio_alerts: enableAudio = false,
|
||||
always_play_audio_alert: alwaysPlayAudioAlert,
|
||||
alert_if_unread_assigned_conversation_exist:
|
||||
alertIfUnreadConversationExist,
|
||||
notification_tone: alertTone,
|
||||
} = uiSettings;
|
||||
this.enableAudioAlerts = enableAudio;
|
||||
this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
|
||||
this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
|
||||
this.alertTone = alertTone || 'ding';
|
||||
},
|
||||
handleAudioInput(e) {
|
||||
this.enableAudioAlerts = e.target.value;
|
||||
this.updateUISettings({
|
||||
enable_audio_alerts: this.enableAudioAlerts,
|
||||
});
|
||||
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
|
||||
},
|
||||
handleAudioAlertConditions(e) {
|
||||
let condition = e.target.value;
|
||||
if (condition === 'tab_is_inactive') {
|
||||
this.updateUISettings({
|
||||
always_play_audio_alert: !e.target.checked,
|
||||
});
|
||||
} else if (condition === 'conversations_are_read') {
|
||||
this.updateUISettings({
|
||||
alert_if_unread_assigned_conversation_exist: e.target.checked,
|
||||
});
|
||||
}
|
||||
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
|
||||
},
|
||||
handleAudioToneChange(value) {
|
||||
this.updateUISettings({ notification_tone: value });
|
||||
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
:show-action-button="false"
|
||||
>
|
||||
<template #settingsItem>
|
||||
<notification-settings />
|
||||
<audio-notifications />
|
||||
</template>
|
||||
</profile-wrapper>
|
||||
<profile-wrapper
|
||||
@@ -115,8 +115,8 @@ import alertMixin from 'shared/mixins/alertMixin';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { clearCookiesOnLogout } from '../../../../store/utils/api';
|
||||
import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
|
||||
import NotificationSettings from './NotificationSettings.vue';
|
||||
import NotificationPreferences from './NotificationPreferences.vue';
|
||||
import AudioNotifications from './AudioNotifications.vue';
|
||||
import UserProfilePicture from './UserProfilePicture.vue';
|
||||
import UserBasicDetails from './UserBasicDetails.vue';
|
||||
|
||||
@@ -126,11 +126,11 @@ export default {
|
||||
ProfileWrapper,
|
||||
HotKeyCard,
|
||||
ChangePassword,
|
||||
NotificationSettings,
|
||||
AccessToken,
|
||||
NotificationPreferences,
|
||||
UserProfilePicture,
|
||||
UserBasicDetails,
|
||||
AudioNotifications,
|
||||
},
|
||||
mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
|
||||
data() {
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center gap-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
:class="`col-span-${span}`"
|
||||
>
|
||||
<input
|
||||
v-model="localFlags"
|
||||
class="m-0 border-[1.5px] checked:bg-primary-600 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
type="checkbox"
|
||||
:value="localValue"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
span: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
selectedEmailFlags: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['input']);
|
||||
|
||||
const localValue = ref(props.value);
|
||||
const localFlags = computed(() => props.selectedEmailFlags);
|
||||
|
||||
const handleInput = e => {
|
||||
emit('input', e);
|
||||
};
|
||||
</script>
|
||||
+90
-198
@@ -37,27 +37,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
class="m-0 border-[1.5px] checked:bg-primary-600 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
type="checkbox"
|
||||
value="email_conversation_creation"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
value="email_conversation_creation"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_conversation_creation'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
@@ -73,28 +63,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
type="checkbox"
|
||||
value="email_conversation_assignment"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_conversation_creation"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_conversation_assignment'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_conversation_assignment'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
@@ -110,28 +89,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
type="checkbox"
|
||||
value="email_conversation_mention"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_conversation_mention"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_conversation_mention'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_conversation_mention'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
@@ -147,28 +115,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
type="checkbox"
|
||||
value="email_conversation_message"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_assigned_conversation_new_message"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_assigned_conversation_new_message'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_assigned_conversation_new_message'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
@@ -184,28 +141,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
type="checkbox"
|
||||
value="email_participating_conversation_new_message"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_participating_conversation_new_message"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_participating_conversation_new_message'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_participating_conversation_new_message'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="isSLAEnabled"
|
||||
@@ -222,27 +168,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
type="checkbox"
|
||||
value="email_sla_missed_first_response"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_sla_missed_first_response"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_sla_missed_first_response'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_sla_missed_first_response'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="isSLAEnabled"
|
||||
@@ -259,27 +195,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
type="checkbox"
|
||||
value="email_sla_missed_next_response"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_sla_missed_next_response"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_sla_missed_next_response'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_sla_missed_next_response'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="isSLAEnabled"
|
||||
@@ -296,27 +222,17 @@
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
type="checkbox"
|
||||
value="email_sla_missed_resolution"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
type="checkbox"
|
||||
value="push_sla_missed_resolution"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
<notification-item
|
||||
:value="'email_sla_missed_resolution'"
|
||||
:selected-email-flags="selectedEmailFlags"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<notification-item
|
||||
:value="'push_sla_missed_resolution'"
|
||||
:span="4"
|
||||
:selected-email-flags="selectedPushFlags"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -335,11 +251,13 @@ import {
|
||||
} from '../../../../helper/pushHelper';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
import V3Switch from 'v3/components/Form/Switch.vue';
|
||||
import NotificationItem from './NotificationItem.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TableHeaderCell,
|
||||
V3Switch,
|
||||
NotificationItem,
|
||||
},
|
||||
mixins: [alertMixin, configMixin, uiSettingsMixin],
|
||||
data() {
|
||||
@@ -449,7 +367,6 @@ export default {
|
||||
this.selectedEmailFlags,
|
||||
e.target.value
|
||||
);
|
||||
|
||||
this.updateNotificationSettings();
|
||||
},
|
||||
handlePushInput(e) {
|
||||
@@ -494,28 +411,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~dashboard/assets/scss/variables.scss';
|
||||
|
||||
.notification--checkbox {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
.push-notification--button {
|
||||
margin-bottom: var(--space-one);
|
||||
}
|
||||
|
||||
.notification-label {
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--space-small);
|
||||
}
|
||||
|
||||
.tone-selector {
|
||||
height: var(--space-large);
|
||||
padding-bottom: var(--space-micro);
|
||||
padding-top: var(--space-micro);
|
||||
width: var(--space-mega);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div id="profile-settings-notifications" class="flex flex-col gap-6">
|
||||
<form-select
|
||||
v-model="alertTone"
|
||||
name="alertTone"
|
||||
spacing="compact"
|
||||
:value="alertTone"
|
||||
:options="alertTones"
|
||||
:label="
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
|
||||
)
|
||||
"
|
||||
class="max-w-xl"
|
||||
@input="handleAudioToneChange"
|
||||
>
|
||||
<option
|
||||
v-for="tone in alertTones"
|
||||
:key="tone.label"
|
||||
:value="tone.value"
|
||||
:selected="tone.value === alertTone"
|
||||
>
|
||||
{{ tone.label }}
|
||||
</option>
|
||||
</form-select>
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
<div
|
||||
class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
|
||||
>
|
||||
<input
|
||||
id="audio_enable_alert_none"
|
||||
v-model="enableAudioAlerts"
|
||||
class="accent-primary-600"
|
||||
type="radio"
|
||||
value="none"
|
||||
@input="handleAudioInput"
|
||||
/>
|
||||
<label
|
||||
class="text-sm font-medium text-ash-900"
|
||||
:class="{ 'text-ash-400': enableAudioAlerts !== 'none' }"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.NONE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
|
||||
>
|
||||
<input
|
||||
id="audio_enable_alert_mine"
|
||||
v-model="enableAudioAlerts"
|
||||
class="accent-primary-600"
|
||||
type="radio"
|
||||
value="mine"
|
||||
@input="handleAudioInput"
|
||||
/>
|
||||
<label
|
||||
class="text-sm font-medium text-ash-900"
|
||||
:class="{ 'text-ash-400': enableAudioAlerts !== 'mine' }"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ASSIGNED'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-center gap-2 px-4 grow">
|
||||
<input
|
||||
id="audio_enable_alert_all"
|
||||
v-model="enableAudioAlerts"
|
||||
class="accent-primary-600"
|
||||
type="radio"
|
||||
value="all"
|
||||
@input="handleAudioInput"
|
||||
/>
|
||||
<label
|
||||
class="text-sm font-medium text-ash-900"
|
||||
:class="{ 'text-ash-400': enableAudioAlerts !== 'all' }"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ALL_CONVERSATIONS'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-row items-start gap-2">
|
||||
<input
|
||||
id="audio_alert_when_tab_is_inactive"
|
||||
v-model="playAudioWhenTabIsInactive"
|
||||
type="checkbox"
|
||||
value="tab_is_inactive"
|
||||
class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
@input="handleAudioAlertConditions"
|
||||
/>
|
||||
<label class="text-sm font-normal text-ash-900">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-start gap-2">
|
||||
<input
|
||||
v-model="alertIfUnreadConversationExist"
|
||||
class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
type="checkbox"
|
||||
value="conversations_are_read"
|
||||
@input="handleAudioAlertConditions"
|
||||
/>
|
||||
<label class="text-sm font-normal text-ash-900">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import configMixin from 'shared/mixins/configMixin';
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
import FormSelect from 'v3/components/Form/Select.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormSelect,
|
||||
},
|
||||
mixins: [alertMixin, configMixin, uiSettingsMixin],
|
||||
data() {
|
||||
return {
|
||||
enableAudioAlerts: false,
|
||||
playAudioWhenTabIsInactive: false,
|
||||
alertIfUnreadConversationExist: false,
|
||||
alertTone: 'ding',
|
||||
alertTones: [
|
||||
{
|
||||
value: 'ding',
|
||||
label: 'Ding',
|
||||
},
|
||||
{
|
||||
value: 'bell',
|
||||
label: 'Bell',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
accountId: 'getCurrentAccountId',
|
||||
uiSettings: 'getUISettings',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
uiSettings(value) {
|
||||
this.notificationUISettings(value);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.notificationUISettings(this.uiSettings);
|
||||
this.$store.dispatch('userNotificationSettings/get');
|
||||
},
|
||||
methods: {
|
||||
notificationUISettings(uiSettings) {
|
||||
const {
|
||||
enable_audio_alerts: enableAudio = false,
|
||||
always_play_audio_alert: alwaysPlayAudioAlert,
|
||||
alert_if_unread_assigned_conversation_exist:
|
||||
alertIfUnreadConversationExist,
|
||||
notification_tone: alertTone,
|
||||
} = uiSettings;
|
||||
this.enableAudioAlerts = enableAudio;
|
||||
this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
|
||||
this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
|
||||
this.alertTone = alertTone || 'ding';
|
||||
},
|
||||
handleAudioInput(e) {
|
||||
this.enableAudioAlerts = e.target.value;
|
||||
this.updateUISettings({
|
||||
enable_audio_alerts: this.enableAudioAlerts,
|
||||
});
|
||||
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
|
||||
},
|
||||
handleAudioAlertConditions(e) {
|
||||
let condition = e.target.value;
|
||||
if (condition === 'tab_is_inactive') {
|
||||
this.updateUISettings({
|
||||
always_play_audio_alert: !e.target.checked,
|
||||
});
|
||||
} else if (condition === 'conversations_are_read') {
|
||||
this.updateUISettings({
|
||||
alert_if_unread_assigned_conversation_exist: e.target.checked,
|
||||
});
|
||||
}
|
||||
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
|
||||
},
|
||||
handleAudioToneChange(value) {
|
||||
this.updateUISettings({ notification_tone: value });
|
||||
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user