feature: read params from url and reverse as well

franciscobmacedo · Jan 21, 2024 · 01cb433 · 01cb433
1 parent cd7fa0a
commit 01cb433
Show file tree

Hide file tree

Showing 4 changed files with 235 additions and 56 deletions.
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
@@ -30,14 +30,15 @@
                 displayFrequency === FrequencyChoices[frequencyChoice],
             }"
             @click="setFrequency(frequencyChoice)"
+            data-cy="frequency-button"
           >
             {{ frequencyChoice }}
           </button>
         </div>
       </div>
       <div class="flex ml-3 md:ml-0 justify-start items-center mt-2 space-x-4">
         <p class="text-sm w-fit">Nr. of months to simulate your earnings</p>
-        <AdjustCounter v-model:value="nrMonthsDisplay" :min="1" unit="months" />
+        <AdjustCounter :value="store.nrMonthsDisplay" @update:value="store.setNrMonthsDisplay" :min="1" unit="months" data-cy="nr-months-display" />
         <InfoButton>
           <p class="text-sm w-64 text-center">
             In a portuguese company, you can get payed 2 extra months per year
@@ -54,6 +55,7 @@
           v-model:value="ssDiscountPosition"
           :min="0"
           :max="ssDiscountChoices.length - 1"
+          data-cy="ss-discount"
         >
           {{ ssDiscountDisplay }}
         </AdjustCounter>
@@ -74,6 +76,7 @@
             :choices="SUPPORTED_TAX_RANK_YEARS"
             @change="changeCurrentTaxRankYear"
             :value="getCurrentTaxRankYear.toString()"
+            data-cy="tax-rank-years-dropdown"
           />
         </div>
         <InfoButton>
@@ -96,7 +99,9 @@
       >
         <SwitchButton
             label="Are you within the first 12 months of starting your activity?"
-            v-model="ssFirstYear"
+            :model-value="store.ssFirstYear"
+            @update:model-value="store.setSsFirstYear"
+            data-cy="ss-first-year"
         />
         <InfoButton
             link="https://www.montepio.org/ei/pessoal/emprego-e-formacao/seguranca-social-guia-com-as-regras-para-os-trabalhadores-independentes#"
@@ -121,8 +126,10 @@
       >
         <SwitchButton
           label="Are you in your first fiscal year of activity?"
-          v-model="firstYear"
+          :model-value="store.firstYear"
+          @update:model-value="setFirstYear"
           :key="firstYearKey"
+          data-cy="first-year"
         />
         <InfoButton
           link="https://www.cgd.pt/Site/Saldo-Positivo/leis-e-impostos/Pages/irs-trabalhadores-independentes.aspx"
@@ -147,8 +154,10 @@
       >
         <SwitchButton
             label="Are you in your second fiscal year of activity?"
-            v-model="secondYear"
+            :model-value="store.secondYear"
+            @update:model-value="setSecondYear"
             :key="secondYearKey"
+            data-cy="second-year"
         />
         <InfoButton
             link="https://www.cgd.pt/Site/Saldo-Positivo/leis-e-impostos/Pages/irs-trabalhadores-independentes.aspx"
@@ -172,7 +181,10 @@
       >
         <SwitchButton
           label="Are you eligible to be in the NHR/RNH?"
-          v-model="rnh"
+          :model-value="store.rnh"
+          @update:model-value="store.setRnh"
+          data-cy="rnh"
+
         />
         <InfoButton
           link="https://info.portaldasfinancas.gov.pt/pt/apoio_contribuinte/Folhetos_informativos/Documents/Non_habitual_residents_Tax_regime.pdf"
@@ -197,12 +209,14 @@
           </span>
         </div>
         <AdjustCounter
-          v-model:value="expenses"
+          :value="store.expenses"
+          @update:value="store.setExpenses"
           :min="0"
           :max="grossIncome.year"
           :step="100"
           unit="€"
           :width="14"
+          data-cy="expenses"
         >
         </AdjustCounter>
         <InfoButton
@@ -332,7 +346,7 @@ const setFrequency = (frequencyChoice: string) => {
 const ssDiscountChoices = [
   -0.25, -0.2, -0.15, -0.1, -0.05, 0, +0.05, +0.1, +0.15, +0.2, +0.25,
 ];
-const ssDiscountPosition = ref(5);
+const ssDiscountPosition = ref(store.ssDiscountChoices.indexOf(store.ssDiscount));
 watch(
   () => ssDiscountPosition.value,
   (newPosition) => {
@@ -343,23 +357,17 @@ const ssDiscountDisplay = computed(() => {
   return `${store.ssDiscount > 0 ? "+" : ""}${store.ssDiscount * 100}%`;
 });
 
-// Automatically switch first and second year
-watch(
-    () => firstYear.value,
-    (value) => {
-      if(value === true) {
-        secondYear.value = false;
-        secondYearKey.value++;
-      }
-    },
-);
-watch(
-    () => secondYear.value,
-    (value) => {
-      if(value === true) {
-        firstYear.value = false;
-        firstYearKey.value++;
-      }
-    },
-);
+const setFirstYear = (value: boolean) => {
+  store.setFirstYear(value);
+  if (value === true) {
+    secondYear.value = false;
+  }
+};
+
+const setSecondYear = (value: boolean) => {
+  store.setSecondYear(value);
+  if (value === true) {
+    firstYear.value = false;
+  }
+};
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -22,4 +22,14 @@ const router = createRouter({
   linkExactActiveClass: "underline underline-offset-8",
 });
 
+export const updateUrlQuery = (param: string, value: any) => {
+  const queryParams = { ...router.currentRoute.value.query };
+  queryParams[param] = value;
+  router.push({ query: queryParams });
+};
+
+export const clearUrlQuery = () => {
+  router.push({ query: undefined });
+};
+
 export default router;