feat(Components): Create AppSettings And Handle Change Language And Theme

Author: seyyed-iman-asnafi

src/bootstrap.js

@@ -1,5 +1,6 @@
 import ApiService from '@/services/api.service';
 import TokenService from '@/services/token.service';
+import ThemeService from '@/services/theme.service';
 import LanguageService from '@/services/language.service';
 
 import AuthenticateUser from '@/services/middleware/AuthenticateUser';
@@ -14,6 +15,8 @@ if (TokenService.isExist()) {
     ApiService.setHeader(HttpHeader.AUTHORIZATION, `Bearer ${TokenService.get()}`);
 }
 
+ThemeService.updateDOM();
+
 if (LanguageService.isRtl()) {
     import('@/assets/scss/app-rtl.scss');
 } else {

src/components/layout/AppSettings.vue

@@ -0,0 +1,106 @@
+<template>
+    <button
+        type="button"
+        class="btn btn-sm text-white"
+        @click="offcanvasShow = true"
+    >
+        <i class="bi-gear h4"></i>
+    </button>
+
+    <VOffcanvas v-model="offcanvasShow">
+        <template #title>{{ $t('Settings') }}</template>
+
+        <VForm id="settings-form" class="row">
+            <div class="col-6">
+                <VSelect
+                    v-model="language"
+                    :items="languageItems"
+                    item-text="text"
+                    item-key="key"
+                >
+                    <template #label>{{ $t('Language') }}</template>
+                </VSelect>
+            </div>
+
+            <div class="col-6">
+                <VSelect
+                    v-model="theme"
+                    :items="themeItems"
+                    item-text="text"
+                    item-key="key"
+                >
+                    <template #label>{{ $t('Theme') }}</template>
+                </VSelect>
+            </div>
+        </VForm>
+    </VOffcanvas>
+</template>
+
+<script>
+    import { ref, watch } from 'vue';
+
+    // Components
+    import VOffcanvas from '@/components/VOffcanvas.vue';
+    import VForm from '@/components/form/VForm.vue';
+    import VSelect from '@/components/form/VSelect.vue';
+
+    // Services
+    import LanguageService, { t } from '@/services/language.service';
+    import ThemeService from '@/services/theme.service';
+
+    export default {
+        name: 'AppSettings',
+
+        components: {
+            VOffcanvas,
+            VForm,
+            VSelect
+        },
+
+        setup() {
+            const offcanvasShow = ref(false);
+
+            const language = ref(LanguageService.get());
+            const languageItems = [
+                {
+                    key: 'en',
+                    text: 'English'
+                },
+                {
+                    key: 'fa',
+                    text: 'فارسی'
+                }
+            ];
+
+            watch(language, (value) => LanguageService.set(value));
+
+            const theme = ref(ThemeService.get());
+            const themeItems = [
+                {
+                    key: 'light',
+                    text: t('Light')
+                },
+                {
+                    key: 'dark',
+                    text: t('Dark')
+                },
+                {
+                    key: 'system',
+                    text: t('System')
+                }
+            ];
+
+            watch(theme, (value) => ThemeService.set(value));
+
+            return {
+                offcanvasShow,
+
+                language,
+                languageItems,
+
+                theme,
+                themeItems
+            };
+        }
+    }
+</script>

src/components/layout/VHeader.vue

@@ -16,6 +16,8 @@
         <div class="ms-auto">
             <slot name="end"></slot>
 
+            <AppSettings />
+
             <button
                 type="button"
                 class="btn btn-sm text-white"
@@ -28,14 +30,21 @@
 </template>
 
 <script>
-    import { useRouter } from "vue-router";
+    import { useRouter } from 'vue-router';
+
+    // Components
+    import AppSettings from '@/components/layout/AppSettings.vue';
 
     // Services
-    import AuthenticationService from "@/services/authentication.service";
+    import AuthenticationService from '@/services/authentication.service';
 
     export default {
         name: 'VHeader',
 
+        components: {
+            AppSettings
+        },
+
         setup() {
             const router = useRouter();
 

src/locales/en/messages.js

@@ -3,6 +3,7 @@ export default {
     "Username": "Username",
     "Password": "Password",
     "Submit": "Submit",
+    "Cancel": "Cancel",
     "Dashboard": "Dashboard",
     "Users": "Users",
     "Authorization Error": "Authorization Error",
@@ -26,5 +27,11 @@ export default {
     "Not completed": "Not completed",
     "Filter by title": "Filter by title",
     "Filter by user": "Filter by user",
-    "Filter by status": "Filter by status"
+    "Filter by status": "Filter by status",
+    "Language": "Language",
+    "Theme": "Theme",
+    "Light": "Light",
+    "Dark": "Dark",
+    "System": "System",
+    "Settings": "Settings",
 };

src/locales/fa/messages.js

@@ -3,6 +3,7 @@ export default {
     "Username": "نام کاریری",
     "Password": "رمز عبور",
     "Submit": "ارسال",
+    "Cancel": "انصراف",
     "Dashboard": "داشبورد",
     "Users": "کاربران",
     "Authorization Error": "خطای دسترسی",
@@ -26,5 +27,11 @@ export default {
     "Not completed": "تکمیل نشده",
     "Filter by title": "فیلتر بر اساس عنوان",
     "Filter by user": "فیلتر بر اساس کاربر",
-    "Filter by status": "فیلتر بر اساس وضعیت"
+    "Filter by status": "فیلتر بر اساس وضعیت",
+    "Language": "زبان",
+    "Theme": "زمینه",
+    "Light": "روشن",
+    "Dark": "تیره",
+    "System": "سیستم",
+    "Settings": "تنظیمات",
 };

src/services/language.service.js

@@ -31,8 +31,8 @@ class LanguageService {
      * @returns void
      */
     static set(value) {
-        vueI18N.global.locale = value;
         StorageService.set(this.STORAGE_KEY, value);
+        location.reload();
     }
 
     /**

src/services/theme.service.js

@@ -0,0 +1,53 @@
+import StorageService from './storage.service';
+
+class ThemeService {
+    /**
+     * Storage key
+     *
+     * @returns {String}
+     */
+    static get STORAGE_KEY() {
+        return 'theme';
+    }
+
+    /**
+     * Default theme
+     *
+     * @returns {String}
+     */
+    static get DEFAULT() {
+        return 'light';
+    }
+
+    /**
+     * Set theme
+     *
+     * @param {String} value
+     * @returns void
+     */
+    static set(value) {
+        StorageService.set(this.STORAGE_KEY, value);
+        this.updateDOM();
+    }
+
+    /**
+     * Update dom based on current theme
+     *
+     * @returns void
+     */
+    static updateDOM() {
+        const rootEl = document.documentElement;
+        rootEl.setAttribute('data-bs-theme', this.get());
+    }
+
+    /**
+     * Get theme
+     *
+     * @returns {String}
+     */
+    static get() {
+        return StorageService.get(this.STORAGE_KEY) ?? this.DEFAULT;
+    }
+}
+
+export default ThemeService;