src/components: fix prop types in FormFieldSelectTable component (#695)

* make union to enum types in FormFieldSelectTable component * add OrganizationLevel enum and update FormFieldSelectTable usage * update FormFieldSelectTable docs * update FormFieldSelectTable component test props * src/components/form: fix FormSelectOrganization component modelValue prop doc --------- Co-authored-by: Šimon Macek <[email protected]> Co-authored-by: Tomas Zigo <[email protected]>
auto-mat · Nov 12, 2024 · 2bb4c4f · 2bb4c4f
1 parent 1b0b362
commit 2bb4c4f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 20 deletions.
diff --git a/src/components/__tests__/FormFieldSelectTable.cy.js b/src/components/__tests__/FormFieldSelectTable.cy.js
@@ -3,6 +3,10 @@ import { rideToWorkByBikeConfig } from 'src/boot/global_vars';
 import { i18n } from '../../boot/i18n';
 import { useSelectedOrganization } from 'src/composables/useSelectedOrganization';
 import { createPinia, setActivePinia } from 'pinia';
+import {
+  OrganizationLevel,
+  OrganizationType,
+} from 'src/components/types/Organization';
 // import { useRegisterChallengeStore } from 'src/stores/registerChallenge';
 
 const { contactEmail } = rideToWorkByBikeConfig;
@@ -63,7 +67,8 @@ describe('<FormFieldSelectTable>', () => {
       cy.mount(FormFieldSelectTable, {
         props: {
           options: options.value,
-          variant: 'company',
+          organizationLevel: OrganizationLevel.organization,
+          organizationType: OrganizationType.company,
           label: i18n.global.t('form.company.labelCompany'),
           labelButton: i18n.global.t('register.challenge.buttonAddCompany'),
           labelButtonDialog: i18n.global.t('form.company.buttonAddCompany'),
@@ -191,7 +196,8 @@ describe('<FormFieldSelectTable>', () => {
       cy.mount(FormFieldSelectTable, {
         props: {
           options: options.value,
-          variant: 'company',
+          organizationLevel: OrganizationLevel.organization,
+          organizationType: OrganizationType.company,
           modelValue: options.value[0].value,
           label: i18n.global.t('form.company.labelCompany'),
           labelButton: i18n.global.t('register.challenge.buttonAddCompany'),
@@ -215,7 +221,7 @@ describe('<FormFieldSelectTable>', () => {
       cy.mount(FormFieldSelectTable, {
         props: {
           options: options.value,
-          variant: 'team',
+          organizationLevel: OrganizationLevel.team,
           label: i18n.global.t('form.team.labelTeam'),
           labelButton: i18n.global.t('form.team.buttonAddTeam'),
           labelButtonDialog: i18n.global.t('form.team.buttonAddTeam'),
@@ -281,7 +287,7 @@ describe('<FormFieldSelectTable>', () => {
         .and('contain', i18n.global.t('form.messageOptionRequired'));
     });
 
-    it('renders dialog when for adding a new company', () => {
+    it('renders dialog when for adding a new team', () => {
       cy.dataCy('button-add-option').click();
       cy.dataCy('dialog-add-option').should('be.visible');
       cy.dataCy('dialog-add-option')

diff --git a/src/components/form/FormFieldSelectTable.vue b/src/components/form/FormFieldSelectTable.vue
@@ -10,7 +10,7 @@
  * Note: This component is commonly used in `RegisterChallengePage`.
  *
  * @props
- * - `modelValue` (String, required): The object representing selected
+ * - `modelValue` (Number, required): The ID representing selected
  *   company.
  * - `options` (Array<FormSelectTableOption>, required): The object
  *   representing the options.
@@ -19,13 +19,18 @@
  * - `labelButtonDialog` (string): The translation for the add
  *   button inside the dialog.
  * - `titleDialog` (string): The translation for the dialog title.
+ * - `organizationLevel` (OrganizationLevel, required): The organization
+ *   level - table is used for organization or team selection.
+ * - `organizationType` (OrganizationType,
+ *   default: OrganizationType.organization): The organization type.
  *
  * @events
  * - `update:modelValue`: Emitted as a part of v-model structure.
  *
  * @components
  * - `DialogDefault`: Used to render a dialog window with form as content.
  * - `FormAddCompany`: Used to render form for registering a new company.
+ * - `FormAddTeam`: Used to render form for registering a new team.
  *
  * @example
  * <form-field-select-table />
@@ -48,6 +53,9 @@ import FormAddTeam from '../form/FormAddTeam.vue';
 // composables
 import { useValidation } from '../../composables/useValidation';
 
+// enums
+import { OrganizationType, OrganizationLevel } from '../types/Organization';
+
 // types
 import {
   FormCompanyFields,
@@ -65,7 +73,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String as () => string | null,
+      type: Number as () => number | null,
       required: true,
     },
     options: {
@@ -88,10 +96,14 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    variant: {
-      type: String as () => 'company' | 'school' | 'group' | 'team',
+    organizationLevel: {
+      type: String as () => OrganizationLevel,
       required: true,
     },
+    organizationType: {
+      type: String as () => OrganizationType,
+      default: OrganizationType.company,
+    },
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
@@ -132,10 +144,10 @@ export default defineComponent({
 
     // v-model value
     const inputValue = computed({
-      get(): string | null {
+      get(): number | null {
         return props.modelValue;
       },
-      set(value: string | null): void {
+      set(value: number | null): void {
         emit('update:modelValue', value);
       },
     });
@@ -188,6 +200,8 @@ export default defineComponent({
       isFilled,
       onClose,
       onSubmit,
+      OrganizationType,
+      OrganizationLevel,
     };
   },
 });
@@ -310,12 +324,13 @@ export default defineComponent({
           <template #content>
             <q-form ref="formRef">
               <form-add-company
-                v-if="variant === 'company'"
-                class="q-mb-lg"
+                v-if="organizationLevel === OrganizationLevel.organization"
                 v-model="companyNew"
+                :organization-type="organizationType"
+                class="q-mb-lg"
               ></form-add-company>
               <form-add-team
-                v-if="variant === 'team'"
+                v-if="organizationLevel === OrganizationLevel.team"
                 class="q-mb-lg"
                 :form-values="teamNew"
                 @update:form-values="teamNew = $event"
@@ -350,7 +365,7 @@ export default defineComponent({
       </q-card>
     </q-field>
     <div
-      v-if="variant === 'company'"
+      v-if="organizationLevel === OrganizationLevel.organization"
       class="text-caption text-grey-7 q-mt-sm"
       data-cy="form-select-table-user-note"
     >

diff --git a/src/components/form/FormSelectOrganization.vue b/src/components/form/FormSelectOrganization.vue
@@ -31,7 +31,7 @@ import { useSelectedOrganization } from 'src/composables/useSelectedOrganization
 import formOrganizationOptions from '../../../test/cypress/fixtures/formOrganizationOptions.json';
 
 // types
-import { Organization } from '../types/Organization';
+import { Organization, OrganizationLevel } from '../types/Organization';
 
 export default defineComponent({
   name: 'FormSelectOrganization',
@@ -51,6 +51,7 @@ export default defineComponent({
       addressOptions,
       organizationId,
       organizationOptions,
+      OrganizationLevel,
     };
   },
 });
@@ -59,8 +60,8 @@ export default defineComponent({
 <template>
   <div data-cy="form-select-organization">
     <form-field-select-table
-      variant="company"
       v-model="organizationId"
+      :organization-level="OrganizationLevel.organization"
       :options="organizationOptions"
       :label="$t('form.company.labelCompany')"
       :label-button="$t('register.challenge.buttonAddCompany')"

diff --git a/src/components/types/Organization.ts b/src/components/types/Organization.ts
@@ -7,6 +7,12 @@ export enum OrganizationType {
   family = 'family',
 }
 
+export enum OrganizationLevel {
+  organization = 'organization',
+  subsidiary = 'subsidiary',
+  team = 'team',
+}
+
 export interface Organization {
   subsidiaries: OrganizationSubsidiary[];
   description?: string;

diff --git a/src/pages/RegisterChallengePage.vue b/src/pages/RegisterChallengePage.vue
@@ -41,6 +41,9 @@ import TopBarCountdown from 'src/components/global/TopBarCountdown.vue';
 // composables
 import { useStepperValidation } from 'src/composables/useStepperValidation';
 
+// enums
+import { OrganizationLevel } from 'src/components/types/Organization';
+
 // types
 import type { FormSelectTableOption } from 'src/components/types/Form';
 
@@ -115,18 +118,18 @@ export default defineComponent({
     const teamOptions: FormSelectTableOption[] = [
       {
         label: 'Zelený team',
-        value: 'team-1',
+        value: 34565,
         members: 2,
         maxMembers: 5,
       },
       {
         label: 'Modrý team',
-        value: 'team-2',
+        value: 34566,
         members: 5,
         maxMembers: 5,
       },
     ];
-    const team = ref<string>('');
+    const team = ref<number | null>(null);
 
     const step = ref(1);
     const stepperRef = ref<typeof QStepper | null>(null);
@@ -179,6 +182,7 @@ export default defineComponent({
       teamOptions,
       onBack,
       onContinue,
+      OrganizationLevel,
     };
   },
 });
@@ -387,7 +391,7 @@ export default defineComponent({
             <q-form ref="stepTeamRef">
               <form-field-select-table
                 v-model="team"
-                variant="team"
+                :organization-level="OrganizationLevel.team"
                 :options="teamOptions"
                 :label="$t('form.team.labelTeam')"
                 :label-button="$t('form.team.buttonAddTeam')"