fix(frontend): styling based on task action not task status

hotosm · Oct 25, 2024 · 6175134 · 6175134
1 parent 82a2cb8
commit 6175134
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 17 deletions.
diff --git a/src/frontend/src/models/createproject/createProjectModel.ts b/src/frontend/src/models/createproject/createProjectModel.ts
@@ -1,3 +1,5 @@
+import { task_status as taskStatusEnum } from '@/types/enums';
+
 export interface ProjectDetailsModel {
   id: number;
   odkid: number;
@@ -34,7 +36,7 @@ export interface ProjectDetailsModel {
       id: string;
       bbox: null | number[];
     };
-    task_status: number;
+    task_status: taskStatusEnum;
     actioned_by_uid: number;
     actioned_by_username: string;
     task_history: {
@@ -43,7 +45,6 @@ export interface ProjectDetailsModel {
       action_date: string;
     }[];
     qr_code_base64: string;
-    task_status_str: string;
   }[];
 }
 

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -65,7 +65,6 @@ export type ProjectTaskTypes = {
   actioned_by_username: string | null;
   task_history: any[];
   qr_code_base64: string;
-  task_status_str: string;
 };
 
 type EditProjectResponseTypes = {

diff --git a/src/frontend/src/types/enums.ts b/src/frontend/src/types/enums.ts
@@ -5,15 +5,16 @@ export enum task_split_type {
 }
 
 export enum task_status {
-  READY = 'READY',
+  RELEASED_FOR_MAPPING = 'RELEASED_FOR_MAPPING',
   LOCKED_FOR_MAPPING = 'LOCKED_FOR_MAPPING',
-  MAPPED = 'MAPPED',
+  MARKED_MAPPED = 'MARKED_MAPPED',
   LOCKED_FOR_VALIDATION = 'LOCKED_FOR_VALIDATION',
   VALIDATED = 'VALIDATED',
-  INVALIDATED = 'INVALIDATED',
-  BAD = 'BAD',
-  SPLIT = 'SPLIT',
-  ARCHIVED = 'ARCHIVED',
+  MARKED_INVALID = 'MARKED_INVALID',
+  MARKED_BAD = 'MARKED_BAD',
+  SPLIT_NEEDED = 'SPLIT_NEEDED',
+  RECREATED = 'RECREATED',
+  COMMENT = 'COMMENT',
 }
 
 export enum user_roles {

diff --git a/src/frontend/src/utilfunctions/getTaskStatusStyle.ts b/src/frontend/src/utilfunctions/getTaskStatusStyle.ts
@@ -38,8 +38,7 @@ const strokeColor = 'rgb(0,0,0,0.3)';
 const secondaryStrokeColor = 'rgb(0,0,0,1)';
 
 const getTaskStatusStyle = (feature: Record<string, any>, mapTheme: Record<string, any>, taskLockedByUser: boolean) => {
-  let id = feature.getId().toString().replace('_', ',');
-  const status = id.split(',')[1];
+  const status = feature.getProperties().task_status;
 
   const isTaskStatusLocked = ['LOCKED_FOR_MAPPING', 'LOCKED_FOR_VALIDATION'].includes(status);
   const borderStrokeColor = isTaskStatusLocked && taskLockedByUser ? secondaryStrokeColor : strokeColor;
@@ -56,7 +55,7 @@ const getTaskStatusStyle = (feature: Record<string, any>, mapTheme: Record<strin
   const redIconStyle = createIconStyle(AssetModules.RedLockPng);
 
   const geojsonStyles = {
-    READY: new Style({
+    RELEASED_FOR_MAPPING: new Style({
       stroke: new Stroke({
         color: borderStrokeColor,
         width: 3,
@@ -66,7 +65,7 @@ const getTaskStatusStyle = (feature: Record<string, any>, mapTheme: Record<strin
       }),
     }),
     LOCKED_FOR_MAPPING: [lockedPolygonStyle, iconStyle],
-    MAPPED: new Style({
+    MARKED_MAPPED: new Style({
       stroke: new Stroke({
         color: borderStrokeColor,
         width: 3,
@@ -86,7 +85,7 @@ const getTaskStatusStyle = (feature: Record<string, any>, mapTheme: Record<strin
         color: mapTheme.palette.mapFeatureColors.validated_rgb,
       }),
     }),
-    INVALIDATED: new Style({
+    MARKED_INVALID: new Style({
       stroke: new Stroke({
         color: borderStrokeColor,
         width: 3,
@@ -95,7 +94,7 @@ const getTaskStatusStyle = (feature: Record<string, any>, mapTheme: Record<strin
         color: mapTheme.palette.mapFeatureColors.invalidated_rgb,
       }),
     }),
-    BAD: new Style({
+    MARKED_BAD: new Style({
       stroke: new Stroke({
         color: borderStrokeColor,
         width: 3,
@@ -104,7 +103,7 @@ const getTaskStatusStyle = (feature: Record<string, any>, mapTheme: Record<strin
         color: mapTheme.palette.mapFeatureColors.bad_rgb,
       }),
     }),
-    SPLIT: new Style({
+    SPLIT_NEEDED: new Style({
       stroke: new Stroke({
         color: borderStrokeColor,
         width: 3,

diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -135,7 +135,7 @@ const ProjectDetailsV2 = () => {
     // FIXME should the feature id be an int, not a string?
     const features = state.projectTaskBoundries[0]?.taskBoundries?.map((taskObj) => ({
       type: 'Feature',
-      id: `${taskObj.id}_${taskObj.task_status}`,
+      id: `project_${projectId}_task_${taskObj.id}`,
       geometry: { ...taskObj.outline },
       properties: {
         ...taskObj.outline.properties,
@@ -149,6 +149,7 @@ const ProjectDetailsV2 = () => {
       ...geojsonObjectModel,
       features: features,
     };
+    console.log(taskBoundariesFeatcol);
     setTaskBoundariesLayer(taskBoundariesFeatcol);
   }, [state.projectTaskBoundries[0]?.taskBoundries?.length]);