sonar medium 83 left

src/components/Discover/Map/Filter/Timeframes.vue

@@ -350,7 +350,7 @@ export default{
     // 讓日曆的範圍等於時間軸的範圍
     this.startTime = this.startMinDate;
     this.endTime = this.startMaxDate;
-    this.timeFrameStartEnd;
+    this.timeFrameStartEnd();
   },
 }
 </script>

src/components/Discover/Map/Filter/Trace.vue

@@ -162,7 +162,7 @@ export default {
           { field: 'id', header: 'Case Id' },
           { field: 'started_at', header: 'Start time' },
           { field: 'completed_at', header: 'End time' },
-          ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+          ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
         ];
       }
       return result

src/components/Discover/Map/SidebarFilter.vue

@@ -210,60 +210,22 @@ export default {
     // Apply Button disabled setting
     isDisabledButton: function() {
       let disabled = true;
-      let sele = this.selectValue;
+      const { selectValue: sele, selectAttType: type } = this;
-      const type = this.selectAttType;
+      const firstSelection = sele[0];
       
-      switch(sele[0]) {
+      if (firstSelection === 'Sequence') {
-        case 'Sequence': // Filter Type 選 Sequence 的行為
+        disabled = this.handleSequenceSelection(sele);
-          switch(sele[1]) {
+      } else if (firstSelection === 'Attributes') {
-            case 'Have activity(s)': // Activity Sequence 選 Have activity(s) 的行為
+        disabled = this.handleAttributesSelection(type);
-              if(this.selectFilterTask && this.selectFilterTask?.length !== 0) disabled = false;
+      } else if (firstSelection === 'Trace') {
-              break;
+        disabled = this.handleTraceSelection();
-            case 'Start & End': // Activity Sequence 選 Start & End 的行為
+      } else if (firstSelection === 'Timeframes') {
-              switch(sele[2]) {
+        disabled = this.handleTimeframesSelection();
-                case 'Start':
-                  if(this.selectFilterStart) disabled = false;
-                  break;
-                case 'End':
-                  if(this.selectFilterEnd) disabled = false;
-                  break;
-                case 'Start & End':
-                  if(this.selectFilterStartToEnd && this.selectFilterEndToStart) disabled = false;
-                  break;
-              }
-              break;
-            case 'Sequence': // Activity Sequence 選 Sequence 的行為
-              if(this.listSeq.length >= 2) disabled = false;
-              break;
-          }
-          break;
-        case 'Attributes': // Activity Sequence 選 Attributes 的行為
-          switch (type) {
-            case 'string':
-              if(this.selectAttribute && this.selectAttribute.length > 0) disabled = false;
-              break;
-            case 'boolean':
-              if(this.selectAttribute?.key && this.selectAttribute?.label) disabled = false;
-              break;
-            case 'int':
-            case 'float':
-            case 'date':
-              if(this.selectAttribute?.key && this.selectAttribute?.min != null && this.selectAttribute?.max != null) disabled = false;
-              break;
-            default:
-              break;
-          }
-          break;
-        case 'Trace': // Filter Type 選 Trace 的行為
-          if(this.selectTraceArea[0] !== this.selectTraceArea[1]) disabled = false;
-          break;
-        case 'Timeframes': // Filter Type 選 Timeframes 的行為
-          if(this.selectTimeFrame.length > 0) disabled = false;
-          break;
       }
+
       this.isDisabled = disabled;
       return disabled;
-    }
+    },
   },
   methods: {
     /**
@@ -520,7 +482,9 @@ export default {
         this.$refs.filterTraceView.selectArea = [0, this.$refs.filterTraceView.traceTotal];
       };
       // 成功訊息
-      massage ? this.$toast.success('Filter cleared.') : null;
+      if(message) {
+        this.$toast.success('Filter cleared.')
+      }
     },
     /**
      * header:Filter 發送選取的資料
@@ -660,7 +624,10 @@ export default {
       await this.allMapDataStore.checkHasResult();
 
       // 有 Data 就加進 Funnel，沒有 Data 不加進 Funnel 和跳錯誤訊息
-      if(this.hasResultRule === null) return this.isLoading = false;
+      if(this.hasResultRule === null) {
+          this.isLoading = false;
+          return;
+      }
       else if(this.hasResultRule) {
         if(!this.temporaryData?.length){
           this.temporaryData.push(...postData);
@@ -672,13 +639,11 @@ export default {
           this.ruleData.push(...postData.map(e => this.setRule(e)))
         }
         this.reset(false);
-        // this.isLoading = true;
         await new Promise(resolve => setTimeout(resolve, 1000));
         this.isLoading = false;
         this.$toast.success('Filter applied. Go to Funnel to verify.');
       }else {
         this.reset(false);
-        // this.isLoading = true;
         await new Promise(resolve => setTimeout(resolve, 1000));
         this.isLoading = false;
         this.$toast.warning('No result.');
@@ -690,6 +655,52 @@ export default {
     sumbitAll() {
       this.$emit('submit-all');
     },
+    handleSequenceSelection(sele) {
+      const secondSelection = sele[1];
+      
+      switch (secondSelection) {
+        case 'Have activity(s)':
+          return !(this.selectFilterTask && this.selectFilterTask.length !== 0);
+        case 'Start & End':
+          return this.handleStartEndSelection(sele[2]);
+        case 'Sequence':
+          return !(this.listSeq.length >= 2);
+        default:
+          return true;
+      }
+    },
+    handleStartEndSelection(option) {
+      switch (option) {
+        case 'Start':
+          return !this.selectFilterStart;
+        case 'End':
+          return !this.selectFilterEnd;
+        case 'Start & End':
+          return !(this.selectFilterStartToEnd && this.selectFilterEndToStart);
+        default:
+          return true;
+      }
+    },
+    handleAttributesSelection(type) {
+      switch (type) {
+        case 'string':
+          return !(this.selectAttribute && this.selectAttribute.length > 0);
+        case 'boolean':
+          return !(this.selectAttribute?.key && this.selectAttribute?.label);
+        case 'int':
+        case 'float':
+        case 'date':
+          return !(this.selectAttribute?.key && this.selectAttribute?.min != null && this.selectAttribute?.max != null);
+        default:
+          return true;
+      }
+    },
+    handleTraceSelection() {
+      return this.selectTraceArea[0] === this.selectTraceArea[1];
+    },
+    handleTimeframesSelection() {
+      return this.selectTimeFrame.length === 0;
+    },
     },
 }
 </script>

src/components/Discover/Map/SidebarTraces.vue

@@ -126,7 +126,7 @@ export default {
           { field: 'id', header: 'Case Id' },
           { field: 'started_at', header: 'Start time' },
           { field: 'completed_at', header: 'End time' },
-          ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+          ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
         ];
       }
       return result
@@ -287,14 +287,12 @@ export default {
   @apply sticky top-0 left-0 z-10 bg-neutral-10
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
-  @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
+  @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500;
+  white-space: nowrap;
 }
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
   @apply border-neutral-500 !border-t-0 text-center
 }
-:deep(.p-datatable .p-datatable-thead > tr > th) {
-  white-space: nowrap;
-}
 :deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
   min-width: 72px;
   max-width: 184px;