feat(statisticscollapse): imported collapse made necessary changes (#…

…1500)

yaki_admin/src/assets/style/_variables.scss

@@ -1,6 +1,10 @@
 $background-color-theme-primary: #f2f6f9;
 $background-color-theme-secondary: #ff936b;
 
+$option-hover-color-active: #ffd7c0;
+$option-hover-color-passive: #e6ecef;
+$option-separator: #d8d8d8;
+
 $dark-color: #32353c;
 $blue-color: #59a9b5;
 $yellow-color: #f5cd3d;

yaki_admin/src/main.ts

@@ -8,6 +8,7 @@ import "../node_modules/@yaki_ui/yaki_ui_web_components/css/yaki_ui.css";
 
 import enJson from "@/assets/translations/en.json";
 import frJson from "@/assets/translations/fr.json";
+import clickOutside from "@/utils/clickOutsideDirective";
 
 const translations = {
   en: enJson,
@@ -28,4 +29,6 @@ app.use(pinia);
 app.use(i18n);
 app.use(router);
 
+// Implementing the directive that allows the detection of clicking outside an element
+app.directive("click-outside", clickOutside);
 app.mount("#app");

yaki_admin/src/ui/layouts/PageContentLayout.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <slot name="pageContentHeader"></slot>
 
@@ -11,8 +13,26 @@
   padding-inline: 40px;
   overflow: auto;
 
-  scrollbar-width: thin;
-  scrollbar-gutter: stable both-edges;
-  scrollbar-color: rgba(3, 3, 3, 0.446) transparent;
+  @supports selector(::-webkit-scrollbar) {
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+      border-radius: 0.12rem;
+      margin: 1rem;
+      background-color: #d8d8d8;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.15);
+      border-radius: 0.12rem;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: $background-color-theme-secondary;
+    }
+  }
+  @supports not selector(::-webkit-scrollbar) {
+    scrollbar-width: 8px;
+    scrollbar-color: $background-color-theme-secondary transparent;
+  }
 }
 </style>

yaki_admin/src/ui/views/StatisticsView.vue

@@ -3,23 +3,35 @@ import PageContentHeader from "@/ui/components/PageContentHeader.vue";
 import PageContentLayout from "@/ui/layouts/PageContentLayout.vue";
 import buttonPrimary from "@/ui/components/buttons/ButtonPrimary.vue";
 import PreviewTable from "@/ui/components/PreviewTable.vue";
-
+import InputDropdown from "@yaki_ui/yaki_ui_web_components/components/vue/InputDropdown.vue";
 import { statisticsService } from "@/services/statistics.service";
 import { useSelectedRoleStore } from "@/stores/selectedRole";
 
 import { useTeamStore } from "@/stores/teamStore";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useRoleStore } from "@/stores/roleStore";
 import { TeamType } from "@/models/team.type";
 import { STATISTICTYPE } from "@/constants/statisticType.enum";
+import { useI18n } from "vue-i18n";
+
+const i18n = useI18n();
 
 const selectedRoleStore = useSelectedRoleStore();
 const roleStore = useRoleStore();
 const teamStore = useTeamStore();
 
+const statsticsTypeArray: Array<string> = Object.entries(STATISTICTYPE).map((x) =>
+  x[1].toString().split("-").join(" "),
+);
+
+const statisticsForm = reactive({
+  statisticTypeSelected: statsticsTypeArray[0] as STATISTICTYPE,
+  teamSelected: 0,
+});
+
 const teamList = ref<TeamType[]>([]);
