locale of Conformance page

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' : ''">
+        <div v-if="!notShowActList" class="flex items-center justify-between mr-1" :class="isShowBarOpen ? 'text-primary' : ''">
-          <p class="h2">Activity Selector</p>
+          <p class="h2">{{ i18next.t("Conformance.ActivitySelector") }}</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>
+          <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 btn-neutral" @click="reset">{{ i18next.t("Global.Clear")}} </button>
-        <button type="button" class="btn btn-sm " @click="submit" :class="this.isDisabled ? 'btn-disable' : 'btn-neutral'" :disabled="isDisabledButton" >Apply</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,7 +849,7 @@ export default {
     /**
      * Apply button 發送選項，取得 Check Id.
      */
-    async submit() {
+    async submitConformance() {
       let data  ;
 
       this.selectDurationTime = await {
@@ -1187,8 +1207,12 @@ export default {
           };
           break;
       };
-      if(data.min > data.max) return this.$toast.error('Please check time range setting.');
+      if(data.min > data.max) {
-      if(JSON.stringify(data) === JSON.stringify(this.isSubmitData)) return this.$toast.error('Please set the new rule.');
+        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;

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}"]`);

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"
     }
 }