handled project selector in newticketform

Program.cs

@@ -1,7 +1,3 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.Hosting;

README.md

@@ -50,3 +50,4 @@
 - [<span style="color:red">X</span>] write dtos without circular dependencies.
 - [ ] use dtoRequest for PutProjects
 - [ ] render avatarlist after UserModal Update
+- [ ] Form validators

Resources/AppUser/NewAppUserDTO.cs

@@ -4,10 +4,11 @@ namespace TicketManager.Resources
 {
     public class NewAppUserDTO
     {
+        [Required]
         public string FirstName { get; set; }
         public string LastName { get; set; }
         public string Presentation { get; set; }
-
+        [Required]
         [DataType(DataType.EmailAddress)]
         public string Email { get; set; }
 

Resources/Project/NewProjectDTO.cs

@@ -8,7 +8,9 @@ namespace TicketManager.Resources
         [Required]
         public string Title { get; set; }
         public string Description { get; set; }
+        [Required]
         public DateTime EndingDate { get; set; }
+        [Required]
         public Guid ManagerId { get; set; }
     }
 }

Resources/Tickets/NewTicketDTO.cs

@@ -8,10 +8,11 @@ namespace TicketManager.Resources
 {
     public class NewTicketDTO
     {
+        [Required]
         public string Title { get; set; }
-
+        [Required]
         public string Description { get; set; }
-
+        [Required]
         [DataType(DataType.Date)]
         public DateTime EndingDate { get; set; }
 
@@ -20,8 +21,9 @@ namespace TicketManager.Resources
         public string Difficulty { get; set; }
 
         public string Category { get; set; }
-
+        [Required]
         public Guid CreatorId { get; set; }
+        [Required]
         public int ProjectId { get; set; }
     }
 }

client/src/VM/ProjectVM.ts

