From ea9743b914c5b975e20fc0114cd0f63a88e02536 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 25 Apr 2024 22:07:59 +0530
Subject: [PATCH] chore: more code cleanups

---
 .../settings/personal/AudioAlertCondition.vue |  4 +-
 .../settings/personal/AudioAlertEvent.vue     | 24 +++----
 .../settings/personal/AudioAlertTone.vue      | 25 +++----
 .../personal/NotificationCheckBox.vue         |  2 +-
 .../personal/NotificationPreferences.vue      | 10 ++-
 app/javascript/v3/components/Form/Switch.vue  | 67 ++++---------------
 6 files changed, 43 insertions(+), 89 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
index 6361e46ec..fddc076b5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900 d"
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
     >
       {{ label }}
     </label>
@@ -16,7 +16,7 @@
           v-model="item.model"
           type="checkbox"
           :value="item.value"
-          class="flex-shrink-0 mt-1 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+          class="flex-shrink-0 mt-0.5 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
           @input="onChange"
         />
         <label class="text-sm font-normal text-ash-900">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
index 6ec0e4eaf..47b8ae127 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
@@ -6,7 +6,7 @@
       {{ label }}
     </label>
     <div
-      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
+      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-xl border-ash-200"
     >
       <div
         v-for="option in options"
@@ -22,7 +22,6 @@
           class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
           type="radio"
           :value="option.value"
-          @change="emitChange"
         />
         <label
           :for="`radio-${option.value}`"
@@ -37,7 +36,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   label: {
@@ -56,17 +55,12 @@ const options = [
   { value: 'all', label: 'All' },
 ];
 
-const selectedValue = ref(props.value);
-
-watch(
-  () => props.value,
-  newValue => {
-    selectedValue.value = newValue;
-  }
-);
-
 const emit = defineEmits(['update']);
-const emitChange = e => {
-  emit('update', e);
-};
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
index bb0680ce4..0d10410f3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
@@ -7,7 +7,6 @@
     :options="alertTones"
     :label="label"
     class="max-w-xl"
-    @input="onChange"
   >
     <option
       v-for="tone in alertTones"
@@ -20,7 +19,7 @@
   </form-select>
 </template>
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import FormSelect from 'v3/components/Form/Select.vue';
 
 const props = defineProps({
@@ -34,19 +33,6 @@ const props = defineProps({
   },
 });
 
-const selectedValue = ref(props.value);
-
-watch(
-  () => props.value,
-  newValue => {
-    selectedValue.value = newValue;
-  }
-);
-
-const emit = defineEmits(['change']);
-const onChange = () => {
-  emit('change', selectedValue.value);
-};
 const alertTones = computed(() => [
   {
     value: 'ding',
@@ -57,4 +43,13 @@ const alertTones = computed(() => [
     label: 'Bell',
   },
 ]);
+
+const emit = defineEmits(['change']);
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('change', value);
+  },
+});
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
index 45139551a..a4659c4fb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
@@ -5,7 +5,7 @@
   >
     <input
       v-model="localFlags"
-      class="mt-1 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
       type="checkbox"
       :value="localValue"
       @input="handleInput"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index c9e817142..47a6c43b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -21,7 +21,10 @@
             >
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
-            <form-switch :value="true" @input="onRequestPermissions()" />
+            <form-switch
+              :value="hasEnabledPushPermissions"
+              @input="onRequestPermissions"
+            />
           </div>
         </table-header-cell>
       </div>
@@ -75,7 +78,10 @@
         <span class="text-sm font-medium uppercase text-ash-900">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
-        <form-switch :value="true" @input="onRequestPermissions()" />
+        <form-switch
+          :value="hasEnabledPushPermissions"
+          @input="onRequestPermissions"
+        />
       </div>
 
       <div class="flex flex-col gap-4">
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index eb22b5804..9fb95f59a 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -1,13 +1,23 @@
 <template>
   <button
     type="button"
-    class="p-0 toggle-button bg-primary-600"
-    :class="{ active: value, small: size === 'small' }"
+    class="relative flex-shrink-0 h-4 p-0 shadow-inner w-7 rounded-3xl"
+    :class="
+      value ? 'bg-primary-600 shadow-primary-800' : 'shadow-ash-400 bg-ash-200'
+    "
     role="switch"
     :aria-checked="value.toString()"
     @click="onClick"
   >
-    <span aria-hidden="true" :class="{ active: value }" />
+    <span
+      aria-hidden="true"
+      class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
+      :class="
+        value
+          ? 'ltr:translate-x-0 rtl:translate-x-[12px]'
+          : 'ltr:-translate-x-[12px] rtl:translate-x-0'
+      "
+    />
   </button>
 </template>
 
@@ -15,7 +25,6 @@
 export default {
   props: {
     value: { type: Boolean, default: false },
-    size: { type: String, default: '' },
   },
   methods: {
     onClick() {
@@ -24,53 +33,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.toggle-button {
-  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
-    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  border-radius: var(--border-radius-large);
-  border: 2px solid transparent;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 19px;
-  position: relative;
-  transition-duration: 200ms;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 34px;
-
-  &.small {
-    width: 22px;
-    height: 14px;
-
-    span {
-      height: var(--space-one);
-      width: var(--space-one);
-
-      &.active {
-        transform: translate(var(--space-small), var(--space-zero));
-      }
-    }
-  }
-
-  span {
-    @apply bg-white dark:bg-white;
-    --space-one-point-five: 0.9375rem;
-    border-radius: 100%;
-    box-shadow: var(--toggle-button-box-shadow);
-    display: inline-block;
-    height: var(--space-one-point-five);
-    transform: translate(0, 0);
-    transition-duration: 200ms;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--space-one-point-five);
-
-    &.active {
-      transform: translate(var(--space-one-point-five), var(--space-zero));
-    }
-  }
-}
-</style>