refactor: quotation

src/pages/05_quotation/QuotationForm.vue

@@ -1,17 +1,22 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { QSelect } from 'quasar';
+import { onMounted, ref } from 'vue';
+import { QSelect, useQuasar } from 'quasar';
 
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
 import { AddButton, SaveButton } from 'components/button';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import ProductItem from 'src/components/05_quotation/ProductItem.vue';
+import { setLocale } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
   readonly?: boolean;
 }>();
 
+const { locale } = useI18n();
+const $q = useQuasar();
+
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
 const toggleWorker = ref(true);
@@ -26,10 +31,60 @@ const dueDate = ref('');
 const payType = ref('');
 const paySplitCount = ref(1);
 const payBank = ref('');
+
+function changeMode(mode: string) {
+  if (mode === 'light') {
+    localStorage.setItem('currentTheme', 'light');
+    $q.dark.set(false);
+    return;
+  }
+
+  if (mode === 'dark') {
+    localStorage.setItem('currentTheme', 'dark');
+    $q.dark.set(true);
+    return;
+  }
+
+  if (mode === 'baseOnDevice') {
+    localStorage.setItem('currentTheme', 'baseOnDevice');
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      $q.dark.set(true);
+    } else {
+      $q.dark.set(false);
+    }
+    return;
+  }
+}
+
+onMounted(async () => {
+  const getCurLang = localStorage.getItem('currentLanguage');
+  if (getCurLang === 'English') {
+    locale.value = 'eng';
+    setLocale('en-gb');
+  }
+  if (getCurLang === 'ไทย') {
+    locale.value = 'tha';
+    setLocale('th');
+  }
+
+  const getCurTheme = localStorage.getItem('currentTheme');
+  if (
+    getCurTheme === 'light' ||
+    getCurTheme === 'dark' ||
+    getCurTheme === 'baseOnDevice'
+  ) {
+    changeMode(getCurTheme);
+  } else {
+    changeMode('light');
+  }
+});
 </script>
 
 <template>
-  <div class="fullscreen column">
+  <div class="fullscreen column surface-0">
     <div class="color-bar">
       <div class="blue-segment"></div>
       <div class="orange-segment"></div>
@@ -357,4 +412,12 @@ const payBank = ref('');
 :deep(.q-editor__toolbar-group):nth-child(2) {
   margin-left: auto !important;
 }
+
+:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
+  background-color: var(--surface-2) !important;
+}
+
+:deep(.q-editor__toolbar) {
+  border-color: var(--surface-3) !important;
+}
 </style>