ordering-ui-admin-external 1.43.31 → 1.43.32

package/src/components/Delivery/DriversTimeDisplay/index.js

@@ -26,13 +26,13 @@ import {
   DeleteWrapper,
   OrderStatusTypeSelectWrapper,
   StackedBlock,
-  DriverMultiSelectorContainer,
-  WrapperRow,
-  WarningMessage
+  WarningMessage,
+  FiltContainer
 } from './styles'
 import { Select } from '../../../styles/Select'
 import { DriverMultiSelector } from '../../Orders/DriverMultiSelector'
 import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
+import MdClose from '@meronex/icons/md/MdClose'
 
 const DriversTimeDisplayUI = (props) => {
   const {
@@ -78,7 +78,10 @@ const DriversTimeDisplayUI = (props) => {
     handleSetInitialStates,
     filterValues,
     handleChangeDriver,
-    handleClearFilters
+    handleClearFilters,
+    setFiltOption,
+    filtOption,
+    handleClearDriversList
   } = props
 
   const [, t] = useLanguage()
@@ -128,11 +131,24 @@ const DriversTimeDisplayUI = (props) => {
     }
   ]
 
-  const changeDriverGroupState = (_driverGroup) => {
+  const handleCleanFilters = () => {
     setShowSelectHeader(false)
+    handleClearFilters()
+  }
+
+  const changeDriverGroupState = (_driverGroup) => {
+    if (_driverGroup?.id === selectedGroup?.id) return
+    handleCleanFilters()
     setSelectedGroup(_driverGroup)
   }
 
+  const handleCloseFiltOption = () => {
+    setSelectedGroup(null)
+    setFiltOption(null)
+    handleClearDriversList()
+    handleCleanFilters()
+  }
+
   const handleChangeDate = (date1, date2) => {
     const diff = moment(date2).diff(date1, 'days')
     if (diff > 31) {
@@ -269,6 +285,11 @@ const DriversTimeDisplayUI = (props) => {
     setScheduleOptions(_scheduleOptions)
   }
 
+  const handleChangeFiltOption = (option) => {
+    setFiltOption(option)
+    option === 'driver_groups' && setShowSelectHeader(true)
+  }
+
   useEffect(() => {
     const isTodayOrPastDate = moment(selectedDate).format('YYYY-MM-DD') <= moment().format('YYYY-MM-DD')
     const date = moment(selectedDate).format('YYYY-MM-DD')
@@ -388,9 +409,61 @@ const DriversTimeDisplayUI = (props) => {
               <div>
                 <h1>{t('DRIVERS_TIME_DISPLAY', 'Drivers time display')}</h1>
                 <DriverGroupSelectorWrapper>
-                  <DriverGroupName onClick={() => setShowSelectHeader(!showSelectHeader)}>
-                    {t('SELECT_DRIVER_GROUP', 'Select a driver group')}
-                  </DriverGroupName>
+                  <span className='calendar'>{t('CALENDAR', 'Calendar')}</span>
+                  <ChevronRight />
+                  {!filtOption ? (
+                    <>
+                      <DriverGroupName className='calendar' onClick={() => handleChangeFiltOption('driver_groups')}>{t('SELECT_DRIVER_GROUPS', 'Select driver groups')}</DriverGroupName>
+                      <span> {t('OR', 'Or')} </span>
+                      <DriverGroupName className='calendar' onClick={() => handleChangeFiltOption('drivers')}>{t('SELECT_DRIVERS', 'Select drivers')}</DriverGroupName>
+                    </>
+                  ) : (
+                    <FiltContainer>
+                      <DriverGroupName
+                        className='calendar'
+                        onClick={() => filtOption === 'driver_groups' ? setShowSelectHeader(!showSelectHeader) : {}}
+                      >
+                        {filtOption === 'driver_groups' ? t('DRIVER_GROUPS', 'driver groups') : t('DRIVERS', 'drivers')}
+                      </DriverGroupName>
+                      <Button
+                        circle
+                        outline
+                        color='primary'
+                        type='reset'
+                        className='remove_option'
+                        onClick={() => handleCloseFiltOption()}
+                      >
+                        <MdClose />
+                      </Button>
+                    </FiltContainer>
+                  )}
+                  <ChevronRight />
+                  {(selectedGroup || (filtOption === 'drivers')) && (
+                    <>
+                      {selectedGroup && (
+                        <>
+                          <span>{selectedGroup?.name}</span>
+                          <ChevronRight />
+                          <span>{t('DRIVERS', 'DRIVERS')}</span>
+                          <ChevronRight />
+                        </>
+                      )}
+                      <DriverMultiSelector
+                        isSearchByName
+                        useDriversByProps={selectedGroup}
+                        drivers={selectedGroup?.drivers}
+                        disableSocketRoomDriver
+                        useTextStyle
+                        hideChevronIcon
+                        autoOpen={filtOption === 'drivers'}
+                        filterValues={filterValues}
+                        handleChangeDriver={handleChangeDriver}
+                        andText={t('AND', 'And')}
+                        textClassnames='calendar'
+                        optionsPosition='left'
+                      />
+                    </>
+                  )}
                   {showSelectHeader && (
                     <DriverGroupSelectHeader
                       close={() => setShowSelectHeader(false)}
@@ -398,36 +471,17 @@ const DriversTimeDisplayUI = (props) => {
                       changeDriverGroupState={changeDriverGroupState}
                     />
                   )}
-                  <ChevronRight />
-                  <span className='calendar'>{t('CALENDAR', 'Calendar')}</span>
-                  {selectedGroup && (
-                    <>
-                      <ChevronRight />
-                      <span>{selectedGroup?.name}</span>
-                    </>
+                  {(filterValues?.driverIds?.length > 0) && (
+                    <WarningMessage>
+                      <TiWarningOutline />
+                      <span>{t('FILTER_APPLIED', 'Filters applied')}</span>
+                      <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
+                    </WarningMessage>
                   )}
                 </DriverGroupSelectorWrapper>
               </div>
 
-              {(filterValues?.driverIds?.length > 0) && (
-                <WarningMessage>
-                  <TiWarningOutline />
-                  <span>{t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')}</span>
-                  <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
-                </WarningMessage>
-              )}
               <DriversGroupCalendarWrapper>
-                {selectedGroup && (
-                  <WrapperRow wrapperWidth={400}>
-                    <DriverMultiSelectorContainer>
-                      <DriverMultiSelector
-                        disableSocketRoomDriver
-                        filterValues={filterValues}
-                        handleChangeDriver={handleChangeDriver}
-                      />
-                    </DriverMultiSelectorContainer>
-                  </WrapperRow>
-                )}
                 <AnalyticsCalendar {...props} handleChangeDate={handleChangeDate} />
               </DriversGroupCalendarWrapper>
             </HeaderWrapper>
@@ -554,7 +608,8 @@ export const DriversTimeDisplay = (props) => {
       initialPage: 1,
       pageSize: 10,
       controlType: 'pages'
-    }
+    },
+    propsToFetch: ['id', 'enabled', 'name', 'email', 'level', 'lastname', 'delivery_blocks', 'photo']
   }
   return (
     <CalendarDriversListController {...driversTimeDisplayProps} />

package/src/components/Delivery/DriversTimeDisplay/styles.js

@@ -63,7 +63,7 @@ export const DriverGroupSelectorWrapper = styled.div`
   width: fit-content;
   margin: 3px 0;
 
-  > span {
+  span {
     font-size: 14px;
     color: ${props => props.theme.colors.secundaryLight};
     &.calendar {
@@ -942,10 +942,10 @@ export const WarningMessage = styled.div`
   padding: 0px 15px;
   box-sizing: border-box;
   margin: 10px 0px 0px 0px !important;
-
-  right: 0px;
+  max-width: 250px;
+  left: 0px;
   ${props => props.theme?.rtl && css`
-    left: 0px;
+    right: 0px;
     right: initial;
   `}
 
@@ -991,3 +991,21 @@ export const WarningMessage = styled.div`
     }
   }
 `
+
+export const FiltContainer = styled.div`
+  display: inline-block;
+  position: relative;
+  button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: transparent;
+    width: 20px;
+    height: 20px;
+    transform: translate(140%, -50%);
+    top: 5px;
+    right: 10px;
+  }
+`

package/src/components/Orders/DriverMultiSelector/index.js

@@ -21,14 +21,29 @@ const DriverMultiSelectorUI = (props) => {
     small,
     padding,
     handleChangeDriver,
-    filterValues
+    filterValues,
+    useTextStyle,
+    hideChevronIcon,
+    andText,
+    textClassnames,
+    pagination,
+    handleChangePage,
+    handleChangePageSize,
+    useDriversByProps,
+    setSearchValue,
+    searchValue,
+    optionsPosition
   } = props
 
   const [{ dictionary }] = useLanguage()
   const theme = useTheme()
   const [driversMultiOptionList, setDriversMultiOptionList] = useState([])
-  const [searchValue, setSearchValue] = useState(null)
-  const driversLoading = [{ value: 'default', content: <Option small={small}>{dictionary?.LOADING ?? 'loading'}...</Option> }]
+
+  const driversLoading = [{
+    value: 'default',
+    content: <Option small={small}>{dictionary?.LOADING ?? 'loading'}...</Option>,
+    showOnSelected: useTextStyle ? dictionary?.LOADING ?? 'loading' : null
+  }]
 
   useEffect(() => {
     const _driversOptionList = [
@@ -36,7 +51,8 @@ const DriverMultiSelectorUI = (props) => {
         value: 'default',
         content: <Option padding='0px'><span>{dictionary?.SELECT_DRIVER ?? 'Select driver'}</span></Option>,
         color: 'primary',
-        showDisable: true
+        showDisable: true,
+        showOnSelected: useTextStyle ? dictionary?.SELECT_DRIVER ?? 'Select driver' : null
       }
     ]
     if (!driversList.loading) {
@@ -62,7 +78,8 @@ const DriverMultiSelectorUI = (props) => {
                 </DriverNameContainer>
               </OptionContent>
             </Option>
-          )
+          ),
+          showOnSelected: useTextStyle ? driver.name : null
         }
       })
 
@@ -78,22 +95,37 @@ const DriverMultiSelectorUI = (props) => {
 
   return (
     <>
-      {!driversList.loading ? (
+      {!driversList.loading || (!useDriversByProps && pagination) ? (
         <MultiSelect
-          defaultValue={filterValues.driverIds}
+          isLoading={driversList.loading}
+          useLazyPagination={!useDriversByProps}
+          searchBarIsNotLazyLoad={useDriversByProps}
+          useTextStyle={useTextStyle}
+          hideChevronIcon={hideChevronIcon}
+          andText={andText}
+          textClassnames={textClassnames}
+          defaultValue={driversList.loading && !useDriversByProps ? 'loading' : filterValues.driverIds}
           placeholder={Placeholder}
-          options={driversMultiOptionList}
+          options={driversList.loading && !useDriversByProps ? driversLoading : driversMultiOptionList}
           optionInnerMargin='10px'
           optionInnerMaxHeight='150px'
+          optionsPosition={optionsPosition}
           onChange={(driver) => handleChangeDriver(driver)}
           isShowSearchBar
           searchBarIsCustomLayout
-          searchBarIsNotLazyLoad
           searchValue={searchValue}
           handleChangeSearch={(val) => setSearchValue(val)}
+          pagination={pagination}
+          handleChangePage={handleChangePage}
+          handleChangePageSize={handleChangePageSize}
         />
       ) : (
         <MultiSelect
+          searchBarIsNotLazyLoad={useDriversByProps}
+          useTextStyle={useTextStyle}
+          hideChevronIcon={hideChevronIcon}
+          andText={andText}
+          textClassnames={textClassnames}
           defaultValue='default'
           options={driversLoading}
           optionInnerMargin='10px'
@@ -101,7 +133,6 @@ const DriverMultiSelectorUI = (props) => {
           className='driver-select'
           isShowSearchBar
           searchBarIsCustomLayout
-          searchBarIsNotLazyLoad
           searchValue={searchValue}
           handleChangeSearch={(val) => setSearchValue(val)}
         />
@@ -114,6 +145,11 @@ export const DriverMultiSelector = (props) => {
   const DriversControlProps = {
     ...props,
     UIComponent: DriverMultiSelectorUI,
+    paginationSettings: {
+      initialPage: 1,
+      pageSize: 10,
+      controlType: 'pages'
+    },
     propsToFetch: ['id', 'name', 'lastname', 'cellphone', 'photo']
   }
   return (

package/src/styles/MultiSelect/index.js

@@ -3,7 +3,7 @@ import EnChevronDown from '@meronex/icons/en/EnChevronDown'
 import { CheckSquareFill, Square } from 'react-bootstrap-icons'
 import MdClose from '@meronex/icons/md/MdClose'
 import { Button } from '../Buttons'
-import { SearchBar } from '../../components/Shared'
+import { Pagination, SearchBar } from '../../components/Shared'
 
 import {
   Select as SelectInput,
@@ -18,7 +18,9 @@ import {
 } from '../Selects'
 
 import {
-  CheckBox
+  CheckBox,
+  TextFormatted,
+  PaginationWrapper
 } from './styles'
 
 export const MultiSelect = (props) => {
@@ -33,7 +35,17 @@ export const MultiSelect = (props) => {
     searchBarPlaceholder,
     searchBarIsCustomLayout,
     searchValue,
-    handleChangeSearch
+    handleChangeSearch,
+    useTextStyle,
+    textClassnames,
+    hideChevronIcon,
+    andText,
+    pagination,
+    handleChangePage,
+    handleChangePageSize,
+    useLazyPagination,
+    isLoading,
+    optionsPosition
   } = props
 
   const [open, setOpen] = useState(false)
@@ -48,7 +60,7 @@ export const MultiSelect = (props) => {
   }
 
   const closeSelect = (e) => {
-    if (open) {
+    if (open && !isLoading) {
       const outsideDropdown = !dropdownReference.current?.contains(e.target)
       if (outsideDropdown) {
         setOpen(false)
@@ -62,7 +74,9 @@ export const MultiSelect = (props) => {
     const _defaultOption = options?.filter(
       (option) => defaultValue.includes(option.value)
     )
-    setSelectedOptions(_defaultOption)
+    if (!(useLazyPagination && pagination)) {
+      setSelectedOptions(_defaultOption)
+    }
     setValues(defaultValue)
   }, [defaultValue, options, searchValue])
 
@@ -75,6 +89,11 @@ export const MultiSelect = (props) => {
     return () => document.removeEventListener('click', closeSelect)
   }, [open])
 
+  const handlerChangePage = (page) => {
+    setOpen(true)
+    handleChangePage(page)
+  }
+
   const handleSelectOption = (option) => {
     if (option.value === null || option.value === 'default') return
     const _selectedOptions = [...selectedOptions]
@@ -96,48 +115,89 @@ export const MultiSelect = (props) => {
     onChange && onChange(option.value)
   }
 
+  const optionsTextFormatted = (selectedOption, index) => {
+    if (index <= 2) {
+      return `${selectedOption.showOnSelected || selectedOption.content}${index + 1 !== selectedOptions?.length && index <= 2 ? ', ' : ' '}`
+    }
+    if (index + 1 === selectedOptions?.length && selectedOptions?.length >= 4) {
+      return `${andText || 'And'} ${index - 2} +`
+    }
+    return null
+  }
+
+  const filterFunction = (_, index) => {
+    if (!pagination || useLazyPagination) return true
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
+
   return (
-    <SelectInput className={className || 'multi-select'}>
+    <SelectInput useTextStyle={useTextStyle} className={className || 'multi-select'}>
       {selectedOptions.length === 0 ? (
-        <Selected onClick={(e) => handleSelectClick(e)}>
-          {placeholder || ''}
-          <Chevron>
-            <EnChevronDown />
-          </Chevron>
+        <Selected useTextStyle={useTextStyle} onClick={(e) => handleSelectClick(e)}>
+          {useTextStyle ? (
+            <Header>
+              <TextFormatted className={textClassnames}>
+                {placeholder || ''}
+              </TextFormatted>
+            </Header>
+          ) : (
+            <>
+              {placeholder || ''}
+            </>
+          )}
+          {!hideChevronIcon && (
+            <Chevron>
+              <EnChevronDown />
+            </Chevron>
+          )}
         </Selected>
       ) : (
         <Selected onClick={(e) => handleSelectClick(e)}>
-          <Header>
-            {selectedOptions.map((selectedOption) => (
+          <Header useTextStyle={useTextStyle}>
+            {selectedOptions.map((selectedOption, index) => (
               <React.Fragment key={selectedOption.value}>
-                <MultiSelectOption>
-                  {selectedOption.showOnSelected || selectedOption.content}
-                  {selectedOption?.value !== 'default' && (
-                    <Button
-                      circle
-                      outline
-                      color='primary'
-                      type='reset'
-                      className='remove_option'
-                      onClick={() => onChange && onChange(selectedOption.value)}
-                    >
-                      <MdClose />
-                    </Button>
-                  )}
-                </MultiSelectOption>
+                {
+                  useTextStyle ? (
+                    <TextFormatted className={textClassnames} primary>
+                      {optionsTextFormatted(selectedOption, index)}
+                    </TextFormatted>
+                  ) : (
+                    <MultiSelectOption>
+                      {selectedOption.showOnSelected || selectedOption.content}
+                      {selectedOption?.value !== 'default' && (
+                        <Button
+                          circle
+                          outline
+                          color='primary'
+                          type='reset'
+                          className='remove_option'
+                          onClick={() => onChange && onChange(selectedOption.value)}
+                        >
+                          <MdClose />
+                        </Button>
+                      )}
+                    </MultiSelectOption>
+                  )
+                }
               </React.Fragment>
             ))}
           </Header>
-          <Chevron>
-            <EnChevronDown />
-          </Chevron>
+          {!hideChevronIcon && (
+            <Chevron>
+              <EnChevronDown />
+            </Chevron>
+          )}
         </Selected>
       )}
       {open && options && (
         <Options
           isAbsolute
-          position='right'
+          position={optionsPosition ?? 'right'}
           ref={dropdownReference}
+          minWidth='330px'
         >
           {isShowSearchBar && (
             <SearchBarWrapper
@@ -156,7 +216,7 @@ export const MultiSelect = (props) => {
             optionInnerMargin={props.optionInnerMargin}
             optionInnerMaxHeight={props.optionInnerMaxHeight}
           >
-            {options.map((option, i) => (
+            {options.filter(filterFunction).map((option, i) => (
               <MultiOption
                 key={i}
                 color={option.color}
@@ -174,6 +234,17 @@ export const MultiSelect = (props) => {
               </MultiOption>
             ))}
           </OptionsInner>
+          {pagination && handleChangePageSize && handleChangePage && (
+            <PaginationWrapper>
+              <Pagination
+                currentPage={pagination?.currentPage}
+                totalPages={pagination?.totalPages}
+                handleChangePage={handlerChangePage}
+                handleChangePageSize={handleChangePageSize}
+                defaultPageSize={pagination?.pageSize}
+              />
+            </PaginationWrapper>
+          )}
         </Options>
       )}
     </SelectInput>

package/src/styles/MultiSelect/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const CheckBox = styled.div`
   color: ${props => props.theme.colors.primary};
@@ -7,3 +7,18 @@ export const CheckBox = styled.div`
     font-size: 16px;
   }
 `
+
+export const TextFormatted = styled.span`
+  ${({ primary, theme }) => primary && css`
+    color: ${theme?.colors?.primary};
+  `}
+
+  div {
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const PaginationWrapper = styled.div`
+  margin: 20px;
+`

package/src/styles/Selects/index.js

@@ -59,7 +59,7 @@ export const Option = styled.div`
 `
 
 export const Options = styled.div`
-  min-width: 100%;
+  min-width: ${({ minWidth }) => minWidth || '100%'};
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   z-index: 10000;
   border-width: 1px;
@@ -102,8 +102,10 @@ export const OptionsInner = styled.div`
   overscroll-behavior: contain;
 `
 export const Selected = styled.div`
-  padding-left: 15px;
-  padding-right: 15px;
+  ${({ useTextStyle }) => !useTextStyle && css`
+    padding-left: 15px;
+    padding-right: 15px;
+  `}
   cursor: pointer;
   position: relative;
   display: flex;
@@ -136,14 +138,16 @@ export const Selected = styled.div`
 
 export const Select = styled.div`
   display: inline-block;
-  border-radius: 7.6px;
-  line-height: 34px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #DEE2E6;
   color: #344050;
   position: relative;
 
+  ${props => !props.useTextStyle && css`
+    border-radius: 7.6px;
+    line-height: 34px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #DEE2E6;
+  `}
   ${props => props.open && css`
     background-color: ${darken(0.07, '#CCC')};
   `}
@@ -175,7 +179,7 @@ export const Chevron = styled.div`
 export const Header = styled.div`
   flex: 1;
   overflow: auto;
-  white-space: nowrap;
+  white-space: ${({ useTextStyle }) => useTextStyle ? 'pre-wrap' : 'nowrap'};
   display: flex;
   align-items: center;
 `
@@ -262,7 +266,7 @@ export const MultiOption = styled.div`
 
   ${props => props.selected && css`
     background-color: ${darken(0.07, '#fafafa')};
-  
+
     &:hover {
       background-color: ${darken(0.07, '#fafafa')};
     }