feat(teammanagementlastactivity): implemented route call in TeamInfoCard

yaki_admin/src/models/team.type.ts

@@ -5,6 +5,7 @@ export type TeamType = {
   captainsId: number[];
   captains: CaptainDetails[];
   teamDescription: string | null;
+  lastActivity?: Date;
 };
 
 export function isATeamType(obj: any): obj is TeamType {

yaki_admin/src/services/statistics.service.ts

@@ -1,6 +1,8 @@
 import { STATISTICTYPE } from "@/constants/statisticType.enum";
 import { environmentVar } from "@/envPlaceholder";
+import { teamActivity } from "@/stores/statisticsStore";
 import { authHeader } from "@/utils/authUtils";
+import { handleResponse } from "@/utils/responseUtils";
 
 const URL: string = environmentVar.baseURL;
 
@@ -65,6 +67,41 @@ class StatisticsService {
 
     return csvText.split("\n").map((row) => row.split(","));
   };
+
+  getLatestTeamActivityByCustomerId = async (
+    customerId?: number,
+    teamId?: number,
+  ): Promise<teamActivity[]> => {
+    const requestOptionsCustomer = {
+      method: "GET",
+      headers: authHeader(`${URL}/statistics/lastActivity?customerId=${customerId}`),
+    };
+
+    const requestOptionsTeam = {
+      method: "GET",
+      headers: authHeader(`${URL}/statistics/lastActivity?teamId=${teamId}`),
+    };
+
+    if (customerId) {
+      const response = await fetch(
+        `${URL}/statistics/lastActivity?customerId=${customerId}`,
+        requestOptionsCustomer,
+      )
+        .then(handleResponse)
+        .catch((err) => console.warn(err));
+      return response;
+    } else if (teamId) {
+      const response = await fetch(
+        `${URL}/statistics/lastActivity?teamId=${teamId}`,
+        requestOptionsTeam,
+      )
+        .then(handleResponse)
+        .catch((err) => console.warn(err));
+      return response;
+    } else {
+      return [];
+    }
+  };
 }
 
 export const statisticsService = Object.freeze(new StatisticsService());

yaki_admin/src/stores/languageStore.ts

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+
+interface State {
+  language: string | null;
+}
+
+export const useLanguageStore = defineStore("languageStore", {
+  state: () => ({
+    //the current language used by the website
+    language: localStorage.getItem("language"),
+  }),
+
+  getters: {
+    getLanguage: (state: State) => state.language,
+  },
+
+  actions: {
+    // allows to set the current language option
+    async setLanguage(newLanguage: string) {
+      this.language = newLanguage;
+      localStorage.setItem("language", newLanguage);
+    },
+  },
+});

yaki_admin/src/stores/statisticsStore.ts

@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+import { statisticsService } from "@/services/statistics.service";
+
+export type teamActivity = {
+  teamId: String;
+  lastActivityDate: Date;
+};
+
+interface State {
+  teamsLatestActivity: teamActivity[];
+}
+
+export const useStatisticsStore = defineStore("statisticsStore", {
+  state: () => ({
+    //list of latest activities for a group of teams associated to a customer
+    teamsLatestActivity: [] as teamActivity[],
+  }),
+
+  getters: {
+    getTeamsLatestActivity: (state: State) => state.teamsLatestActivity,
+  },
+
+  actions: {
+    // API call to get the latest activites for a group of teams associated to a customer
+    async setTeamsLatestActivityByCustomerId(customerId?: number, teamId?: number) {
+      this.teamsLatestActivity = await statisticsService.getLatestTeamActivityByCustomerId(
+        customerId,
+        teamId,
+      );
+    },
+  },
+});

