akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: cleanup audio notifications

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-24 16:01:05 +05:30
parent 333044565b
commit a76ce6a0f3
4 changed files with 82 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
+14 -56
View File
@@ -1,85 +1,43 @@
<template>
<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 d"
>
{{ label }}
</label>
<div class="flex flex-col gap-2">
<div class="flex flex-row items-start gap-2">
<div
v-for="item in items"
:key="item.id"
class="flex flex-row items-start gap-2"
>
<input
id="audio_alert_when_tab_is_inactive"
v-model="localPlayAudioWhenTabIsInactive"
:id="item.id"
v-model="item.model"
type="checkbox"
value="tab_is_inactive"
:value="item.value"
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="onChange"
/>
<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
id="audio_alert_when_conversations_are_read"
v-model="localAlertIfUnreadConversationExist"
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="onChange"
/>
<label class="text-sm font-normal text-ash-900">
{{
$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
)
}}
{{ item.label }}
</label>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
defineProps({
label: {
type: String,
required: true,
},
playAudioWhenTabIsInactive: {
type: Boolean,
default: false,
},
alertIfUnreadConversationExist: {
type: Boolean,
default: false,
items: {
type: Array,
required: true,
},
});
const localPlayAudioWhenTabIsInactive = ref(props.playAudioWhenTabIsInactive);
const localAlertIfUnreadConversationExist = ref(
props.alertIfUnreadConversationExist
);
watch(
() => props.playAudioWhenTabIsInactive,
newValue => {
localPlayAudioWhenTabIsInactive.value = newValue;
}
);
watch(
() => props.alertIfUnreadConversationExist,
newValue => {
localAlertIfUnreadConversationExist.value = newValue;
}
);
const emit = defineEmits(['change']);
const onChange = e => {
emit('change', e);
app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
+29 -62
View File
@@ -9,97 +9,64 @@
class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
>
<div
v-for="option in options"
:key="option.value"
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
:class="{
'border-r-0': option.value === options[options.length - 1].value,
}"
>
<input
id="audio_enable_alert_none"
v-model="localAudioAlert"
:id="`radio-${option.value}`"
v-model="selectedValue"
class="accent-primary-600"
type="radio"
value="none"
@input="onChange"
:value="option.value"
@change="emitChange"
/>
<label
:for="`radio-${option.value}`"
class="text-sm font-medium text-ash-900"
:class="{ 'text-ash-400': localAudioAlert !== 'none' }"
:class="{ 'text-ash-400': selectedValue !== option.value }"
>
{{
$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="localAudioAlert"
class="accent-primary-600"
type="radio"
value="mine"
@input="onChange"
/>
<label
class="text-sm font-medium text-ash-900"
:class="{ 'text-ash-400': localAudioAlert !== '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="localAudioAlert"
class="accent-primary-600"
type="radio"
value="all"
@input="onChange"
/>
<label
class="text-sm font-medium text-ash-900"
:class="{ 'text-ash-400': localAudioAlert !== 'all' }"
>
{{
$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.ALL_CONVERSATIONS'
)
}}
{{ option.label }}
</label>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
audioAlert: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
value: {
type: String,
default: 'all',
},
});
const localAudioAlert = ref(props.audioAlert);
const options = [
{ value: 'all', label: 'All' },
{ value: 'mentions', label: 'Mentions' },
{ value: 'none', label: 'None' },
];
const selectedValue = ref(props.value);
watch(
() => props.audioAlert,
() => props.value,
newValue => {
localAudioAlert.value = newValue;
selectedValue.value = newValue;
}
);
const emit = defineEmits(['change']);
const onChange = e => {
emit('change', e);
const emit = defineEmits(['update']);
const emitChange = e => {
emit('update', e);
};
</script>
app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
+15 -7
View File
@@ -1,9 +1,9 @@
<template>
<form-select
v-model="localAlertTone"
v-model="selectedValue"
name="alertTone"
spacing="compact"
:value="localAlertTone"
:value="selectedValue"
:options="alertTones"
:label="label"
class="max-w-xl"
@@ -13,18 +13,18 @@
v-for="tone in alertTones"
:key="tone.label"
:value="tone.value"
:selected="tone.value === alertTone"
:selected="tone.value === selectedValue"
>
{{ tone.label }}
</option>
</form-select>
</template>
<script setup>
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
import FormSelect from 'v3/components/Form/Select.vue';
const props = defineProps({
alertTone: {
value: {
type: String,
default: '',
},
@@ -34,10 +34,18 @@ const props = defineProps({
},
});
const localAlertTone = ref(props.alertTone);
const selectedValue = ref(props.value);
watch(
() => props.value,
newValue => {
selectedValue.value = newValue;
}
);
const emit = defineEmits(['change']);
const onChange = () => {
emit('change', localAlertTone.value);
emit('change', selectedValue.value);
};
const alertTones = computed(() => [
{
app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
+24 -4
View File
@@ -1,7 +1,7 @@
<template>
<div id="profile-settings-notifications" class="flex flex-col gap-6">
<audio-alert-tone
:alert-tone="alertTone"
:value="alertTone"
:label="
$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
@@ -14,11 +14,12 @@
:label="
$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
"
:audio-alert="audioAlert"
@change="handleAudioInput"
:value="audioAlert"
@update="handAudioAlertChange"
/>
<audio-alert-condition
:items="audioAlertConditions"
:label="
$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
"
@@ -51,6 +52,7 @@ export default {
playAudioWhenTabIsInactive: false,
alertIfUnreadConversationExist: false,
alertTone: 'ding',
audioAlertConditions: [],
};
},
computed: {
@@ -80,9 +82,27 @@ export default {
this.audioAlert = audioAlert;
this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
this.audioAlertConditions = [
{
id: 'audio1',
label: this.$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
),
model: this.playAudioWhenTabIsInactive,
value: 'tab_is_inactive',
},
{
id: 'audio2',
label: this.$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
),
model: this.alertIfUnreadConversationExist,
value: 'conversations_are_read',
},
];
this.alertTone = alertTone || 'ding';
},
handleAudioInput(e) {
handAudioAlertChange(e) {
this.audioAlert = e.target.value;
this.updateUISettings({
enable_audio_alerts: this.audioAlert,