Merge pull request #136 from Azure/users/v-pnizetic/p2-fixes

Users/v pnizetic/p2 fixes
Azure · Jun 4, 2024 · c00708a · c00708a
2 parents 1b7d4f5 + 8f202bb
commit c00708a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 36 deletions.
diff --git a/src/common/store/response.store.js b/src/common/store/response.store.js
@@ -215,6 +215,7 @@ export const useResponseStore = createWithEqualityFn(
             } else if (jsonData === null) {
               useProgressBarStore.getState().showInvalidManifestError();
             } else {
+              useReviewManifestStore.getState().setManifestImported(true);
               useLevelsStore.getState().updateLevels(jsonData.levels);
               useLevelsStore.getState().setFacilityName(jsonData.facilityName);
               useLevelsStore.getState().setLanguage(jsonData.language);

diff --git a/src/common/store/review-manifest.store.js b/src/common/store/review-manifest.store.js
@@ -10,6 +10,7 @@ import { useLevelsStore } from './levels.store';
 const getDefaultState = () => ({
   manifestReviewed: false,
   originalPackage: null,
+  manifestImported: false,
 });
 
 export const useReviewManifestStore = createWithEqualityFn(
@@ -63,6 +64,10 @@ export const useReviewManifestStore = createWithEqualityFn(
       set(() => ({
         manifestReviewed,
       })),
+    setManifestImported: manifestImported =>
+      set(() => ({
+        manifestImported,
+      })),
   }),
   shallow
 );

diff --git a/src/common/translations/en.js b/src/common/translations/en.js
@@ -91,6 +91,8 @@ const en = {
     'error.upload.file.processing': 'Processing your package has failed. Please try again.',
     'error.validation.failed.missing.info': 'Validation failed. Required information is missing or not valid.',
     'error.vertical.extent.not.valid': 'Vertical extent must be a valid number greater than 0 and less than 100.',
+    'success.manifest.uploaded':
+      'Successfully imported the manifest file found in the uploaded drawing package. Please review the information.',
     'exterior.layer.not.selected.error': "Please select 'Exterior' layer(s) to georeference your Facility",
     'footprint.layer.not.selected.error': "Please select 'Footprint' layer to georeference your Building",
     exterior: 'Exterior',

diff --git a/src/components/progress-bar/progress-bar.js b/src/components/progress-bar/progress-bar.js
@@ -1,21 +1,12 @@
 import { MessageBar, MessageBarType } from '@fluentui/react';
-import { useCompletedSteps, useProgressBarSteps, useProgressBarStore } from 'common/store';
+import { useCompletedSteps, useProgressBarSteps, useProgressBarStore, useReviewManifestStore } from 'common/store';
 import { useEffect, useMemo } from 'react';
-import { getFeatureFlags } from 'utils';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import { getFeatureFlags } from 'utils';
 import ProgressBarButton from './progress-bar-button';
 import { errorContainer, progressBarContainer } from './progress-bar.style';
 
-const progressBarStoreSelector = s => [
-  s.isIncorrectManifestVersionErrorShown,
-  s.hideIncorrectManifestVersionError,
-  s.isInvalidManifestErrorShown,
-  s.hideInvalidManifestError,
-  s.isMissingDataErrorShown,
-  s.hideMissingDataError,
-];
-
 export const ProgressBar = () => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
@@ -28,7 +19,16 @@ export const ProgressBar = () => {
     hideInvalidManifestError,
     isMissingDataErrorShown,
     hideMissingDataError,
-  ] = useProgressBarStore(progressBarStoreSelector);
+  ] = useProgressBarStore(s => [
+    s.isIncorrectManifestVersionErrorShown,
+    s.hideIncorrectManifestVersionError,
+    s.isInvalidManifestErrorShown,
+    s.hideInvalidManifestError,
+    s.isMissingDataErrorShown,
+    s.hideMissingDataError,
+  ]);
+
+  const [manifestImported] = useReviewManifestStore(s => [s.manifestImported]);
 
   const progressBarSteps = useProgressBarSteps();
 
