src/components: refactor register challenge team step into FormSelect…

…Team component (#748) * refactor register challenge team step into a separate component * src/components/form: fix FormFieldSelectTable component modelValue prop default null val Fix FormSelectTeam component Vue.js web browser console warning message: ``` [Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Number with value 0, got Null at <FormFieldSelectTable modelValue=null onUpdate:modelValue=fn organization-level="team" ... > at <FormSelectTeam ref="VTU_COMPONENT" > at <VTUROOT> ``` * src/components/form: fix replacing i18n deprecated trans func name Web browser Vue.js FormFieldSelectTable component warning message: ``` [intlify] 'tc' and '$tc' has been deprecated in v10. Use 't' or '$t' instead. 'tc' and '$tc’ are going to remove in v11. ``` --------- Co-authored-by: Šimon Macek <simon.macek@proficio.cz> Co-authored-by: Tomas Zigo <tomas.zigo@slovanet.sk>
auto-mat · Dec 2, 2024 · eea64db · eea64db
1 parent 379b7a9
commit eea64db
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 36 deletions.
diff --git a/src/components/__tests__/FormSelectTeam.cy.js b/src/components/__tests__/FormSelectTeam.cy.js
@@ -0,0 +1,51 @@
+import FormSelectTeam from 'components/form/FormSelectTeam.vue';
+import { i18n } from '../../boot/i18n';
+
+// selectors
+const selectorFormSelectTeam = 'form-select-team';
+const selectorFormSelectTableTeam = 'form-select-table-team';
+const selectorFormSelectTeamInfo = 'form-select-team-info';
+describe('<FormSelectTeam>', () => {
+  it('has translation for all strings', () => {
+    cy.testLanguageStringsInContext(
+      ['textTeamInfo'],
+      'register.challenge',
+      i18n,
+    );
+  });
+
+  context('desktop', () => {
+    beforeEach(() => {
+      cy.mount(FormSelectTeam, {
+        props: {},
+      });
+      cy.viewport('macbook-16');
+    });
+
+    coreTests();
+  });
+
+  context('mobile', () => {
+    beforeEach(() => {
+      cy.mount(FormSelectTeam, {
+        props: {},
+      });
+      cy.viewport('iphone-6');
+    });
+
+    coreTests();
+  });
+});
+
+function coreTests() {
+  it('renders component', () => {
+    // component
+    cy.dataCy(selectorFormSelectTeam).should('be.visible');
+    // info text
+    cy.dataCy(selectorFormSelectTeamInfo)
+      .should('be.visible')
+      .should('have.text', i18n.global.t('register.challenge.textTeamInfo'));
+    // select table
+    cy.dataCy(selectorFormSelectTableTeam).should('be.visible');
+  });
+}
diff --git a/src/components/form/FormFieldSelectTable.vue b/src/components/form/FormFieldSelectTable.vue
@@ -74,7 +74,8 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Number as () => number | null,
-      required: true,
+      required: false,
+      default: null,
     },
     options: {
       type: Array as () => FormSelectTableOption[] | FormOption[],
@@ -263,7 +264,7 @@ export default defineComponent({
                     <div class="flex">
                       <div :class="{ 'text-weight-bold': opt.members > 4 }">
                         {{ opt.members }} / {{ opt.maxMembers }}
-                        {{ $tc('form.team.labelMembers', opt.maxMembers) }}
+                        {{ $t('form.team.labelMembers', opt.maxMembers) }}
                       </div>
                       <!-- Member dot icons -->
                       <div class="d-flex gap-4">

diff --git a/src/components/form/FormSelectTeam.vue b/src/components/form/FormSelectTeam.vue
@@ -0,0 +1,77 @@
+<script lang="ts">
+/**
+ * FormSelectTeam Component
+ *
+ * @description Use this component to render a table for selecting a team.
+ * Handles fetching teams from API.
+ * Note: This component is used on `RegisterChallengePage`.
+ *
+ * @components
+ * - `FormFieldSelectTable`: Base component for displaying selectable table options
+ *
+ * @example
+ * <form-select-team />
+ *
+ * @see [Figma Design](https://www.figma.com/design/L8dVREySVXxh3X12TcFDdR/Do-pr%C3%A1ce-na-kole?node-id=5366-26763&t=3zQmiCgIVO72EQBq-1)
+ */
+
+// libraries
+import { defineComponent, ref } from 'vue';
+
+// enums
+import { OrganizationLevel } from 'src/components/types/Organization';
+
+// types
+import { FormSelectTableOption } from '../types/Form';
+
+// components
+import FormFieldSelectTable from './FormFieldSelectTable.vue';
+
+export default defineComponent({
+  name: 'FormSelectTeam',
+  components: {
+    FormFieldSelectTable,
+  },
+  setup() {
+    // TODO: fetch teams from API
+    const teamOptions: FormSelectTableOption[] = [
+      {
+        label: 'Zelený team',
+        value: 34565,
+        members: 2,
+        maxMembers: 5,
+      },
+      {
+        label: 'Modrý team',
+        value: 34566,
+        members: 5,
+        maxMembers: 5,
+      },
+    ];
+
+    const team = ref<number | null>(null);
+
+    return {
+      team,
+      teamOptions,
+      OrganizationLevel,
+    };
+  },
+});
+</script>
+
+<template>
+  <div data-cy="form-select-team">
+    <!-- Text: Info -->
+    <div class="q-mb-lg" data-cy="form-select-team-info">
+      {{ $t('register.challenge.textTeamInfo') }}
+    </div>
+    <!-- Select table -->
+    <form-field-select-table
+      v-model="team"
+      :organization-level="OrganizationLevel.team"
+      :options="teamOptions"
+      data-cy="form-select-table-team"
+    />
+  </div>
+</template>
diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
@@ -678,6 +678,7 @@ textCountdownOctober = "Do Říjnové výzvy zbývá {days} dní a {hours}:{minu
 textCountdownMay = "Do Květnové výzvy zbývá {days} dní a {hours}:{minutes}:{seconds} hodin!"
 textPaymentMinimum = "<b>Startovné je účastnický poplatek s minimem 390 Kč</b>. Umožňujete nám tak Výzvu provozovat, poskytovat během ní podporu a poskytnout vám startovní balíček. Pokud nás chcete podpořit, budeme rádi za vyšší částky."
 textPaymentOrganizer = "<p>Výzvu Do práce na kole pro vás pořádá spolek AutoMat, který kontinuálně pracuje na zlepšování podmínek pro pěší a lidi na kolech v Česku.</p><p>Pokud nás v našem úsilí chcete podpořit, můžete své startovné do výzvy navýšit o benefiční příspěvek v libovolné výši. Pomůžete tak dalšímu udržitelnému rozvoji našich měst. Děkujeme.</p>"
+textTeamInfo = "V jednom týmu může být max. 5 členů."
 titleRegisterToChallenge.may = "Registrace do Květnové výzvy"
 titleRegisterToChallenge.october = "Registrace do Říjnové výzvy"
 titleStepPersonalDetails = "Osobní údaje"

diff --git a/src/i18n/en.toml b/src/i18n/en.toml
@@ -675,6 +675,7 @@ textCountdownOctober = "{days} days and {hours}:{minutes}:{seconds} hours left t
 textCountdownMay = "{days} days and {hours}:{minutes}:{seconds} hours left to May Challenge!"
 textPaymentMinimum = "<b>The entry fee is a participation fee with a minimum of 390 CZK</b>. You allow us to run the Challenge, provide support during the Challenge and provide you with a starter package. If you would like to support us, higher amounts will be much appreciated."
 textPaymentOrganizer = "<p>Ride to Work by Bike Challenge is organized by AutoMat, which continuously works to improve conditions for pedestrians and people on bicycles in the Czech Republic.</p><p>If you want to support us in our efforts, you can increase your entry fee for the challenge by a charitable contribution of any amount. You will be helping to further the sustainable development of our cities. Thank you.</p>"
+textTeamInfo = "In one team, there can be a maximum of 5 members."
 titleRegisterToChallenge.may = "Register for May challenge"
 titleRegisterToChallenge.october = "Register for October challenge"
 titleStepPersonalDetails = "Personal details"

diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
@@ -675,6 +675,7 @@ textCountdownOctober = "Do októbrovej výzvy zostáva {days} dní a {hours}:{mi
 textCountdownMay = "Do májovej výzvy zostáva {days} dní a {hours}:{minutes}:{seconds} hodín!"
 textPaymentMinimum = "<b>Štartovné je účastnícky poplatok v minimálnej výške 390 Kč</b>. Umožníte nám viesť výzvu, poskytovať podporu počas výzvy a poskytnúť vám štartovací balíček. Ak nás chcete podporiť, budeme radi aj za vyššie sumy."
 textPaymentOrganizer = "<p>Výzvu Do práce na bicykli organizuje spoločnosť AutoMat, ktorá sa neustále snaží zlepšovať podmienky pre chodcov a ľudí na bicykloch v Českej republike.</p><p>Ak nás chcete v našom úsilí podporiť, môžete si štartovné na výzvu navýšiť o charitatívny príspevok v ľubovoľnej výške. Pomôžete tak ďalšiemu udržateľnému rozvoju našich miest. Ďakujeme.</p>"
+textTeamInfo = "V jednom tíme může být max. 5 členů."
 titleRegisterToChallenge.may = "Registrácia na májovú výzvu"
 titleRegisterToChallenge.october = "Registrácia na októbrovú výzvu"
 titleStepPersonalDetails = "Osobné údaje"

diff --git a/src/pages/RegisterChallengePage.vue b/src/pages/RegisterChallengePage.vue
@@ -30,11 +30,11 @@ import { QForm, QStepper } from 'quasar';
 import { rideToWorkByBikeConfig } from '../boot/global_vars';
 
 // components
-import FormFieldSelectTable from 'src/components/form/FormFieldSelectTable.vue';
 import FormFieldListMerch from 'src/components/form/FormFieldListMerch.vue';
 import FormFieldOptionGroup from 'src/components/form/FormFieldOptionGroup.vue';
 import FormPersonalDetails from 'src/components/form/FormPersonalDetails.vue';
 import FormSelectOrganization from 'src/components/form/FormSelectOrganization.vue';
+import FormSelectTeam from 'src/components/form/FormSelectTeam.vue';
 import LoginRegisterHeader from 'components/global/LoginRegisterHeader.vue';
 import RegisterChallengePayment from 'src/components/register/RegisterChallengePayment.vue';
 import TopBarCountdown from 'src/components/global/TopBarCountdown.vue';
@@ -43,25 +43,19 @@ import TopBarCountdown from 'src/components/global/TopBarCountdown.vue';
 import { useStepperValidation } from 'src/composables/useStepperValidation';
 
 // enums
-import {
-  OrganizationLevel,
-  OrganizationType,
-} from 'src/components/types/Organization';
+import { OrganizationType } from 'src/components/types/Organization';
 
 // stores
 import { useRegisterChallengeStore } from 'src/stores/registerChallenge';
 
-// types
-import type { FormSelectTableOption } from 'src/components/types/Form';
-
 export default defineComponent({
   name: 'RegisterChallengePage',
   components: {
-    FormFieldSelectTable,
     FormFieldListMerch,
     FormFieldOptionGroup,
     FormPersonalDetails,
     FormSelectOrganization,
+    FormSelectTeam,
     LoginRegisterHeader,
     RegisterChallengePayment,
     TopBarCountdown,
@@ -130,22 +124,6 @@ export default defineComponent({
       },
     });
 
-    const teamOptions: FormSelectTableOption[] = [
-      {
-        label: 'Zelený team',
-        value: 34565,
-        members: 2,
-        maxMembers: 5,
-      },
-      {
-        label: 'Modrý team',
-        value: 34566,
-        members: 5,
-        maxMembers: 5,
-      },
-    ];
-    const team = ref<number | null>(null);
-
     const step = ref(1);
     const stepperRef = ref<typeof QStepper | null>(null);
     const stepCompanyRef = ref<typeof QForm | null>(null);
@@ -193,11 +171,8 @@ export default defineComponent({
       activeIconImgSrcStepper6,
       doneIconImgSrcStepper6,
       organizationType,
-      team,
-      teamOptions,
       onBack,
       onContinue,
-      OrganizationLevel,
     };
   },
 });
@@ -404,12 +379,7 @@ export default defineComponent({
             data-cy="step-5"
           >
             <q-form ref="stepTeamRef">
-              <form-field-select-table
-                v-model="team"
-                :organization-level="OrganizationLevel.team"
-                :options="teamOptions"
-                data-cy="form-select-table-team"
-              />
+              <form-select-team data-cy="form-select-team" />
             </q-form>
             <q-stepper-navigation class="flex justify-end">
               <q-btn