@nyris/nyris-webapp 0.3.22 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -12,8 +12,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "0.3.19",
-    "@nyris/nyris-react-components": "^0.3.22",
+    "@nyris/nyris-api": "^0.3.23",
+    "@nyris/nyris-react-components": "^0.3.23",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/src/components/DetailItem.tsx

@@ -13,6 +13,7 @@ import { AppState } from 'types';
 import { useAppSelector } from 'Store/Store';
 import { prepareImageList } from '../helpers/CommonHelper';
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import NoImage from '../common/assets/images/unnamed.png';
 
 interface Props {
   numberResult?: number;
@@ -87,13 +88,29 @@ function DetailItem(props: Props) {
         </Button>
       </Box>
       <Box style={{ overflowY: 'auto', maxHeight: '90svh' }}>
-        <Box className="box-carosel">
-          <ImagePreviewCarousel
-            imgItem={dataImageCarousel}
-            onSearchImage={onSearchImage}
-            handlerCloseModal={() => handlerCloseModal?.()}
-          />
-          {!isMobile && (
+        <Box
+          className="box-carosel"
+          style={
+            dataImageCarousel.length === 0
+              ? { display: 'flex', justifyContent: 'center' }
+              : {}
+          }
+        >
+          {dataImageCarousel.length > 0 ? (
+            <ImagePreviewCarousel
+              imgItem={dataImageCarousel}
+              onSearchImage={onSearchImage}
+              handlerCloseModal={() => handlerCloseModal?.()}
+            />
+          ) : (
+            <img
+              src={NoImage}
+              alt="image_item"
+              className="img-style"
+              style={{ width: '300px', height: '300px', padding: '8px' }}
+            />
+          )}
+          {!isMobile && dataImageCarousel.length > 0 && (
             <Button
               className="icon-style"
               onClick={() => {

package/src/components/results/ItemResult.tsx

@@ -145,7 +145,7 @@ function ItemResult(props: Props) {
             </Button>
           </Box>
         )}
-        {!isHover && urlImage?.length > 1 && (
+        {!isHover && (
           <Box className="box-icon-modal">
             <Button
               style={{ width: '100%', height: '100%', padding: 0, zIndex: 9 }}
@@ -178,7 +178,7 @@ function ItemResult(props: Props) {
                 src={NoImage}
                 alt="image_item"
                 className="img-style"
-                style={{ width: '100%', height: '100%' }}
+                style={{ width: '100%', height: '100%', objectFit: "cover" }}
               />
             )}
           </Button>

package/src/helpers/CommonHelper.ts

@@ -14,15 +14,19 @@ export const prepareImageList = (dataItem: any) => {
       key?.includes('additional_image_link')
     ) {
       if (!isEmpty(newObject[key])) {
-        valueKey.push({
-          url: newObject[key],
-        });
+        if (newObject[key]) {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
       }
     } else {
       if (key === 'image(main_similarity)' || key === 'main_image_link') {
-        valueKey.push({
-          url: newObject[key],
-        });
+        if (newObject[key]) {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
       }
     }
   }

package/src/hooks/useVisualSearch.tsx

@@ -54,7 +54,7 @@ export const useVisualSearch = () => {
       }
       const preFilter = [
         {
-          key: settings.filterType,
+          key: settings.visualSearchFilterKey,
           values: [`${keyFilter}`],
         },
       ];

package/src/page/result/index.tsx

@@ -74,7 +74,7 @@ function ResultComponent(props: Props) {
     async (canvas: any, r?: RectCoords) => {
       const preFilter = [
         {
-          key: settings.filterType,
+          key: settings.visualSearchFilterKey,
           values: [`${keyFilter}`],
         },
       ];
@@ -148,7 +148,7 @@ function ResultComponent(props: Props) {
     }
     const preFilter = [
       {
-        key: settings.filterType,
+        key: settings.visualSearchFilterKey,
         values: [`${keyFilter}`],
       },
     ];