feat: split audio notification components

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <label
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
+    >
+      {{ label }}
+    </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="localPlayAudioWhenTabIsInactive"
+          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="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'
+            )
+          }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  playAudioWhenTabIsInactive: {
+    type: Boolean,
+    default: false,
+  },
+  alertIfUnreadConversationExist: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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);
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <label
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
+    >
+      {{ label }}
+    </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="localAudioAlert"
+          class="accent-primary-600"
+          type="radio"
+          value="none"
+          @input="onChange"
+        />
+        <label
+          class="text-sm font-medium text-ash-900"
+          :class="{ 'text-ash-400': localAudioAlert !== '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="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'
+            )
+          }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  audioAlert: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const localAudioAlert = ref(props.audioAlert);
+
+watch(
+  () => props.audioAlert,
+  newValue => {
+    localAudioAlert.value = newValue;
+  }
+);
+
+const emit = defineEmits(['change']);
+const onChange = e => {
+  emit('change', e);
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue

@@ -0,0 +1,52 @@
+<template>
+  <form-select
+    v-model="localAlertTone"
+    name="alertTone"
+    spacing="compact"
+    :value="localAlertTone"
+    :options="alertTones"
+    :label="label"
+    class="max-w-xl"
+    @input="onChange"
+  >
+    <option
+      v-for="tone in alertTones"
+      :key="tone.label"
+      :value="tone.value"
+      :selected="tone.value === alertTone"
+    >
+      {{ tone.label }}
+    </option>
+  </form-select>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+import FormSelect from 'v3/components/Form/Select.vue';
+
+const props = defineProps({
+  alertTone: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const localAlertTone = ref(props.alertTone);
+const emit = defineEmits(['change']);
+const onChange = () => {
+  emit('change', localAlertTone.value);
+};
+const alertTones = computed(() => [
+  {
+    value: 'ding',
+    label: 'Ding',
+  },
+  {
+    value: 'bell',
+    label: 'Bell',
+  },
+]);
+</script>

app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue

@@ -1,154 +1,31 @@
 <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"
+    <audio-alert-tone
+      :alert-tone="alertTone"
       :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>
+      @change="handleAudioToneChange"
+    />
 
-    <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>
+    <audio-alert-event
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
+      "
+      :audio-alert="audioAlert"
+      @change="handleAudioInput"
+    />
+
+    <audio-alert-condition
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
+      "
+      :play-audio-when-tab-is-inactive="playAudioWhenTabIsInactive"
+      :alert-if-unread-conversation-exist="alertIfUnreadConversationExist"
+      @change="handleAudioAlertConditions"
+    />
   </div>
 </template>
 
@@ -157,29 +34,23 @@ 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';
+import AudioAlertTone from './AudioAlertTone.vue';
+import AudioAlertEvent from './AudioAlertEvent.vue';
+import AudioAlertCondition from './AudioAlertCondition.vue';
 
 export default {
   components: {
-    FormSelect,
+    AudioAlertEvent,
+    AudioAlertTone,
+    AudioAlertCondition,
   },
   mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
     return {
-      enableAudioAlerts: false,
+      audioAlert: '',
       playAudioWhenTabIsInactive: false,
       alertIfUnreadConversationExist: false,
       alertTone: 'ding',
-      alertTones: [
-        {
-          value: 'ding',
-          label: 'Ding',
-        },
-        {
-          value: 'bell',
-          label: 'Bell',
-        },
-      ],
     };
   },
   computed: {
@@ -200,21 +71,21 @@ export default {
   methods: {
     notificationUISettings(uiSettings) {
       const {
-        enable_audio_alerts: enableAudio = false,
+        enable_audio_alerts: audioAlert = '',
         always_play_audio_alert: alwaysPlayAudioAlert,
         alert_if_unread_assigned_conversation_exist:
           alertIfUnreadConversationExist,
         notification_tone: alertTone,
       } = uiSettings;
-      this.enableAudioAlerts = enableAudio;
+      this.audioAlert = audioAlert;
       this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
       this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
       this.alertTone = alertTone || 'ding';
     },
     handleAudioInput(e) {
-      this.enableAudioAlerts = e.target.value;
+      this.audioAlert = e.target.value;
       this.updateUISettings({
-        enable_audio_alerts: this.enableAudioAlerts,
+        enable_audio_alerts: this.audioAlert,
       });
       this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -102,11 +102,6 @@
   </div>
 </template>
 <script>
-import MessageSignature from './MessageSignature.vue';
-import ProfileWrapper from './ProfileWrapper.vue';
-import HotKeyCard from './HotKeyCard.vue';
-import ChangePassword from './ChangePassword.vue';
-import AccessToken from './AccessToken.vue';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import uiSettingsMixin, {
   isEditorHotKeyEnabled,
@@ -119,6 +114,11 @@ import NotificationPreferences from './NotificationPreferences.vue';
 import AudioNotifications from './AudioNotifications.vue';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
+import MessageSignature from './MessageSignature.vue';
+import ProfileWrapper from './ProfileWrapper.vue';
+import HotKeyCard from './HotKeyCard.vue';
+import ChangePassword from './ChangePassword.vue';
+import AccessToken from './AccessToken.vue';
 
 export default {
   components: {