@@ -6,7 +6,7 @@ import { User } from "../types/User";
 import { getRemainingdays } from "../utils/methods";
 
 export default class ProjectVM {
-  // public id: number;
+  public id: number;
   public title: string;
   public description: string;
   public creationDate: string;
@@ -22,9 +22,14 @@ export default class ProjectVM {
   public ticketsTotalCount: number;
   public ticketsDone: number;
   public remainingDays: number;
+  public allProjects: Project[];
 
-  public constructor(project: Project, allUsers: User[]) {
+  public constructor(
-    // this.id = project.id;
+    project: Project,
+    allUsers: User[],
+    allProjects: Project[]
+  ) {
+    this.id = project.id;
     this.title = project.title;
     this.description = project.description;
     this.creationDate = project.creationDate;
@@ -44,5 +49,6 @@ export default class ProjectVM {
         ? 0
         : this.tickets.filter(t => t.status === "Done").length;
     this.remainingDays = getRemainingdays(project.endingDate);
+    this.allProjects = allProjects;
   }
 }

client/src/components/Avatar.tsx

@@ -6,7 +6,13 @@ interface IProps {
 export const Avatar: FC<IProps> = ({ picture }) => {
   return (
     <>
-      <img className="circle" src={picture} height="100vh" width="100vh" />
+      <img
+        className="circle"
+        src={picture}
+        height="100vh"
+        width="100vh"
+        alt="user avatar"
+      />
     </>
   );
 };

client/src/components/NewTicketForm.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { Project } from "../types/Project";
 
 interface IProps {
   title: string;
@@ -7,6 +8,9 @@ interface IProps {
   setDescription: React.Dispatch<React.SetStateAction<string>>;
   endingDate: string;
   setEndingDate: React.Dispatch<React.SetStateAction<string>>;
+  allProjects: Project[];
+  projectId: string;
+  setProjectId: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export const NewTicketForm: FC<IProps> = ({
@@ -15,7 +19,10 @@ export const NewTicketForm: FC<IProps> = ({
   description,
   setDescription,
   endingDate,
-  setEndingDate
+  setEndingDate,
+  allProjects,
+  projectId,
+  setProjectId
 }) => {
   return (
     <>
@@ -62,13 +69,23 @@ export const NewTicketForm: FC<IProps> = ({
         </div>
 
         <div className="input-field">
-          <select id="project" className="browser-default">
+          <select
-            <option value="" disabled selected>
+            id="project"
+            className="browser-default"
+            value={projectId}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+              e.preventDefault();
+              setProjectId(e.target.value);
+            }}
+          >
+            <option value={0} disabled>
               Project
             </option>
-            <option value="1">Option 1</option>
+            {allProjects.map(p => (
-            <option value="2">Option 2</option>
+              <option key={p.id} value={p.id}>
-            <option value="3">Option 3</option>
+                {p.title}
+              </option>
+            ))}
           </select>
         </div>
       </div>

client/src/components/NewTicketModal.tsx

@@ -5,16 +5,23 @@ import { post } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { HttpResponse } from "../types/HttpResponse";
 import { NewTicketForm } from "./NewTicketForm";
+import { Project } from "../types/Project";
 
 interface IProps {
   show: boolean;
   handleClose(): void;
+  allProjects: Project[];
 }
 
-export const NewTicketModal: FC<IProps> = ({ show, handleClose }) => {
+export const NewTicketModal: FC<IProps> = ({
+  show,
+  handleClose,
+  allProjects
+}) => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [endingDate, setEndingDate] = useState("");
+  const [projectId, setProjectId] = useState("0");
 
   const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
     e: FormEvent
@@ -25,7 +32,7 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose }) => {
       description: description,
       endingDate: new Date(endingDate).toISOString(),
       creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94",
-      projectId: 1
+      projectId: parseInt(projectId)
     };
     // console.log(newTicket);
     const response: HttpResponse<Ticket> = await post<Ticket>(
@@ -63,6 +70,9 @@ export const NewTicketModal: FC<IProps> = ({ show, handleClose }) => {
             setDescription={setDescription}
             endingDate={endingDate}
             setEndingDate={setEndingDate}
+            allProjects={allProjects}
+            projectId={projectId}
+            setProjectId={setProjectId}
           />
         </div>
 

client/src/components/NewTicketTabRouter.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react";
 import { useRouteMatch } from "react-router-dom";
 import { TabRouterHeader } from "./TabRouterHeader";
-import { NewTicketForm } from "./NewTicketForm";
 
 interface IProps {
   tabNames: string[];
@@ -28,14 +27,14 @@ export const NewTicketTabRouter: FC<IProps> = ({
       <div className="row">
         <TabRouterHeader tabNames={tabNames} />
 
-        <NewTicketForm
+        {/* <NewTicketForm
           title={title}
           setTitle={setTitle}
           description={description}
           setDescription={setDescription}
           endingDate={endingDate}
           setEndingDate={setEndingDate}
-        />
+        /> */}
       </div>
     </>
   );

client/src/components/TabRouter.tsx

@@ -7,6 +7,7 @@ import { FileList } from "./AppFileList";
 import { Ticket } from "../types/Ticket";
 import { AppFile } from "../types/AppFile";
 import { Activity } from "../types/Activity";
+import { Project } from "../types/Project";
 
 interface IProps {
   tickets: Ticket[];
@@ -14,13 +15,15 @@ interface IProps {
   tabNames: string[];
   files: AppFile[];
   activities: Activity[];
+  allProjects: Project[];
 }
 
 export const TabRouter: FC<IProps> = ({
   tickets,
   tabNames,
   files,
-  activities
+  activities,
+  allProjects
 }) => {
   const { url } = useRouteMatch();
 
@@ -32,7 +35,7 @@ export const TabRouter: FC<IProps> = ({
         <Redirect from={url} to={`${url}/tickets`} />
 
         <Route path={`${url}/tickets`}>
-          <TicketList tickets={tickets} />
+          <TicketList tickets={tickets} allProjects={allProjects} />
         </Route>
 
         <Route path={`${url}/files`}>

client/src/components/TicketList.tsx

@@ -7,12 +7,14 @@ import { HttpResponse } from "../types/HttpResponse";
 import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { NewTicketModal } from "./NewTicketModal";
+import { Project } from "../types/Project";
 
 type TicketListProps = {
   tickets: Ticket[];
+  allProjects: Project[];
 };
 
-export const TicketList: FC<TicketListProps> = ({ tickets }) => {
+export const TicketList: FC<TicketListProps> = ({ tickets, allProjects }) => {
   const [filterText, setFilterText] = useState<string>("");
   const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
     setFilterText("");
@@ -42,6 +44,7 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
             setShowNew(false);
           }}
           show={showNew}
+          allProjects={allProjects}
         />
         <h3>Tickets</h3>
         <FloatingButton

client/src/components/UserTabRouter.tsx

@@ -4,6 +4,7 @@ import { TabRouterHeader } from "./TabRouterHeader";
 import { ProjectList } from "./ProjectList";
 import { Ticket } from "../types/Ticket";
 import { Project } from "../types/Project";
+import { TicketList } from "./TicketList";
 
 interface IProps {
   tabNames: string[];
@@ -25,9 +26,9 @@ export const UserTabRouter: FC<IProps> = ({ tickets, tabNames, projects }) => {
           <ProjectList projects={projects} />
         </Route>
 
-        {/* <Route path={`${url}/tickets`}>
+        <Route path={`${url}/tickets`}>
-          <TicketList tickets={tickets} />
+          <TicketList tickets={tickets} allProjects={[]} />
-        </Route> */}
+        </Route>
       </div>
     </>
   );

client/src/controllers/ProjectController.tsx

@@ -13,6 +13,7 @@ import { User } from "../types/User";
 export const ProjectController: FC = () => {
   const [project, setProject] = useState<Project>({} as Project);
   const [allUsers, setAllUsers] = useState<User[]>([]);
+  const [allProjects, setAllProjects] = useState<Project[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
   const [error, setError] = useState("");
@@ -48,10 +49,25 @@ export const ProjectController: FC = () => {
     }
   }
 
+  async function httpGetAllProjects(): Promise<void> {
+    try {
+      const response: HttpResponse<Project> = await get<Project>(
+        `${Constants.projectsURI}`
+      );
+      if (response.parsedBody !== undefined) {
+        setAllProjects((response.parsedBody as unknown) as Project[]);
+      }
+    } catch (ex) {
+      setHasError(true);
+      setError(ex);
+    }
+  }
+
   useEffect(() => {
     if (id !== undefined) {
       httpGetProjects(id);
       httpGetAllUsers();
+      httpGetAllProjects();
     } else {
       setHasError(true);
       setError("Bad Request");
@@ -61,6 +77,6 @@ export const ProjectController: FC = () => {
   if (hasError) {
     return <ErrorController error={error} />;
   }
-  const viewModel = new ProjectVM(project, allUsers);
+  const viewModel = new ProjectVM(project, allUsers, allProjects);
   return isLoading ? <Preloader /> : <ProjectPage viewModel={viewModel} />;
 };

client/src/pages/ProjectPage.tsx

@@ -13,6 +13,7 @@ interface IProps {
 
 export const ProjectPage: FC<IProps> = ({ viewModel }) => {
   const {
+    // id,
     title,
     description,
     users,
@@ -23,7 +24,8 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     ticketsTotalCount,
     remainingDays,
     files,
-    activities
+    activities,
+    allProjects
   } = viewModel;
 
   const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"];
@@ -59,6 +61,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           tickets={tickets}
           files={files}
           activities={activities}
+          allProjects={allProjects}
         />
       </div>
     </div>

client/src/pages/UserPage.tsx

@@ -23,10 +23,6 @@ export const UserPage: FC<IProps> = ({ viewModel }) => {
           tickets={tickets}
         />
       </div>
-      {/* // <TabView>
-    //     <CardList>
-    //     <CardList>
-    // </TabView> */}
     </div>
   );
 };