TIcket Page Layout

Controllers/TicketsController.cs

@@ -28,6 +28,8 @@ namespace TicketManager.Controllers
         {
             return await _context.Tickets
                 .Include(t => t.Project)
+                    .ThenInclude(p => p.Assignments)
+                        .ThenInclude(a => a.User)
                 .Include(t => t.Files)
                 .Include(t => t.Activities)
                 .Include(t => t.Notes)
@@ -42,6 +44,8 @@ namespace TicketManager.Controllers
         {
             var ticket = await _context.Tickets
                 .Include(t => t.Project)
+                    .ThenInclude(p => p.Assignments)
+                        .ThenInclude(a => a.User)
                 .Include(t => t.Files)
                 .Include(t => t.Activities)
                 .Include(t => t.Notes)

client/src/VM/TicketVM.ts

@@ -1,5 +1,33 @@
-export class TicketVM {
+import { Ticket } from "../types/Ticket";
-  public Id?: number;
+import { Project } from "../types/Project";
+import { User } from "../types/User";
 
-  public constructor() {}
+export class TicketVM {
+  public id: number;
+  public title: string;
+  public description: string;
+  public creationDate: string;
+  public endingDate: string;
+  public status: string;
+  public impact: string;
+  public difficulty: string;
+  public category: string;
+  public creatorId: string;
+  public project: Project;
+  public users: User[];
+
+  public constructor(ticket: Ticket) {
+    this.id = ticket.id;
+    this.title = ticket.title;
+    this.description = ticket.description;
+    this.creationDate = ticket.creationDate;
+    this.endingDate = ticket.endingDate;
+    this.status = ticket.status;
+    this.impact = ticket.impact;
+    this.difficulty = ticket.difficulty;
+    this.category = ticket.category;
+    this.creatorId = ticket.creatorId;
+    this.project = ticket.project;
+    this.users = ticket.users;
+  }
 }

client/src/components/AvatarList.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { User } from "../types/User";
+import { Link } from "react-router-dom";
 
 interface AvatarListProps {
   users: User[];
@@ -11,14 +12,15 @@ export const AvatarList: FC<AvatarListProps> = ({ users }) => {
   ) : (
     <>
       {users.map((user: User, i: number) => (
-        <img
+        <Link to={`/users/${user.id}`} key={i}>
-          key={i}
+          <img
-          className="circle"
+            className="circle"
-          src={user.picture}
+            src={user.picture}
-          width="32vh"
+            width="32vh"
-          height="32vh"
+            height="32vh"
-          alt={user.fullName}
+            alt={user.fullName}
-        />
+          />
+        </Link>
       ))}
     </>
   );

client/src/components/TicketList.tsx

@@ -75,6 +75,7 @@ export const TicketList: FC<TicketListProps> = ({
                 key={t.id}
                 title={t.title}
                 remainingDays={t.endingDate}
+                link={`/tickets/${t.id}`}
                 validateTicket={async (e: MouseEvent) => {
                   e.preventDefault();
                   await put<HttpResponse<Ticket>>(

client/src/controllers/UserController.tsx

@@ -8,9 +8,6 @@ import { Preloader } from "../components/Preloader";
 import { get } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { ErrorController } from "./ErrorController";
-// import { AppFile } from "../types/AppFile";
-// import { Activity } from "../types/Activity";
-// import { Ticket } from "../types/Ticket";
 
 export const UserController: FC = () => {
   const [isLoading, setIsLoading] = useState(true);
@@ -35,79 +32,6 @@ export const UserController: FC = () => {
     }
   }
 
-  // const user: User = {
-  //   id: "resldsm,dgd",
-  //   firstName: "Ti",
-  //   lastName: "Nyny",
-  //   fullName: "Nilka Netty Nemo",
-  //   presentation: "Woman of my life  ❤️❤️❤️",
-  //   creationDate: new Date().toDateString(),
-  //   email: "dw@mail.au",
-  //   phone: "0998765432",
-  //   picture: require("../images/user_1.jpg"),
-  //   projects: [
-  //     {
-  //       id: 1,
-  //       title: "OP Baby",
-  //       description: "What is it about",
-  //       progression: 25,
-  //       creationDate: new Date().toDateString(),
-  //       endingDate: "2020-02-17 15:51:02.787373",
-  //       status: "Todo",
-  //       manager: {} as User,
-  //       users: [] as User[],
-  //       tickets: [] as Ticket[],
-  //       files: [] as AppFile[],
-  //       activities: [] as Activity[]
-  //     }
-  //   ],
-  //   tickets: [
-  //     {
-  //       id: 1,
-  //       title: "Client objective meeting",
-  //       description: "Client objective meeting",
-  //       endingDate: "2020-02-17 15:51:02.787373",
-  //       status: "Done",
-  //       project: {
-  //         id: 1,
-  //         title: "Project Title",
-  //         description: "What is it about",
-  //         progression: 25,
-  //         creationDate: new Date().toDateString(),
-  //         endingDate: "2020-02-17 15:51:02.787373",
-  //         status: "Todo",
-  //         manager: {} as User,
-  //         users: [] as User[],
-  //         tickets: [] as Ticket[],
-  //         files: [] as AppFile[],
-  //         activities: [] as Activity[]
-  //       }
-  //     },
-  //     {
-  //       id: 2,
-  //       title: "Assemble Outcomes Report for client",
-  //       description: "Assemble Outcomes Report for client",
-  //       endingDate: "2020-02-27 15:51:02.787373",
-  //       status: "To Do",
-  //       project: {
-  //         id: 1,
-  //         title: "Project Title",
-  //         description: "What is it about",
-  //         progression: 25,
-  //         creationDate: new Date().toDateString(),
-  //         endingDate: "2020-02-17 15:51:02.787373",
-  //         status: "Todo",
-  //         manager: {} as User,
-  //         users: [] as User[],
-  //         tickets: [] as Ticket[],
-  //         files: [] as AppFile[],
-  //         activities: [] as Activity[]
-  //       }
-  //     }
-  //   ],
-  //   activities: []
-  // };
-
   useEffect(() => {
     if (id !== undefined) {
       httpGetUser(id);

client/src/pages/TicketPage.tsx

@@ -1,23 +1,20 @@
 import React, { FC } from "react";
 import { Header } from "../components/Header";
 import { AvatarList } from "../components/AvatarList";
-import { ProgressBar } from "../components/ProgressBar";
+import { TicketVM } from "../VM/TicketVM";
 
-export const TicketPage: FC = () => {
+interface IProps {
+  viewModel: TicketVM;
+}
+
+export const TicketPage: FC<IProps> = ({ viewModel }) => {
+  const { title, description, users } = viewModel;
   return (
-    <>
+    <div className="section">
-      <Header
+      <div className="container">
-        description="Research, ideate and present brand concepts for client consideration"
+        <Header title={title} description={description} />
-        title="Brand Concept and Design"
+        <AvatarList users={users} />
-      />
+      </div>
-      {/* <AvatarList users={["../images/user_1.jpg", "../images/user_2.jpg"]} /> */}
+    </div>
-      <ProgressBar value={60} />
-      {/* // <TabView>
-        //     <ChildTicket/>
-        //     <ChildFile/>
-        //     <ChildActivity/>
-        // </TabView>
-        // <Notes/> */}
-    </>
   );
 };

client/src/types/Ticket.ts

@@ -1,10 +1,17 @@
 import { Project } from "./Project";
+import { User } from "./User";
 
 export interface Ticket {
   id: number;
   title: string;
   description: string;
-  status: string;
+  creationDate: string;
   endingDate: string;
+  status: string;
+  impact: string;
+  difficulty: string;
+  category: string;
+  creatorId: string;
   project: Project;
+  users: User[];
 }

client/src/utils/router.tsx

@@ -7,13 +7,12 @@ import {
   //Link, NavLink
 } from "react-router-dom";
 import * as creacteHistory from "history";
-// import { TicketPage } from "../pages/TicketPage";
 // import { HomeController } from "../controllers/HomeController";
 import { ProjectController } from "../controllers/ProjectController";
+import { UserController } from "../controllers/UserController";
+import { TicketController } from "../controllers/TicketController";
 import { NotFoundPage } from "../pages/NotFoundPage";
 import { TestPage } from "../pages/TestPage";
-import { UserController } from "../controllers/UserController";
-// import { TicketController } from "../controllers/TicketController";
 
 export const history = creacteHistory.createBrowserHistory();
 
@@ -35,9 +34,9 @@ export const AppRouter = () => {
           <Route path="/projects/:id">
             <ProjectController />
           </Route>
-          {/* <Route path="/tickets/:id">
+          <Route path="/tickets/:id">
             <TicketController />
-          </Route>  */}
+          </Route>
 
           <Route path="/401">
             <NotFoundPage />