src/components: refactor dynamic labels in FormFieldSelectTable to a …

…composable (#700) * refactor label logic in FormFieldSelectTable * add subsidiary translations --------- Co-authored-by: Šimon Macek <[email protected]>
auto-mat · Nov 13, 2024 · 2e45d6a · 2e45d6a
1 parent fae4def
commit 2e45d6a
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 42 deletions.
diff --git a/src/components/__tests__/FormFieldSelectTable.cy.js b/src/components/__tests__/FormFieldSelectTable.cy.js
@@ -55,6 +55,11 @@ describe('<FormFieldSelectTable>', () => {
       'form.team',
       i18n,
     );
+    cy.testLanguageStringsInContext(
+      ['buttonAddSubsidiary', 'labelSubsidiary', 'titleAddSubsidiary'],
+      'form.subsidiary',
+      i18n,
+    );
     cy.testLanguageStringsInContext(
       ['labelCity', 'labelHouseNumber', 'labelStreet', 'labelZip'],
       'form',
@@ -69,10 +74,6 @@ describe('<FormFieldSelectTable>', () => {
           options: options.value,
           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'),
-          titleDialog: i18n.global.t('form.company.titleAddCompany'),
         },
       });
       cy.viewport('macbook-16');
@@ -199,10 +200,6 @@ describe('<FormFieldSelectTable>', () => {
           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'),
-          labelButtonDialog: i18n.global.t('form.company.buttonAddCompany'),
-          titleDialog: i18n.global.t('form.company.titleAddCompany'),
         },
       });
       cy.viewport('macbook-16');
@@ -222,10 +219,6 @@ describe('<FormFieldSelectTable>', () => {
         props: {
           options: options.value,
           organizationLevel: OrganizationLevel.team,
-          label: i18n.global.t('form.team.labelTeam'),
-          labelButton: i18n.global.t('form.team.buttonAddTeam'),
-          labelButtonDialog: i18n.global.t('form.team.buttonAddTeam'),
-          titleDialog: i18n.global.t('form.team.titleAddTeam'),
         },
       });
       cy.viewport('macbook-16');
@@ -321,4 +314,36 @@ describe('<FormFieldSelectTable>', () => {
       cy.dataCy('dialog-add-option').should('not.exist');
     });
   });
+
+  context('subsidiary desktop', () => {
+    beforeEach(() => {
+      cy.mount(FormFieldSelectTable, {
+        props: {
+          options: options.value,
+          organizationLevel: OrganizationLevel.subsidiary,
+        },
+      });
+      cy.viewport('macbook-16');
+    });
+
+    it('renders HTML elements', () => {
+      // input label
+      cy.dataCy('form-select-table-query')
+        .should('be.visible')
+        .and('contain', i18n.global.t('form.subsidiary.labelSubsidiary'));
+      // add new button
+      cy.dataCy('button-add-option')
+        .should('be.visible')
+        .and('contain', i18n.global.t('form.subsidiary.buttonAddSubsidiary'));
+      // open dialog
+      cy.dataCy('button-add-option').click();
+      cy.dataCy('dialog-add-option').should('be.visible');
+      cy.dataCy('dialog-add-option')
+        .find('h3')
+        .should('be.visible')
+        .and('have.css', 'font-size', '20px')
+        .and('have.css', 'font-weight', '500')
+        .and('contain', i18n.global.t('form.subsidiary.titleAddSubsidiary'));
+    });
+  });
 });
diff --git a/src/components/form/FormFieldSelectTable.vue b/src/components/form/FormFieldSelectTable.vue
@@ -14,11 +14,6 @@
  *   company.
  * - `options` (Array<FormSelectTableOption>, required): The object
  *   representing the options.
