Merge branch 'dev'

bcgov · Aug 29, 2022 · c67ba44 · c67ba44
2 parents c2b1bbb + 8730dab
commit c67ba44
Show file tree

Hide file tree

Showing 19 changed files with 246 additions and 42 deletions.
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
@@ -8,3 +8,4 @@ dist/
 build/
 node_modules/
 .vscode/
+public/videos
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -11,6 +11,7 @@ test-report.xml
 
 # production
 build/
+public/videos
 
 # misc
 .DS_Store

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -21,5 +21,10 @@
   "jest.autoRun": {
     "onStartup": ["all-tests"]
   },
-  "cSpell.words": ["Formik", "PIMS", "siteminder"]
+  "cSpell.words": [
+    "bbox",
+    "Formik",
+    "PIMS",
+    "siteminder"
+  ]
 }
diff --git a/frontend/src/components/maps/leaflet/InfoSlideOut/InfoSlideOut.tsx b/frontend/src/components/maps/leaflet/InfoSlideOut/InfoSlideOut.tsx
@@ -192,8 +192,12 @@ const InfoControl: React.FC<InfoControlProps> = ({ open, setOpen, onHeaderAction
 
   const keycloak = useKeycloakWrapper();
   const dispatch = useAppDispatch();
-  const canViewProperty = keycloak.canUserViewProperty(propertyInfo);
-  const canEditProperty = keycloak.canUserEditProperty(propertyInfo);
+  const canViewProperty =
+    keycloak.canUserViewProperty(propertyInfo) &&
+    popUpContext.propertyTypeID !== PropertyTypes.GEOCODER;
+  const canEditProperty =
+    keycloak.canUserEditProperty(propertyInfo) &&
+    popUpContext.propertyTypeID !== PropertyTypes.GEOCODER;
 
   const renderContent = () => {
     if (popUpContext.propertyInfo) {
@@ -218,6 +222,7 @@ const InfoControl: React.FC<InfoControlProps> = ({ open, setOpen, onHeaderAction
           </>
         );
       } else if (canViewProperty) {
+        if (popUpContext.propertyTypeID === PropertyTypes.GEOCODER) return null;
         if (isBuilding) {
           return (
             <AssociatedParcelsList parcels={(popUpContext.propertyInfo as IBuilding).parcels} />
@@ -304,23 +309,26 @@ const InfoControl: React.FC<InfoControlProps> = ({ open, setOpen, onHeaderAction
             <InfoIcon />
           </InfoButton>
         </TooltipWrapper>
-        {open && popUpContext.propertyInfo && canViewProperty && (
-          <TooltipWrapper
-            toolTipId="associated-items-id"
-            toolTip={isBuilding ? 'Associated Land' : 'Associated Buildings'}
-          >
-            <TabButton
-              id="slideOutTab"
-              variant="outline-secondary"
-              className={clsx({ open })}
-              onClick={() => {
-                setGeneralInfoOpen(false);
-              }}
+        {open &&
+          popUpContext.propertyInfo &&
+          canViewProperty &&
+          popUpContext.propertyTypeID !== PropertyTypes.GEOCODER && (
+            <TooltipWrapper
+              toolTipId="associated-items-id"
+              toolTip={isBuilding ? 'Associated Land' : 'Associated Buildings'}
             >
-              {isBuilding ? <LandSvg className="svg" /> : <BuildingSvg className="svg" />}
-            </TabButton>
-          </TooltipWrapper>
-        )}
+              <TabButton
+                id="slideOutTab"
+                variant="outline-secondary"
+                className={clsx({ open })}
+                onClick={() => {
+                  setGeneralInfoOpen(false);
+                }}
+              >
+                {isBuilding ? <LandSvg className="svg" /> : <BuildingSvg className="svg" />}
+              </TabButton>
+            </TooltipWrapper>
+          )}
         {open && <InfoMain className={clsx({ open })}>{renderContent()}</InfoMain>}
       </InfoContainer>
     </Control>

diff --git a/frontend/src/components/maps/leaflet/InventoryLayer.tsx b/frontend/src/components/maps/leaflet/InventoryLayer.tsx
@@ -1,7 +1,8 @@
 import { IBuilding, IParcel, IPropertyDetail } from 'actions/parcelsActions';
 import { IGeoSearchParams } from 'constants/API';
 import { PropertyTypes } from 'constants/propertyTypes';
-import { BBox } from 'geojson';
+import { BBox, Point } from 'geojson';
+import { useApiGeocoder } from 'hooks/api';
 import { useApi } from 'hooks/useApi';
 import useDeepCompareEffect from 'hooks/useDeepCompareEffect';
 import useKeycloakWrapper from 'hooks/useKeycloakWrapper';
@@ -127,6 +128,8 @@ export const defaultBounds = new LatLngBounds(
   [48.78370426, -139.35937554],
 );
 
+var counter = 1000000;
+
 /**
  * Displays the search results onto a layer with clustering.
  * This component makes a request to the PIMS API properties search WFS endpoint.
@@ -148,6 +151,7 @@ export const InventoryLayer: React.FC<InventoryLayerProps> = ({
   const { loadProperties } = useApi();
   const { changed: filterChanged } = useFilterContext();
   const municipalitiesService = useLayerQuery(MUNICIPALITY_LAYER_URL);
+  const geocoder = useApiGeocoder();
 
   const draftProperties: PointFeature[] = useAppSelector(store => store.parcel.draftProperties);
 
@@ -195,7 +199,33 @@ export const InventoryLayer: React.FC<InventoryLayerProps> = ({
   }, [filter]);
 
   const loadTile = async (filter: IGeoSearchParams) => {
-    return loadProperties(filter);
+    const inventory = await loadProperties(filter);
+
+    // Make a request to geocoder for properties with the specified address.
+    if (!!filter.address) {
+      var geo = await geocoder.addresses(filter.address, filter.bbox, filter.administrativeArea);
+      var features = geo.data.features
+        .filter(f => f?.properties?.locationDescriptor !== 'provincePoint')
+        .map(f => ({
+          ...f,
+          properties: {
+            id: !!f.properties?.blockID ? f.properties?.blockID : counter++,
+            propertyTypeId: PropertyTypes.GEOCODER,
+            isSensitive: false,
+            statusId: 0,
+            name: f.properties?.siteName,
+            address: f.properties?.fullAddress,
+            administrativeArea: f.properties?.localityName,
+            province: 'British Columbia',
+            geocoder: f.properties,
+            longitude: (f.geometry as Point).coordinates[0],
+            latitude: (f.geometry as Point).coordinates[1],
+          },
+        }));
+      return inventory.concat(features);
+    }
+
+    return inventory;
   };
 
   const search = async (filters: IGeoSearchParams[]) => {

diff --git a/frontend/src/components/maps/leaflet/Map.tsx b/frontend/src/components/maps/leaflet/Map.tsx
@@ -157,7 +157,7 @@ const getQueryParams = (filter: IPropertyFilter): IGeoSearchParams => {
 const defaultBounds = new LatLngBounds([60.09114547, -119.49609429], [48.78370426, -139.35937554]);
 
 /**
- * Creates a Leaflet map and by default includes a number of preconfigured layers.
+ * Creates a Leaflet map and by default includes a number of pre-configured layers.
  * @param param0
  */
 const Map: React.FC<MapProps> = ({

diff --git a/frontend/src/components/maps/leaflet/PointClusterer.tsx b/frontend/src/components/maps/leaflet/PointClusterer.tsx
@@ -85,6 +85,20 @@ export const convertToProperty = (
     [PropertyTypes.DRAFT_BUILDING, PropertyTypes.DRAFT_PARCEL].includes(property.propertyTypeId)
   ) {
     return property;
+  } else if (property.propertyTypeId === PropertyTypes.GEOCODER) {
+    return {
+      ...property,
+      evaluations: [],
+      fiscals: [],
+      latitude: latitude,
+      longitude: longitude,
+      address: {
+        line1: property.address,
+        administrativeArea: property.administrativeArea,
+        province: property.province,
+        postal: property.postal,
+      } as IAddress,
+    } as IParcel;
   }
   return null;
 };
@@ -262,8 +276,8 @@ export const PointClusterer: React.FC<PointClustererProps> = ({
   const { getParcel, getBuilding } = useApi();
   const fetchProperty = React.useCallback(
     (propertyTypeId: number, id: number) => {
-      popUpContext.setLoading(true);
       if ([PropertyTypes.PARCEL, PropertyTypes.SUBDIVISION].includes(propertyTypeId)) {
+        popUpContext.setLoading(true);
         getParcel(id as number)
           .then(parcel => {
             popUpContext.setPropertyInfo(parcel);
@@ -275,13 +289,14 @@ export const PointClusterer: React.FC<PointClustererProps> = ({
             popUpContext.setLoading(false);
           });
       } else if (propertyTypeId === PropertyTypes.BUILDING) {
+        popUpContext.setLoading(true);
         getBuilding(id as number)
           .then(building => {
             popUpContext.setPropertyInfo(building);
             if (!!building.parcels.length) {
               dispatch(
                 storePropertyDetail({
-                  propertyTypeId: 1,
+                  propertyTypeId: PropertyTypes.BUILDING,
                   parcelDetail: building,
                 }),
               );
@@ -293,6 +308,9 @@ export const PointClusterer: React.FC<PointClustererProps> = ({
           .finally(() => {
             popUpContext.setLoading(false);
           });
+      } else {
+        toast.warn('This property does not exist in inventory.');
+        Promise.resolve();
       }
     },
     [getParcel, popUpContext, getBuilding, dispatch],
@@ -336,7 +354,7 @@ export const PointClusterer: React.FC<PointClustererProps> = ({
           }
 
           return (
-            // render single marker, not in a cluster
+            //render single marker, not in a cluster
             <Marker
               {...(cluster.properties as any)}
               key={index}
@@ -349,27 +367,26 @@ export const PointClusterer: React.FC<PointClustererProps> = ({
                   longitude,
                 );
                 //sets this pin as currently selected
-                if (
-                  cluster.properties.propertyTypeId === PropertyTypes.PARCEL ||
-                  cluster.properties.propertyTypeId === PropertyTypes.SUBDIVISION
-                ) {
+                if (cluster.properties.propertyTypeId === PropertyTypes.BUILDING) {
                   dispatch(
                     storePropertyDetail({
-                      propertyTypeId: (convertedProperty as IParcel)
-                        ?.propertyTypeId as PropertyTypes,
-                      parcelDetail: convertedProperty as IParcel,
+                      propertyTypeId: cluster.properties.propertyTypeId,
+                      parcelDetail: convertedProperty as IBuilding,
                     }),
                   );
                 } else {
                   dispatch(
                     storePropertyDetail({
-                      propertyTypeId: 1,
-                      parcelDetail: convertedProperty as IBuilding,
+                      propertyTypeId: cluster.properties.propertyTypeId,
+                      parcelDetail: convertedProperty as IParcel,
                     }),
                   );
                 }
                 onMarkerClick(); //open information slideout
-                if (keycloak.canUserViewProperty(cluster.properties as IProperty)) {
+                if (
+                  keycloak.canUserViewProperty(cluster.properties as IProperty) &&
+                  cluster.properties.propertyTypeId !== PropertyTypes.GEOCODER
+                ) {
                   fetchProperty(cluster.properties.propertyTypeId, cluster.properties.id);
                 } else {
                   popUpContext.setPropertyInfo(convertedProperty);
@@ -418,7 +435,10 @@ export const PointClusterer: React.FC<PointClustererProps> = ({
                 );
               }
               onMarkerClick(); //open information slideout
-              if (keycloak.canUserViewProperty(m.properties as IProperty)) {
+              if (
+                keycloak.canUserViewProperty(m.properties as IProperty) &&
+                m.properties.propertyTypeId !== PropertyTypes.GEOCODER
+              ) {
                 fetchProperty(m.properties.propertyTypeId, m.properties.id);
               } else {
                 popUpContext.setPropertyInfo(

diff --git a/frontend/src/components/maps/leaflet/mapUtils.tsx b/frontend/src/components/maps/leaflet/mapUtils.tsx
@@ -73,6 +73,16 @@ export const subdivisionIconSelect = L.icon({
   shadowSize: [41, 41],
 });
 
+export const geocoderIcon = L.icon({
+  iconUrl:
+    require('assets/images/pins/marker-green.png').default ?? 'assets/images/pins/marker-green.png',
+  shadowUrl: require('assets/images/pins/marker-shadow.png').default ?? 'marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
 // draft parcel icon (green)
 export const draftParcelIcon = L.icon({
   iconUrl:
@@ -305,6 +315,8 @@ export const getMarkerIcon = (feature: ICluster, selected?: boolean) => {
       return parcelIconSelect;
     } else if (propertyTypeId === PropertyTypes.SUBDIVISION) {
       return subdivisionIconSelect;
+    } else if (propertyTypeId === PropertyTypes.GEOCODER) {
+      return geocoderIcon;
     } else {
       return buildingIconSelect;
     }
@@ -336,6 +348,8 @@ export const getMarkerIcon = (feature: ICluster, selected?: boolean) => {
       return parcelIcon;
     } else if (propertyTypeId === PropertyTypes.SUBDIVISION) {
       return subdivisionIcon;
+    } else if (propertyTypeId === PropertyTypes.GEOCODER) {
+      return geocoderIcon;
     } else {
       return buildingIcon;
     }

diff --git a/frontend/src/constants/propertyTypes.ts b/frontend/src/constants/propertyTypes.ts
@@ -4,4 +4,5 @@ export enum PropertyTypes {
   SUBDIVISION = 2,
   DRAFT_PARCEL = 3,
   DRAFT_BUILDING = 4,
+  GEOCODER = 5,
 }
diff --git a/frontend/src/features/help/components/text/TutorialHelpText.tsx b/frontend/src/features/help/components/text/TutorialHelpText.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+/**
+ * Help Text for the tutorial videos.
+ */
+export const TutorialHelpText = () => {
+  return (
+    <p>
+      The following videos have been created to assist in the most common tasks.
+      <ul>
+        <li>
+          <a href="/videos/tutorial-01.mp4" target="blank">
+            How to request access and how to approve a user's access
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-02.mp4" target="blank">
+            How to search for properties
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-03.mp4" target="blank">
+            How to add a building
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-04.mp4" target="blank">
+            How to create a Disposal Project
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-05.mp4" target="blank">
+            How to add assessment values to your properties
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-06.mp4" target="blank">
+            SRES Disposal Project - Approve a project for ERP and then transfer the property within
+            the GRE
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-07.mp4" target="blank">
+            SRES Disposal Project - Approve a project for ERP plus approving for addition to the SPL
+          </a>
+        </li>
+        <li>
+          <a href="/videos/tutorial-08.mp4" target="blank">
+            Administration - How to add agencies
+          </a>
+        </li>
+      </ul>
+    </p>
+  );
+};
diff --git a/frontend/src/features/help/constants/HelpText.tsx b/frontend/src/features/help/constants/HelpText.tsx
@@ -12,6 +12,7 @@ import InventoryNavigationHelpText from '../components/text/InventoryNavigationH
 import LandingFilterHelpText from '../components/text/LandingFilterHelpText';
 import LandingMapHelpText from '../components/text/LandingMapHelpText';
 import LandingNavigationHelpText from '../components/text/LandingNavigationHelpText';
+import { TutorialHelpText } from '../components/text/TutorialHelpText';
 import BugForm from '../forms/BugForm';
 import FeatureRequestForm from '../forms/FeatureRequestForm';
 import QuestionForm from '../forms/QuestionForm';
@@ -24,6 +25,7 @@ export const landingPageTopics = new Map<Topics, ReactNode>([
   [Topics.LANDING_MAP, <LandingMapHelpText />],
   [Topics.LANDING_FILTER, <LandingFilterHelpText />],
   [Topics.LANDING_NAVIGATION, <LandingNavigationHelpText />],
+  [Topics.TUTORIALS, <TutorialHelpText />],
 ]);
 
 /**

diff --git a/frontend/src/features/help/interfaces.tsx b/frontend/src/features/help/interfaces.tsx
@@ -31,4 +31,5 @@ export enum Topics {
   CREATE_PROJECT_NAVIGATION = 'Navigation',
   CREATE_PROJECT_STEPS = 'Steps',
   ASSESS_PROJECT = 'Assess',
+  TUTORIALS = 'Tutorials',
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ test-report.xml @@
     # production
     build/
+    public/videos
     # misc
     .DS_Store
@@ Expand Down @@