Merge pull request #305 from DavitBakhutashvili/feat/session-fixes

dzs vzFeat/session fixes
l3vels · Nov 21, 2023 · c5e5e2e · c5e5e2e
2 parents 4161e6f + b7ee1af
commit c5e5e2e
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 66 deletions.
diff --git a/apps/ui/src/components/DatePicker/DatePicker.tsx b/apps/ui/src/components/DatePicker/DatePicker.tsx
@@ -7,7 +7,7 @@ import outsideClick from 'helpers/outsideClick'
 import Calendar from '@l3-lib/ui-core/dist/icons/Calendar'
 import { ButtonSecondary } from 'components/Button/Button'
 
-const DatePickerField = ({ start_date, end_date, onChange }: any) => {
+const DatePickerField = ({ start_date, end_date, onChange, onApply, onClear }: any) => {
   const { t } = useTranslation()
   const [is_open, setIsOpen] = React.useState(false)
 
@@ -19,16 +19,25 @@ const DatePickerField = ({ start_date, end_date, onChange }: any) => {
 
   return (
     <StyledContainer ref={ref}>
-      <ButtonSecondary leftIcon={() => <Calendar />} onClick={() => setIsOpen(true)}>
+      <StyledSearchContainer>
+        <StyledSearchInput placeholder='mm/dd/yyyy' disabled />
+        <StyledCalendarIcon onClick={() => setIsOpen(true)} />
+      </StyledSearchContainer>
+      {/* <ButtonSecondary leftIcon={() => <Calendar />} onClick={() => setIsOpen(true)}>
         {t('date')}
-      </ButtonSecondary>
+      </ButtonSecondary> */}
       {is_open && (
         <StyledPickerContainer>
           <DatePicker
             kind='secondary'
             date={start_date}
             endDate={end_date}
             range
+            onApply={onApply}
+            onClear={() => {
+              onClear()
+              onChange({ startDate: null, endDate: null })
+            }}
             data-testid='date-picker'
             onPickDate={onChange}
           />
@@ -52,3 +61,25 @@ const StyledPickerContainer = styled.div`
   top: 106%;
   left: -50%;
 `
+
+const StyledSearchInput = styled.input`
+  color: ${({ theme }) => theme.body.textColorSecondary} !important;
+  background: ${({ theme }) => theme.body.toolkitCardBgColorSecondary} !important;
+  border: ${({ theme }) => theme.body.sessionDropdownBorder} !important;
+  min-width: 300px;
+  height: 48px;
+  border-radius: 8px;
+  padding-right: 40px;
+`
+const StyledSearchContainer = styled.div`
+  position: relative;
+`
+const StyledCalendarIcon = styled(Calendar)`
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  path {
+    stroke: ${({ theme }) => theme.body.iconColor};
+  
+`
diff --git a/apps/ui/src/components/Table/components/TableCell.tsx b/apps/ui/src/components/Table/components/TableCell.tsx
@@ -16,7 +16,15 @@ const TableCell = ({ cell }: TableCellProps) => {
 
   const { column, row, value: cellValue } = cell
   const { original: data } = row
-  const { isEdit, cellEditor: Editor, cellEditorParams, valueSetter, maxWidth } = column
+  const {
+    isEdit,
+    cellEditor: Editor,
+    cellEditorParams,
+    valueSetter,
+    maxWidth,
+    minWidth,
+    width,
+  } = column
 
   let handleEditMode = null
 
@@ -76,6 +84,8 @@ const TableCell = ({ cell }: TableCellProps) => {
       {...cell.getCellProps()}
       onClick={handleEditMode}
       maxWidth={maxWidth}
+      minWidth={minWidth}
+      width={width}
       isEditing={isEditing}
     >
       {isEditing ? (
@@ -95,7 +105,7 @@ const TableCell = ({ cell }: TableCellProps) => {
 
 export default TableCell
 
-const StyledTd = styled.td<{ maxWidth: number; isEditing: boolean }>`
+const StyledTd = styled.td<{ isEditing: boolean }>`
   padding: 5px 10px;
   position: relative;
 

diff --git a/apps/ui/src/modals/ChatLinkModal.tsx b/apps/ui/src/modals/ChatLinkModal.tsx
@@ -51,7 +51,10 @@ const ChatLinkModal = ({ data }: ChatLinkModalProps) => {
   const handleSubmit = async (values: any) => {
     setIsLoading(true)
     try {
-      const res = await createChat({ agent_id: agentId, name: values.chat_name })
+      const res = await createChat({
+        agent_id: agentId,
+        name: values.chat_name,
+      })
       await refetchChat()
       setChatLink(`${import.meta.env.REACT_APP_DOMAIN_NAME}/chat/session?chat=${res.id}`)
     } catch (e) {

diff --git a/apps/ui/src/pages/Sessions/Session.tsx b/apps/ui/src/pages/Sessions/Session.tsx
@@ -17,9 +17,26 @@ import ComponentsWrapper from 'components/ComponentsWrapper/ComponentsWrapper'
 import { useSession } from './useSession'
 import SessionDropdown from './SessionDropdown'
 import columnConfig from './columnConfig'
+// import DatePicker from '@l3-lib/ui-core/dist/DatePicker'
+import { SetStateAction, useState } from 'react'
+import DatePickerField from 'components/DatePicker/DatePicker'
+import { Moment } from 'moment'
 
 const Sessions = () => {
-  const { scheduleOptions, agentOptions, filteredData, searchText, setSearchText } = useSession()
+  const {
+    scheduleOptions,
+    agentOptions,
+    filteredData,
+    searchText,
+    setSearchText,
+    selectedAgentNames,
+    setSelectedAgentNames,
+    startDate,
+    endDate,
+    filterByDateRange,
+    handleDateChange,
+    clearSelectedDays,
+  } = useSession()
 
   return (
     <StyledSectionWrapper>
@@ -30,10 +47,22 @@ const Sessions = () => {
 
         <StyledRightSideWrapper>
           <StyledSessionDropdownWrapper>
-            <SessionDropdown isMulti placeholder='Agent' label={''} options={agentOptions} />
+            <SessionDropdown
+              isMulti
+              placeholder='Agent'
+              label={''}
+              options={agentOptions}
+              onChange={(selectedValues: string[]) => setSelectedAgentNames(selectedValues)}
+            />
           </StyledSessionDropdownWrapper>
           <StyledDateWrapper>
-            <TextField iconName='fa fa-square' placeholder='Date and Time' type='date' />
+            <DatePickerField
+              start_date={startDate}
+              end_date={endDate}
+              onChange={handleDateChange}
+              onClear={clearSelectedDays}
+              onApply={filterByDateRange}
+            />
           </StyledDateWrapper>
 
           <StyledSessionDropdownWrapper>
@@ -184,8 +213,8 @@ export const StyledGridWrapper = styled.div`
 `
 
 const StyledSessionDropdownWrapper = styled.div`
-  width: 300px !important;
-  height: 48px !important;
+  min-width: 300px !important;
+  max-width: 800px;
 `
 
 const StyledRightSideWrapper = styled.div`
@@ -195,6 +224,7 @@ const StyledRightSideWrapper = styled.div`
 `
 
 const StyledDateWrapper = styled.div`
+  z-index: 10;
   .input-component {
     width: 300px;
     border: ${({ theme }) => theme.body.sessionDropdownBorder} !important;
@@ -220,7 +250,7 @@ const StyledSearchContainer = styled.div`
 
 const StyledSearchInput = styled.input`
   color: ${({ theme }) => theme.body.textColorSecondary} !important;
-  background: ${({ theme }) => theme.body.textAreaBgColor};
+  background: ${({ theme }) => theme.body.toolkitCardBgColorSecondary};
   border: ${({ theme }) => theme.body.sessionDropdownBorder} !important;
   min-width: 300px;
   height: 48px;

diff --git a/apps/ui/src/pages/Sessions/SessionDropdown.tsx b/apps/ui/src/pages/Sessions/SessionDropdown.tsx
@@ -3,40 +3,47 @@ import styled from 'styled-components'
 import Dropdown from '@l3-lib/ui-core/dist/Dropdown'
 import Typography from '@l3-lib/ui-core/dist/Typography'
 import TypographyPrimary from 'components/Typography/Primary'
-import { placeholder } from 'lodash/fp'
 
 type SessionDropdownProps = {
   label: string
   options: any
   isMulti?: boolean
   placeholder: string
+  onChange?: (selectedValues: string[]) => any
 }
 
-const SessionDropdown = ({ label, options, isMulti, placeholder }: SessionDropdownProps) => {
+const SessionDropdown = ({
+  label,
+  options,
+  isMulti,
+  placeholder,
+  onChange,
+}: SessionDropdownProps) => {
   const [selectedValue, setSelectedValue] = useState<string | string[] | null>(null)
 
   const onChangeFunction = (option: any) => {
     if (isMulti) {
-      setSelectedValue(prevValue => {
-        if (prevValue && Array.isArray(prevValue)) {
-          if (option === null) {
-            return []
-          } else {
-            const values = option?.map((o: any) => o.value)
-            return [...values]
-          }
-        }
-        return prevValue
-      })
+      setSelectedValue(option || []) // Ensure option is always an array
     } else {
       setSelectedValue(option?.value || null)
     }
+
+    // Call the onChange prop
+    if (onChange) {
+      onChange(isMulti ? (option || []).map((opt: any) => opt.value) : option?.value)
+    }
   }
 
   const onOptionRemove = (removedValue: any) => {
     if (isMulti && Array.isArray(selectedValue)) {
-      const newValues = selectedValue.filter(oldValue => oldValue !== removedValue.value)
+      const newValues = selectedValue.filter(oldValue => oldValue !== removedValue)
+
       setSelectedValue([...newValues])
+
+      // Call the onChange prop
+      if (onChange) {
+        onChange(newValues.map((value: any) => value.value))
+      }
     }
   }
 
@@ -72,8 +79,9 @@ const StyledWrapper = styled.div`
 
   .css-xrcw8y-container {
     border: ${({ theme }) => theme.body.sessionDropdownBorder} !important;
-    width: 300px;
-    height: 48px;
+    // width: 300px;
+    // height: 48px;
+
     border-radius: 8px;
   }
 
@@ -121,13 +129,13 @@ const StyledWrapper = styled.div`
   }
 
   .l3-dropdown_scrollable-wrapper {
-    height: 44px;
+    // height: 44px;
     &::placeholder {
       color: ${({ theme }) => theme.body.placeHolderColor};
     }
   }
   .css-z3s7sx-control {
-    height: 44px;
+    // height: 44px;
   }
 
   .css-wxpx7r-menu {
@@ -136,7 +144,7 @@ const StyledWrapper = styled.div`
 
   .dropdown-wrapper.primary__wrapper.css-7xl64p-container {
     border: ${({ theme }) => theme.body.sessionDropdownBorder} !important;
-    height: 44px;
+    // height: 44px;
     border-radius: 8px;
   }
   css-99wu5k {
@@ -170,8 +178,4 @@ const StyledWrapper = styled.div`
       fill: ${({ theme }) => theme.body.iconColor};
     }
   }
-
-  .components-Dropdown-components-MultiValueContainer-MultiValueContainer-module__value-container-tags--YmeOb {
-    flex-wrap: nowrap;
-  }
 `
diff --git a/apps/ui/src/pages/Sessions/columnConfig.tsx b/apps/ui/src/pages/Sessions/columnConfig.tsx
@@ -34,7 +34,7 @@ const DateRenderer: React.FC<CellProps> = ({ value }) => {
       />
     )
   } else {
-    const formattedDate = moment(value).fromNow()
+    const formattedDate = moment(value).format('MMM DD, YYYY')
     content = <span>{formattedDate}</span>
   }
 
@@ -45,51 +45,51 @@ const columns = [
   {
     Header: 'Name',
     accessor: 'name',
-    minWidth: 300,
-    width: 350,
+    minWidth: 343,
+    width: '24.8%',
   },
   // {
   //   Header: 'Team Name',
   //   accessor: 'team_name',
-  //   minWidth: 150,
+  //   minWidth: 342,
   //   width: 200,
   // },
   {
     Header: 'Agent Name',
     accessor: 'agent_name',
-    minWidth: 300,
-    width: 350,
+    minWidth: 342,
+    width: '24.8%',
   },
   {
     Header: 'Status',
     accessor: 'status',
-    minWidth: 300,
-    width: 350,
+    minWidth: 343,
+    width: '24.8%',
   },
   {
     Header: 'Sender Name',
     accessor: 'sender_name',
-    minWidth: 300,
-    width: 350,
+    minWidth: 343,
+    width: '24.8%',
   },
   // {
   //   Header: 'Schedule Name',
   //   accessor: 'schedule_name',
-  //   minWidth: 150,
+  //   minWidth: 343,
   //   width: 200,
   // },
   {
     Header: 'Created Date',
-    accessor: 'created_date',
-    minWidth: 300,
-    width: 350,
+    accessor: 'added_at',
+    minWidth: 343,
+    width: '24.8%',
     Cell: DateRenderer,
   },
   {
     Header: 'Actions',
     accessor: 'actions',
-    minWidth: 100,
-    width: 110,
+    minWidth: 150,
+    width: '10.39%',
 
     Cell: (props: { row: { original: any } }) => {
       const { original: data } = props.row