queues. No queue selection as standard inside queues filter

nethesis · Sep 19, 2024 · de466cc · de466cc
1 parent 921979b
commit de466cc
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 87 deletions.
diff --git a/components/queueManager/NotManaged/NotManagedCalls.tsx b/components/queueManager/NotManaged/NotManagedCalls.tsx
@@ -70,6 +70,8 @@ export const NotManagedCalls: FC<NotManagedCallsProps> = ({ className }): JSX.El
   }
 
   const [queueManagerFilter, setQueueManagerFilter]: any = useState([])
+  const [emptyQueueFilter, setEmptyQueueFilter]: any = useState(false)
+
   const updateQueueManagerFilter = (newQueuesFilter: string[]) => {
     setQueueManagerFilter(newQueuesFilter)
     setPageNum(1)
@@ -79,38 +81,40 @@ export const NotManagedCalls: FC<NotManagedCallsProps> = ({ className }): JSX.El
   const fetchCalls = async (numHours: number) => {
     let selectedQueues = queueManagerFilter
 
-    if (isEmpty(selectedQueues)) {
-      selectedQueues = Object.keys(queueManagerStore.queues)
-    }
-
-    try {
-      setCallsError('')
-      setCallsLoaded(false)
-
-      const res = await retrieveAndFilterQueueCalls(
-        pageNum,
-        textFilter.trim(),
-        outcomeFilter,
-        selectedQueues,
-        numHours,
-      )
-
-      res.rows = res.rows.map((call: any) => {
-        call.queueId = call.queuename
-        call.queueName = queueManagerStore.queues[call.queuename]?.name
-
-        // queuename attribute name is misleading
-        delete call.queuename
-
-        return call
-      })
-      setCalls(res)
-      setLastUpdated(new Date())
-    } catch (e) {
-      console.error(e)
-      setCallsError(t('Queues.Cannot retrieve calls') || '')
+    if (!isEmpty(selectedQueues)) {
+      setEmptyQueueFilter(false)
+      try {
+        setCallsError('')
+        setCallsLoaded(false)
+
+        const res = await retrieveAndFilterQueueCalls(
+          pageNum,
+          textFilter.trim(),
+          outcomeFilter,
+          selectedQueues,
+          numHours,
+        )
+
+        res.rows = res.rows.map((call: any) => {
+          call.queueId = call.queuename
+          call.queueName = queueManagerStore.queues[call.queuename]?.name
+
+          // queuename attribute name is misleading
+          delete call.queuename
+
+          return call
+        })
+        setCalls(res)
+        setLastUpdated(new Date())
+      } catch (e) {
+        console.error(e)
+        setCallsError(t('Queues.Cannot retrieve calls') || '')
+      }
+      setCallsLoaded(true)
+    } else {
+      setCallsLoaded(true)
+      setEmptyQueueFilter(true)
     }
-    setCallsLoaded(true)
   }
 
   // retrieve calls

diff --git a/components/queueManager/NotManaged/NotManagedCallsFilter.tsx b/components/queueManager/NotManaged/NotManagedCallsFilter.tsx
@@ -5,7 +5,19 @@ import { ComponentPropsWithRef, forwardRef, useRef } from 'react'
 import classNames from 'classnames'
 import { TextInput } from '../../common'
 import { Fragment, useState, useEffect } from 'react'
-import { Dialog, DialogPanel, Disclosure, DisclosureButton, DisclosurePanel, Popover, PopoverButton, PopoverGroup, PopoverPanel, Transition, TransitionChild } from '@headlessui/react'
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronDown, faCircleXmark, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { useSelector } from 'react-redux'
@@ -97,17 +109,16 @@ export const NotManagedCallsFilter = forwardRef<HTMLButtonElement, NotManagedCal
       updateOutcomeFilter(filterValues.outcome)
 
       if (isEmpty(filterValues.selectedQueues)) {
-        // select all queues
-        const allQueueCodes = Object.values(queueManagerStore.queues).map((queue: any) => {
-          return queue.queue
-        })
+        // set empty array if no queues are selected
+        const allQueueCodes: any = []
         setSelectedQueues(allQueueCodes)
         updateQueueManagerFilter(allQueueCodes)
       } else {
         // select queues from preferences
         setSelectedQueues(filterValues.selectedQueues)
         updateQueueManagerFilter(filterValues.selectedQueues)
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     // outcome label
@@ -128,8 +139,8 @@ export const NotManagedCallsFilter = forwardRef<HTMLButtonElement, NotManagedCal
       if (!isEmpty(selectedQueues)) {
         setQueuesLabel(selectedQueues.join(', '))
       } else {
-        // if no queues are selected, it's equivalent to select all of them
-        const allQueueCodes = queueManagerFilter.options.map((queue: any) => queue.value)
+        // if no queues are selected, set label to an empty array
+        const allQueueCodes: any = []
         setQueuesLabel(allQueueCodes.join(', '))
       }
     }, [selectedQueues, queueManagerFilter.options])
@@ -142,10 +153,8 @@ export const NotManagedCallsFilter = forwardRef<HTMLButtonElement, NotManagedCal
       updateOutcomeFilter(DEFAULT_OUTCOME_FILTER) // notify parent component
       savePreference('queuesOutcomeFilter', DEFAULT_OUTCOME_FILTER, auth.username)
 
-      // select all queues
-      const allQueueCodes = Object.values(queueManagerStore.queues).map((queue: any) => {
-        return queue.queue
-      })
+      // deselect all queues
+      const allQueueCodes: any = []
       setSelectedQueues(allQueueCodes)
       updateQueueManagerFilter(allQueueCodes)
       savePreference('queueManagerSelectedQueues', allQueueCodes, auth.username)

diff --git a/components/queues/CallsView.tsx b/components/queues/CallsView.tsx
@@ -63,6 +63,8 @@ export const CallsView: FC<CallsViewProps> = ({ className }): JSX.Element => {
   }
 
   const [queuesFilter, setQueuesFilter]: any = useState([])
+  const [emptyQueueFilter, setEmptyQueueFilter]: any = useState(false)
+
   const updateQueuesFilter = (newQueuesFilter: string[]) => {
     setQueuesFilter(newQueuesFilter)
     setPageNum(1)
@@ -72,38 +74,41 @@ export const CallsView: FC<CallsViewProps> = ({ className }): JSX.Element => {
   const fetchCalls = async (numHours: number) => {
     let selectedQueues = queuesFilter
 
-    if (isEmpty(selectedQueues)) {
-      selectedQueues = Object.keys(queuesStore.queues)
-    }
-
-    try {
-      setCallsError('')
-      setCallsLoaded(false)
-
-      const res = await retrieveAndFilterQueueCalls(
-        pageNum,
-        textFilter.trim(),
-        outcomeFilter,
-        selectedQueues,
-        numHours,
-      )
-
-      res.rows = res.rows.map((call: any) => {
-        call.queueId = call.queuename
-        call.queueName = queuesStore.queues[call.queuename]?.name
-
-        // queuename attribute name is misleading
-        delete call.queuename
-
-        return call
-      })
-      setCalls(res)
-      setLastUpdated(new Date())
-    } catch (e) {
-      console.error(e)
-      setCallsError(t('Queues.Cannot retrieve calls') || '')
+    //avoid fetching calls if no queues are selected
+    if (!isEmpty(selectedQueues)) {
+      setEmptyQueueFilter(false)
+      try {
+        setCallsError('')
+        setCallsLoaded(false)
+
+        const res = await retrieveAndFilterQueueCalls(
+          pageNum,
+          textFilter.trim(),
+          outcomeFilter,
+          selectedQueues,
+          numHours,
+        )
+
+        res.rows = res.rows.map((call: any) => {
+          call.queueId = call.queuename
+          call.queueName = queuesStore.queues[call.queuename]?.name
+
+          // queuename attribute name is misleading
+          delete call.queuename
+
+          return call
+        })
+        setCalls(res)
+        setLastUpdated(new Date())
+      } catch (e) {
+        console.error(e)
+        setCallsError(t('Queues.Cannot retrieve calls') || '')
+      }
+      setCallsLoaded(true)
+    } else {
+      setCallsLoaded(true)
+      setEmptyQueueFilter(true)
     }
-    setCallsLoaded(true)
   }
 
   // retrieve calls

diff --git a/components/queues/CallsViewFilter.tsx b/components/queues/CallsViewFilter.tsx
@@ -5,7 +5,19 @@ import { ComponentPropsWithRef, forwardRef, useRef } from 'react'
 import classNames from 'classnames'
 import { TextInput } from '../common'
 import { Fragment, useState, useEffect } from 'react'
-import { Dialog, DialogPanel, Disclosure, DisclosureButton, DisclosurePanel, Popover, PopoverButton, PopoverGroup, PopoverPanel, Transition, TransitionChild } from '@headlessui/react'
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronDown, faCircleXmark, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { useSelector } from 'react-redux'
@@ -93,17 +105,16 @@ export const CallsViewFilter = forwardRef<HTMLButtonElement, CallsViewFilterProp
       updateOutcomeFilter(filterValues.outcome)
 
       if (isEmpty(filterValues.selectedQueues)) {
-        // select all queues
-        const allQueueCodes = Object.values(queuesStore.queues).map((queue: any) => {
-          return queue.queue
-        })
+        // set empty array if no queues are selected
+        const allQueueCodes: any = []
         setSelectedQueues(allQueueCodes)
         updateQueuesFilter(allQueueCodes)
       } else {
-        // select queues from preferences
+        // select queues from preferences 
         setSelectedQueues(filterValues.selectedQueues)
         updateQueuesFilter(filterValues.selectedQueues)
       }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     // outcome label
@@ -124,8 +135,8 @@ export const CallsViewFilter = forwardRef<HTMLButtonElement, CallsViewFilterProp
       if (!isEmpty(selectedQueues)) {
         setQueuesLabel(selectedQueues.join(', '))
       } else {
-        // if no queues are selected, it's equivalent to select all of them
-        const allQueueCodes = queuesFilter.options.map((queue: any) => queue.value)
+        // if no queues are selected, set label to an empty array
+        const allQueueCodes: any = []
         setQueuesLabel(allQueueCodes.join(', '))
       }
     }, [selectedQueues, queuesFilter.options])
@@ -137,11 +148,8 @@ export const CallsViewFilter = forwardRef<HTMLButtonElement, CallsViewFilterProp
       setOutcome(DEFAULT_OUTCOME_FILTER)
       updateOutcomeFilter(DEFAULT_OUTCOME_FILTER) // notify parent component
       savePreference('queuesOutcomeFilter', DEFAULT_OUTCOME_FILTER, auth.username)
-
-      // select all queues
-      const allQueueCodes = Object.values(queuesStore.queues).map((queue: any) => {
-        return queue.queue
-      })
+      // deselect all queues
+      const allQueueCodes: any = []
       setSelectedQueues(allQueueCodes)
       updateQueuesFilter(allQueueCodes)
       savePreference('queuesSelectedQueues', allQueueCodes, auth.username)
@@ -335,7 +343,7 @@ export const CallsViewFilter = forwardRef<HTMLButtonElement, CallsViewFilterProp
               <div className='flex items-center'>
                 <div className='flex items-center'>
                   <TextInput
-                    placeholder={t('Queues.Filter calls') || ""}
+                    placeholder={t('Queues.Filter calls') || ''}
                     className='max-w-sm'
                     value={textFilter}
                     onChange={changeTextFilter}