Conformance: Have activity Log Results chart, Effect done.

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -1,10 +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" :class="isShowBar?'w-full':'w-[300px]'">
+<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="isShowBar?'w-full':'w-[300px]'">
   <!-- header -->
   <div class="bg-neutral-200 px-4">
     <p class="h2">Rule Settings</p>
   </div>
-
   <!-- contanier -->
   <div class="p-4 h-[calc(100%_-_40px)] flex">
     <div class="h-full flex flex-col justify-between w-[268px]">
@@ -23,7 +22,6 @@
         <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'"></ConformanceTimeRange>
       </div>
       <!-- button -->
-      {{ selectConformanceTask }}
       <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="submit">Apply</button>
@@ -37,6 +35,7 @@
 
 <script>
 import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
 import ConformanceStore from '@/stores/conformance.js';
 import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
 import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
@@ -45,10 +44,12 @@ import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResul
 
 export default {
   setup() {
+    const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
+    const { isLoading } = storeToRefs(loadingStore);
     const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
 
-    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore }
   },
   data() {
     return {
@@ -65,21 +66,47 @@ export default {
   },
   methods: {
     /**
-     * @param {boolean} massage true | false 清空選項
+     * @param {boolean} massage true | false 清空選單選項, 選擇的結果
      */
-     reset(massage) {
+     reset() {
+       // Results page Cover Plate
+       this.$emitter.emit('coverPlate', true);
       // Have activity
       this.selectConformanceTask = null;
       this.$emitter.emit('reset', null);
-      // 成功訊息
-      massage ? this.$toast.success('Reset Success.') : null;
+
+      // reset 成功訊息
+      this.$toast.success('Reset Success.');
+    },
+    /**
+     * Apply button 發送選項，取得 Checker Id.
+     */
+    async submit() {
+      let data;
+
+      if(this.selectedRuleType === 'Have activity') {
+        if(!this.selectConformanceTask?.length) return this.$toast.error('Not selected.');
+        else data = {
+          type: 'contains-tasks',
+          tasks: this.selectConformanceTask,
+        }
+      }
+
+      this.isLoading = true;
+      await this.conformanceStore.addLogConformanceTempCheckerId(data);
+      await this.conformanceStore.getLogConformanceTempReport();
+      this.isShowBar = false;
+      this.isLoading = false;
+      // Results page Cover Plate
+      this.$emitter.emit('coverPlate', false);
+      this.$toast.success('Apply Success. View the Conformance Checking Results.');
     },
   },
   created() {
-    this.isShowBar = true;
+    // this.isShowBar = true;
     this.$emitter.on('actListData', (data) => {
       this.selectConformanceTask = data;
-    })
+    });
   },
 }
 </script>