From de466ccd244a239dd7b8c8f69b325510048ed4aa Mon Sep 17 00:00:00 2001 From: tonyco97 Date: Thu, 19 Sep 2024 15:36:09 +0200 Subject: [PATCH] queues. No queue selection as standard inside queues filter --- .../NotManaged/NotManagedCalls.tsx | 66 +++++++++--------- .../NotManaged/NotManagedCallsFilter.tsx | 31 ++++++--- components/queues/CallsView.tsx | 67 ++++++++++--------- components/queues/CallsViewFilter.tsx | 36 ++++++---- 4 files changed, 113 insertions(+), 87 deletions(-) diff --git a/components/queueManager/NotManaged/NotManagedCalls.tsx b/components/queueManager/NotManaged/NotManagedCalls.tsx index 706e34b4..d9fdb9d9 100644 --- a/components/queueManager/NotManaged/NotManagedCalls.tsx +++ b/components/queueManager/NotManaged/NotManagedCalls.tsx @@ -70,6 +70,8 @@ export const NotManagedCalls: FC = ({ 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 = ({ 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 index 2ff2c9c6..11fb88c6 100644 --- 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,10 +109,8 @@ export const NotManagedCallsFilter = forwardRef { - return queue.queue - }) + // set empty array if no queues are selected + const allQueueCodes: any = [] setSelectedQueues(allQueueCodes) updateQueueManagerFilter(allQueueCodes) } else { @@ -108,6 +118,7 @@ export const NotManagedCallsFilter = forwardRef 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 { - 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 index 4d8c824b..ccb03d95 100644 --- a/components/queues/CallsView.tsx +++ b/components/queues/CallsView.tsx @@ -63,6 +63,8 @@ export const CallsView: FC = ({ 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 = ({ 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 index a2bb42dd..74bde063 100644 --- 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 { - 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 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 { - 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