adding assignment and location categories (#141)

Author: kanavmittal314

prisma/schema.prisma

@@ -130,18 +130,33 @@ model Assignment {
   isHidden   Boolean  @default(false)
   isPriority Boolean  @default(false)
   Ticket     Ticket[]
+  category   Category @relation(fields: [categoryId], references: [id])
+  categoryId Int      @default(1)
+
+  @@index(id)
+  @@index(categoryId)
+}
+
+model Category {
+  id          Int          @id @default(autoincrement())
+  name        String
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @default(now()) @updatedAt
+  assignments Assignment[]
+  locations   Location[]
 
   @@index(id)
 }
 
 model Location {
-  id        Int      @id @default(autoincrement())
-  name      String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @default(now()) @updatedAt
-  isActive  Boolean  @default(true)
-  isHidden  Boolean  @default(false)
-  Ticket    Ticket[]
+  id         Int        @id @default(autoincrement())
+  name       String
+  createdAt  DateTime   @default(now())
+  updatedAt  DateTime   @default(now()) @updatedAt
+  isActive   Boolean    @default(true)
+  isHidden   Boolean    @default(false)
+  Ticket     Ticket[]
+  categories Category[]
 
   @@index(id)
 }

src/components/admin/AdminCard.tsx

@@ -6,6 +6,7 @@ import {
   EditableInput,
   EditablePreview,
   Flex,
+  FormControl,
   IconButton,
   Input,
   Switch,
@@ -14,8 +15,10 @@ import {
   useEditableControls,
   useToast,
 } from "@chakra-ui/react";
-import { Assignment, Location } from "@prisma/client";
+
+import { Assignment, Category, Location } from "@prisma/client";
 import { UseTRPCMutationResult } from "@trpc/react/shared";
+import { MultiValue, Select, SingleValue } from "chakra-react-select";
 import { useState } from "react";
 import { FaEye, FaEyeSlash } from "react-icons/fa";
 import { DARK_GRAY_COLOR } from "../../utils/constants";
@@ -73,15 +76,47 @@ const AdminCard = (props: AdminCardProps) => {
   const [isPriority, setIsPriority] = useState(
     isAssignment ? (assignmentOrLocation as Assignment).isPriority : false,
   );
+  const [assignmentCategoryId, setAssignmentCategoryId] = useState(
+    isAssignment ? (assignmentOrLocation as Assignment).categoryId : undefined,
+  );
+  const [locationCategoryIds, setLocationCategoryIds] = useState<number[]>();
+  const [allCategories, setAllCategories] = useState<Category[]>();
+
   const context = trpc.useContext();
   const toast = useToast();
 
+  trpc.admin.getCategoriesForLocation.useQuery(
+    {
+      locationId: isAssignment
+        ? undefined
+        : (assignmentOrLocation as Location).id,
+    },
+    {
+      refetchOnWindowFocus: false,
+      onSuccess: (data) => {
+        setLocationCategoryIds(data?.categories.map((category) => category.id));
+      },
+      enabled: !isAssignment,
+    },
+  );
+
+  trpc.admin.getAllCategories.useQuery(undefined, {
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      setAllCategories(data);
+    },
+  });
+
   const handleNameChange = async (newName: string) => {
     await editMutation.mutateAsync({
       id: assignmentOrLocation.id,
       name: newName,
       isActive: assignmentOrLocation.isActive,
       isHidden: assignmentOrLocation.isHidden,
+      categoryId: isAssignment
+        ? (assignmentOrLocation as Assignment).categoryId
+        : undefined,
+      categoryIds: isAssignment ? undefined : locationCategoryIds,
     });
   };
 
@@ -93,6 +128,10 @@ const AdminCard = (props: AdminCardProps) => {
       isActive: assignmentOrLocation.isActive,
       isHidden: assignmentOrLocation.isHidden,
       isPriority: newPriority,
+      categoryId: isAssignment
+        ? (assignmentOrLocation as Assignment).categoryId
+        : undefined,
+      categoryIds: isAssignment ? undefined : locationCategoryIds,
     });
   };
 