- * - `label` (string, required): The translation for the label.
- * - `labelButton` (string): The translation for the add button.
- * - `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,
@@ -33,7 +28,11 @@
  * - `FormAddTeam`: Used to render form for registering a new team.
  *
  * @example
- * <form-field-select-table />
+ * <form-field-select-table
+ *  v-model="organizationId"
+ *  :organization-level="OrganizationLevel.organization"
+ *  :options="organizationOptions"
+ * />
  *
  * @see [Figma Design](https://www.figma.com/file/L8dVREySVXxh3X12TcFDdR/Do-pr%C3%A1ce-na-kole?type=design&node-id=5366%3A28607&mode=dev)
  */
@@ -51,6 +50,7 @@ import FormAddCompany from '../form/FormAddCompany.vue';
 import FormAddTeam from '../form/FormAddTeam.vue';
 
 // composables
+import { useSelectTable } from '../../composables/useSelectTable';
 import { useValidation } from '../../composables/useValidation';
 
 // enums
@@ -80,22 +80,6 @@ export default defineComponent({
       type: Array as () => FormSelectTableOption[] | FormOption[],
       required: true,
     },
-    label: {
-      type: String,
-      required: true,
-    },
-    labelButton: {
-      type: String,
-      required: true,
-    },
-    labelButtonDialog: {
-      type: String,
-      required: true,
-    },
-    titleDialog: {
-      type: String,
-      required: true,
-    },
     organizationLevel: {
       type: String as () => OrganizationLevel,
       required: true,
@@ -187,6 +171,9 @@ export default defineComponent({
       }
     };
 
+    const { label, labelButton, labelButtonDialog, titleDialog } =
+      useSelectTable(props.organizationLevel);
+
     return {
       borderRadius,
       companyNew,
@@ -195,8 +182,12 @@ export default defineComponent({
       formRef,
       inputValue,
       isDialogOpen,
+      label,
+      labelButton,
+      labelButtonDialog,
       query,
       teamNew,
+      titleDialog,
       isFilled,
       onClose,
       onSubmit,

diff --git a/src/components/form/FormSelectOrganization.vue b/src/components/form/FormSelectOrganization.vue
@@ -67,10 +67,6 @@ export default defineComponent({
       v-model="organizationId"
       :organization-level="OrganizationLevel.organization"
       :options="organizationOptions"
-      :label="$t('form.company.labelCompany')"
-      :label-button="$t('register.challenge.buttonAddCompany')"
-      :label-button-dialog="$t('form.company.buttonAddCompany')"
-      :title-dialog="$t('form.company.titleAddCompany')"
       data-cy="form-select-table-company"
     />
     <form-field-company-address

diff --git a/src/composables/useSelectTable.ts b/src/composables/useSelectTable.ts
@@ -0,0 +1,61 @@
+// libraries
+import { computed } from 'vue';
+
+// composables
+import { i18n } from '../boot/i18n';
+
+// enums
+import { OrganizationLevel } from '../components/types/Organization';
+
+export const useSelectTable = (organizationLevel: OrganizationLevel) => {
+  const label = computed(() => {
+    switch (organizationLevel) {
+      case OrganizationLevel.team:
+        return i18n.global.t('form.team.labelTeam');
+      case OrganizationLevel.subsidiary:
+        return i18n.global.t('form.subsidiary.labelSubsidiary');
+      default:
+        return i18n.global.t('form.company.labelCompany');
+    }
+  });
+
+  const labelButton = computed(() => {
+    switch (organizationLevel) {
+      case OrganizationLevel.team:
+        return i18n.global.t('form.team.buttonAddTeam');
+      case OrganizationLevel.subsidiary:
+        return i18n.global.t('form.subsidiary.buttonAddSubsidiary');
+      default:
+        return i18n.global.t('register.challenge.buttonAddCompany');
+    }
+  });
+
+  const labelButtonDialog = computed(() => {
+    switch (organizationLevel) {
+      case OrganizationLevel.team:
+        return i18n.global.t('form.team.buttonAddTeam');
+      case OrganizationLevel.subsidiary:
+        return i18n.global.t('form.subsidiary.buttonAddSubsidiary');
+      default:
+        return i18n.global.t('form.company.buttonAddCompany');
+    }
+  });
+
+  const titleDialog = computed(() => {
+    switch (organizationLevel) {
+      case OrganizationLevel.team:
+        return i18n.global.t('form.team.titleAddTeam');
+      case OrganizationLevel.subsidiary:
+        return i18n.global.t('form.subsidiary.titleAddSubsidiary');
+      default:
+        return i18n.global.t('form.company.titleAddCompany');
+    }
+  });
+
+  return {
+    label,
+    labelButton,
+    labelButtonDialog,
+    titleDialog,
+  };
+};
diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
@@ -307,6 +307,11 @@ titleAddSchool = "Přidat školu"
 titleAddFamily = "Přidat rodinu"
 titleSubsidiaryAddress = "Adresa vaší pobočky"
 
+[form.subsidiary]
+labelSubsidiary = "Název pobočky"
+buttonAddSubsidiary = "Přidat pobočku"
+titleAddSubsidiary = "Přidat pobočku"
+
 [form.team]
 buttonAddTeam = "Přidat tým"
 labelMembers = "člen | členů"

diff --git a/src/i18n/en.toml b/src/i18n/en.toml
@@ -304,6 +304,11 @@ titleAddFamily = "Add family"
 titleAddAddress = "Add your subsidiary"
 titleSubsidiaryAddress = "Your branch address"
 
+[form.subsidiary]
+labelSubsidiary = "Subsidiary name"
+buttonAddSubsidiary = "Add subsidiary"
+titleAddSubsidiary = "Add subsidiary"
+
 [form.team]
 buttonAddTeam = "Add team"
 labelMembers = "member | members"

diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
@@ -304,6 +304,11 @@ titleAddFamily = "Pridať rodinu"
 titleAddAddress = "Pridajte svoju pobočku"
 titleSubsidiaryAddress = "Adresa vašej pobočky"
 
+[form.subsidiary]
+labelSubsidiary = "Název pobočky"
+buttonAddSubsidiary = "Pridať pobočku"
+titleAddSubsidiary = "Pridať pobočku"
+
 [form.team]
 buttonAddTeam = "Pridať tím"
 labelMembers = "člen | členov"

diff --git a/src/pages/RegisterChallengePage.vue b/src/pages/RegisterChallengePage.vue
@@ -393,10 +393,6 @@ export default defineComponent({
                 v-model="team"
                 :organization-level="OrganizationLevel.team"
                 :options="teamOptions"
-                :label="$t('form.team.labelTeam')"
-                :label-button="$t('form.team.buttonAddTeam')"
-                :label-button-dialog="$t('form.team.buttonAddTeam')"
-                :title-dialog="$t('form.team.titleAddTeam')"
                 data-cy="form-select-table-team"
               />
             </q-form>