Updating standards page to include marking information

api/src/models/standards-view.ts

@@ -33,6 +33,11 @@ export const EnvironmentStandardsSchema = z.object({
 
 export type EnvironmentStandards = z.infer<typeof EnvironmentStandardsSchema>;
 
+export interface MarkingStandards {
+  types: { name: string; marking_type_id: string; description: string }[];
+  colours: { colour: string; colour_id: string; description: string }[];
+}
+
 export const MethodStandardSchema = z.object({
   method_lookup_id: z.number(),
   name: z.string(),

api/src/openapi/schemas/standards.ts

@@ -135,3 +135,54 @@ export const MethodStandardSchema: OpenAPIV3.SchemaObject = {
     }
   }
 };
+
+export const MarkingStandardsSchema: OpenAPIV3.SchemaObject = {
+  type: 'object',
+  description: 'Marking standards response object showing supported marking types and colours',
+  additionalProperties: false,
+  properties: {
+    types: {
+      type: 'array',
+      description: 'Array of marking types',
+      items: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            description: 'Name of the marking type'
+          },
+          marking_type_id: {
+            type: 'string',
+            description: 'ID of the marking type'
+          },
+          description: {
+            type: 'string',
+            description: 'Description of the marking type',
+            nullable: true
+          }
+        }
+      }
+    },
+    colours: {
+      type: 'array',
+      description: 'Array of marking colour options',
+      items: {
+        type: 'object',
+        properties: {
+          colour: {
+            type: 'string',
+            description: 'Name of the marking colour'
+          },
+          colour_id: {
+            type: 'string',
+            description: 'ID of the marking colour'
+          },
+          description: {
+            type: 'string',
+            description: 'description of the marking colour'
+          }
+        }
+      }
+    }
+  }
+};

api/src/paths/standards/markings/index.ts

@@ -0,0 +1,80 @@
+import { RequestHandler } from 'express';
+import { Operation } from 'express-openapi';
+import { getAPIUserDBConnection } from '../../../database/db';
+import { MarkingStandardsSchema } from '../../../openapi/schemas/standards';
+import { StandardsService } from '../../../services/standards-service';
+import { getLogger } from '../../../utils/logger';
+
+const defaultLog = getLogger('paths/projects');
+
+export const GET: Operation = [getMarkingStandards()];
+
+GET.apiDoc = {
+  description: 'Gets lookup values for marking variables',
+  tags: ['standards'],
+  parameters: [
+    {
+      in: 'query',
+      name: 'keyword',
+      required: false,
+      schema: {
+        type: 'string',
+        nullable: true
+      }
+    }
+  ],
+  responses: {
+    200: {
+      description: 'Marking data standards response object.',
+      content: {
+        'application/json': {
+          schema: MarkingStandardsSchema
+        }
+      }
+    },
+    400: {
+      $ref: '#/components/responses/400'
+    },
+    401: {
+      $ref: '#/components/responses/401'
+    },
+    403: {
+      $ref: '#/components/responses/403'
+    },
+    500: {
+      $ref: '#/components/responses/500'
+    },
+    default: {
+      $ref: '#/components/responses/default'
+    }
+  }
+};
+
+/**
+ * Get marking data standards
+ *
+ * @returns {RequestHandler}
+ */
+export function getMarkingStandards(): RequestHandler {
+  return async (_, res) => {
+    const connection = getAPIUserDBConnection();
+
+    try {
+      await connection.open();
+
+      const standardsService = new StandardsService(connection);
+
+      const response = await standardsService.getMarkingStandards();
+
+      await connection.commit();
+
+      return res.status(200).json(response);
+    } catch (error) {
+      defaultLog.error({ label: 'getMarkingStandards', message: 'error', error });
+      connection.rollback();
+      throw error;
+    } finally {
+      connection.release();
+    }
+  };
+}

api/src/services/standards-service.ts

@@ -1,5 +1,5 @@
 import { IDBConnection } from '../database/db';
-import { EnvironmentStandards, ISpeciesStandards, MethodStandard } from '../models/standards-view';
+import { EnvironmentStandards, ISpeciesStandards, MarkingStandards, MethodStandard } from '../models/standards-view';
 import { StandardsRepository } from '../repositories/standards-repository';
 import { CritterbaseService } from './critterbase-service';
 import { DBService } from './db-service';
