Refactor projects page

app/controllers/internal_api/v1/projects_controller.rb

@@ -1,13 +1,22 @@
 # frozen_string_literal: true
 
 class InternalApi::V1::ProjectsController < InternalApi::V1::ApplicationController
+  def index
+    authorize Project
+    render :index, locals: { projects: }, status: :ok
+  end
+
   def show
     authorize Project
     render :show, locals: { project: }, status: :ok
   end
 
   private
 
+    def projects
+      @_projects ||= current_company.projects.kept
+    end
+
     def project
       @_project ||= Project.includes(:project_members, project_members: [:user]).find(params[:id])
     end

app/controllers/projects_controller.rb

@@ -4,8 +4,7 @@ class ProjectsController < ApplicationController
   skip_after_action :verify_authorized
 
   def index
-    @query = Project.ransack(params[:q])
-    @projects = @query.result(distinct: true)
+    authorize Project
   end
 
   def create

app/javascript/src/apis/projects.ts

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const path = "/projects";
+
+const get = async () => axios.get(`${path}`);
+
+const show = async id => axios.get(`${path}/${id}`);
+
+const projectApi = { get, show };
+
+export default projectApi;

app/javascript/src/components/Projects/index.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { setAuthHeaders, registerIntercepts } from "apis/axios";
+import projectApi from "apis/projects";
+import { IProject } from "./project";
+import ProjectDetails from "./projectDetails";
+import ProjectList from "./projectList";
+
+const Projects = ({ editIcon, deleteIcon, isAdminUser }) => {
+  const [projects, setProjects] = React.useState<IProject[]>([]);
+  const [showProjectDetails, setShowProjectDetails] = React.useState(null);
+
+  const fetchProjects = async () => {
+
+    try {
+      const resp = await projectApi.get();
+      setProjects(resp.data.projects);
+    } catch (error)
+    {
+      // Add error handling
+    }
+
+  };
+
+  React.useEffect(() => {
+    setAuthHeaders();
+    registerIntercepts();
+    fetchProjects();
+  }, []);
+
+  const projectClickHandler = (id) => {
+    setShowProjectDetails(id);
+  };
+
+  return (
+    showProjectDetails ?
+      <ProjectDetails
+        id={showProjectDetails}
+        isAdminUser={isAdminUser}
+        editIcon={editIcon}
+        deleteIcon={deleteIcon}/> :
+      <ProjectList
+        allProjects={projects}
+        isAdminUser={isAdminUser}
+        projectClickHandler={projectClickHandler}/>
+  );
+
+};
+
+export default Projects;

app/javascript/src/components/Projects/member.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { minutesToHHMM } from "helpers/hhmm-parser";
+
+export interface IMember {
+  id: number;
+  name: string;
+  hourly_rate: number;
+  minutes_logged: number;
+  editIcon: string;
+  deleteIcon: string;
+  isAdminUser: boolean;
+  setShowEditDialog: any;
+  setMemberToEdit: any;
+  setMemberToDelete: any;
+  setShowDeleteDialog: any;
+}
+
+export const Member = ({
+  id,
+  name,
+  hourly_rate,
+  minutes_logged,
+  editIcon,
+  deleteIcon,
+  isAdminUser,
+  setShowEditDialog,
+  setMemberToEdit,
+  setMemberToDelete,
+  setShowDeleteDialog
+}: IMember) => {
+  const [grayColor, setGrayColor] = React.useState<string>("");
+  const [isHover, setHover] = React.useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setGrayColor("bg-miru-gray-100");
+    setHover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setGrayColor("");
+    setHover(false);
+  };
+
+  return (
+    <tr key={id}
+      className={`last:border-b-0 ${grayColor}`}
+      onMouseLeave={handleMouseLeave}
+      onMouseEnter={handleMouseEnter}>
+      <td className="table__cell text-base">
+        {name}
+      </td>
+      <td className="table__cell text-xs">
+        {hourly_rate}
+      </td>
+      <td className="table__cell text-xl text-right font-bold">
+        {minutesToHHMM(minutes_logged)}
+      </td>
+      <td className="table__cell text-xl text-right font-bold">
+        {minutes_logged * hourly_rate}
+      </td>
+      <td className="table__cell px-3 py-3">
+        {isAdminUser && isHover && <button
+          onClick={() => {
+            setShowEditDialog(true);
+            setMemberToEdit({ id, name, hourly_rate });
+          }}
+        >
+          <img src={editIcon} alt="" />
+        </button>
+        }
+      </td>
+      <td className="table__cell px-3 py-3">
+        { isAdminUser && isHover && <button
+          onClick={() => {
+            setShowDeleteDialog(true);
+            setMemberToDelete({ id, name });
+          }}
+        >
+          <img src={deleteIcon} alt="" />
+        </button>
+        }
+      </td>
+    </tr>
+  );
+};

