Add subcount sign & sampling site list styling changes

api/src/paths/project/{projectId}/survey/{surveyId}/sample-site/index.ts

@@ -131,6 +131,10 @@ GET.apiDoc = {
                             type: 'integer',
                             minimum: 1
                           },
+                          method_response_metric_id: {
+                            type: 'integer',
+                            minimum: 1
+                          },
                           description: {
                             type: 'string',
                             maxLength: 250
@@ -173,8 +177,7 @@ GET.apiDoc = {
                                 }
                               }
                             }
-                          },
-                          method_response_metric_id: { type: 'integer', minimum: 1 }
+                          }
                         }
                       }
                     },
@@ -456,15 +459,15 @@ POST.apiDoc = {
                     nullable: true
                   },
                   create_user: {
-                    type: 'number',
+                    type: 'integer',
                     nullable: true
                   },
                   update_date: {
                     type: 'string',
                     nullable: true
                   },
                   update_user: {
-                    type: 'string',
+                    type: 'integer',
                     nullable: true
                   },
                   revision_count: {
@@ -500,15 +503,15 @@ POST.apiDoc = {
                     nullable: true
                   },
                   create_user: {
-                    type: 'string',
+                    type: 'integer',
                     nullable: true
                   },
                   update_date: {
                     type: 'string',
                     nullable: true
                   },
                   update_user: {
-                    type: 'string',
+                    type: 'integer',
                     nullable: true
                   },
                   revision_count: {

api/src/paths/project/{projectId}/survey/{surveyId}/sample-site/{surveySampleSiteId}/index.ts

@@ -165,7 +165,6 @@ PUT.apiDoc = {
                   type: 'array',
                   items: {
                     type: 'object',
-                    additionalProperties: false,
                     required: ['survey_block_id'],
                     properties: {
                       survey_block_id: {
@@ -178,7 +177,6 @@ PUT.apiDoc = {
                   type: 'array',
                   items: {
                     type: 'object',
-                    additionalProperties: false,
                     required: ['survey_stratum_id'],
                     properties: {
                       survey_stratum_id: {

api/src/repositories/code-repository.ts

@@ -43,8 +43,8 @@ export const IAllCodeSets = z.object({
   vantage_codes: CodeSet(),
   survey_jobs: CodeSet(),
   site_selection_strategies: CodeSet(),
-  survey_progress: CodeSet(z.object({ id: z.number(), name: z.string(), description: z.string() }).shape),
   sample_methods: CodeSet(z.object({ id: z.number(), name: z.string(), description: z.string() }).shape),
+  survey_progress: CodeSet(z.object({ id: z.number(), name: z.string(), description: z.string() }).shape),
   method_response_metrics: CodeSet(z.object({ id: z.number(), name: z.string(), description: z.string() }).shape)
 });
 
@@ -53,7 +53,7 @@ export type IAllCodeSets = z.infer<typeof IAllCodeSets>;
 export class CodeRepository extends BaseRepository {
   async getSampleMethods() {
     const sql = SQL`
-    SELECT method_lookup_id as id, name, description FROM method_lookup;
+    SELECT method_lookup_id as id, name, description FROM method_lookup ORDER BY name ASC;
     `;
     const response = await this.connection.sql(sql);
     return response.rows;

api/src/repositories/survey-location-repository.ts

@@ -84,7 +84,14 @@ export class SurveyLocationRepository extends BaseRepository {
   async getSurveyLocationsData(surveyId: number): Promise<SurveyLocationRecord[]> {
     const sqlStatement = SQL`
       SELECT
-        *
+        survey_location_id,
+        name,
+        description,
+        geography,
+        geojson,
+        geometry,
+        name,
+        revision_count
       FROM
         survey_location
       WHERE

app/src/components/chips/ColouredRectangleChip.tsx

@@ -0,0 +1,34 @@
+import { Chip, ChipProps, Color } from '@mui/material';
+
+export interface IColouredRectangleChipProps extends ChipProps {
+  colour: Color;
+  label: string | JSX.Element;
+}
+
+/**
+ * Returns a stylized MUI chip
+ *
+ * @param props {IColouredRectangleChipProps}
+ * @returns
+ */
+const ColouredRectangleChip = (props: IColouredRectangleChipProps) => {
+  return (
+    <Chip
+      size="small"
+      {...props}
+      sx={{
+        bgcolor: props.colour[50],
+        borderRadius: '5px',
+        minWidth: 0,
+        '& .MuiChip-label': {
+          color: props.colour[700],
+          fontWeight: 700,
+          fontSize: '0.75rem',
+          p: 1
+        }
+      }}
+    />
+  );
+};
+
+export default ColouredRectangleChip;

app/src/components/map/components/StaticLayers.tsx

@@ -1,5 +1,4 @@
 import { Feature } from 'geojson';
-import L from 'leaflet';
 import { PropsWithChildren, ReactElement, useMemo } from 'react';
 import {
   FeatureGroup,
@@ -11,7 +10,7 @@ import {
   Tooltip,
   TooltipProps
 } from 'react-leaflet';
-import { coloredPoint } from 'utils/mapUtils';
+import { coloredCustomPointMarker, coloredPoint } from 'utils/mapUtils';
 
 export interface IStaticLayerFeature {
   geoJSON: Feature;
@@ -36,14 +35,19 @@ export interface IStaticLayersProps {
   layers: IStaticLayer[];
 }
 
+/**
+ * Returns static map layers to be displayed in leaflet
+ *
+ * @param props {PropsWithChildren<IStaticLayersProps>}
+ * @returns
+ */
 const StaticLayers = (props: PropsWithChildren<IStaticLayersProps>) => {
   const layerControls: ReactElement[] = useMemo(
     () =>
       props.layers
         .filter((layer) => Boolean(layer.features?.length))
         .map((layer) => {
           const layerColors = layer.layerColors || { color: '#1f7dff', fillColor: '#1f7dff' };
-
           return (
             <LayersControl.Overlay checked={true} name={layer.layerName} key={`static-layer-${layer.layerName}`}>
               <FeatureGroup key={`static-feature-group-${layer.layerName}`}>
@@ -54,13 +58,11 @@ const StaticLayers = (props: PropsWithChildren<IStaticLayersProps>) => {
                     <GeoJSON
                       key={`static-feature-${id}`}
                       style={{ ...layerColors }}
-                      pointToLayer={(feature, latlng) => {
-                        if (feature.properties?.radius) {
-                          return new L.Circle([latlng.lat, latlng.lng], feature.properties.radius);
-                        }
-
-                        return coloredPoint({ latlng });
-                      }}
+                      pointToLayer={(_, latlng) =>
+                        layer.layerName === 'Observations'
+                          ? coloredCustomPointMarker({ latlng, fillColor: layer.layerColors?.fillColor })
+                          : coloredPoint({ latlng, fillColor: layer.layerColors?.fillColor })
+                      }
                       data={item.geoJSON}
                       {...item.GeoJSONProps}>
                       {item.tooltip && (

app/src/constants/misc.ts

@@ -1,3 +1,6 @@
+import { Color } from '@mui/material';
+import { blue, green, purple } from '@mui/material/colors';
+
 export enum AdministrativeActivityType {
   SYSTEM_ACCESS = 'System Access'
 }
@@ -7,3 +10,9 @@ export enum AdministrativeActivityStatusType {
   ACTIONED = 'Actioned',
   REJECTED = 'Rejected'
 }
+
+export const SurveyProgressChipColours: Record<string, Color> = {
+  PLANNING: blue,
+  'IN PROGRESS': purple,
+  COMPLETED: green
+};

app/src/constants/spatial.ts

@@ -19,3 +19,11 @@ export const ALL_OF_BC_BOUNDARY: Feature = {
     ]
   }
 };
+
+export const SURVEY_MAP_LAYER_COLOURS = {
+  OBSERVATIONS_COLOUR: '#db4f4f',
+  STUDY_AREA_COLOUR: '#e3a82b',
+  SAMPLING_SITE_COLOUR: '#1f6fb5',
+  TELEMETRY_COLOUR: '#ff5454',
+  DEFAULT_COLOUR: '#a7bfd1'
+};

app/src/features/projects/view/ProjectHeader.tsx

@@ -1,5 +1,6 @@
 import {
   mdiAccountMultipleOutline,
+  mdiCalendarRange,
   mdiCalendarTodayOutline,
   mdiChevronDown,
   mdiCogOutline,
@@ -8,6 +9,7 @@ import {
 } from '@mdi/js';
 import Icon from '@mdi/react';
 import Button from '@mui/material/Button';
+import { grey } from '@mui/material/colors';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -106,9 +108,10 @@ const ProjectHeader = () => {
           <>
             {projectData.projectData.project.end_date ? (
               <Stack flexDirection="row" alignItems="center" gap={0.75} color="text.secondary">
-                <Typography component="span">Project Timeline:</Typography>
+                <Icon path={mdiCalendarRange} size={0.8} color={grey[600]} style={{ marginTop: 1.5 }} />
+
                 {getFormattedDateRangeString(
-                  DATE_FORMAT.ShortMediumDateFormat,
+                  DATE_FORMAT.MediumDateFormat,
                   projectData.projectData.project.start_date,
                   projectData.projectData.project.end_date
                 )}

app/src/features/surveys/components/EditSamplingMethod.tsx

@@ -14,6 +14,7 @@ interface IEditSamplingMethodProps {
 
 const EditSamplingMethod: React.FC<IEditSamplingMethodProps> = (props) => {
   const { open, initialData, onSubmit, onClose } = props;
+
   return (
     <>
       <EditDialog

app/src/features/surveys/components/MethodForm.tsx

@@ -1,4 +1,4 @@
-import { mdiArrowRight, mdiCalendarMonthOutline, mdiClockOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
+import { mdiArrowRightThin, mdiCalendarMonthOutline, mdiClockOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
@@ -18,7 +18,7 @@ import { FieldArray, FieldArrayRenderProps, useFormikContext } from 'formik';
 import { useContext, useEffect } from 'react';
 import yup from 'utils/YupSchema';
 
-interface ISurveySampleMethodPeriodData {
+export interface ISurveySampleMethodPeriodData {
   survey_sample_period_id: number | null;
   survey_sample_method_id: number | null;
   start_date: string;
@@ -99,6 +99,11 @@ export const SamplingSiteMethodYupSchema = yup.object({
     .min(1, 'At least one time period is required')
 });
 
+/**
+ * Returns a form for editing a sampling method
+ *
+ * @returns
+ */
 const MethodForm = () => {
   const formikProps = useFormikContext<ISurveySampleMethodData>();
   const { values, errors } = formikProps;
@@ -161,7 +166,7 @@ const MethodForm = () => {
             sx={{
               mb: 1
             }}>
-            Time Periods
+            Periods
           </Typography>
           <Box>
             <FieldArray
@@ -236,7 +241,7 @@ const MethodForm = () => {
                               </Stack>
 
                               <Box flex="0 0 auto" mt={2.25}>
-                                <Icon path={mdiArrowRight} size={0.8} />
+                                <Icon path={mdiArrowRightThin} size={1} />
                               </Box>
 
                               <Stack>