From 6042f01e76c70efbd4b29fd97dd953e4c9b70c8a Mon Sep 17 00:00:00 2001 From: Shri Prakash Bajpai Date: Wed, 3 Jan 2024 17:09:40 +0530 Subject: [PATCH] AgTable and Tooltip fixes (#765) * AgTable and Tooltip fixes * Lint fixes * Width fixes for large Date * UAT enhancements done * PR review fixes * PR fixes V2 * TP-52369 | PR review fixes * TP-52369 | PR review fixes2 --- src/components/GlobalSearch/AutoComplete.tsx | 10 +-- src/components/TooltipV2/TooltipV2.tsx | 4 +- .../components/CaseDetail.module.scss | 13 +++ .../components/DateTime/index.module.scss | 12 +++ .../CaseDetails/components/DateTime/index.tsx | 24 ++++++ .../components/Interactions/index.module.scss | 32 ++++---- .../components/Interactions/index.tsx | 47 +++++------ .../components/Overview/FeedbackHistory.tsx | 39 +++------ .../constants/EmiSchedule.component.tsx | 8 +- .../communicationHistory.constant.tsx | 79 ++++++------------- .../AgentsAccordion/AgentDetail.tsx | 8 +- .../AgentsAccordion/FeedbackDetail.tsx | 14 +--- src/pages/TeamLeadDashboard/TableContent.tsx | 24 +----- 13 files changed, 127 insertions(+), 187 deletions(-) create mode 100644 src/pages/CaseDetails/components/DateTime/index.module.scss create mode 100644 src/pages/CaseDetails/components/DateTime/index.tsx diff --git a/src/components/GlobalSearch/AutoComplete.tsx b/src/components/GlobalSearch/AutoComplete.tsx index b87e0b58..e9dbf579 100644 --- a/src/components/GlobalSearch/AutoComplete.tsx +++ b/src/components/GlobalSearch/AutoComplete.tsx @@ -230,8 +230,8 @@ const AutoComplete: React.FC = () => { }} > {details?.name?.length && details?.name?.length >= 19 ? ( - - + +
{ }} >
 - + {details?.name} diff --git a/src/components/TooltipV2/TooltipV2.tsx b/src/components/TooltipV2/TooltipV2.tsx index ecc42d50..68e8a326 100644 --- a/src/components/TooltipV2/TooltipV2.tsx +++ b/src/components/TooltipV2/TooltipV2.tsx @@ -175,8 +175,8 @@ export const TooltipContent = React.forwardRef = ({ istDate }) => { + const dateValue = istDate ? dateFormat(istDate, DateFormat.LONG_DATE_FORMAT_WITHOUT_TIME) : ''; + const timeValue = istDate ? dateFormat(istDate, DateFormat.HH_mm_ampm) : ''; + return ( +
+ + {dateValue} + + + {timeValue} + +
+ ); +}; + +export default DateTime; diff --git a/src/pages/CaseDetails/components/Interactions/index.module.scss b/src/pages/CaseDetails/components/Interactions/index.module.scss index 9447586f..43f1a965 100644 --- a/src/pages/CaseDetails/components/Interactions/index.module.scss +++ b/src/pages/CaseDetails/components/Interactions/index.module.scss @@ -1,6 +1,5 @@ .waInteractionsWrapper { - padding-left: 24px; - padding-right: 24px; + padding-right: 5px; .header { display: flex; justify-content: space-between; @@ -38,19 +37,20 @@ white-space: nowrap; } -:global { - .tooltipWrapper { - padding: 4px 8px 4px 8px; - box-sizing: border-box; - width: max-content; - z-index: var(--z-index-tooltip); - max-width: 300px; - font-weight: 400; - font-size: 12px; - line-height: 14px; - word-wrap: break-word; - color: var(--text-primary); - border-radius: 4px; - background: var(--grayscale-warm-4); +.teamLeadTable { + .ag-cell { + padding: 0 12px; + } + + .ag-cell:first-child { + padding: 0 12px 0 24px; + } + + .ag-header-cell { + padding: 0 12px; + } + + .ag-header-cell:first-child { + padding: 0 12px 0 24px; } } diff --git a/src/pages/CaseDetails/components/Interactions/index.tsx b/src/pages/CaseDetails/components/Interactions/index.tsx index 087650f6..6134dd24 100644 --- a/src/pages/CaseDetails/components/Interactions/index.tsx +++ b/src/pages/CaseDetails/components/Interactions/index.tsx @@ -26,52 +26,40 @@ import { addClickstreamEvent } from '../../../../service/clickStreamEventService import { CLICKSTREAM_EVENT_NAMES } from '../../../../service/clickStream.constant'; import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2'; import cx from 'classnames'; -import { dateFormat, DateFormat } from '@cp/src/utils/DateHelper'; +import { DateFormat, dateFormat } from '@cp/src/utils/DateHelper'; +import EllipsisText from '@cp/src/components/EllipsisText'; +import DateTime from '../DateTime'; const WAINTERACTIONS_COL_DEFS = [ + { + field: 'messageTimestamp', + headerName: 'Date & Time', + cellRenderer: (params: ICellRendererParams) => { + const istDate = new Date(params.value); + return ; + }, + width: '140px' + }, { field: 'agentName', headerName: 'Agent Name', width: '150px', - cellRenderer: (params: ICellRendererParams) => { - const { data } = params; - return ( -
- - -
{data?.agentName}
- - - {data?.agentName} - - -
- ); - } + wrapText: true, + cellStyle: { wordBreak: 'break-word', padding: '8' } }, - { field: 'agentNumber', headerName: 'Agent Number', width: '170px' }, + { field: 'agentNumber', headerName: 'Agent Number', width: '130px' }, { field: 'messageText', headerName: 'Message', - width: '250px', + width: '320px', autoHeight: true, wrapText: true, cellStyle: { wordBreak: 'break-word', padding: '8' } }, - { - field: 'messageTimestamp', - headerName: 'Time', - cellRenderer: (params: ICellRendererParams) => { - const value = dateFormat(new Date(params.value), DateFormat.LONG_DATE_FORMAT_WITH_TIME); - - return
{value}
; - }, - width: '180px' - }, { field: 'source', headerName: 'Source', - width: '90px' + width: '110px' } ]; @@ -158,6 +146,7 @@ const Interactions = () => { style={{ height: `${window?.innerHeight - 405}` }} + className="teamLeadTable" rowData={waInteractionsData?.content} columnDefs={WAINTERACTIONS_COL_DEFS} sizeColumnsToFit diff --git a/src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx b/src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx index 595e3979..504cf7e9 100644 --- a/src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx +++ b/src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx @@ -29,6 +29,7 @@ import { User } from 'src/reducers/commonSlice'; import { overviewFeedbackStyles } from './utils'; import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2'; import EllipsisText from '@cp/src/components/EllipsisText'; +import DateTime from '../DateTime'; const AgTable = React.lazy( () => import(/* webpackChunkName: ['table'] */ '@navi/web-ui/lib/components/AgTable/AgTable') @@ -38,24 +39,14 @@ export const getColumnDefs = (user: User) => { return [ { field: 'feedbackTime', - headerName: 'Date and time', + headerName: 'Date & Time', cellRenderer: (params: ICellRendererParams) => { - const value = dateFormat(utcToIST(params.value), DateFormat.LONG_DATE_FORMAT_WITH_TIME); - - return ( - - - - - - {value} - - + const istDate = utcToIST( + params.data.ameyoNonConnectedInteractionsInfo?.length + ? params.data.ameyoNonConnectedInteractionsInfo[0].createdAt + : params.value ); + return ; } }, { @@ -68,13 +59,7 @@ export const getColumnDefs = (user: User) => { - - {value} - + {value} ); } @@ -111,13 +96,7 @@ export const getColumnDefs = (user: User) => { - - {value} - + {value} ); } diff --git a/src/pages/CaseDetails/constants/EmiSchedule.component.tsx b/src/pages/CaseDetails/constants/EmiSchedule.component.tsx index 0d6e4561..0a6e0ba6 100644 --- a/src/pages/CaseDetails/constants/EmiSchedule.component.tsx +++ b/src/pages/CaseDetails/constants/EmiSchedule.component.tsx @@ -142,13 +142,7 @@ export const FeeWaiverHistoryColumnDefs: ColDefsType[] = [ - - {value} - + {value} ); } diff --git a/src/pages/CaseDetails/constants/communicationHistory.constant.tsx b/src/pages/CaseDetails/constants/communicationHistory.constant.tsx index 621f2cac..3b322137 100644 --- a/src/pages/CaseDetails/constants/communicationHistory.constant.tsx +++ b/src/pages/CaseDetails/constants/communicationHistory.constant.tsx @@ -15,6 +15,8 @@ import FieldFeedbackAction from '../feedbackForm/component/FieldFeedbackAction'; import { AnswerType, AnswerView, QuestionTags } from '../interfaces/CommunicationHistory.type'; import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2'; import EllipsisText from '@cp/src/components/EllipsisText'; +import DateTime from '../components/DateTime'; +import { Typography } from '@navi/web-ui/lib/primitives'; export const CALL_INTERACTIONS = 'callInteractions'; export const NO_RECORD_FOUND = 'No Record Found'; @@ -64,38 +66,26 @@ export const SYSTEM_INTERACTIONS_TYPE_COL_DEFS = [ { field: 'scheduledTimestamp', headerName: 'Date & Time', - width: '230px', + width: '150px', cellRenderer: (params: ICellRendererParams) => { - const value = dateFormat(new Date(params.value), DateFormat.LONG_DATE_FORMAT_WITH_TIME); - - return ( - - - - - - {value} - - - ); - } + const istDate = new Date(params.value); + return ; + }, + cellStyle: { paddingRight: '0' } }, { field: 'phoneNumber', headerName: 'Contacted On', - width: '170px' + width: '160px', + cellStyle: { paddingRight: '0' } }, { field: 'message', headerName: 'Message', - cellStyle: { wordBreak: 'break-word', padding: '8' }, - width: '400px', + width: '470px', autoHeight: true, - wrapTYext: true + wrapTYext: true, + cellStyle: { wordBreak: 'break-word', paddingRight: '0', paddingTop: '8', paddingBottom: '8' } }, { field: 'status', @@ -106,7 +96,7 @@ export const SYSTEM_INTERACTIONS_TYPE_COL_DEFS = [ export const SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS = [ { field: 'createdAt', - headerName: 'Date time', + headerName: 'Date & Time', flex: 3, width: '230px', cellRenderer: (params: ICellRendererParams) => { @@ -117,13 +107,7 @@ export const SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS = [ - - {value} - + {value} ); } @@ -232,11 +216,11 @@ const columnWidth = (percentage: number) => { const attributesWidth = { dateWidth: (percentage: number) => - GLOBAL.SCREEN_WIDTH < 1400 ? '180px' : `${columnWidth(percentage)}px`, + GLOBAL.SCREEN_WIDTH < 1400 ? '150px' : `${columnWidth(percentage)}px`, recipientNumberWidth: (percentage: number) => GLOBAL.SCREEN_WIDTH < 1400 ? '130px' : `${columnWidth(percentage)}px`, feedBackWidth: (percentage: number) => - GLOBAL.SCREEN_WIDTH < 1400 ? '183px' : `${columnWidth(percentage)}px`, + GLOBAL.SCREEN_WIDTH < 1400 ? '213px' : `${columnWidth(percentage)}px`, typeWidth: (percentage: number) => GLOBAL.SCREEN_WIDTH < 1400 ? '90px' : `${columnWidth(percentage)}px`, audioButtonWidth: (percentage: number) => @@ -262,33 +246,16 @@ export const getInteractionsFeedbackColumns = (user: User) => { return [ { field: 'createdAt', - headerName: 'Date Time', + headerName: 'Date & Time', width: attributesWidth.dateWidth(20), - cellStyle: { paddingLeft: '6px', paddingRight: '6px', lineHeight: '1.5rem' }, + cellStyle: { paddingLeft: '12px', paddingRight: '12px', lineHeight: '1.5rem' }, cellRenderer: (params: ICellRendererParams) => { - const value = dateFormat( - utcToIST( - params.data.ameyoNonConnectedInteractionsInfo?.length - ? params.data.ameyoNonConnectedInteractionsInfo[0].createdAt - : params.value - ), - DateFormat.LONG_DATE_FORMAT_WITH_TIME - ); - - return ( - - - - - - {value} - - + const istDate = utcToIST( + params.data.ameyoNonConnectedInteractionsInfo?.length + ? params.data.ameyoNonConnectedInteractionsInfo[0].createdAt + : params.value ); + return ; } }, { diff --git a/src/pages/LiveLocationTracker/components/AgentsAccordion/AgentDetail.tsx b/src/pages/LiveLocationTracker/components/AgentsAccordion/AgentDetail.tsx index d6ee0f9f..1b2fb0b4 100644 --- a/src/pages/LiveLocationTracker/components/AgentsAccordion/AgentDetail.tsx +++ b/src/pages/LiveLocationTracker/components/AgentsAccordion/AgentDetail.tsx @@ -107,13 +107,7 @@ const AgentDetail = (props: AgentDetailProps) => {
- - {name} - + {name} {name.length > MIN_CHAR_LENGTH_FOR_TOOLTIP ? (
{
{feedback?.suspicious ? : } - - {customerName} - + {customerName} {customerName?.length && customerName?.length > MIN_CHAR_LENGTH_FOR_TOOLTIP ? (
{customerName}
@@ -90,11 +84,7 @@ const FeedbackDetail = (props: FeedbackDetailProps) => {
- + {feedback?.interactionStatus} {feedback?.interactionStatus?.length > MIN_CHAR_LENGTH_FOR_TOOLTIP ? ( diff --git a/src/pages/TeamLeadDashboard/TableContent.tsx b/src/pages/TeamLeadDashboard/TableContent.tsx index 9bded1f0..4c63df23 100644 --- a/src/pages/TeamLeadDashboard/TableContent.tsx +++ b/src/pages/TeamLeadDashboard/TableContent.tsx @@ -18,13 +18,7 @@ export const TEAM_LEAD_COLUMN_DEFS = [ - - {params.value} - + {params.value} ); } @@ -67,13 +61,7 @@ export const TEAM_LEAD_COLUMN_DEFS = [ - - {params.value} - + {params.value} ); } @@ -104,13 +92,7 @@ export const TEAM_LEAD_COLUMN_DEFS = [ - - {params.value} - + {params.value} ); }