feat: project status.

This commit is contained in:
elforjani13
2022-06-23 19:37:29 +02:00
parent d9de3341fe
commit 6a06950654
2 changed files with 25 additions and 10 deletions

View File

@@ -21,7 +21,7 @@ const projects = [
deadline: '2022-06-08T22:00:00.000Z', deadline: '2022-06-08T22:00:00.000Z',
display_name: 'Kyrie Rearden', display_name: 'Kyrie Rearden',
cost_estimate: '40000', cost_estimate: '40000',
task_amount: '10000', task_amount: '0',
is_process: true, is_process: true,
is_closed: false, is_closed: false,
is_draft: false, is_draft: false,
@@ -33,6 +33,17 @@ const projects = [
display_name: 'Ella-Grace Miller', display_name: 'Ella-Grace Miller',
cost_estimate: '700', cost_estimate: '700',
task_amount: '300', task_amount: '300',
is_process: false,
is_closed: false,
is_draft: true,
},
{
id: 3,
name: 'Tax Compliance',
deadline: '2022-06-23T22:00:00.000Z',
display_name: 'Abby & Wells',
cost_estimate: '3000',
task_amount: '0',
is_process: true, is_process: true,
is_closed: false, is_closed: false,
is_draft: false, is_draft: false,

View File

@@ -19,13 +19,13 @@ import { safeCallback, firstLettersArgs, calculateStatus } from 'utils';
export function ProjectStatus({ project }) { export function ProjectStatus({ project }) {
return ( return (
<ProjectStatusRoot> <ProjectStatusRoot>
<ProjectStatusTaskAmount>{project.task_amount}</ProjectStatusTaskAmount>
<ProjectProgressBar <ProjectProgressBar
animate={false} animate={false}
stripes={false} stripes={false}
// intent={Intent.PRIMARY} // intent={Intent.PRIMARY}
value={calculateStatus(project.task_amount, project.cost_estimate)} value={calculateStatus(project.task_amount, project.cost_estimate)}
/> />
<ProjectStatusTaskAmount>{project.task_amount}</ProjectStatusTaskAmount>
</ProjectStatusRoot> </ProjectStatusRoot>
); );
} }
@@ -40,14 +40,14 @@ export const StatusAccessor = (project) => {
<ProjectStatus project={project} /> <ProjectStatus project={project} />
</Choose.When> </Choose.When>
<Choose.When condition={project.is_closed}> <Choose.When condition={project.is_closed}>
<Tag minimal={true} intent={Intent.SUCCESS} round={true}> <StatusTag minimal={true} intent={Intent.SUCCESS} round={true}>
<T id={'closed'} /> <T id={'closed'} />
</Tag> </StatusTag>
</Choose.When> </Choose.When>
<Choose.When condition={project.is_draft}> <Choose.When condition={project.is_draft}>
<Tag round={true} minimal={true}> <StatusTag round={true} minimal={true}>
<T id={'draft'} /> <T id={'draft'} />
</Tag> </StatusTag>
</Choose.When> </Choose.When>
</Choose> </Choose>
); );
@@ -134,7 +134,7 @@ export const useProjectsListColumns = () => {
id: 'name', id: 'name',
Header: '', Header: '',
accessor: ProjectsAccessor, accessor: ProjectsAccessor,
width: 200, width: 240,
className: 'name', className: 'name',
clickable: true, clickable: true,
}, },
@@ -175,9 +175,9 @@ const ProjectItemDescription = styled.div`
const ProjectStatusRoot = styled.div` const ProjectStatusRoot = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; /* justify-content: flex-end; */
/* margin-right: 0.8rem; */ /* margin-right: 0.8rem; */
/* flex-direction: row-reverse; */ flex-direction: row-reverse;
`; `;
const ProjectStatusTaskAmount = styled.div` const ProjectStatusTaskAmount = styled.div`
text-align: right; text-align: right;
@@ -191,10 +191,14 @@ const ProjectProgressBar = styled(ProgressBar)`
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
height: 3px; height: 3px;
max-width: 100px; max-width: 115px;
&, &,
.bp3-progress-meter { .bp3-progress-meter {
border-radius: 0; border-radius: 0;
} }
} }
`; `;
const StatusTag = styled(Tag)`
min-width: 65px;
text-align: center;
`;