Refactor projects page

app/controllers/internal_api/v1/projects_controller.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class InternalApi::V1::ProjectsController < InternalApi::V1::ApplicationController
+  def index
+    authorize Project
+
+    render json: { projects: projects }, status: :ok
+  end
+
+  def show
+    authorize Project
+
+    render json: { project: project }, status: :ok
+  end
+
+  private
+    def projects
+      projects = current_user.current_workspace.projects
+      projects.kept.map { | project |
+                            { id: project.id,
+                              name: project.name,
+                              clientName: project.client.name,
+                              isBillable: project.billable,
+                              minutesSpent: project.total_hours_logged } }
+    end
+
+    def project
+      project = Project.find(params[:id])
+      project_members = project.project_member_details.map { | member |
+                          { name: member[:name],
+                           hourlyRate: member[:hourly_rate],
+                           minutesSpent: member[:minutes_spent],
+                           cost: member[:hourly_rate] * member[:minutes_spent] / 60 }}
+      { id: project.id,
+        name: project.name,
+        clientName: project.client.name,
+        isBillable: project.billable,
+        minutesSpent: project.total_hours_logged,
+        projectMembers:  project_members }
+    end
+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 projects = { get, show };
+
+export default projects;

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ToastContainer } from "react-toastify";
+import { setAuthHeaders, registerIntercepts } from "apis/axios";
+import projects from "apis/projects";
+import { Project } from "./project";
+import ProjectDetails from "./projectDetails";
+import ProjectList from "./projectList";
+
+const Projects = ({ editIcon, deleteIcon, isAdminUser }) => {
+  const [allProjects, setAllProjects] = React.useState([]);
+  const [showProjectDetails, setShowProjectDetails] = React.useState(null);
+
+  const fetchProjects = () => {
+
+    projects.get()
+      .then(res => setAllProjects(res.data.projects))
+      .catch(err => console.log(err));
+
+  };
+
+  React.useEffect(() => {
+    setAuthHeaders();
+    registerIntercepts();
+    fetchProjects();
+  }, []);
+
+  const projectClickHandler = (id) => {
+    setShowProjectDetails(id);
+  };
+
+  return (
+    showProjectDetails ?
+      <ProjectDetails
+        id={showProjectDetails}
+        isAdminUser={isAdminUser}
+        editIcon={editIcon}
+        deleteIcon={deleteIcon}/> :
+      <ProjectList
+        allProjects={allProjects}
+        isAdminUser={isAdminUser}
+        projectClickHandler={projectClickHandler}/>
+  );
+
+};
+
+export default Projects;

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,90 @@
+import * as React from "react";
+import { setAuthHeaders, registerIntercepts } from "apis/axios";
+import projectsAPI from "apis/projects";
+import { Member } from "./member";
+import { minutesToHHMM } from "../../helpers/hhmm-parser";
+
+const ProjectDetails = ({ id, editIcon, deleteIcon, isAdminUser }) => {
+
+  const [project, setProject] = React.useState({});
+
+  const fetchProject = () => {
+    projectsAPI.show(id)
+      .then(res => setProject(res.data.project))
+      .catch (err => {console.log(err);});
+  };
+
+  React.useEffect(() => {
+    setAuthHeaders();
+    registerIntercepts();
+    fetchProject();
+  }, []);
+
+  return (
+
+    <>
+      <div>Showing details for project {id}</div>
+      <div>Project-name: {project.name}</div>
+      <div>Project name: {project.name}</div>
+      <div>Client name: {project.clientName}</div>
+      <div>Billable: {project.isBillable}</div>
+      <div>Minutes spent(week): {project.minutesSpent}</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?.projectMembers?.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;

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { ToastContainer } from "react-toastify";
+import { Project } from "./project";
+
+export const ProjectList = ({ allProjects, isAdminUser, projectClickHandler }) => (
+  <>
+    <ToastContainer />
+    <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"
+                  >
+                      PROJECT/CLIENT
+                  </th>
+                  <th
+                    scope="col"
+                    className="table__header"
+                  >
+
+                  </th>
+                  <th
+                    scope="col"
+                    className="table__header text-right"
+                  >
+                      HOURS LOGGED
+                  </th>
+                  <th scope="col" className="table__header"></th>
+                  <th scope="col" className="table__header"></th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {allProjects.map((project, index) => (
+                  <Project
+                    key={index}
+                    {...project}
+                    isAdminUser={isAdminUser}
+                    projectClickHandler={projectClickHandler}
+                    /* editIcon={editIcon}
+                      deleteIcon={deleteIcon}
+                      setShowEditDialog={setShowEditDialog}
+                      setProjectToEdit={setProjectToEdit}
+                      setShowDeleteDialog={setShowDeleteDialog}
+                      setProjectToDelete={setProjectToDelete} */
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    {/* {showEditDialog ? (
+        <EditProject
+          setShowEditDialog={setShowEditDialog}
+          project={projectToEdit}
+        />
+      ) : null}
+      {showDeleteDialog && (
+        <DeleteProject
+          setShowDeleteDialog={setShowDeleteDialog}
+          project={projectToDelete}
+        />
+      )} */}
+  </>
+);
+
+export default ProjectList;

app/models/project.rb

@@ -41,6 +41,34 @@ def project_member_full_names
     end
   end
 
+  def total_hours_logged(time_frame = "week")
+    from, to = week_month_year(time_frame)
+    timesheet_entries.where(work_date: from..to).sum(:duration)
+  end
+
+  def project_member_details
+    project_members.map do |member|
+      user = User.find(member.user_id)
+      { name: user.full_name,
+       hourly_rate: member.hourly_rate,
+       minutes_spent: user.timesheet_entries.where(project_id: self.id).sum(:duration) }
+    end
+  end
+
+  # Move weeK_month_year method copied from client.rb to common place
+  def week_month_year(time_frame)
+    case time_frame
+    when "last_week"
+      return ((Date.today.beginning_of_week) - 7), ((Date.today.end_of_week) - 7)
+    when "month"
+      return Date.today.beginning_of_month, Date.today.end_of_month
+    when "year"
+      return Date.today.beginning_of_year, Date.today.end_of_year
+    else
+      return Date.today.beginning_of_week, Date.today.end_of_week
+    end
+  end
+
   private
     def discard_project_members
       project_members.discard_all