yaki_admin/src/ui/components/LanguageSwitch.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useLanguageStore } from "@/stores/languageStore";
 const { locale } = useI18n();
 
 const props = defineProps({
@@ -10,6 +11,7 @@ const props = defineProps({
 });
 
 const languageSelected = ref("");
+const languageStore = useLanguageStore();
 
 onMounted(() => {
   let storedLanguage = localStorage.getItem("language");
@@ -18,6 +20,8 @@ onMounted(() => {
   if (!storedLanguage) {
     // Save the selected language to local storage
     storedLanguage = browserLanguage.includes("fr") ? "fr" : "en";
+    localStorage.setItem("language", storedLanguage);
+    languageStore.setLanguage(storedLanguage);
   }
 
   locale.value = storedLanguage;
@@ -29,6 +33,7 @@ const switchLanguage = () => {
   // Save the selected language to local storage
   localStorage.setItem("language", locale.value);
   languageSelected.value = locale.value;
+  languageStore.setLanguage(locale.value);
 };
 </script>
 

yaki_admin/src/ui/components/TeamInfoCard.vue

@@ -8,8 +8,10 @@ import { teamLogoService } from "@/services/teamLogo.service";
 import { setTeamLogoUrl } from "@/utils/images.utils";
 import { useModalStore } from "@/stores/modalStore";
 import { MODALMODE } from "@/constants/modalMode.enum";
+import { useLanguageStore } from "@/stores/languageStore";
 
 const modalStore = useModalStore();
+const languageStore = useLanguageStore();
 
 const teamLogo = ref<TeamLogoType>({
   teamId: 0,
@@ -55,8 +57,20 @@ const onSeeDetailPress = () => {
 
     <div class="user-card__wrapper-user-infos">
       <p class="user-card__name-text">{{ team.teamName }}</p>
-      <p class="user-card__info-text">
-        {{ $t("teamStatus.lastActivity") }}{{ $t("general.comingSoon") }}
+      <p
+        v-if="props.team.lastActivity"
+        class="user-card__info-text"
+      >
+        {{ $t("teamStatus.lastActivity")
+        }}{{
+          props.team.lastActivity && languageStore.getLanguage !== null
+            ? `${new Date(props.team.lastActivity).toLocaleDateString(
+                languageStore.getLanguage,
+              )} - ${new Date(props.team.lastActivity).toLocaleTimeString(
+                languageStore.getLanguage,
+              )}`
+            : ""
+        }}
       </p>
     </div>
     <section class="user-card__wrapper-status">

yaki_admin/src/ui/components/TeamList.vue

@@ -1,21 +1,44 @@
 <script setup lang="ts">
 import TeamInfoCard from "@/ui/components/TeamInfoCard.vue";
 import { TeamType } from "@/models/team.type";
-import { PropType } from "vue";
+import { onBeforeMount, PropType, ref } from "vue";
+import { useStatisticsStore } from "@/stores/statisticsStore";
 
-defineProps({
+const statisticsStore = useStatisticsStore();
+
+const props = defineProps({
   teamList: {
     type: Object as PropType<TeamType[]>,
     required: true,
   },
 });
+
+const teamListValue: TeamType[] = [...props.teamList];
+let teamWithLatestActivity = ref<TeamType[]>([]);
+
+onBeforeMount(async () => {
+  await statisticsStore.setTeamsLatestActivityByCustomerId(teamListValue[0].customerId);
+  const teamLatestActivities = [...statisticsStore.getTeamsLatestActivity];
+
+  for (let team of teamListValue) {
+    for (let latestActivity of teamLatestActivities) {
+      if (team.id.toString() === latestActivity.teamId) {
+        const teamWithDetails: TeamType = {
+          ...team,
+          lastActivity: latestActivity.lastActivityDate,
+        };
+        teamWithLatestActivity.value = [...teamWithLatestActivity.value, teamWithDetails];
+      }
+    }
+  }
+});
 </script>
 
 <template>
   <section class="user-list__container">
     <section class="user-list__in-team-container">
       <team-info-card
-        v-for="team in teamList"
+        v-for="team in teamWithLatestActivity"
         :team="team"
         :key="team.id"
       />