Issue #114: Done.

src/components/Discover/Map/SidebarFilter.vue

@@ -93,7 +93,8 @@
         <!-- Button -->
         <div class="float-right space-x-4 px-4 py-2">
           <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>
+          <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabledButton" :class="this.isDisabled ? 'btn-disable' : 'btn-neutral'">Apply</button>
+          <!-- :disabled="isDisabled" -->
         </div>
       </div>
     </div>
@@ -157,6 +158,7 @@ export default {
       isEndSelected: null,
       isActAllTask: true,
       rowData: [],
+      isDisabled: true, // Apply Button disabled setting
     }
   },
   components: {
@@ -189,6 +191,45 @@ export default {
     filterEndToStartData: function() {
       return this.isStartSelected ? this.setStartAndEndData(this.filterStartToEnd, this.rowData, 'sinks') : this.setActData(this.filterEndToStart);
     },
+    // Apply Button disabled setting
+    isDisabledButton: function() {
+      let disabled = true;
+      let sele = this.selectValue;
+
+      switch(sele[0]) {
+        case 'Sequence': // Filter Type 選 Sequence 的行為
+          switch(sele[1]) {
+            case 'Have activity(s)': // Activity Sequence 選 Have activity(s) 的行為
+              if(this.selectFilterTask && this.selectFilterTask?.length !== 0) disabled = false;
+              break;
+            case 'Start activity / End activity': // Activity Sequence 選 Start activity / End activity 的行為
+              switch(sele[2]) {
+                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 'Trace': // Filter Type 選 Trace 的行為
+          disabled = false;
+          break;
+        case 'Timeframes': // Filter Type 選 Timeframes 的行為
+          disabled = false;
+          break;
+      }
+      this.isDisabled = disabled;
+      return disabled;
+    }
   },
   methods: {
     /**
@@ -405,75 +446,69 @@ export default {
         'Active in': 'occurred-around'
       };
 
-      // Filter Type 選 Sequence 的行為
+      switch(sele[0]) {
-      // 若陣列為空，則跳出警告訊息
+        case 'Sequence': // Filter Type 選 Sequence 的行為
-      if(sele[0] === 'Sequence'){
+          switch(sele[1]) {
-        if(sele[1] === 'Have activity(s)'){ // Activity Sequence 選 Have activity(s) 的行為
+            case 'Have activity(s)': // Activity Sequence 選 Have activity(s) 的行為
-          if(!this.selectFilterTask?.length) return this.$toast.error('Not selected');
-          else {
-            // 將多選的 task 拆成一包包 obj
               data = this.selectFilterTask.map(task => {
                 return {
                   type : 'contains-task',
                   task : task.label,
                   is_exclude : isExclude,
                 }
-            })
+              });
-          };
+              break;
-        }else if(sele[1] === 'Start activity / End activity') { // Activity Sequence 選 Start activity / End activity 的行為
+            case 'Start activity / End activity': // Activity Sequence 選 Start activity / End activity 的行為
-          if(sele[2] === 'Start') {
+              switch(sele[2]) {
-            if(this.selectFilterStart === null || this.selectFilterStart.length === 0) return this.$toast.error('Not selected');
+                case 'Start':
-            else {
                   data = {
                     type: 'starts-with',
                     task: this.selectFilterStart.label,
                     is_exclude: isExclude,
-              }
                   };
-          }else if(sele[2] === 'End') {
+                  break;
-            if(this.selectFilterEnd === null || this.selectFilterEnd.length === 0) return this.$toast.error('Not selected');
+                case 'End':
-            else {
                   data = {
                     type: 'ends-with',
                     task: this.selectFilterEnd.label,
                     is_exclude: isExclude,
-              }
                   };
-          }else if(sele[2] === 'Start & End') {
+                  break;
-            if(this.selectFilterStartToEnd === null || this.selectFilterStartToEnd.length === 0 || this.selectFilterEndToStart === null || this.selectFilterEndToStart.length === 0 ) return this.$toast.error('Both Start and End must be selected.');
+                case 'Start & End':
-            else {
                   data = {
                     type: 'start-end',
                     starts_with: this.selectFilterStartToEnd.label,
                     ends_with: this.selectFilterEndToStart.label,
                     is_exclude: isExclude,
-              }
-            }
                   };
-        }else if(sele[1] === 'Sequence'){ // Activity Sequence 選 Sequence 的行為
+                  break;
-          if(this.listSeq.length < 2) return this.$toast.error('Select two or more.');
+              }
-          else {
+              break;
+            case 'Sequence': // Activity Sequence 選 Sequence 的行為
               data = {
                 type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows',
                 task_seq: this.listSeq.map(task => task.label),
                 is_exclude: isExclude,
-            }
               };
+              break;
           }
-      } else if(sele[0] === 'Timeframes'){ // Filter Type 選 Timeframes 的行為
+          break;
-        data = {
+        case 'Trace': // Filter Type 選 Trace 的行為
-          type: containmentMap[sele[6]],
-          start: this.selectTimeFrame[0],
-          end: this.selectTimeFrame[1],
-          is_exclude: isExclude,
-        }
-      } else if(sele[0] === 'Trace'){ // Filter Type 選 Trace 的行為
           data = {
             type: 'trace-freq',
             lower: this.$refs.filterTraceView.selectArea[0]+1,
             upper: this.$refs.filterTraceView.selectArea[1],
             is_exclude: isExclude,
-        }
+          };
+          break;
+        case 'Timeframes': // Filter Type 選 Timeframes 的行為
+          data = {
+            type: containmentMap[sele[6]],
+            start: this.selectTimeFrame[0],
+            end: this.selectTimeFrame[1],
+            is_exclude: isExclude,
+          };
+          break;
       }
       // 將資料指向 Vue data 雙向綁定
       const postData = Array.isArray(data) ? data : [data];