pageAdmin add setActivePageComputedByRoute function

2024-06-05 13:08:52 +08:00
parent 427b9b6aed
commit 5f0e12ef1a
10 changed files with 213 additions and 135 deletions
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -24,53 +24,53 @@
        </div>
        <!-- select result -->
        <ConformanceSelectResult
-        :isSubmit="isAlreadySubmit"
-        :isSubmitTask="isSubmitTask"
-        :isSubmitStartAndEnd="isSubmitStartAndEnd"
-        :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
-        :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
-        :isSubmitDurationData="isSubmitDurationData"
-        :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
-        :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
-        :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
-        :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
-        :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
-        :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
-        :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
-        :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
-        :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
-        :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
-        :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
-        :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
-        :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
-        :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
-        :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
+          :isSubmit="isAlreadySubmit"
+          :isSubmitTask="isSubmitTask"
+          :isSubmitStartAndEnd="isSubmitStartAndEnd"
+          :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
+          :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
+          :isSubmitDurationData="isSubmitDurationData"
+          :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
+          :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
+          :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
+          :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
+          :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
+          :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
+          :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
+          :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
+          :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
+          :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
+          :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
+          :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
+          :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
+          :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
+          :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
        ></ConformanceSelectResult>
        <!-- Time Range -->
        <ConformanceTimeRange
-        @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds"
+          @min-total-seconds="minTotalSeconds"
+          @max-total-seconds="maxTotalSeconds"

-        :isSubmitDurationTime="isSubmitDurationTime"
+          :isSubmitDurationTime="isSubmitDurationTime"

-        :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
-        :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
-        :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
-        :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
-        :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
-        :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
-        :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
-        :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
-        :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
-        :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
-        :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
-        :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
-        :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
-        :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
-        :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
-        :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
-        :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
-        :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
+          :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
+          :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
+          :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
+          :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
+          :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
+          :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
+          :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
+          :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
+          :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
+          :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
+          :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
+          :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
+          :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
+          :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
+          :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
+          :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
+          :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
+          :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
         ></ConformanceTimeRange>
      </div>
      <!-- buttons -->
@@ -89,33 +89,33 @@
    </div>
    <!-- show bar -->
    <ConformanceShowBar v-if="!notShowActList" :class="isShowBarOpen?'':'hidden'"
-    :isSubmit="isAlreadySubmit"
-    :isSubmitTask="isSubmitTask"
-    :isSubmitStartAndEnd="isSubmitStartAndEnd"
-    :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
-    :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
-    :isSubmitDurationData="isSubmitDurationData"
-    :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
-    :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
-    :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
-    :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
-    :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
-    :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
-    :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
-    :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
-    :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
-    :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
-    :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
-    :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
-    :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
-    :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
-    :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
-    :isSubmitShowDataSeq="isSubmitShowDataSeq"
-    :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
-    :isSubmitShowDataPtP="isSubmitShowDataPtP"
-    :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
-    :isSubmitShowDataWtP="isSubmitShowDataWtP"
-    :isSubmitShowDataCt="isSubmitShowDataCt"
+      :isSubmit="isAlreadySubmit"
+      :isSubmitTask="isSubmitTask"
+      :isSubmitStartAndEnd="isSubmitStartAndEnd"
+      :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
+      :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
+      :isSubmitDurationData="isSubmitDurationData"
+      :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
+      :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
+      :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
+      :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
+      :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
+      :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
+      :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
+      :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
+      :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
+      :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
+      :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
+      :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
+      :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
+      :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
+      :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
+      :isSubmitShowDataSeq="isSubmitShowDataSeq"
+      :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
+      :isSubmitShowDataPtP="isSubmitShowDataPtP"
+      :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
+      :isSubmitShowDataWtP="isSubmitShowDataWtP"
+      :isSubmitShowDataCt="isSubmitShowDataCt"
    ></ConformanceShowBar>
  </div>
 </section>
