@nyris/nyris-webapp 0.3.33 → 0.3.35

package/src/components/input/inputSearch.tsx

@@ -1,9 +1,8 @@
-import { Box, Button, Tooltip, Typography } from '@material-ui/core';
+import { Box, Button, Tooltip } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 import CloseIcon from '@material-ui/icons/Close';
 import IconCamera from 'common/assets/icons/camera.svg';
-import IconSearch from 'common/assets/icons/icon_search.svg';
 import { useQuery } from 'hooks/useQuery';
 import { debounce, isEmpty } from 'lodash';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
@@ -13,6 +12,7 @@ import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
 import { createImage, findByImage, findRegions } from 'services/image';
 import { ReactComponent as IconFilter } from 'common/assets/icons/filter_settings.svg';
+import { ReactComponent as IconSearch } from 'common/assets/icons/icon_search.svg';
 
 import {
   reset,
@@ -20,7 +20,6 @@ import {
   setRequestImage,
   setSearchResults,
   updateStatusLoading,
-  setUpdateKeyFilterDesktop,
   loadingActionResults,
   setRegions,
   setSelectedRegion,
@@ -29,7 +28,6 @@ import { useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
 import PreFilterComponent from 'components/pre-filter';
 import { RectCoords } from '@nyris/nyris-api';
-import { truncateString } from 'helpers/truncateString';
 import { useTranslation } from 'react-i18next';
 
 const SearchBox = (props: any) => {
@@ -153,16 +151,75 @@ const SearchBox = (props: any) => {
   };
 
   return (
-    <Box className="wrap-input-search">
-      <div style={{ padding: 10 }} className="box-input-search d-flex">
+    <div className="wrap-input-search-field">
+      <div className="box-input-search d-flex">
         <form noValidate action="" role="search">
           <Box className="box-inp">
+            <Tooltip
+              title={keyFilter ? keyFilter : 'Add pre-filter'}
+              placement="top"
+              arrow={true}
+              disableHoverListener={!settings.preFilterOption}
+            >
+              <Box
+                className="pre-filter-icon"
+                style={{
+                  cursor: settings.preFilterOption ? 'pointer' : 'default',
+                }}
+                onClick={() =>
+                  settings.preFilterOption
+                    ? setToggleModalFilterDesktop(true)
+                    : false
+                }
+              >
+                {settings.preFilterOption && (
+                  <div
+                    className="icon-hover"
+                    style={{
+                      ...(keyFilter
+                        ? {
+                            backgroundColor: `${settings.theme?.secondaryColor}26`,
+                          }
+                        : {}),
+                    }}
+                  >
+                    <IconFilter color="black" />
+                  </div>
+                )}
+                {!settings.preFilterOption && (
+                  <IconSearch width={16} height={16} />
+                )}
+                {keyFilter && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: '6px',
+                      left: '31px',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      background: 'white',
+                      width: '10px',
+                      height: '10px',
+                      borderRadius: '100%',
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '8px',
+                        height: '8px',
+                        background: settings.theme?.secondaryColor,
+                        borderRadius: '100%',
+                      }}
+                    ></div>
+                  </div>
+                )}
+              </Box>
+            </Tooltip>
             <Box
               style={{
                 height: '75%',
                 order: 1,
-                paddingLeft: imageThumbSearchInput || keyFilter ? 0 : 10,
-                marginLeft: keyFilter ? 0 : 5,
               }}
             >
               {imageThumbSearchInput && (
@@ -208,60 +265,12 @@ const SearchBox = (props: any) => {
               )}
             </Box>
 
-            {!valueInput && (
-              <Box
-                className="icon-search"
-                style={
-                  imageThumbSearchInput
-                    ? { order: 2, marginLeft: 5 }
-                    : { order: 2 }
-                }
-              >
-                <img src={IconSearch} alt="" width={24} height={24} />
-              </Box>
-            )}
-
-            {keyFilter && !isMobile && (
-              <Box
-                className="box-key-filter"
-                style={{
-                  order: 0,
-                  marginRight: 5,
-                  border: `2px solid ${settings.theme?.secondaryColor}c7`,
-                }}
-              >
-                <Tooltip
-                  title={keyFilter}
-                  placement="top"
-                  arrow={true}
-                  disableHoverListener={keyFilter.length < 16}
-                >
-                  <Typography>{truncateString(keyFilter, 15)}</Typography>
-                </Tooltip>
-
-                <Tooltip title="Remove pre-filter" placement="top" arrow={true}>
-                  <Button
-                    onClick={() => dispatch(setUpdateKeyFilterDesktop(''))}
-                    style={{ padding: '6px 2px' }}
-                  >
-                    <CloseIcon
-                      style={{
-                        fontSize: 20,
-                        color: settings.theme?.secondaryColor,
-                      }}
-                    />
-                  </Button>
-                </Tooltip>
-              </Box>
-            )}
-
             <input
               style={{
                 border: '0px',
                 width: '100%',
                 fontSize: 14,
                 color: '#2B2C46',
-                fontStyle: 'italic',
               }}
               className="input-search"
               placeholder={t('Search')}
@@ -297,26 +306,6 @@ const SearchBox = (props: any) => {
           )}
           {!isMobile ? (
             <div className="wrap-box-input-mobile d-flex">
-              {settings.preFilterOption && (
-                <Tooltip
-                  title="Add or change pre-filter"
-                  placement="top"
-                  arrow={true}
-                  style={{ backgroundColor: '#000000' }}
-                >
-                  <Button
-                    onClick={() => setToggleModalFilterDesktop(true)}
-                    style={{
-                      width: 32,
-                      height: 32,
-                      borderRadius: '100%',
-                      marginRight: 10,
-                    }}
-                  >
-                    <IconFilter />
-                  </Button>
-                </Tooltip>
-              )}
               <input
                 accept="image/*"
                 id="icon-button-file"
@@ -362,20 +351,19 @@ const SearchBox = (props: any) => {
           )}
         </form>
       </div>
-
       {settings.preFilterOption && (
         <DefaultModal
           openModal={isOpenModalFilterDesktop}
           handleClose={() => setToggleModalFilterDesktop(false)}
-          classNameModal="wrap-filter-destop"
-          classNameComponentChild="bg-white box-filter-destop"
+          classNameModal="wrap-filter-desktop"
+          classNameComponentChild="bg-white box-filter-desktop"
         >
           <PreFilterComponent
             handleClose={() => setToggleModalFilterDesktop(false)}
           />
         </DefaultModal>
       )}
-    </Box>
+    </div>
   );
 };
 

package/src/components/pre-filter/index.tsx

@@ -5,7 +5,6 @@ import IconSearch from 'common/assets/icons/icon_search.svg';
 import { getFilters, searchFilters } from 'services/filter';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { setUpdateKeyFilterDesktop } from 'Store/search/Search';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import { useMediaQuery } from 'react-responsive';
 import { isEmpty } from 'lodash';
 import { Skeleton } from '@material-ui/lab';
@@ -37,8 +36,10 @@ function PreFilterComponent(props: Props) {
         const arrResult =
           res.find(value => value.key === settings.visualSearchFilterKey)
             ?.values || [];
+
         const newResult = arrResult.sort().reduce((a: any, c: any) => {
-          let k = c[0].toLocaleUpperCase();
+          if (!c[0]) return a;
+          let k = c[0]?.toLocaleUpperCase();
           if (a[k]) a[k].push(c);
           else a[k] = [c];
           return a;
@@ -61,13 +62,6 @@ function PreFilterComponent(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    value: any,
-  ) => {
-    setKeyFilter(value);
-  };
-
   const filterSearchHandler = async (value: any) => {
     if (!value) {
       getDataFilterDesktop();
@@ -109,22 +103,37 @@ function PreFilterComponent(props: Props) {
       flexDirection={'column'}
       style={{ position: 'relative' }}
     >
-      <Typography
+      <div
         style={{
-          color: '#000',
-          fontSize: '24px',
-          fontWeight: 700,
-          paddingLeft: isMobile ? '0px' : '14px',
-          marginBottom: isMobile ? '0px' : '-8px',
-          marginTop: isMobile ? '0px' : '24px',
+          background: 'white',
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
         }}
       >
-        {settings.preFilterTitle}
-      </Typography>
+        <Typography
+          style={{
+            color: '#000',
+            fontSize: '24px',
+            fontWeight: 700,
+            paddingLeft: isMobile ? '0px' : '14px',
+            marginBottom: isMobile ? '0px' : '-8px',
+            marginTop: isMobile ? '0px' : '24px',
+          }}
+        >
+          {settings.preFilterTitle}
+        </Typography>
 
+        <Button onClick={handleClose}>
+          <CloseIcon />
+        </Button>
+      </div>
       <Box
         className="box-top"
-        style={isMobile ? { padding: 0 } : undefined}
+        style={isMobile ? { padding: 0, marginTop: '16px' } : undefined}
         display={'flex'}
         justifyContent={'space-between'}
         alignItems={'center'}
@@ -172,28 +181,24 @@ function PreFilterComponent(props: Props) {
             }}
           />
         </Box>
-
-        {!isMobile && (
-          <Button onClick={handleClose}>
-            <CloseIcon />
-          </Button>
-        )}
       </Box>
 
-      <Box style={{ margin: '10px 16px' }}>
-        {keyFilter && isMobile && (
+      {keyFilter && isMobile && (
+        <Box style={{ margin: '10px 16px' }}>
           <Box
             display={'flex'}
             className="box-keyFilter"
             style={{ display: 'inline-flex' }}
           >
-            <Typography className="keyFilter">{keyFilter}</Typography>
+            <Typography className="keyFilter max-line-1">
+              {keyFilter}
+            </Typography>
             <Button style={{ padding: 0 }} onClick={() => setKeyFilter('')}>
               <CloseIcon style={{ fontSize: 12, color: '#2B2C46' }} />
             </Button>
           </Box>
-        )}
-      </Box>
+        </Box>
+      )}
       <Box
         className="box-bottom"
         height={'100%'}
@@ -207,25 +212,25 @@ function PreFilterComponent(props: Props) {
       >
         {Object.entries(resultFilter).map(([key, value]: any, i: any) => {
           return (
-            <Box
-              className="box-group-items"
-              style={
-                columns <= 4 ? { width: 'fit-content' } : { width: '100%' }
-              }
-            >
-              <Typography
-                style={{ fontWeight: 'bold', color: '#000', paddingLeft: 11 }}
+            <Box className="box-group-items" key={key}>
+              <Box
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  rowGap: '12px',
+                  width: '100%',
+                }}
               >
-                {key}
-              </Typography>
+                <Typography
+                  style={{
+                    fontWeight: 'bold',
+                    color: '#000',
+                    fontSize: '12px',
+                  }}
+                >
+                  {key}
+                </Typography>
 
-              <ToggleButtonGroup
-                value={keyFilter}
-                exclusive
-                onChange={handleAlignment}
-                aria-label=""
-                className="box-btn-group"
-              >
                 {value.map((item: any, index: any) => {
                   return (
                     <Tooltip
@@ -233,22 +238,30 @@ function PreFilterComponent(props: Props) {
                       title={item}
                       placement="top"
                       arrow={true}
-                      disableHoverListener={item.length < 20}
+                      disableHoverListener={item.length < 35}
                     >
-                      <ToggleButton
-                        value={item}
+                      <Box
                         aria-label={item}
-                        className="item-btn"
-                        onChange={() => {
+                        style={{
+                          cursor: 'pointer',
+                          fontSize: '12px',
+                          minHeight: '20px',
+                          color: '#2B2C46',
+                          width: '100%',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                        onClick={() => {
                           setKeyFilter(item);
                         }}
                       >
-                        {truncateString(item, !isMobile ? 20 : 35)}
-                      </ToggleButton>
+                        {truncateString(item, !isMobile ? 35 : 35)}
+                      </Box>
                     </Tooltip>
                   );
                 })}
-              </ToggleButtonGroup>
+              </Box>
             </Box>
           );
         })}
@@ -274,7 +287,7 @@ function PreFilterComponent(props: Props) {
           <Typography>No result found</Typography>
         )}
       </Box>
-      {keyFilter && !isMobile && (
+      {!isMobile && (
         <Box
           className="footer"
           style={{ height: 64, marginTop: 'auto' }}
@@ -308,7 +321,7 @@ function PreFilterComponent(props: Props) {
           </Button>
         </Box>
       )}
-      {keyFilter && isMobile && (
+      {isMobile && (
         <Box
           className="footer"
           style={{