-const teamSelected = ref<number>(0);
-const statisticTypeSelected = ref<STATISTICTYPE>(STATISTICTYPE.basic);
+const fullTeamList = ref<TeamType[]>([]);
+
 // Set the default value to 30 days before the current date and the current date in format yyyy-mm-dd
 const periodStartSelected = ref<string>(
   new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
@@ -40,6 +52,19 @@ onMounted(() => {
       teamList.value.push(team);
     }
   }
+
+  const teamListWithDefault = [...teamList.value];
+  teamListWithDefault.unshift({
+    id: 0,
+    teamName: i18n.t("statistics.allTeamsOption"),
+    customerId: 0,
+    teamDescription: "",
+    captainsId: [],
+    captains: [],
+  });
+  fullTeamList.value = teamListWithDefault;
+
+  loadPreview();
 });
 
 const downloadCsv = async () => {
@@ -49,14 +74,14 @@ const downloadCsv = async () => {
     const link = document.createElement("a");
     const url = await statisticsService.getStatisticsCsv(
       customerId,
-      teamSelected.value,
-      statisticTypeSelected.value,
+      statisticsForm.teamSelected,
+      statisticsForm.statisticTypeSelected,
       periodStartSelected.value,
       periodEndSelected.value,
     );
     link.href = url;
     link.download = `statistics_${
-      STATISTICTYPE[statisticTypeSelected.value as keyof typeof STATISTICTYPE]
+      STATISTICTYPE[statisticsForm.statisticTypeSelected as keyof typeof STATISTICTYPE]
     }.csv`;
     document.body.appendChild(link);
     link.click();
@@ -71,8 +96,8 @@ const loadPreview = async () => {
   try {
     statisticsPreview.value = await statisticsService.getStatisticsArray(
       customerId,
-      teamSelected.value,
-      statisticTypeSelected.value,
+      statisticsForm.teamSelected,
+      statisticsForm.statisticTypeSelected,
       periodStartSelected.value,
       periodEndSelected.value,
     );
@@ -81,13 +106,13 @@ const loadPreview = async () => {
   }
 };
 
-const onSelectTeam = (e: Event) => {
-  teamSelected.value = parseInt((e.target as HTMLSelectElement).value);
+const onStatisticTypeSelect = (value: any) => {
+  statisticsForm.statisticTypeSelected = value as STATISTICTYPE;
   loadPreview();
 };
 
-const onSelectStatisticType = (e: Event) => {
-  statisticTypeSelected.value = (e.target as HTMLSelectElement).value as STATISTICTYPE;
+const onTeamSelect = (value: any) => {
+  statisticsForm.teamSelected = Number(value);
   loadPreview();
 };
 
@@ -116,53 +141,24 @@ const onSelectPeriodEnd = (e: Event) => {
     <template #content>
       <main>
         <section>
-          <article class="statistic-selector-container">
-            <label
-              for="statisticTypeSelected"
-              class="text_default__Team_name"
-              >{{ $t("statistics.statisticTypeSelectorLabel") }}</label
-            >
-            <select
-              class="statistic-selector"
-              name="statisticTypeSelected"
-              @change="onSelectStatisticType"
-            >
-              <option
-                :key="statKey"
-                :value="statKey"
-                v-for="[statKey, statValue] in Object.entries(STATISTICTYPE)"
-                :selected="statValue == statisticTypeSelected"
-              >
-                {{ $t("statistics." + statKey) }}
-              </option>
-            </select>
-          </article>
-          <article class="statistic-selector-container">
-            <label
-              class="text_default__Team_name"
-              for="teamSelected"
-              >{{ $t("statistics.teamSelectorLabel") }}</label
-            >
-            <select
-              class="statistic-selector"
-              name="teamSelected"
-              @change="onSelectTeam"
-            >
-              <option
-                value="0"
-                selected
-              >
-                {{ $t("statistics.allTeamsOption") }}
-              </option>
-              <option
-                :key="team.id"
-                :value="team.id"
-                v-for="team in teamList"
-              >
-                {{ team.teamName }}
-              </option>
-            </select>
-          </article>
+          <input-dropdown
+            :labelText="$t('statistics.statisticTypeSelectorLabel')"
+            :placeHolderValue="statsticsTypeArray[0]"
+            :valueGroup="statsticsTypeArray"
+            :selectedValue="statsticsTypeArray[0]"
+            @emittedSelectedInput="onStatisticTypeSelect"
+          />
+
+          <input-dropdown
+            v-if="fullTeamList.length > 0"
+            :labelText="$t('statistics.teamSelectorLabel')"
+            :placeHolderValue="fullTeamList[0].id.toString()"
+            :valueNames="fullTeamList.map((team) => team.teamName)"
+            :valueGroup="fullTeamList.map((team) => team.id.toString())"
+            :selectedValue="fullTeamList[0].id.toString()"
+            @emittedSelectedInput="onTeamSelect"
+          />
+
           <article>
             <div class="date-selector-container">
               <label

yaki_admin/src/utils/clickOutsideDirective.ts

@@ -0,0 +1,20 @@
+export default {
+  beforeMount(element: any, binding: { value: (arg0: MouseEvent | KeyboardEvent) => void }) {
+    element.clickOutsideEvent = function (e: MouseEvent | KeyboardEvent) {
+      /* Check if the event element or its children are either clicked upon or involved 
+            in a keypress are the one defined in the directive*/
+
+      if (!(element === e.target || element.contains(e.target))) {
+        // Invoke the provided method
+        binding.value(e);
+      }
+    };
+    document.addEventListener("click", element.clickOutsideEvent);
+    document.addEventListener("keydown", element.clickOutsideEvent);
+  },
+  unmounted(element: any) {
+    // Remove the event listener when the bound element is unmounted
+    document.removeEventListener("click", element.clickOutsideEvent);
+    document.removeEventListener("keydown", element.clickOutsideEvent);
+  },
+};