@@ -160,7 +160,6 @@ export default {
      i18next: i18next,
      isMainBtnDisabled: true,
      isShowBarOpen: false,
-      visibleLeft: false,
      selectConformanceTask: null,
      selectConformanceStartAndEnd: null, // Activity sequence
      selectCfmSeqStart: null,
@@ -297,44 +296,44 @@ export default {
     * Apply button is disabled or not
     */
    isApplyBtnDisabled() {
-      let disabled = true;
+      let disabledBool = true;
      switch (this.selectedRuleType) {
        case 'Have activity': // Rule Type 選 Have activity 的行為
          if(this.selectConformanceTask?.length) {
-            disabled = false;
+            disabledBool = false;
          }
          break
        case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
          switch (this.selectedActivitySequence) {
            case 'Start & End': // Activity Sequence 選 Start & End 的行為
              if(this.selectCfmSeqStart && this.selectCfmSeqEnd) {
-                disabled = false;
+                disabledBool = false;
              }
              break;
            case 'Sequence': // Activity Sequence 選 Sequence 的行為
              switch (this.selectedMode) {
                case 'Directly follows':
                  if(this.selectCfmSeqDirectly.length >= 2) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'Eventually follows':
                  if(this.selectCfmSeqEventually.length >= 2) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'Short loop(s)':
                  disabled = false;
                  break;
                case 'Self loop(s)':
-                  disabled = false;
+                  disabledBool = false;
                  break;
              };
          }
          break;
        case 'Activity duration': // Rule Type 選 Activity duration 的行為
          if(this.selectDurationData?.length) {
-            disabled = false;
+            disabledBool = false;
          }
          break;
        case 'Processing time': // Rule Type 選 Processing time 的行為
@@ -342,30 +341,30 @@ export default {
            case 'End to end':
              switch (this.selectedActSeqMore) {
                case 'All':
-                  disabled = false;
+                  disabledBool = false;
                  break;
                case 'Start':
                  if(this.selectCfmPtEteStart) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'End':
                  if(this.selectCfmPtEteEnd) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'Start & End':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd){
-                      disabled = false;
+                      disabledBool = false;
                    }
                  } else {
                    if((!this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd) 
                    || (this.selectCfmPtEteSEStart && !this.selectCfmPtEteSEEnd)) {
-                      disabled = true;
+                      disabledBool = true;
                    }
                    else {
-                      disabled = false;
+                      disabledBool = false;
                    }
                  }
                break;
@@ -375,26 +374,26 @@ export default {
              switch (this.selectedActSeqFromTo) {
                case 'From':
                  if(this.selectCfmPtPStart) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'To':
                  if(this.selectCfmPtPEnd) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'From & To':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) {
-                      disabled = false;
+                      disabledBool = false;
                    }
                  } else {
                    if((!this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) 
                    || (this.selectCfmPtPSEStart && !this.selectCfmPtPSEEnd)) {
-                      disabled = true;
+                      disabledBool = true;
                    }
                    else {
-                      disabled = false;
+                      disabledBool = false;
                    }
                  }
                break;
@@ -408,25 +407,25 @@ export default {
              switch (this.selectedActSeqMore) {
                case 'Start':
                  if(this.selectCfmWtEteStart) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'End':
                  if(this.selectCfmWtEteEnd) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'Start & End':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) {
-                      disabled = false;                      
+                      disabledBool = false;                      
                    } else {
                      if((!this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) 
                      || (this.selectCfmWtEteSEStart && !this.selectCfmWtEteSEEnd)) {
-                        disabled = true;
+                        disabledBool = true;
                      }
                      else {
-                        disabled = false;
+                        disabledBool = false;
                      }
                    }
                    break;
@@ -437,26 +436,26 @@ export default {
              switch (this.selectedActSeqFromTo) {
                case 'From':
                  if(this.selectCfmWtPStart) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'To':
                  if(this.selectCfmWtPEnd) {
-                    disabled = false;
+                    disabledBool = false;
                  }
                  break;
                case 'From & To':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) {
-                      disabled = false;
+                      disabledBool = false;
                    }
                  } else {
                    if((!this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) 
                    || (this.selectCfmWtPSEStart && !this.selectCfmWtPSEEnd)) {
-                      disabled = true;
+                      disabledBool = true;
                    }
                    else {
-                      disabled = false;
+                      disabledBool = false;
                    }
                  }
                  break;
@@ -467,30 +466,30 @@ export default {
        case 'Cycle time': // Rule Type 選 Cycle time 的行為
          switch (this.selectedActSeqMore) {
            case 'All':
-              disabled = false;
+              disabledBool = false;
              break;
            case 'Start':
              if(this.selectCfmCtEteStart) {
-                disabled = false;
+                disabledBool = false;
              }
              break;
            case 'End':
              if(this.selectCfmCtEteEnd) {
-                disabled = false;
+                disabledBool = false;
              }
              break;
            case 'Start & End':
              if(!this.isAlreadySubmit) {
                if(this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) {
-                  disabled = false;
+                  disabledBool = false;
                }
              } else {
                if((!this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) 
                || (this.selectCfmCtEteSEStart && !this.selectCfmCtEteSEEnd)) {
-                  disabled = true;
+                  disabledBool = true;
                }
                else {
-                  disabled = false;
+                  disabledBool = false;
                }
              }
              break;
@@ -498,7 +497,7 @@ export default {
          break;
      };
      
-      return this.isMainBtnDisabled = disabled;
+      return this.isMainBtnDisabled = disabledBool;
      
    },
  },
@@ -902,7 +901,7 @@ export default {
      this.selectTimeReset();
      this.$emitter.emit('reset', null);
      // reset 成功訊息
-      this.$toast.success('Rule cleared.');
+      this.$toast.success(i18next.t("Conformance.RuleCleared"));
      this.isShowBarOpen = true;
    },
    /**
@@ -1292,10 +1291,10 @@ export default {
          break;
      };
      if(dataToSave.min > dataToSave.max) {
-        return this.$toast.error('Please check time range setting.');
+        return this.$toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
      }
      if(JSON.stringify(dataToSave) === JSON.stringify(this.isSubmittedData)) {
-        return this.$toast.error('Please set the new rule.');
+        return this.$toast.error(i18next.t("Conformance.PleaseSetNewRule"));
      }

      this.isLoading = true;
@@ -1308,7 +1307,7 @@ export default {
      this.isLoading = false;
      // Results page Cover Plate
      this.$emitter.emit('coverPlate', false);
-      this.$toast.success('Rule applied.');
+      this.$toast.success(i18next.t("Conformance.RuleApplied"));
    },
    setTaskByCategoryOnRadioEmitting () {
      this.$emitter.on('actRadioData', (data) => {
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -1,8 +1,12 @@
 <template>
  <div class="flex justify-between items-center" id="cyp-timerange">
-    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds" :value="durationMin"></Durationjs>
+    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax"
+      @total-seconds="minTotalSeconds" :value="durationMin">
+    </Durationjs>
      <span>~</span>
-    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin" @total-seconds="maxTotalSeconds" :value="durationMax"></Durationjs>
+    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin"
+      @total-seconds="maxTotalSeconds" :value="durationMax">
+    </Durationjs>
  </div>
 </template>
 <script>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -14,9 +14,11 @@
            <h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">FILES</h2>
          </div>
          <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-            <li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]"
-              :key="index" class="nav-item" :class="{'active': activePage?.toUpperCase() === item}">
-                {{ item }}
+            <li @click="onNavItemBtnClick($event, item)"
+              v-for="(item, index) in navViewData[navViewName]"
+              :key="index" class="nav-item"
+              :class="{'active': activePageComputedByRoute === item}">
+              {{ item }}
            </li>
          </ul>
        </div>
@@ -131,18 +133,23 @@ export default {
    noShowSaveButton: function() {
      return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.activePage === 'PERFORMANCE' ? true : false;
    },
-    ...mapState(PageAdminStore, ['activePage', 'pendingActivePage']),
+    ...mapState(PageAdminStore, [
+      'activePage',
+      'pendingActivePage',
+      'activePageComputedByRoute',
+    ]),
  },
  watch: {
    '$route':'getNavViewName',
    filterName: function(newVal, oldVal) {
      this.filterName = newVal;
    },
-    activePage: function(newVal) {
-    }
  },
  mounted() {
-    if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId;
+    this.handleNavItemBtn();
+    if(this.$route.params.type === 'filter') {
+      this.createFilterId= this.$route.params.fileId;
+    }
    this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer') ? true : false;
    this.getNavViewName();
  },
@@ -151,7 +158,8 @@ export default {
     * switch navbar item
     * @param {event} event 選取 Navbar 選項後傳入的值
     */
-    switchNavItem(event) {
+    onNavItemBtnClick(event) {
+      console.log('onNavItemBtnClick');
      let type;
      let fileId;
      let isCheckPage;
@@ -200,6 +208,7 @@ export default {
        return;
      }

+      // 說明this.$route.matched[1] 表示當前路由匹配的第二個路由記錄
      this.navViewName = this.$route.matched[1].name.toUpperCase();
      this.store.filesTag = 'ALL';
      switch (this.navViewName) {
@@ -233,6 +242,8 @@ export default {

      // Frontend is not sure which button will the user press on the modal,
      // so here we need to save to a pending state
+      // 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
+      // 因此我們需要將其保存到待處理狀態
      this.setPendingActivePage(valueToSet);

      return valueToSet;
@@ -299,10 +310,19 @@ export default {
          break;
      }
    },
+    /**
+     * Set nav item button background color in case the variable is an empty string
+     */
+    handleNavItemBtn() {
+      if(this.activePageComputedByRoute === "") {
+        this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
+      }
+    },
    ...mapActions(PageAdminStore, [
      'setPendingActivePage',
      'setPrevioiusPage',
-      'setActivePage'
+      'setActivePage',
+      'setActivePageComputedByRoute',
    ],),
  },
 }
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -11,7 +11,8 @@
      <p v-show="seconds != 0">{{ seconds }}s</p>
    </div>
  </div>
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="{id: size, handler: onClose}">
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect"
+    v-closable="{id: size, handler: onClose}">
    <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
      <input
        type="text"