@@ -50,6 +50,25 @@
     };
   }
 
+  /**
+   * Gets marking standards
+   *
+   * @return {MarkingStandards}
+   * @memberof standardsService
+   */
+  async getMarkingStandards(): Promise<MarkingStandards> {
+    const types = await this.critterbaseService.getMarkingTypes();
+    const colours = await this.critterbaseService.getColours();
+    return {
+      types: types.map((type) => {
+        return { name: type.key, marking_type_id: type.id, description: type.value };
+      }),
+      colours: colours.map((colour) => {
+        return { colour: colour.value, colour_id: colour.id, description: colour.key };
+      })
+    };
+  }
+
   /**
    * Gets environment standards
    *

app/src/features/standards/StandardsPage.tsx

@@ -1,4 +1,4 @@
-import { mdiLeaf, mdiPaw, mdiToolbox } from '@mdi/js';
+import { mdiLeaf, mdiPaw, mdiTag, mdiToolbox } from '@mdi/js';
 import Box from '@mui/material/Box';
 import { grey } from '@mui/material/colors';
 import Container from '@mui/material/Container';
@@ -11,13 +11,15 @@ import { SystemAlertBanner } from 'features/alert/banner/SystemAlertBanner';
 import { SystemAlertBannerEnum } from 'interfaces/useAlertApi.interface';
 import { useState } from 'react';
 import { EnvironmentStandards } from './view/environment/EnvironmentStandards';
+import { MarkingStandards } from './view/markings/MarkingStandards';
 import { MethodStandards } from './view/methods/MethodStandards';
 import { SpeciesStandards } from './view/species/SpeciesStandards';
 
 export enum StandardsPageView {
   SPECIES = 'SPECIES',
   METHODS = 'METHODS',
-  ENVIRONMENT = 'ENVIRONMENT'
+  ENVIRONMENT = 'ENVIRONMENT',
+  MARKINGS = 'MARKINGS'
 }
 
 const StandardsPage = () => {
@@ -26,7 +28,8 @@ const StandardsPage = () => {
   const views = [
     { value: StandardsPageView.SPECIES, label: 'Species', icon: mdiPaw },
     { value: StandardsPageView.METHODS, label: 'Sampling Methods', icon: mdiToolbox },
-    { value: StandardsPageView.ENVIRONMENT, label: 'Environment variables', icon: mdiLeaf }
+    { value: StandardsPageView.ENVIRONMENT, label: 'Environment variables', icon: mdiLeaf },
+    { value: StandardsPageView.MARKINGS, label: 'Markings', icon: mdiTag }
   ];
 
   return (
@@ -56,6 +59,9 @@ const StandardsPage = () => {
 
             {/* ENVIRONMENT STANDARDS */}
             {activeView === StandardsPageView.ENVIRONMENT && <EnvironmentStandards />}
+
+            {/* MARKING TYPE STANDARDS */}
+            {activeView === StandardsPageView.MARKINGS && <MarkingStandards />}
           </Box>
         </Stack>
       </Container>

app/src/features/standards/view/markings/MarkingStandards.tsx

@@ -0,0 +1,44 @@
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { LoadingGuard } from 'components/loading/LoadingGuard';
+import { useBiohubApi } from 'hooks/useBioHubApi';
+import useDataLoader from 'hooks/useDataLoader';
+import { useEffect } from 'react';
+import { MarkingStandardsResults } from './MarkingStandardsResults';
+
+export const MarkingStandards = () => {
+  const biohubApi = useBiohubApi();
+
+  const markingsDataLoader = useDataLoader((keyword?: string) => biohubApi.standards.getMarkingsStandards(keyword));
+
+  useEffect(() => {
+    markingsDataLoader.load();
+  }, [markingsDataLoader]);
+
+  if (!markingsDataLoader.data) {
+    return <></>;
+  }
+
+  return (
+    <Box my={2}>
+      <LoadingGuard
+        isLoading={markingsDataLoader.isLoading || !markingsDataLoader.isReady}
+        isLoadingFallback={
+          <Stack gap={2}>
+            <Skeleton variant="rectangular" height="56px" sx={{ borderRadius: '5px' }} />
+            <Skeleton variant="rectangular" height="56px" sx={{ borderRadius: '5px' }} />
+          </Stack>
+        }
+        hasNoData={
+          !(markingsDataLoader.data?.types.length || markingsDataLoader.data?.colours.length) &&
+          markingsDataLoader.isReady
+        }
+        hasNoDataFallback={
+          <Box minHeight="200px" display="flex" alignItems="center" justifyContent="center">
+            <Typography color="textSecondary">No marking standards found</Typography>
+          </Box>
+        }>
+        <MarkingStandardsResults standards={markingsDataLoader.data} />
+      </LoadingGuard>
+    </Box>
+  );
+};