@@ -50,12 +50,17 @@ export const ProgressBar = () => {
   return (
     <>
       <div className={errorContainer}>
-        {isIncorrectManifestVersionErrorShown && !isPlacesPreview &&(
+        {manifestImported && (
+          <MessageBar messageBarType={MessageBarType.success} isMultiline onDismiss={hideIncorrectManifestVersionError}>
+            {t('success.manifest.uploaded')}
+          </MessageBar>
+        )}
+        {isIncorrectManifestVersionErrorShown && !isPlacesPreview && (
           <MessageBar messageBarType={MessageBarType.warning} isMultiline onDismiss={hideIncorrectManifestVersionError}>
             {t('error.manifest.incorrect.version')}
           </MessageBar>
         )}
-        {isIncorrectManifestVersionErrorShown && isPlacesPreview &&(
+        {isIncorrectManifestVersionErrorShown && isPlacesPreview && (
           <MessageBar messageBarType={MessageBarType.warning} isMultiline onDismiss={hideIncorrectManifestVersionError}>
             {t('error.manifest.places.incorrect.version')}
           </MessageBar>

diff --git a/src/pages/layers/preview-map/index.js b/src/pages/layers/preview-map/index.js
@@ -152,16 +152,16 @@ const PreviewMap = props => {
         return;
       }
       if (layer.geometry.type !== GeometryTypes.GEOMETRY_COLLECTION) {
-        geometries.push(layer.geometry);
+        geometries.push({ geometry: layer.geometry, name: layer.name });
       } else {
         layer.geometry.geometries.forEach(geometry => {
-          geometries.push(geometry);
+          geometries.push({ geometry, name: layer.name });
         });
       }
     });
 
     const coordinatesFromLinesAndPolygons = geometries
-      .filter(geometry => {
+      .filter(({ geometry }) => {
         if (geometry.type === GeometryTypes.POINT) {
           pointsAndMultiPoints.push(geometry.coordinates);
           return false;
@@ -172,14 +172,15 @@ const PreviewMap = props => {
         }
         return true;
       })
-      .map(geometry => ({
+      .map(({ geometry, name }) => ({
         type:
           geometry.type === GeometryTypes.MULTI_LINE_STRING ? CustomGeometryTypes.LINE : CustomGeometryTypes.POLYGON,
         geometry: getPointsRecursively(geometry.coordinates),
+        isExterior: exteriorLayers.includes(name),
       }));
 
     return [pointsAndMultiPoints, coordinatesFromLinesAndPolygons];
-  }, [layers]);
+  }, [layers, exteriorLayers]);
 
   const hasData =
     coordinatesFromLinesAndPolygons.length > 0 || pointsAndMultiPoints.length > 0 || mergedTextLayer.length > 0;
@@ -200,10 +201,13 @@ const PreviewMap = props => {
     ctx.translate(transformations.x, transformations.y);
     ctx.scale(transformations.zoom, transformations.zoom);
 
-    coordinatesFromLinesAndPolygons.forEach(({ type, geometry }) => {
+    coordinatesFromLinesAndPolygons.forEach(({ type, geometry, isExterior }) => {
       geometry.forEach(points => {
         if (points.length === 0) return;
 
+        if (isExterior) ctx.strokeStyle = '#0068b7';
+        else ctx.strokeStyle = '#333';
+
         const newPoints = points.map(point => toRelativePoint(point));
 
         ctx.beginPath();

diff --git a/src/pages/layers/units/mapping-table/category-selector.js b/src/pages/layers/units/mapping-table/category-selector.js
@@ -3,36 +3,52 @@ import { imdfCategories } from 'common/imdf-categories';
 import { useOutsideClick } from 'hooks';
 import React, { useEffect, useRef } from 'react';
 
+const unspecifiedCategory = 'unspecified';
+const definedImdfCategories = imdfCategories.filter(category => category !== unspecifiedCategory);
+
 const ImdfCategorySelector = props => {
   const { onOptionSelect, onBlur, ...rest } = props;
 
-  const comboboxRef = useRef();
   const listRef = useRef();
+  const inputRef = useRef();
 
   useEffect(() => {
-    if (comboboxRef.current) {
-      comboboxRef.current.focus();
-    }
-  }, []);
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }, 0); // Delay of 0 ms to push to the end of the event queue
+  }, [inputRef]);
 
   useOutsideClick(() => {
     onBlur();
-  }, [comboboxRef, listRef]);
+  }, [inputRef, listRef]);
+
+  const handleOptionSelect = (event, item) => {
+    // Case when user clears the input field
+    if (!item.optionValue) return;
 
-  const handleOptionSelect = (...args) => {
-    onOptionSelect(...args);
+    onOptionSelect(event, item);
     onBlur();
   };
 
   return (
-    <Combobox ref={comboboxRef} onOptionSelect={handleOptionSelect} open {...rest}>
-      <div ref={listRef} style={{ maxHeight: 400 }}>
-        {imdfCategories.map(option => (
-          <Option key={option} value={option}>
-            {option}
-          </Option>
-        ))}
-      </div>
+    <Combobox
+      onOptionSelect={handleOptionSelect}
+      input={{ ref: inputRef }}
+      listbox={{ ref: listRef, style: { maxHeight: 400 } }}
+      open
+      {...rest}
+    >
+      <Option key={unspecifiedCategory} value={unspecifiedCategory} text={unspecifiedCategory}>
+        <span style={{ fontStyle: 'italic', fontWeight: 300 }}>{unspecifiedCategory}</span>
+      </Option>
+      {definedImdfCategories.map(option => (
+        <Option key={option} value={option}>
+          {option}
+        </Option>
+      ))}
     </Combobox>
   );
 };