From a76ce6a0f31e4055c289ff1e8988e96d87ea30ad Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 24 Apr 2024 16:01:05 +0530
Subject: [PATCH] chore: cleanup audio notifications

---
 .../settings/personal/AudioAlertCondition.vue | 70 +++-----------
 .../settings/personal/AudioAlertEvent.vue     | 91 ++++++-------------
 .../settings/personal/AudioAlertTone.vue      | 22 +++--
 .../settings/personal/AudioNotifications.vue  | 28 +++++-
 4 files changed, 82 insertions(+), 129 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
index d24433022..dfaa13df7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
@@ -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);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
index 083b90d93..87a1c37ca 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
@@ -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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
index 508e25088..bb0680ce4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
@@ -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(() => [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
index 034e590c7..f972740a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
@@ -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,