improve i18n (#161)

* improve i18n * fix cookie set
zincsearch · May 26, 2022 · 5759f91 · 5759f91
1 parent 91857e3
commit 5759f91
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 32 deletions.
diff --git a/web/src/components/search/IndexList.vue b/web/src/components/search/IndexList.vue
@@ -8,7 +8,7 @@
         dense
         use-input
         input-debounce="0"
-        label="Select Index First"
+        :label="t('search.selectIndex')"
         behavior="menu"
         class="q-mt-md q-mb-sm"
         @filter="filterFn"
@@ -45,7 +45,7 @@
             dense
             clearable
             debounce="1"
-            placeholder="Search for a field"
+            :placeholder="t('search.searchField')"
           >
             <template #append>
               <q-icon name="search" />
@@ -59,6 +59,7 @@
 
 <script>
 import { defineComponent, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import indexService from "../../services/index";
 
 export default defineComponent({
@@ -71,6 +72,7 @@ export default defineComponent({
   },
   emits: ["updated"],
   setup(props, { emit }) {
+    const { t } = useI18n();
     const getIndexData = (field) => props.data[field];
     const selectedIndex = ref(getIndexData("name"));
     const selectedFields = ref(getIndexData("columns"));
@@ -171,6 +173,7 @@ export default defineComponent({
     getIndexList();
 
     return {
+      t,
       selectedIndex,
       selectedFields,
       options,

diff --git a/web/src/components/search/SearchBar.vue b/web/src/components/search/SearchBar.vue
@@ -4,7 +4,7 @@
       <div class="col">
         <q-input
           v-model="searchQuery"
-          :placeholder="t('search.maxRecords')"
+          :placeholder="t('search.typeSearch')"
           dense
           filled
           type="search"
@@ -58,10 +58,10 @@
 
 <script>
 import { defineComponent, nextTick, watch, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 import DateTime from "./DateTime.vue";
 import SyntaxGuide from "./SyntaxGuide.vue";
-import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "ComponentSearchSearchBar",

diff --git a/web/src/components/search/SearchList.vue b/web/src/components/search/SearchList.vue
@@ -69,7 +69,7 @@
             <div class="max-result">
               <q-input
                 v-model="maxRecordToReturn"
-                label="max records to return"
+                :label="t('search.maxRecords')"
                 dense
                 filled
                 square

diff --git a/web/src/components/search/SyntaxGuide.vue b/web/src/components/search/SyntaxGuide.vue
@@ -10,7 +10,7 @@
     <q-menu>
       <q-card flat>
         <q-card-section class="syntax-guide-title">
-          <div class="text-h6">Syntax guide</div>
+          <div class="text-h6">{{t('search.syntaxGuide')}}</div>
         </q-card-section>
         <q-separator />
         <q-card-section class="q-pt-none answers">
@@ -62,6 +62,22 @@
   </q-btn>
 </template>
 
+
+<script>
+import { defineComponent } from "vue";
+import { useI18n } from "vue-i18n";
+
+export default defineComponent({
+  name: "ComponentSearchSyntaxGuide",
+  setup() {
+    const { t } = useI18n();
+    return {
+      t,
+    };
+  },
+});
+</script>
+
 <style lang="scss">
 .syntax-guide {
   /* width: 80%;*/

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
@@ -13,7 +13,7 @@
 
         <q-toolbar-title>{{ t("menu.zincSearch") }}</q-toolbar-title>
 
-        <div>
+        <div class="q-mr-xs">
           <q-btn-dropdown outline rounded no-caps icon-right="manage_accounts">
             <template #label>
               <div class="row items-center no-wrap">{{ user.name }}</div>
@@ -37,6 +37,25 @@
             </q-list>
           </q-btn-dropdown>
         </div>
+
+        <div>
+          <q-btn-dropdown outline rounded no-caps icon-right="language">
+            <q-list>
+              <q-item v-ripple v-close-popup clickable @click="changeLanguage('en')">
+                <q-item-section>
+                  <q-item-label>English</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item v-ripple v-close-popup clickable @click="changeLanguage('zh-cn')">
+                <q-item-section>
+                  <q-item-label>简体中文</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+        </div>
+
+
       </q-toolbar>
     </q-header>
 
@@ -78,6 +97,7 @@
 <script lang="ts">
 import MenuLink from "../components/MenuLink.vue";
 import { useI18n } from "vue-i18n";
+import { setLanguage } from "../utils/cookies";
 
 
 import { ref } from "vue";
@@ -94,7 +114,6 @@ export default {
   setup() {
     const store = useStore();
     const router = useRouter();
-
     const { t } = useI18n();
 
     const linksList = [
@@ -104,7 +123,7 @@ export default {
         link: "/search",
       },
       {
-        title: t("menu.indexManagement"),
+        title: t("menu.index"),
         icon: "list",
         link: "/index",
       },
@@ -124,6 +143,10 @@ export default {
         link: "/about",
       },
     ];
+    const changeLanguage = (language: string) => {
+      setLanguage(language);
+      router.go(0);
+    };
     const signout = () => {
       store.dispatch("logout");
       localStorage.setItem("creds", "");
@@ -135,6 +158,7 @@ export default {
       essentialLinks: linksList,
       leftDrawerOpen: ref(false),
       user: store.state.user,
+      changeLanguage,
       signout,
     };
   },

diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
@@ -1,18 +1,19 @@
 export default {
     search: {
-      selectIndex: "Select Index",
+      selectIndex: "Select Index First",
       typeSearch: "Type your search query here",
       searchField: "Search for a field",
       maxRecords: "Max records to return",
       searchResult: "Search Results",
       timestamp: "timestamp",
       source: "_source",
       noResult: "No Result",
+      syntaxGuide: "Syntax guide",
     },
     menu: {
       about: "About",
       user: "User",
-      indexManagement: "Index",
+      index: "Index",
       search: "Search",
       template:"Template",
       signOut: "Sign Out",
@@ -42,4 +43,14 @@ export default {
       add: "Add User",
       search: "Search User",
     },
+    index: {
+      header: "Indexes",
+      add: "Add Index",
+      search: "Search Index",
+    },
+    template: {
+      header: "Templates",
+      add: "Add Template",
+      search: "Search Template",
+    }
   };
diff --git a/web/src/locales/zh-cn.ts b/web/src/locales/zh-cn.ts
@@ -1,20 +1,21 @@
 export default {
     search: {
-      selectIndex: "选择词库",
-      typeSearch: "请输入查询字符",
+      selectIndex: "选择索引",
+      typeSearch: "请输入查询内容",
       searchField: "查询字段",
-      maxRecords: "结果上限",
+      maxRecords: "返回数量",
       searchResult: "查询结果",
       timestamp: "时间",
       source: "源代码",
       noResult: "没有结果",
+      syntaxGuide: "语法提示",
     },
     menu: {
       about: "关于",
-      user: "用户管理",
-      index: "索引管理",
+      user: "用户",
+      index: "索引",
       search: "搜索",
-      template:"Template",
+      template:"模板",
       signOut: "退出",
       account: "账号管理",
       feedback: "反馈问题",
@@ -37,7 +38,17 @@ export default {
       password: "输入密码",
       repassword: "确认密码",
       addOrUpdate: "添加/更新用户",
-      add: "添加用户",
-      search: "查询用户",
+      add: "添加",
+      search: "查询",
     },
+    index: {
+      header: "索引管理",
+      add: "添加",
+      search: "查询",
+    },
+    template: {
+      header: "模板管理",
+      add: "添加",
+      search: "查询",
+    }
   };
diff --git a/web/src/utils/cookies.ts b/web/src/utils/cookies.ts
@@ -2,14 +2,14 @@ import Keys from '../constant/key'
 import Cookies from 'js-cookie'
 
 export const getSidebarStatus = () => Cookies.get(Keys.sidebarStatusKey)
-export const setSidebarStatus = (sidebarStatus: string) => Cookies.set(Keys.sidebarStatusKey, sidebarStatus)
+export const setSidebarStatus = (sidebarStatus: string) => Cookies.set(Keys.sidebarStatusKey, sidebarStatus, {path:"/"})
 
 export const getLanguage = () => Cookies.get(Keys.languageKey)
-export const setLanguage = (language: string) => Cookies.set(Keys.languageKey, language)
+export const setLanguage = (language: string) => Cookies.set(Keys.languageKey, language, {path:"/"})
 
 export const getSize = () => Cookies.get(Keys.sizeKey)
-export const setSize = (size: string) => Cookies.set(Keys.sizeKey, size)
+export const setSize = (size: string) => Cookies.set(Keys.sizeKey, size, {path:"/"})
 
 export const getToken = () => Cookies.get(Keys.tokenKey)
-export const setToken = (token: string) => Cookies.set(Keys.tokenKey, token)
+export const setToken = (token: string) => Cookies.set(Keys.tokenKey, token, {path:"/"})
 export const removeToken = () => Cookies.remove(Keys.tokenKey)
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="q-pa-md">
     <q-table
-      title="Indexes"
+      :title="t('index.header')"
       :rows="indexes"
       :columns="resultColumns"
       row-key="id"
@@ -15,7 +15,7 @@
           filled
           borderless
           dense
-          placeholder="Search index"
+          :placeholder="t('index.search')"
         >
           <template #append>
             <q-icon name="search" class="cursor-pointer" />
@@ -25,7 +25,7 @@
           class="q-ml-sm"
           color="primary"
           icon="add"
-          label="Add index"
+          :label="t('index.add')"
           @click="addIndex"
         />
       </template>
@@ -94,8 +94,9 @@
 import { defineComponent, ref } from "vue";
 import { useStore } from "vuex";
 import { useQuasar } from "quasar";
-import indexService from "../services/index";
+import { useI18n } from "vue-i18n";
 
+import indexService from "../services/index";
 import AddUpdateIndex from "../components/index/AddUpdateIndex.vue";
 import PreviewIndex from "../components/index/PreviewIndex.vue";
 
@@ -108,6 +109,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const $q = useQuasar();
+    const { t } = useI18n();
 
     const indexes = ref([]);
     const getIndexes = () => {
@@ -216,6 +218,7 @@ export default defineComponent({
     };
 
     return {
+      t,
       showAddIndexDialog,
       showPreviewIndexDialog,
       resultColumns,

diff --git a/web/src/views/Template.vue b/web/src/views/Template.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="q-pa-md">
     <q-table
-      title="Templates"
+      :title="t('template.header')"
       :rows="templates"
       row-key="id"
       :pagination="pagination"
@@ -14,7 +14,7 @@
           filled
           borderless
           dense
-          placeholder="Search template"
+          :placeholder="t('template.search')"
         >
           <template #append>
             <q-icon name="search" class="cursor-pointer" />
@@ -24,7 +24,7 @@
           class="q-ml-sm"
           color="primary"
           icon="add"
-          label="Add template"
+          :label="t('template.add')"
           @click="addTemplate"
         />
       </template>
@@ -121,8 +121,9 @@
 import { defineComponent, ref } from "vue";
 import { useStore } from "vuex";
 import { useQuasar, date } from "quasar";
-import templateService from "../services/template";
+import { useI18n } from "vue-i18n";
 
+import templateService from "../services/template";
 import AddUpdateTemplate from "../components/template/AddUpdateTemplate.vue";
 import PreviewTemplate from "../components/template/PreviewTemplate.vue";
 
@@ -135,6 +136,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const $q = useQuasar();
+    const { t } = useI18n();
 
     const templates = ref([]);
     const getTemplates = () => {
@@ -190,6 +192,7 @@ export default defineComponent({
     };
 
     return {
+      t,
       showAddTemplateDialog,
       showUpdateTemplateDialog,
       showPreviewTemplateDialog,