Created comments and added functionality to change ticket

Dockerfile

@@ -8,6 +8,8 @@ RUN npm config delete proxy
 RUN npm install
 RUN npm run build
 
+FROM nginx:latest
+
 COPY --from=tres-build-base /app/dist /usr/share/nginx/html
 COPY ./etc/www/tres.png /usr/share/nginx/html/tres.png
 COPY ./etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf

public/locales/en/translation.json

@@ -27,7 +27,8 @@
     "tooltip": {
       "report": "Report ticket",
       "suggestion": "Suggestion ticket",
-      "question": "Question ticket"
+      "question": "Question ticket",
+      "notSelected": "Not selected"
     }
   },
   "sidebar": {
@@ -50,7 +51,8 @@
     "scopes": {
       "reportTitle": "Report Tickets",
       "questionTitle": "Question Tickets",
-      "suggestionTitle": "Suggestion Tickets"
+      "suggestionTitle": "Suggestion Tickets",
+      "notSelectedTitle": "Not selected Tickets"
     }
   },
   "sent": {
@@ -85,11 +87,16 @@
     "additionalInfo": "Additional Information",
     "author": "Author",
     "faculty": "Faculty",
-    "dateOfCreation": "Date of creation"
+    "dateOfCreation": "Date of creation",
+    "comments": "Comments",
+    "admin": {
+      "selectAssignee": "Select assignee"
+    }
   },
   "createTicket": {
     "heading": "Ticket creation",
     "queue": "Queue",
+    "faculty": "Faculty",
     "selectQueue": "Select queue",
     "ticketTitle": "Ticket title",
     "ticketTitlePlaceholder": "Enter ticket title",

public/locales/ua/translation.json

@@ -27,7 +27,8 @@
     "tooltip": {
       "report": "Тікет - скарга",
       "suggestion": "Тікет - пропозиція",
-      "question": "Тікет - питання"
+      "question": "Тікет - питання",
+      "notSelected": "Не обрано"
     }
   },
   "sidebar": {
@@ -50,7 +51,8 @@
     "scopes": {
       "reportTitle": "Тікети - скарги",
       "questionTitle": "Тікети - питання",
-      "suggestionTitle": "Тікети - пропозиції"
+      "suggestionTitle": "Тікети - пропозиції",
+      "notSelectedTitle": "Не визначені Тікети"
     }
   },
   "sent": {
@@ -85,11 +87,16 @@
     "additionalInfo": "Додаткова інформація",
     "author": "Автор",
     "faculty": "Факультет",
-    "dateOfCreation": "Дата створення"
+    "dateOfCreation": "Дата створення",
+    "comments": "Коментарі",
+    "admin": {
+      "selectAssignee": "Обери відповідального"
+    }
   },
   "createTicket": {
     "heading": "Створення тікета",
     "queue": "Черга",
+    "faculty": "Факультет",
     "selectQueue": "Оберіть чергу",
     "ticketTitle": "Назва тікета",
     "ticketTitlePlaceholder": "Введіть назву тікета",

src/Pages/CreateTicketForm/CreateTicketForm.tsx

@@ -6,6 +6,7 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import useTheme from "@mui/material/styles/useTheme";
 
+import { FacultySelect } from "./components/FacultySelect";
 import { QueueSelect } from "./components/QueueSelect";
 import { TicketTitleInput } from "./components/TicketTitleInput";
 import { TicketBodyTextField } from "./components/TicketBodyTextField";
@@ -23,7 +24,9 @@ const CreateTicketForm: FC = () => {
   const facultyId = getUserFacultyId();
 
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
-  const [queue, setQueue] = useState<number | "none">("none");
+  const [queue, setQueue] = useState<number>(-1);
+  const [faculty, setFaculty] = useState<number>(facultyId);
+  const [formattedText, setFormattedText] = useState("");
 
   const [createTicket] = useCreateTicketMutation();
 
@@ -37,16 +40,15 @@ const CreateTicketForm: FC = () => {
 
   const handleClear = (): void => {
     resetField("subject");
-    resetField("body");
-    setQueue("none");
+    setValue("queue", null);
+    setFormattedText("");
+    setQueue(-1);
     setSelectedOptions([]);
   };
 
   const onSubmit = (data: ICreateTicketRequestBody): void => {
-    if (data.queue) {
-      createTicket({ body: JSON.stringify(data) });
-      handleClear();
-    }
+    createTicket({ body: JSON.stringify(data) });
+    handleClear();
   };
 
   return (
@@ -75,15 +77,26 @@ const CreateTicketForm: FC = () => {
                 },
             }}
           >
+            <FacultySelect
+              facultyId={facultyId}
+              register={register}
+              setValue={setValue}
+              faculty={faculty}
+              setFaculty={setFaculty}
+            />
             <QueueSelect
-              faculty={facultyId}
+              facultyId={faculty}
               register={register}
               setValue={setValue}
               queue={queue}
               setQueue={setQueue}
             />
             <TicketTitleInput register={register} />
-            <TicketBodyTextField register={register} />
+            <TicketBodyTextField
+              register={register}
+              formattedText={formattedText}
+              setFormattedText={setFormattedText}
+            />
             <TicketVisibilityOptions
               setValue={setValue}
               selectedOptions={selectedOptions}

src/Pages/CreateTicketForm/components/FacultySelect/FacultySelect.tsx

@@ -0,0 +1,94 @@
+import { useEffect, FC } from "react";
+import { useTranslation } from "react-i18next";
+import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import ListItemText from "@mui/material/ListItemText";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+import { SelectChangeEvent } from "@mui/material/Select";
+import useTheme from "@mui/material/styles/useTheme";
+
+import { Loader } from "../../../../components/Loader";
+
+import { useGetFacultiesQuery } from "../../../../store/api/api";
+import IPalette from "../../../../theme/IPalette.interface";
+
+interface FacultySelectProps {
+  facultyId: number;
+  faculty: number;
+  register: UseFormRegister<ICreateTicketRequestBody>;
+  setValue: UseFormSetValue<ICreateTicketRequestBody>;
+  setFaculty: (faculty: number) => void;
+}
+
+interface faculty {
+  faculty_id: number;
+  name: string;
+}
+
+const FacultySelect: FC<FacultySelectProps> = ({
+  facultyId,
+  register,
+  setValue,
+  faculty,
+  setFaculty,
+}) => {
+  const { t } = useTranslation();
+  const { palette }: IPalette = useTheme();
+
+  const { data, isLoading, isSuccess } = useGetFacultiesQuery({});
+
+  const handleChange = (event: SelectChangeEvent): void => {
+    const selectedFaculty: number = parseInt(event.target.value);
+
+    setFaculty(selectedFaculty);
+    setValue("faculty", selectedFaculty);
+  };
+
+  useEffect(() => {
+    setValue("faculty", facultyId);
+  }, []);
+
+  return (
+    <Box>
+      <Typography variant="h3">{t("createTicket.faculty")}</Typography>
+      <FormControl
+        fullWidth
+        sx={{ bgcolor: palette.grey.card }}
+        {...register("queue")}
+      >
+        {isLoading && <Loader />}
+        {isSuccess && (
+          <Select
+            id="faculty-select"
+            value={faculty.toString()}
+            onChange={handleChange}
+          >
+            {data.faculties_list.map((faculty: faculty) => {
+              let isSelected = false;
+
+              if (faculty.faculty_id === facultyId) {
+                isSelected = true;
+              }
+
+              return (
+                <MenuItem
+                  value={faculty.faculty_id}
+                  key={`menuItem-${faculty.faculty_id}`}
+                  selected={isSelected}
+                >
+                  <ListItemText primary={faculty.name} />
+                </MenuItem>
+              );
+            })}
+          </Select>
+        )}
+      </FormControl>
+    </Box>
+  );
+};
+
+export { FacultySelect };

src/Pages/CreateTicketForm/components/FacultySelect/index.ts

@@ -0,0 +1 @@
+export { FacultySelect } from "./FacultySelect";

src/Pages/CreateTicketForm/components/QueueSelect/QueueSelect.tsx

@@ -18,15 +18,15 @@ import { useGetQueueByFacultyMutation } from "../../../../store/api/api";
 import IPalette from "../../../../theme/IPalette.interface";
 
 interface QueueSelectProps {
-  faculty: number | null;
+  facultyId: number | null;
   queue: number | "none";
   register: UseFormRegister<ICreateTicketRequestBody>;
   setValue: UseFormSetValue<ICreateTicketRequestBody>;
   setQueue: (queue: number) => void;
 }
 
 const QueueSelect: FC<QueueSelectProps> = ({
-  faculty,
+  facultyId,
   register,
   setValue,
   queue,
@@ -42,13 +42,14 @@ const QueueSelect: FC<QueueSelectProps> = ({
 
   const handleChange = (event: SelectChangeEvent): void => {
     const selectedQueue: number = parseInt(event.target.value);
+
     setQueue(selectedQueue);
     setValue("queue", selectedQueue);
   };
 
   useEffect(() => {
-    faculty && getQueues({ body: JSON.stringify({ faculty: faculty }) });
-  }, [faculty, getQueues]);
+    facultyId && getQueues({ body: JSON.stringify({ faculty: facultyId }) });
+  }, [facultyId, getQueues]);
 
   useEffect(() => {
     if (isSuccess) {
@@ -62,7 +63,7 @@ const QueueSelect: FC<QueueSelectProps> = ({
 
   useEffect(() => {
     setValue("queue", null);
-  }, [setValue]);
+  }, []);
 
   const menuItems: JSX.Element[] = [];
   let currentScope: string | null = null;
@@ -97,17 +98,14 @@ const QueueSelect: FC<QueueSelectProps> = ({
       <FormControl
         fullWidth
         sx={{ bgcolor: palette.grey.card }}
-        {...register("queue", {
-          required: "This is required.",
-        })}
+        {...register("queue")}
       >
         <Select
           id="queue-select"
-          required
           value={queue.toString()}
           onChange={handleChange}
         >
-          <MenuItem value="none" disabled>
+          <MenuItem value={-1}>
             <ListItemText
               primary={t("createTicket.selectQueue")}
               primaryTypographyProps={{

src/Pages/CreateTicketForm/components/TicketBodyTextField/TicketBodyTextField.tsx

@@ -1,4 +1,11 @@
-import { FC, useState, useRef, MutableRefObject } from "react";
+import {
+  FC,
+  useState,
+  useRef,
+  MutableRefObject,
+  Dispatch,
+  SetStateAction,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { UseFormRegister } from "react-hook-form";
 
@@ -14,16 +21,21 @@ import { MarkdownControls } from "./components/MarkdownControls";
 
 interface TicketBodyTextFieldProps {
   register: UseFormRegister<ICreateTicketRequestBody>;
+  formattedText: string;
+  setFormattedText: Dispatch<SetStateAction<string>>;
 }
 
-const TicketBodyTextField: FC<TicketBodyTextFieldProps> = ({ register }) => {
+const TicketBodyTextField: FC<TicketBodyTextFieldProps> = ({
+  register,
+  formattedText,
+  setFormattedText,
+}) => {
   const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
 
   const inputRef: MutableRefObject<null | HTMLInputElement> = useRef(null);
 
   const [isPreview, setIsPreview] = useState(false);
-  const [formattedText, setFormattedText] = useState("");
 
   const placeholderText: string = t("createTicket.ticketBodyPlaceholder");
 

src/Pages/CreateTicketForm/ticketFormBody.interface.ts

@@ -4,7 +4,7 @@ interface ICreateTicketRequestBody {
   hidden: boolean;
   anonymous: boolean;
   queue: number | null;
-  faculty: string;
+  faculty: number;
 }
 
 interface IQueueData {