src/components: add CoordinatorTabs component for coordinator page (#651

) * add CoordinatorTabs component * docs cleanup --------- Co-authored-by: Šimon Macek <simon.macek@proficio.cz>
auto-mat · Nov 3, 2024 · 3f8e013 · 3f8e013
1 parent 0769215
commit 3f8e013
Show file tree

Hide file tree

Showing 7 changed files with 428 additions and 0 deletions.
diff --git a/src/components/__tests__/CoordinatorTabs.cy.js b/src/components/__tests__/CoordinatorTabs.cy.js
@@ -0,0 +1,154 @@
+import CoordinatorTabs from 'components/coordinator/CoordinatorTabs.vue';
+import { i18n } from '../../boot/i18n';
+import { routesConf } from 'src/router/routes_conf';
+
+// selectors
+const selectorCoordinatorTabs = 'coordinator-tabs';
+const selectorButtonTasks = 'coordinator-tabs-button-tasks';
+const selectorButtonFees = 'coordinator-tabs-button-fees';
+const selectorButtonInvoices = 'coordinator-tabs-button-invoices';
+const selectorButtonPackages = 'coordinator-tabs-button-packages';
+const selectorButtonAttendance = 'coordinator-tabs-button-attendance';
+const selectorButtonChallenges = 'coordinator-tabs-button-challenges';
+const selectorButtonResults = 'coordinator-tabs-button-results';
+const selectorPanelTasks = 'coordinator-tabs-panel-tasks';
+const selectorPanelFees = 'coordinator-tabs-panel-fees';
+const selectorPanelInvoices = 'coordinator-tabs-panel-invoices';
+const selectorPanelPackages = 'coordinator-tabs-panel-packages';
+const selectorPanelAttendance = 'coordinator-tabs-panel-attendance';
+const selectorPanelChallenges = 'coordinator-tabs-panel-challenges';
+const selectorPanelResults = 'coordinator-tabs-panel-results';
+
+describe('<CoordinatorTabs>', () => {
+  it('has translation for all strings', () => {
+    cy.testLanguageStringsInContext(
+      [
+        'tabTasks',
+        'tabFees',
+        'tabInvoices',
+        'tabPackages',
+        'tabAttendance',
+        'tabChallenges',
+        'tabResults',
+      ],
+      'coordinator',
+      i18n,
+    );
+  });
+
+  context('desktop', () => {
+    beforeEach(() => {
+      cy.mount(CoordinatorTabs, {
+        props: {},
+      });
+      cy.viewport('macbook-16');
+    });
+
+    coreTests();
+  });
+
+  context('mobile', () => {
+    beforeEach(() => {
+      cy.mount(CoordinatorTabs, {
+        props: {},
+      });
+      cy.viewport('iphone-6');
+    });
+
+    coreTests();
+  });
+});
+
+function coreTests() {
+  it('renders component', () => {
+    cy.dataCy(selectorCoordinatorTabs).should('be.visible');
+    cy.dataCy(selectorButtonTasks).and(
+      'contain',
+      i18n.global.t('coordinator.tabTasks'),
+    );
+    cy.dataCy(selectorButtonFees).and(
+      'contain',
+      i18n.global.t('coordinator.tabFees'),
+    );
+    cy.dataCy(selectorButtonInvoices).and(
+      'contain',
+      i18n.global.t('coordinator.tabInvoices'),
+    );
+    cy.dataCy(selectorButtonPackages).and(
+      'contain',
+      i18n.global.t('coordinator.tabPackages'),
+    );
+    cy.dataCy(selectorButtonAttendance).and(
+      'contain',
+      i18n.global.t('coordinator.tabAttendance'),
+    );
+    cy.dataCy(selectorButtonChallenges).and(
+      'contain',
+      i18n.global.t('coordinator.tabChallenges'),
+    );
+    cy.dataCy(selectorButtonResults).and(
+      'contain',
+      i18n.global.t('coordinator.tabResults'),
+    );
+
+    cy.dataCy(selectorButtonTasks).click();
+    cy.dataCy(selectorPanelTasks).should('be.visible');
+    cy.dataCy(selectorPanelFees).should('not.exist');
+    cy.dataCy(selectorPanelInvoices).should('not.exist');
+    cy.dataCy(selectorPanelPackages).should('not.exist');
+    cy.dataCy(selectorPanelAttendance).should('not.exist');
+    cy.dataCy(selectorPanelChallenges).should('not.exist');
+    cy.dataCy(selectorPanelResults).should('not.exist');
+  });
+
+  it('allows to switch tabs', () => {
+    cy.dataCy(selectorButtonTasks).click();
+    cy.dataCy(selectorPanelTasks).should('be.visible');
+    cy.dataCy(selectorButtonFees).click();
+    cy.dataCy(selectorPanelFees).should('be.visible');
+    cy.dataCy(selectorButtonInvoices).click();
+    cy.dataCy(selectorPanelInvoices).should('be.visible');
+    cy.dataCy(selectorButtonPackages).click();
+    cy.dataCy(selectorPanelPackages).should('be.visible');
+    cy.dataCy(selectorButtonAttendance).click();
+    cy.dataCy(selectorPanelAttendance).should('be.visible');
+    cy.dataCy(selectorButtonChallenges).click();
+    cy.dataCy(selectorPanelChallenges).should('be.visible');
+    cy.dataCy(selectorButtonResults).click();
+    cy.dataCy(selectorPanelResults).should('be.visible');
+  });
+
+  it('syncs tab navigation with URL', () => {
+    // initial state
+    cy.dataCy(selectorButtonTasks).click();
+    cy.url().should('include', routesConf['coordinator_tasks'].path);
+    // switch to fees tab
+    cy.dataCy(selectorButtonFees).click();
+    cy.url().should('not.include', routesConf['coordinator_tasks'].path);
+    cy.url().should('include', routesConf['coordinator_fees'].path);
+    // switch to invoices tab
+    cy.dataCy(selectorButtonInvoices).click();
+    cy.url().should('not.include', routesConf['coordinator_fees'].path);
+    cy.url().should('include', routesConf['coordinator_invoices'].path);
+    // switch to packages tab
+    cy.dataCy(selectorButtonPackages).click();
+    cy.url().should('not.include', routesConf['coordinator_invoices'].path);
+    cy.url().should('include', routesConf['coordinator_packages'].path);
+    // switch to attendance tab
+    cy.dataCy(selectorButtonAttendance).click();
+    cy.url().should('not.include', routesConf['coordinator_packages'].path);
+    cy.url().should('include', routesConf['coordinator_attendance'].path);
+    // switch to challenges tab
+    cy.dataCy(selectorButtonChallenges).click();
+    cy.url().should('not.include', routesConf['coordinator_attendance'].path);
+    cy.url().should('include', routesConf['coordinator_challenges'].path);
+    // switch to results tab
+    cy.dataCy(selectorButtonResults).click();
+    cy.url().should('not.include', routesConf['coordinator_challenges'].path);
+    cy.url().should('include', routesConf['coordinator_results'].path);
+    // popstate
+    cy.go('back');
+    cy.url().should('include', routesConf['coordinator_challenges'].path);
+    cy.dataCy(selectorPanelChallenges).should('be.visible');
+  });
+}
diff --git a/src/components/coordinator/CoordinatorTabs.vue b/src/components/coordinator/CoordinatorTabs.vue
@@ -0,0 +1,154 @@
+<script lang="ts">
+/**
+ * CoordinatorTabs Component
+ *
+ * @description * Use this component to render tabs on the Coordinator page.
+ * Note: Used on `CoordinatorPage`.
+ *
+ * @example
+ * <coordinator-tabs />
+ */
+
+// libraries
+import { defineComponent, ref } from 'vue';
+
+// routes
+import { routesConf } from '../../router/routes_conf';
+
+enum tabsCoordinator {
+  tasks = 'tasks',
+  fees = 'fees',
+  invoices = 'invoices',
+  packages = 'packages',
+  attendance = 'attendance',
+  challenges = 'challenges',
+  results = 'results',
+  none = '',
+}
+
+export default defineComponent({
+  name: 'CoordinatorTabs',
+  setup() {
+    const activeTab = ref(tabsCoordinator.none);
+
+    return {
+      activeTab,
+      routesConf,
+      tabsCoordinator,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <!-- Tab buttons -->
+    <q-tabs
+      inline-label
+      v-model="activeTab"
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+      align="center"
+      data-cy="coordinator-tabs"
+    >
+      <q-route-tab
+        :to="routesConf['coordinator_tasks'].path"
+        :name="tabsCoordinator.tasks"
+        :label="$t('coordinator.tabTasks')"
+        data-cy="coordinator-tabs-button-tasks"
+      />
+      <q-route-tab
+        :to="routesConf['coordinator_fees'].path"
+        :name="tabsCoordinator.fees"
+        :label="$t('coordinator.tabFees')"
+        data-cy="coordinator-tabs-button-fees"
+      />
+      <q-route-tab
+        :to="routesConf['coordinator_invoices'].path"
+        :name="tabsCoordinator.invoices"
+        :label="$t('coordinator.tabInvoices')"
+        data-cy="coordinator-tabs-button-invoices"
+      />
+      <q-route-tab
+        :to="routesConf['coordinator_packages'].path"
+        :name="tabsCoordinator.packages"
+        :label="$t('coordinator.tabPackages')"
+        data-cy="coordinator-tabs-button-packages"
+      />
+      <q-route-tab
+        :to="routesConf['coordinator_attendance'].path"
+        :name="tabsCoordinator.attendance"
+        :label="$t('coordinator.tabAttendance')"
+        data-cy="coordinator-tabs-button-attendance"
+      />
+      <q-route-tab
+        :to="routesConf['coordinator_challenges'].path"
+        :name="tabsCoordinator.challenges"
+        :label="$t('coordinator.tabChallenges')"
+        data-cy="coordinator-tabs-button-challenges"
+      />
+      <q-route-tab
+        :to="routesConf['coordinator_results'].path"
+        :name="tabsCoordinator.results"
+        :label="$t('coordinator.tabResults')"
+        data-cy="coordinator-tabs-button-results"
+      />
+    </q-tabs>
+    <!-- Separator -->
+    <q-separator />
+    <!-- Tab panels -->
+    <q-tab-panels v-model="activeTab" animated>
+      <!-- Panel: Tasks -->
+      <q-tab-panel
+        :name="tabsCoordinator.tasks"
+        class="q-px-lg"
+        data-cy="coordinator-tabs-panel-tasks"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+      <!-- Panel: Fees -->
+      <q-tab-panel
+        :name="tabsCoordinator.fees"
+        data-cy="coordinator-tabs-panel-fees"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+      <!-- Panel: Invoices -->
+      <q-tab-panel
+        :name="tabsCoordinator.invoices"
+        data-cy="coordinator-tabs-panel-invoices"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+      <!-- Panel: Packages -->
+      <q-tab-panel
+        :name="tabsCoordinator.packages"
+        data-cy="coordinator-tabs-panel-packages"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+      <!-- Panel: Attendance -->
+      <q-tab-panel
+        :name="tabsCoordinator.attendance"
+        data-cy="coordinator-tabs-panel-attendance"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+      <!-- Panel: Challenges -->
+      <q-tab-panel
+        :name="tabsCoordinator.challenges"
+        data-cy="coordinator-tabs-panel-challenges"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+      <!-- Panel: Results -->
+      <q-tab-panel
+        :name="tabsCoordinator.results"
+        data-cy="coordinator-tabs-panel-results"
+      >
+        <!-- TODO: add content -->
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
+</template>
diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
@@ -86,6 +86,13 @@ labelBranches = "pobočka | poboček"
 labelMembers = "člen | členů"
 labelOrganizationId = "IČO"
 labelShowPastTasks = "Zobrazit uplynulé úkoly"
+tabTasks = "Úkoly"
+tabFees = "Startovné"
+tabInvoices = "Faktury"
+tabPackages = "Balíčky"
+tabAttendance = "Účast"
+tabChallenges = "Firemní výzvy"
+tabResults = "Výsledky"
 textBannerReminder = "Oznámil jste již firmě, že jste kooridnátorem?"
 
 [createOrganization]

diff --git a/src/i18n/en.toml b/src/i18n/en.toml
@@ -86,6 +86,13 @@ labelBranches = "subsidiary | subsidiaries"
 labelMembers = "member | members"
 labelOrganizationId = "ID"
 labelShowPastTasks = "Show past tasks"
+tabTasks = "Tasks"
+tabFees = "Entry fees"
+tabInvoices = "Invoices"
+tabPackages = "Packages"
+tabAttendance = "Attendance"
+tabChallenges = "Company challenges"
+tabResults = "Results"
 textBannerReminder = "Have you notified the company that you are a coordinator?"
 
 [createOrganization]

diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
@@ -86,6 +86,13 @@ labelBranches = "pobočka | pobočky"
 labelMembers = "člen | členovia"
 labelOrganizationId = "ID"
 labelShowPastTasks = "Zobraziť minulé úlohy"
+tabTasks = "Úlohy"
+tabFees = "Štartovné"
+tabInvoices = "Faktúry"
+tabPackages = "Balíčky"
+tabAttendance = "Účasť"
+tabChallenges = "Firemné výzvy"
+tabResults = "Výsledky"
 textBannerReminder = "Oznámili ste spoločnosti, že ste koordinátor?"
 
 [createOrganization]