From f8fe4753ef78f4ccb19a0ac2433bfeab17e0d8f7 Mon Sep 17 00:00:00 2001
From: Andrew <andrewydev6@gmail.com>
Date: Tue, 29 Oct 2024 22:29:37 +0000
Subject: [PATCH] Add a button to remove surveyors from individual assignments

---
 .../src/pages/Admin/assignment/AssignTable.js | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/front/src/pages/Admin/assignment/AssignTable.js b/frontend/front/src/pages/Admin/assignment/AssignTable.js
index ef1faf68..9eb19db2 100644
--- a/frontend/front/src/pages/Admin/assignment/AssignTable.js
+++ b/frontend/front/src/pages/Admin/assignment/AssignTable.js
@@ -1,4 +1,4 @@
-import { Box, Button, MenuItem, Stack } from "@mui/material";
+import { Box, Button, Chip, MenuItem, Stack } from "@mui/material";
 import React, { useMemo, useState } from "react";
 import {
   useAddAssignmentsToSurveyorMutation,
@@ -135,21 +135,24 @@ const AssignTable = () => {
             maxWidth="100%"
             justifyContent="flex-start"
             overflow="scroll"
-            sx={{ overflowY: "auto", overflowX: "auto" }}
+            sx={{ overflowY: "auto", overflowX: "auto", pl: 2 }}
             flexWrap="wrap"
           >
             {params.row.surveyorData.map((surveyor) => {
               return (
-                <Button
+                <Chip
                   key={`surveyor-${surveyor.id}`}
+                  label={`${surveyor.firstname} ${surveyor.lastname}`}
+                  color="primary"
+                  variant="outlined"
                   onClick={() => handleUserLink(surveyor)}
-                  sx={{
-                    textAlign: "left",
-                    minWidth: "max-content",
-                  }}
-                >
-                  {`${surveyor.firstname} ${surveyor.lastname}`}
-                </Button>
+                  onDelete={() =>
+                    removeAssignmentsFromSurveyor({
+                      surveyorId: surveyor.id,
+                      assignmentIds: [params.row.id],
+                    })
+                  }
+                />
               );
             })}
           </Stack>