@@ -105,6 +144,10 @@ const AdminCard = (props: AdminCardProps) => {
         name: assignmentOrLocation.name,
         isActive: newActive,
         isHidden: newActive ? false : isHidden,
+        categoryId: isAssignment
+          ? (assignmentOrLocation as Assignment).categoryId
+          : undefined,
+        categoryIds: isAssignment ? undefined : locationCategoryIds,
       })
       .then(() => {
         context.admin.getAllLocations.invalidate();
@@ -130,6 +173,62 @@ const AdminCard = (props: AdminCardProps) => {
         name: assignmentOrLocation.name,
         isActive: assignmentOrLocation.isActive,
         isHidden: !isHidden,
+        categoryId: isAssignment
+          ? (assignmentOrLocation as Assignment).categoryId
+          : undefined,
+        categoryIds: isAssignment ? undefined : locationCategoryIds,
+      })
+      .then(() => {
+        context.admin.getAllLocations.invalidate();
+        context.admin.getAllAssignments.invalidate();
+      })
+      .catch((err) => {
+        toast({
+          title: "Error",
+          description: err.message,
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+          position: "top-right",
+        });
+      });
+  };
+
+  const handleAssignmentCategoryChange = async (categoryId: number) => {
+    setAssignmentCategoryId(categoryId);
+    await editMutation
+      .mutateAsync({
+        id: assignmentOrLocation.id,
+        name: assignmentOrLocation.name,
+        isActive: isActive,
+        isHidden: isHidden,
+        categoryId: categoryId,
+      })
+      .then(() => {
+        context.admin.getAllLocations.invalidate();
+        context.admin.getAllAssignments.invalidate();
+      })
+      .catch((err) => {
+        toast({
+          title: "Error",
+          description: err.message,
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+          position: "top-right",
+        });
+      });
+  };
+
+  const handleLocationCategoriesChange = async (categoryIds: number[]) => {
+    setLocationCategoryIds(categoryIds);
+    await editMutation
+      .mutateAsync({
+        id: assignmentOrLocation.id,
+        name: assignmentOrLocation.name,
+        isActive: isActive,
+        isHidden: isHidden,
+        categoryIds: categoryIds,
       })
       .then(() => {
         context.admin.getAllLocations.invalidate();
@@ -160,59 +259,114 @@ const AdminCard = (props: AdminCardProps) => {
       backgroundColor={boxColor}
       justifyContent="space-between"
     >
-      <Flex>
-        <Editable
-          onSubmit={handleNameChange}
-          textAlign="center"
-          fontWeight="semibold"
-          display="flex"
-          defaultValue={assignmentOrLocation.name}
-          fontSize="xl"
-          isPreviewFocusable={false}
-        >
-          <EditablePreview />
-          <Input as={EditableInput} />
-          <EditableControls />
-        </Editable>
-        <Text fontSize="large" mt={1.5} ml={5}>
-          Active?
-        </Text>
-        <Switch
-          onChange={handleActiveChange}
-          mt={2.5}
-          ml={3}
-          isChecked={isActive}
-        />
-      </Flex>
-      <Checkbox
-        hidden={!isActive || !isAssignment}
-        onChange={() => handlePriorityChange(!isPriority)}
-        colorScheme="telegram"
-        size="lg"
-        ml={2}
-        isChecked={isPriority}
-      >
-        Priority
-      </Checkbox>
-      {!isActive && (
-        <Flex>
-          {isHidden ? (
-            <FaEyeSlash
-              size="20px"
-              className="hover-cursor"
-              style={{ marginTop: "10px" }}
-              onClick={handleHidden}
-            />
-          ) : (
-            <FaEye
-              size="20px"
-              className="hover-cursor"
-              style={{ marginTop: "10px" }}
-              onClick={handleHidden}
-            />
-          )}
+      <>
+        <Flex w="50%">
+          <Editable
+            onSubmit={handleNameChange}
+            textAlign="center"
+            fontWeight="semibold"
+            display="flex"
+            defaultValue={assignmentOrLocation.name}
+            fontSize="xl"
+            isPreviewFocusable={false}
+          >
+            <EditablePreview />
+            <Input as={EditableInput} />
+            <EditableControls />
+          </Editable>
+          <Text fontSize="large" mt={1.5} ml={5}>
+            Active?
+          </Text>
+          <Switch
+            onChange={handleActiveChange}
+            mt={2.5}
+            ml={3}
+            isChecked={isActive}
+          />
+          {/*uppercaseFirstLetter(allCategories?.find((category) => category.id === assignmentCategoryId).name)*/}
+          <FormControl w={isAssignment ? "30%" : "50%"} ml={2}>
+            {isAssignment ? (
+              <Select
+                options={allCategories?.map((category) => ({
+                  label: category.name,
+                  value: category.id,
+                }))}
+                value={
+                  assignmentCategoryId !== undefined
+                    ? {
+                        label: allCategories?.find(
+                          (category) => category.id === assignmentCategoryId,
+                        )?.name,
+                        value: assignmentCategoryId,
+                      }
+                    : { label: "", value: -1 }
+                }
+                onChange={(
+                  newValue: SingleValue<{
+                    label: string | undefined;
+                    value: number;
+                  }>,
+                ) => handleAssignmentCategoryChange(newValue?.value ?? -1)}
+              />
+            ) : (
+              <Select
+                isMulti
+                options={allCategories?.map((category) => ({
+                  label: category.name,
+                  value: category.id,
+                }))}
+                value={allCategories
+                  ?.filter((category) =>
+                    locationCategoryIds?.includes(category.id),
+                  )
+                  ?.map((category) => ({
+                    value: category.id,
+                    label: category.name,
+                  }))}
+                onChange={(
+                  newValue: MultiValue<{
+                    label: string;
+                    value: number;
+                  }>,
+                ) =>
+                  handleLocationCategoriesChange(
+                    newValue.map((item) => item.value),
+                  )
+                }
+              />
+            )}
+          </FormControl>
         </Flex>
-      )}
+        <Checkbox
+          hidden={!isActive || !isAssignment}
+          onChange={() => handlePriorityChange(!isPriority)}
+          colorScheme="telegram"
+          size="lg"
+          ml={2}
+          isChecked={isPriority}
+        >
+          Priority
+        </Checkbox>
+        {!isActive && (
+          <Flex>
+            {isHidden ? (
+              <FaEyeSlash
+                size="20px"
+                className="hover-cursor"
+                style={{ marginTop: "10px" }}
+                onClick={handleHidden}
+              />
+            ) : (
+              <FaEye
+                size="20px"
+                className="hover-cursor"
+                style={{ marginTop: "10px" }}
+                onClick={handleHidden}
+              />
+            )}
+          </Flex>
+        )}
+      </>
     </Flex>
   );
 };