From 499ad33d57780f3974835122c5165a90a7baaa11 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 5 Jun 2024 09:46:20 +0800
Subject: [PATCH] locale of Conformance page

---
 .../Conformance/ConformanceSidebar.vue        | 68 +++++++++++++------
 src/components/durationjs.vue                 |  4 +-
 src/i18n/en.json                              | 12 ++++
 3 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index aaa0f70..4b74527 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -1,8 +1,9 @@
 <template>
-<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10" :class="!notShowActList ? (isShowBar ? 'w-full' : 'w-[312px]') : 'w-[312px]'">
+<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10"
+  :class="!notShowActList ? (isShowBarOpen ? 'w-full' : 'w-[312px]') : 'w-[312px]'">
   <!-- header -->
   <div class="bg-neutral-200 px-4">
-    <p class="h2">Rule Settings</p>
+    <p class="h2">{{ i18next.t("Conformance.RuleSettings") }}</p>
   </div>
   <!-- contanier -->
   <div class="p-4 h-[calc(100%_-_40px)] flex">
@@ -12,9 +13,12 @@
         <!-- radio group -->
         <ConformanceRadioGroup></ConformanceRadioGroup>
         <!-- show and hidden button -->
-        <div v-if="!notShowActList" class="flex items-center justify-between mr-1" :class="isShowBar ? 'text-primary' : ''">
-          <p class="h2">Activity Selector</p>
-          <span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded" @click="isShowBar = !isShowBar" id="cyp-showbaricon">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
+        <div v-if="!notShowActList" class="flex items-center justify-between mr-1" :class="isShowBarOpen ? 'text-primary' : ''">
+          <p class="h2">{{ i18next.t("Conformance.ActivitySelector") }}</p>
+          <span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded"
+            @click="isShowBarOpen = !isShowBarOpen" id="cyp-showbaricon">
+            {{ isShowBarOpen ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}
+          </span>
         </div>
         <!-- select result -->
         <ConformanceSelectResult
@@ -67,12 +71,17 @@
       </div>
       <!-- button -->
       <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
-        <button type="button"  class="btn btn-sm btn-neutral" @click="reset">Clear</button>
-        <button type="button" class="btn btn-sm " @click="submit" :class="this.isDisabled ? 'btn-disable' : 'btn-neutral'" :disabled="isDisabledButton" >Apply</button>
+        <button type="button"  class="btn btn-sm btn-neutral" @click="reset">{{ i18next.t("Global.Clear")}} </button>
+        <button id="btn_apply_conformance" type="button" class="btn btn-sm " @click="submitConformance"
+          :class="this.isDisabled ? 'btn-disable' : 'btn-neutral'"
+          :disabled="isDisabledButton"
+        >
+          {{ i18next.t("Global.Apply") }}
+        </button>
       </div>
     </div>
     <!-- show bar -->
-    <ConformanceShowBar v-if="!notShowActList" :class="isShowBar?'':'hidden'"
+    <ConformanceShowBar v-if="!notShowActList" :class="isShowBarOpen?'':'hidden'"
     :isSubmit="isSubmit"
     :isSubmitTask="isSubmitTask"
     :isSubmitStartAndEnd="isSubmitStartAndEnd"
@@ -107,6 +116,7 @@
 
 <script>
 import { storeToRefs } from 'pinia';
+import i18next from '@/i18n/i18n';
 import LoadingStore from '@/stores/loading.js';
 import ConformanceStore from '@/stores/conformance.js';
 import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
@@ -125,8 +135,9 @@ export default {
   },
   data() {
     return {
+      i18next: i18next,
       isDisabled: true,
-      isShowBar: false,
+      isShowBarOpen: false,
       visibleLeft: false,
       selectConformanceTask: null,
       selectConformanceStartAndEnd: null, // Activity sequence
@@ -251,7 +262,11 @@ export default {
   },
   computed: {
     notShowActList: function() {
-      return (this.selectedRuleType === 'Activity sequence' && this.selectedActivitySequence === 'Sequence' && (this.selectedMode === 'Short loop(s)' || this.selectedMode === 'Self loop(s)')) || (this.selectedRuleType === 'Processing time' && this.selectedProcessScope === 'End to end' && this.selectedActSeqMore === 'All') || (this.selectedRuleType === 'Waiting time' && this.selectedProcessScope === 'End to end' && this.selectedActSeqMore === 'All') || (this.selectedRuleType === 'Cycle time' && this.selectedProcessScope === 'End to end' && this.selectedActSeqMore === 'All')
+      return (this.selectedRuleType === 'Activity sequence' && this.selectedActivitySequence === 'Sequence' 
+      && (this.selectedMode === 'Short loop(s)' || this.selectedMode === 'Self loop(s)')) 
+      || (this.selectedRuleType === 'Processing time' && this.selectedProcessScope === 'End to end' && this.selectedActSeqMore === 'All') 
+      || (this.selectedRuleType === 'Waiting time' && this.selectedProcessScope === 'End to end' && this.selectedActSeqMore === 'All') 
+      || (this.selectedRuleType === 'Cycle time' && this.selectedProcessScope === 'End to end' && this.selectedActSeqMore === 'All')
     },
     /**
      * Apply button is disabled or not
@@ -304,7 +319,8 @@ export default {
                   if(!this.isSubmit) {
                     if(this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd) disabled = false;
                   } else {
-                    if((!this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd) || (this.selectCfmPtEteSEStart && !this.selectCfmPtEteSEEnd)) disabled = true;
+                    if((!this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd) 
+                    || (this.selectCfmPtEteSEStart && !this.selectCfmPtEteSEEnd)) disabled = true;
                     else disabled = false;
                   }
                 break;
@@ -322,7 +338,8 @@ export default {
                   if(!this.isSubmit) {
                     if(this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) disabled = false;
                   } else {
-                    if((!this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) || (this.selectCfmPtPSEStart && !this.selectCfmPtPSEEnd)) disabled = true;
+                    if((!this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) 
+                    || (this.selectCfmPtPSEStart && !this.selectCfmPtPSEEnd)) disabled = true;
                     else disabled = false;
                   }
                 break;
@@ -347,7 +364,8 @@ export default {
                   if(!this.isSubmit) {
                     if(this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) disabled = false;
                   } else {
-                    if((!this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) || (this.selectCfmWtEteSEStart && !this.selectCfmWtEteSEEnd)) disabled = true;
+                    if((!this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) 
+                    || (this.selectCfmWtEteSEStart && !this.selectCfmWtEteSEEnd)) disabled = true;
                     else disabled = false;
                   }
                   break;
@@ -365,7 +383,8 @@ export default {
                   if(!this.isSubmit) {
                     if(this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) disabled = false;
                   } else {
-                    if((!this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) || (this.selectCfmWtPSEStart && !this.selectCfmWtPSEEnd)) disabled = true;
+                    if((!this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) 
+                    || (this.selectCfmWtPSEStart && !this.selectCfmWtPSEEnd)) disabled = true;
                     else disabled = false;
                   }
                   break;
@@ -388,7 +407,8 @@ export default {
               if(!this.isSubmit) {
                 if(this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) disabled = false;
               } else {
-                if((!this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) || (this.selectCfmCtEteSEStart && !this.selectCfmCtEteSEEnd)) disabled = true;
+                if((!this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) 
+                || (this.selectCfmCtEteSEStart && !this.selectCfmCtEteSEEnd)) disabled = true;
                 else disabled = false;
               }
               break;
@@ -799,7 +819,7 @@ export default {
       this.$emitter.emit('reset', null);
       // reset 成功訊息
       this.$toast.success('Rule cleared.');
-      this.isShowBar = true;
+      this.isShowBarOpen = true;
     },
     /**
      * 設定 Start & End Data 連動資料
@@ -829,8 +849,8 @@ export default {
     /**
      * Apply button 發送選項，取得 Check Id.
      */
-    async submit() {
-      let data;
+    async submitConformance() {
+      let data  ;
 
       this.selectDurationTime = await {
         min: this.selectTimeRangeMin,
@@ -1187,8 +1207,12 @@ export default {
           };
           break;
       };
-      if(data.min > data.max) return this.$toast.error('Please check time range setting.');
-      if(JSON.stringify(data) === JSON.stringify(this.isSubmitData)) return this.$toast.error('Please set the new rule.');
+      if(data.min > data.max) {
+        return this.$toast.error('Please check time range setting.');
+      }
+      if(JSON.stringify(data) === JSON.stringify(this.isSubmitData)) {
+        return this.$toast.error('Please set the new rule.');
+      }
 
       this.isLoading = true;
       this.isSubmit = true;
@@ -1196,7 +1220,7 @@ export default {
       this.conformanceRuleData = data; // 給存檔的 Data
       await this.conformanceStore.addConformanceCheckId(data);
       await this.conformanceStore.getConformanceReport();
-      this.isShowBar = false;
+      this.isShowBarOpen = false;
       this.isLoading = false;
       // Results page Cover Plate
       this.$emitter.emit('coverPlate', false);
@@ -1204,7 +1228,7 @@ export default {
     },
   },
   created() {
-    this.isShowBar = this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId ? false : true;
+    this.isShowBarOpen = this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId ? false : true;
     // 選取 list 的結果
     this.$emitter.on('actListData', (data) => {
       this.selectConformanceTask = data;
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index d4028b5..483611b 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -106,7 +106,9 @@ export default {
         };
       },
       set(newValues) {
-        // 大於最大值時要等於最大值
+        // When the input value exceeds the acceptable maximum value, the front end
+        // should set the value to be equal to the maximum value.
+        // 當輸入的數值大於可接受的最大值時，前端要將數值設定成等同於最大值
         for (const unit in newValues) {
           this[unit] = newValues[unit].val;
           const input = document.querySelector(`[data-tunit="${unit}"]`);
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6259e66..1ca145b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,4 +1,12 @@
 {
+    "Global": {
+        "Login": "Login",
+        "Logout": "Logout",
+        "Apply": "Apply",
+        "Cancel": "Cancel",
+        "Clear": "Clear",
+        "Save": "Save"
+    },
     "Compare": {
         "timeUsage": "Time Usage",
         "frequency": "Frequency",
@@ -32,5 +40,9 @@
         "avgCycleEfficiency": "Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.",
         "avgWaitingTime": "Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.",
         "avgWaitingTimeByEdge": "Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity."
+    },
+    "Conformance": {
+        "RuleSettings": "Rule Settings",
+        "ActivitySelector": "Activity Selector"
     }
 }
\ No newline at end of file