app/javascript/src/components/Projects/project.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { minutesToHHMM } from "helpers/hhmm-parser";
+
+export interface IProject {
+  id: number;
+  name: string;
+  clientName: string;
+  isBillable: boolean;
+  minutesSpent: number;
+  editIcon: string;
+  deleteIcon: string;
+  isAdminUser: boolean;
+  setShowEditDialog: any;
+  setProjectToEdit: any;
+  setProjectToDelete: any;
+  setShowDeleteDialog: any;
+  projectClickHandler: any;
+}
+
+export const Project = ({
+  id,
+  name,
+  clientName,
+  minutesSpent,
+  isBillable,
+  editIcon,
+  deleteIcon,
+  isAdminUser,
+  projectClickHandler,
+  setShowEditDialog,
+  setProjectToEdit,
+  setProjectToDelete,
+  setShowDeleteDialog
+}: IProject) => {
+  const [grayColor, setGrayColor] = React.useState<string>("");
+  const [isHover, setHover] = React.useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setGrayColor("bg-miru-gray-100");
+    setHover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setGrayColor("");
+    setHover(false);
+  };
+
+  return (
+    <tr key={id}
+      className={`last:border-b-0 ${grayColor}`}
+      onMouseLeave={handleMouseLeave}
+      onMouseEnter={handleMouseEnter}
+      onClick={() => projectClickHandler(id)}>
+      <td className="table__cell text-base">
+        {name}"  "{clientName}
+      </td>
+      <td className="table__cell text-xs">
+        {isBillable}
+      </td>
+      <td className="table__cell text-xl text-right font-bold">
+        {minutesToHHMM(minutesSpent)}
+      </td>
+      <td className="table__cell px-3 py-3">
+        {isAdminUser && isHover && <button
+          onClick={() => {
+            setShowEditDialog(true);
+            setProjectToEdit({ id, name, isBillable });
+          }}
+        >
+          <img src={editIcon} alt="" />
+        </button>
+        }
+      </td>
+      <td className="table__cell px-3 py-3">
+        { isAdminUser && isHover && <button
+          onClick={() => {
+            setShowDeleteDialog(true);
+            setProjectToDelete({ id, name });
+          }}
+        >
+          <img src={deleteIcon} alt="" />
+        </button>
+        }
+      </td>
+    </tr>
+  );
+};

app/javascript/src/components/Projects/projectDetails.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { setAuthHeaders, registerIntercepts } from "apis/axios";
+import projectAPI from "apis/projects";
+import { Member } from "./member";
+
+export interface IProjectDetails {
+  id: number;
+  name: string;
+  client: any;
+  is_billable: boolean;
+  total_minutes_logged: number;
+  members: any;
+  editIcon: string;
+  deleteIcon: string;
+  isAdminUser: boolean;
+  setShowEditDialog: any;
+  setProjectToEdit: any;
+  setProjectToDelete: any;
+  setShowDeleteDialog: any;
+  projectClickHandler: any;
+}
+
+const ProjectDetails = ({ id, editIcon, deleteIcon, isAdminUser }) => {
+
+  const [project, setProject] = React.useState<IProjectDetails>();
+
+  const fetchProject = async () => {
+
+    try {
+      const resp = await projectAPI.show(id);
+      setProject(resp.data.project_details);
+    } catch (err) {
+      // Add error handling
+    }
+
+  };
+
+  React.useEffect(() => {
+    setAuthHeaders();
+    registerIntercepts();
+    fetchProject();
+  }, []);
+
+  return (
+    <>
+      <div>Showing details for project {id}</div>
+      <div>Project name: {project?.name}</div>
+      <div>Client name: {project?.client.name}</div>
+      <div>Billable: {project?.is_billable}</div>
+      <div>Minutes spent(week): {project?.total_minutes_logged}</div>
+      <div className="flex flex-col">
+        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+            <div className="overflow-hidden">
+              <table className="min-w-full divide-y divide-gray-200 mt-4">
+                <thead>
+                  <tr>
+                    <th
+                      scope="col"
+                      className="table__header"
+                    >
+                      MEMBER
+                    </th>
+                    <th
+                      scope="col"
+                      className="table__header"
+                    >
+                    HOURLY RATE
+                    </th>
+                    <th
+                      scope="col"
+                      className="table__header text-right"
+                    >
+                      HOURS LOGGED
+                    </th>
+                    <th scope="col" className="table__header">
+                    COST
+                    </th>
+                    <th scope="col" className="table__header"></th>
+                  </tr>
+                </thead>
+
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {project?.members?.map((member, index) => (
+                    <Member
+                      key={index}
+                      {...member}
+                      isAdminUser={isAdminUser}
+                      editIcon={editIcon}
+                      deleteIcon={deleteIcon}
+                      /*  setShowEditDialog={setShowEditDialog}
+                    setProjectToEdit={setProjectToEdit}
+                    setShowDeleteDialog={setShowDeleteDialog}
+                    setProjectToDelete={setProjectToDelete} */
+                    />
+                  ))
+                  }
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </>
+  );
+
+};
+export default ProjectDetails;