Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI/project list page updations #281

Merged
merged 5 commits into from
Apr 18, 2022
Merged

UI/project list page updations #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5cd4092
Project list ADD/Edit Modal
Apr 15, 2022
820d4d8
Updated code
Apr 15, 2022
af80fab
Fixed eslint issues and changed folder structure
Apr 15, 2022
2f5f925
Added functions for integrating API
Apr 18, 2022
df96acd
API integration
Apr 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/javascript/src/components/Projects/List/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const ProjectList = ({ allProjects, isAdminUser, projectClickHandler }) =
showProjectModal &&
<AddEditProject
setShowProjectModal={setShowProjectModal}
setEditProjectData={setEditProjectData}
editProjectData={editProjectData}
/>
}
Expand Down
10 changes: 5 additions & 5 deletions app/javascript/src/components/Projects/List/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { IProject } from "../interface";
export const Project = ({
id,
name,
clientName,
client,
minutesSpent,
isBillable,
isAdminUser,
Expand Down Expand Up @@ -34,10 +34,10 @@ export const Project = ({
onMouseEnter={handleMouseEnter}
onClick={() => projectClickHandler(id)}>
<td className="table__cell text-base">
{name}" "{clientName}
{name}
</td>
<td className="table__cell text-xs">
{isBillable}
<td className="table__cell text-right">
{isBillable && <span className="px-1 tracking-widest rounded-lg text-xs font-semibold leading-4 bg-miru-han-purple-100 text-miru-han-purple-1000">Billable</span>}
</td>
<td className="table__cell text-xl text-right font-bold">
{minutesToHHMM(minutesSpent)}
Expand All @@ -48,7 +48,7 @@ export const Project = ({
e.preventDefault();
e.stopPropagation();
setShowProjectModal(true);
setEditProjectData({ id,name,clientName,isBillable });
setEditProjectData({ id,name,client,isBillable });
}}
>
<Pen size={16} color="#5B34EA" />
Expand Down
118 changes: 64 additions & 54 deletions app/javascript/src/components/Projects/Modals/AddEditProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,62 @@
import React, { useEffect, useState } from "react";

import Select from "react-select";
import projectApi from "apis/projects";
import { X } from "phosphor-react";

const AddEditProject = ({ editProjectData, setShowProjectModal }) => {
const AddEditProject = ({ setEditProjectData, editProjectData, setShowProjectModal }) => {

const [client, setClient] = useState<any>();
const [projectName, setProjectName] = useState<any>();
const [client, setClient] = useState<any>(null);
const [projectName, setProjectName] = useState<any>(null);
const [projectType, setProjectType] = useState<any>("Billable");
const [clientList, setClientList] = useState<any>(null);

useEffect(() => {
const getClientList = async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why write a function for this?
Also code should be
await projectApi.get() .then(res => {// set state}) .catch(e => {//error handling}

Copy link
Contributor

@shivamsinghchahar shivamsinghchahar Apr 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ajinkyaa Why use .then and .catch with await?

We should not be using .then and .catch with async/await. It defeats the whole purpose of having async/await in the first place.

We should write it like this:

const fetchClients = async () => {
  try {
    const data = await projectApi.get();
    // state updates
  } catch {
    // handle errors
  }
}

cc// @Shruti-Apte

const data = await projectApi.get();
setClientList(data.data.clients);
};
getClientList();
}, []);

setClient(editProjectData.clientName);
setProjectName(editProjectData.name);
setProjectType(editProjectData.isBillable ? "Billable" : "Non-Billable");
}, [editProjectData]);
useEffect(() => {
if (editProjectData) {
if (clientList) {
const client = clientList.filter(client => client.name == editProjectData.client.name);
setClient(client[0].id);
}
setProjectName(editProjectData.name ? editProjectData.name : null);
setProjectType(editProjectData.isBillable ? "Billable" : "Non-Billable");
}
}, [editProjectData, clientList]);

const handleEdit = () => {
projectApi.update(editProjectData.id, {
project: {
"client_id": client,
"name": projectName,
"billable": projectType === "Billable"
}
}).then(() => {
setEditProjectData("");
setShowProjectModal(false);
window.location.reload();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why reload the window?

});
};

const handleSubmit = () => {
projectApi.create({
project: {
"client_id": client,
"name": projectName,
"billable": projectType === "Billable"
}
}).then(() => {
setEditProjectData("");
window.location.reload();
setShowProjectModal(false);
});
};

return (
<div className="modal__modal main-modal" style={{ background: "rgba(29, 26, 49,0.6)" }}>
Expand All @@ -25,7 +67,10 @@ const AddEditProject = ({ editProjectData, setShowProjectModal }) => {
<div className="modal__close">
<button
className="modal__button"
onClick={() => setShowProjectModal(false)}
onClick={() => {
setEditProjectData("");
setShowProjectModal(false);
}}
>
<X size={15} color="#CDD6DF" />
</button>
Expand All @@ -40,49 +85,14 @@ const AddEditProject = ({ editProjectData, setShowProjectModal }) => {
</label>
</div>
<div className="mt-1">
<Select
<select
defaultValue={client}
onChange={e => { setClient(e); }}
options={[{ value: "Client1", label: "client1" }, { value: "Client2", label: "client2" }]}
placeholder="Select Client"
isSearchable={true}
components={{
IndicatorSeparator: () => null
}}
styles={{
option: (styles, { isSelected }) => ({
...styles,
backgroundColor: isSelected ? "#F5F7F9" : null,
color: isSelected ? "miru-dark-purple-1000" : null,
height: "40px",
"&:hover": {
backgroundColor: "#F5F7F9"
}
}),
control: (base, state) => ({
...base,
backgroundColor: "#F5F7F9",
borderColor: "#F5F7F9",
boxShadow: state.isFocused ? "0px" : "0px",
border: state.isFocused ? "0px" : "0px",
"&:hover": {
border: state.isFocused ? "0px" : "0px"
}
}),
placeholder: defaultStyles => ({
...defaultStyles,
color: "#A5A3AD",
fontWeight: "500",
fontSize: "16px"
}),
menu: base => ({
...base,
marginTop: 0,
border: 0,
borderRadius: "4px"
})
}}
/>
className="rounded border-0 block w-full px-2 py-1 bg-miru-gray-100 h-8 font-medium text-sm text-miru-dark-purple-1000 focus:outline-none sm:text-base"
onChange={(e) => setClient(e.target.value)}>
<option value='0'>Select Client</option>
{clientList &&
clientList.map(e => <option value={e.id} selected={e.id == client}>{e.name}</option>)}
</select>
</div>
</div>
</div>
Expand All @@ -104,14 +114,14 @@ const AddEditProject = ({ editProjectData, setShowProjectModal }) => {
<div className="mt-1">
<div className="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div className="flex items-center">
<input type="radio" id='billable' name='project_type' defaultChecked={projectType === "Billable"} className="focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" onClick={() => setProjectType("Billable")} />
<input type="radio" id='billable' name='project_type' defaultChecked={editProjectData ? editProjectData.isBillable : true} className="focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" onClick={() => setProjectType("Billable")} />
<label htmlFor="billable" className="ml-3 block text-sm font-medium text-miru-dark-purple-1000">
Billable
</label>
</div>

<div className="flex items-center">
<input type="radio" id='non-billable' name='project_type' defaultChecked={projectType === "Non-Billable"} className="focus:ring-miru-han-purple-1000 h-4 w-4 bg--miru-han-purple-1000 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" onClick={() => setProjectType("Non-Billable")} />
<input type="radio" id='non-billable' name='project_type' defaultChecked={editProjectData ? !editProjectData.isBillable : false} className="focus:ring-miru-han-purple-1000 h-4 w-4 bg--miru-han-purple-1000 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" onClick={() => setProjectType("Non-Billable")} />
<label htmlFor="non-billable" className="ml-3 block text-sm font-medium text-miru-dark-purple-1000 ">
Non-billable
</label>
Expand All @@ -123,8 +133,8 @@ const AddEditProject = ({ editProjectData, setShowProjectModal }) => {

<div className="actions mt-4">
{client && projectName && projectType ?
<button type="submit" className="tracking-widest h-10 w-full flex justify-center py-1 px-4 border border-transparent shadow-sm text-base font-sans font-medium text-miru-white-1000 bg-miru-han-purple-1000 hover:bg-miru-han-purple-600 focus:outline-none rounded cursor-pointer">{editProjectData ? " SAVE CHANGES" : "ADD PROJECT"}</button>
: <button type="submit" className="tracking-widest h-10 w-full flex justify-center py-1 px-4 border border-transparent shadow-sm text-base font-sans font-medium text-miru-white-1000 bg-miru-gray-1000 focus:outline-none rounded cursor-pointer">{editProjectData ? "SAVE CHANGES" : "ADD PROJECT"}</button>
<button type="submit" className="tracking-widest h-10 w-full flex justify-center py-1 px-4 border border-transparent shadow-sm text-base font-sans font-medium text-miru-white-1000 bg-miru-han-purple-1000 hover:bg-miru-han-purple-600 focus:outline-none rounded cursor-pointer" onClick={() => editProjectData ? handleEdit() : handleSubmit()}>{editProjectData ? " SAVE CHANGES" : "ADD PROJECT"}</button>
: <button type="submit" className="tracking-widest h-10 w-full flex justify-center py-1 px-4 border border-transparent shadow-sm text-base font-sans font-medium text-miru-white-1000 bg-miru-gray-1000 focus:outline-none rounded cursor-pointer" disabled>{editProjectData ? "SAVE CHANGES" : "ADD PROJECT"}</button>
}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/src/components/Projects/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export interface IProject {
id: number;
name: string;
clientName: string;
client: string;
isBillable: boolean;
minutesSpent: number;
editIcon: string;
Expand Down
2 changes: 1 addition & 1 deletion app/models/timesheet_entry.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
# user_id :integer not null
# project_id :integer not null
# duration :float not null
# note :text default("")
# note :text
# work_date :date not null
# bill_status :integer not null
# created_at :datetime not null
Expand Down
2 changes: 1 addition & 1 deletion db/schema.rb
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.