app/src/features/standards/view/markings/MarkingStandardsResults.tsx

@@ -0,0 +1,48 @@
+import { grey } from '@mui/material/colors';
+import Stack from '@mui/material/Stack';
+import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
+import { IMarkingsStandards } from 'interfaces/useStandardsApi.interface';
+
+interface IMarkingStandardsResultsProps {
+  standards: IMarkingsStandards;
+}
+
+/**
+ * Component to display marking standards results
+ *
+ * @return {*}
+ */
+export const MarkingStandardsResults = (props: IMarkingStandardsResultsProps) => {
+  const { standards } = props;
+
+  if (!standards || !(standards.types.length || standards.colours.length)) {
+    // No standards to display
+    return null;
+  }
+
+  return (
+    <Stack gap={2}>
+      {/* Accordion for Marking Types */}
+      {standards.types.length > 0 && (
+        <AccordionStandardCard label="Marking Types" colour={grey[100]}>
+          <Stack gap={2} my={2}>
+            {standards.types.map((type) => (
+              <AccordionStandardCard key={type.name} label={type.description} colour={grey[200]} />
+            ))}
+          </Stack>
+        </AccordionStandardCard>
+      )}
+
+      {/* Accordion for Marking Colours */}
+      {standards.colours.length > 0 && (
+        <AccordionStandardCard label="Marking Colours" colour={grey[100]}>
+          <Stack gap={2} my={2}>
+            {standards.colours.map((colour) => (
+              <AccordionStandardCard key={colour.colour} label={colour.colour} colour={grey[200]} />
+            ))}
+          </Stack>
+        </AccordionStandardCard>
+      )}
+    </Stack>
+  );
+};

app/src/hooks/api/useStandardsApi.ts

@@ -1,5 +1,10 @@
 import { AxiosInstance } from 'axios';
-import { IEnvironmentStandards, IMethodStandard, ISpeciesStandards } from 'interfaces/useStandardsApi.interface';
+import {
+  IEnvironmentStandards,
+  IMarkingsStandards,
+  IMethodStandard,
+  ISpeciesStandards
+} from 'interfaces/useStandardsApi.interface';
 import qs from 'qs';
 
 /**
@@ -55,10 +60,28 @@
     return data;
   };
 
+  /**
+   * Fetch markings
+   *
+   * @param {string} keyword
+   * @return {*}  {Promise<IMarkingsStandards>}
+   */
+  const getMarkingsStandards = async (keyword?: string): Promise<IMarkingsStandards> => {
+    const params = { keyword };
+
+    const { data } = await axios.get('/api/standards/markings', {
+      params,
+      paramsSerializer: (params) => qs.stringify(params)
+    });
+
+    return data;
+  };
+
   return {
     getSpeciesStandards,
     getEnvironmentStandards,
-    getMethodStandards
+    getMethodStandards,
+    getMarkingsStandards
   };
 };
 

app/src/interfaces/useStandardsApi.interface.ts

@@ -3,6 +3,7 @@ import {
   CBQuantitativeMeasurementTypeDefinition,
   ICollectionUnit
 } from './useCritterApi.interface';
+import { IMarkingColourOption, IMarkingTypeResponse } from './useMarkingApi.interface';
 
 interface IStandardNameDescription {
   name: string;
@@ -59,3 +60,14 @@ export interface IEnvironmentStandards {
   qualitative: IQualitativeAttributeStandard[];
   quantitative: IQuantitativeAttributeStandard[];
 }
+
+/**
+ * Data standards for markings
+ *
+ * @export
+ * @interface IMarkingsStandards
+ */
+export interface IMarkingsStandards {
+  types: IMarkingTypeResponse[];
+  colours: IMarkingColourOption[];
+}