merge with dashboard-refactor

ReleaseNotes.txt

@@ -5,6 +5,10 @@ Ver.
 - Bugfix - Filter object for new instance (#199)
 
 
+Ver. 2.22.4 - 2024-03-11
+-----------------------
+- Bugfix - Filter object for new instance (#199)
+
 Ver. 2.22.3 - 2024-03-11
 -----------------------
 - Feature - HRT instance added (#198)

package.json

@@ -50,8 +50,8 @@
     "axios-hooks": "2.0.0",
     "d3": "6.3.1",
     "dotenv": "8.2.0",
-    "ermes-backoffice-ts-sdk": "git+ssh://[email protected]/links-ads/ermes-backoffice-ts-sdk.git#v4.18.2",
-    "ermes-ts-sdk": "git+ssh://[email protected]/links-ads/ermes-ts-sdk.git#v4.18.2",
+    "ermes-backoffice-ts-sdk": "git+ssh://[email protected]/links-ads/ermes-backoffice-ts-sdk.git#v4.19.1",
+    "ermes-ts-sdk": "git+ssh://[email protected]/links-ads/ermes-ts-sdk.git#v4.19.1",
     "fast-deep-equal": "3.1.3",
     "i18next": "19.5.1",
     "i18next-browser-languagedetector": "5.0.0",

src/common/app-bar.tsx

@@ -1,3 +1,4 @@
+// app-bar.tsx
 import React, { memo, useContext, useEffect, useMemo } from 'react'
 // import { Header, SidebarTrigger, SidebarTriggerIcon } from '@mui-treasury/layout'
 import { BrandLogo } from './app-bar-widgets/brand-logo/brand-logo'
@@ -28,7 +29,7 @@ export const AppBar = memo(function AppBarFn(/* { headerStyles, drawerOpen }: Ap
   path.shift()
 
   const filterActive = path[0] == 'dashboard' || path[0] == 'map' ? true : false
-  const showCategoryFilters = path[0] !== 'dashboard' ? true : false
+  const showCategoryFilters = true // path[0] !== 'dashboard' ? true : false
 
   const filtersCtx = useContext(FiltersContext)
   const {

src/pages/protected/dashboard/dashboard-layout.component.tsx

@@ -1,5 +1,6 @@
+// dashboard-layout.tsx
 import { Card, CardHeader, Grid } from '@material-ui/core'
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { Map } from '../map/map.component'
 import { DashboardWidgetContainer } from './dashboard-widget-container.component'
 import { useTranslation } from 'react-i18next'
@@ -16,17 +17,90 @@ import { Missions } from './widgets/missions.component'
 import { Cameras } from './widgets/cameras.component'
 import { Communications } from './widgets/communications.component'
 import { Alerts } from './widgets/alerts.component'
+import { TeamsApiFactory } from 'ermes-ts-sdk'
+import useAPIHandler from '../../../hooks/use-api-handler'
+
+function getKeyByValue(object, value) {
+  return Object.keys(object).find((key) => object[key] === value)
+}
+
+function useTeamIds() {
+  const [storedFilters, ,] = useMemoryState('memstate-map', null, false)
+
+  const { apiConfig: backendAPIConfig } = useAPIConfiguration('backoffice')
+
+  const teamsApiFactory = useMemo(() => TeamsApiFactory(backendAPIConfig), [backendAPIConfig])
+  const [teamsApiHandlerState, handleTeamsAPICall] = useAPIHandler(false)
+
+  const [teamList, setTeamList] = useState<any>([])
+
+  const filters = (JSON.parse(storedFilters!) as unknown as FiltersDescriptorType).filters
+
+  useEffect(() => {
+    handleTeamsAPICall(() => {
+      return teamsApiFactory.teamsGetTeams(1000)
+    })
+  }, [teamsApiFactory, handleTeamsAPICall])
+
+  useEffect(() => {
+    if (
+      !teamsApiHandlerState.loading &&
+      !!teamsApiHandlerState.result &&
+      teamsApiHandlerState.result.data
+    ) {
+      //update team list
+      let i = Object.fromEntries(
+        teamsApiHandlerState.result.data.data.map((obj) => [obj['id'], obj['name']])
+      )
+      setTeamList(i)
+      //update starting filter object with actual team names from http
+      // const teamNamesList = Object.values(i)
+      // updateTeamList(teamNamesList)
+    }
+  }, [teamsApiHandlerState])
+
+  const teamIds = useMemo(() => {
+    let f: any = filters?.persons
+    //once the team list is available (ids are available)
+    if (Object.keys(teamList).length > 0) {
+      let selected = f.content[1].selected
+      var arrayOfTeams: number[] = []
+      if (!!selected && selected.length > 0) {
+        for (let i = 0; i < selected.length; i++) {
+          //if teams selected in filters have corresponcence with ids available
+          let idFromContent = Number(
+            !!getKeyByValue(teamList, selected[i]) ? getKeyByValue(teamList, selected[i]) : -1
+          )
+          //add them to array to use for new call
+          if (idFromContent >= 0) arrayOfTeams.push(idFromContent)
+        }
+      }
+
+      return arrayOfTeams
+    }
+
+    return []
+  }, [teamList, (filters?.persons as any).content[1].selected])
+
+  return teamIds
+}
 
 function useStats() {
+  const isFetchingRef = useRef(false)
   const { apiConfig: backendAPIConfig } = useAPIConfiguration('backoffice')
   const dashboardApiFactory = useMemo(
     () => DashboardApiFactory(backendAPIConfig),
     [backendAPIConfig]
   )
   const [storedFilters, ,] = useMemoryState('memstate-map', null, false)
   const [stats, setStats] = useState<GetStatisticsOutput | null>(null)
+  const teamIds = useTeamIds()
 
   function fetchStats() {
+    if (isFetchingRef.current) return
+
+    isFetchingRef.current = true
+
     const filters = (JSON.parse(storedFilters!) as unknown as FiltersDescriptorType).filters
 
     dashboardApiFactory
@@ -36,10 +110,22 @@ function useStats() {
         (filters?.mapBounds as any).northEast[1],
         (filters?.mapBounds as any).northEast[0],
         (filters?.mapBounds as any).southWest[1],
-        (filters?.mapBounds as any).southWest[0]
+        (filters?.mapBounds as any).southWest[0],
+        (filters?.persons as any).content[0]?.selected,
+        teamIds,
+        (filters?.report as any).content[0]?.selected,
+        (filters?.report as any).content[1]?.selected,
+        (filters?.mission as any).content[0]?.selected,
+        (filters?.communication as any).content[1]?.selected,
+        (filters?.communication as any).content[0]?.selected,
+        (filters?.mapRequests as any).content[1]?.selected,
+        (filters?.mapRequests as any).content[0]?.selected
       )
       .then((r) => r.data)
       .then((data) => setStats(data))
+      .then(() => {
+        isFetchingRef.current = false
+      })
   }
 
   useEffect(() => {
@@ -75,8 +161,7 @@ export function DashboardLayout() {
       missions: stats.missionsByStatus?.reduce((acc, curr: any) => acc + curr.value, 0) ?? 0,
       cameras: stats.stations?.length ?? 0,
       communications:
-        stats.communicationsByRestriction?.reduce((acc, curr: any) => acc + curr.value, 0) ?? 0,
-      alerts: stats.alertsByRestriction?.reduce((acc, curr: any) => acc + curr.value, 0) ?? 0
+        stats.communicationsByRestriction?.reduce((acc, curr: any) => acc + curr.value, 0) ?? 0
     }
   }, [stats])
 
@@ -143,14 +228,6 @@ export function DashboardLayout() {
               <Communications communications={stats?.communicationsByRestriction} />
             </DashboardWidgetContainer>
           )}
-          {activeFilters.Alert && (
-            <DashboardWidgetContainer
-              title={t('labels:filter_alert')}
-              info={`${t('labels:total')}: ${totals.alerts ?? ''}`}
-            >
-              <Alerts alerts={stats?.alertsByRestriction} />
-            </DashboardWidgetContainer>
-          )}
         </Grid>
       </Grid>
     </Grid>