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.

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

[M1_TR-212] Markup for M1_TR-211 #11

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 7 commits
Commits
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
8 changes: 5 additions & 3 deletions web/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
module.exports = {
extends: ["eslint:recommended"],
extends: ['eslint:recommended'],
rules: {
"no-undef": "off",
},
'no-undef': 'off',
'no-unused-vars': 'off',
indent: ['error', 2, { SwitchCase: 1 }]
}
};
4 changes: 4 additions & 0 deletions web/src/app/job/list/context.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { JobTable } from '@/utils/types/job';
import { createContext } from 'react';

export const JobListContext = createContext<JobTable | undefined>(undefined);
10 changes: 10 additions & 0 deletions web/src/app/job/list/hooks.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { useState } from 'react';

export const useHooks = () => {
const [page, setPage] = useState(1);

return {
page,
setPage
};
};
39 changes: 39 additions & 0 deletions web/src/app/job/list/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
'use client';

import Pagination from '@/components/molecules/Pagination';
import JobListTable from '@/components/organisms/JobListTable';
import SearchFilterHeader from '@/components/organisms/SearchFilterHeader';
import { JobColumns, JobData } from '@/utils/constants/jobTableData';
import { Grid } from '@mui/material';
import { JobListContext } from './context';
import { useHooks } from './hooks';

const JobList = (): JSX.Element => {
const { page, setPage } = useHooks();

return (
<main>
<JobListContext.Provider value={{ columns: JobColumns, data: JobData }}>
<Grid
container
sx={{
padding: 3,
gap: 3,
flexDirection: 'column'
}}>
<Grid item>
<SearchFilterHeader />
</Grid>
<Grid item>
<JobListTable />
</Grid>
<Grid item sx={{ alignSelf: 'center' }}>
<Pagination count={12} page={page} onChange={setPage} />
</Grid>
</Grid>
</JobListContext.Provider>
</main>
);
};

export default JobList;
18 changes: 9 additions & 9 deletions web/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import type { Metadata } from 'next'
import { ThemeProvider } from '@mui/material'
import { ThemeProvider } from '@mui/material';
import type { Metadata } from 'next';

import { theme } from '@/assets/theme'
import { theme } from '@/assets/theme';
import Wrapper from './wrapper';

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
description: 'Generated by create next app'
};

export default function RootLayout({
children,
children
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<html lang="en">
<html lang='en'>
<ThemeProvider theme={theme}>
<Wrapper>{children}</Wrapper>
</ThemeProvider>
</html>
)
);
}
11 changes: 0 additions & 11 deletions web/src/app/page.tsx

This file was deleted.

77 changes: 40 additions & 37 deletions web/src/app/wrapper.tsx
Copy link
Contributor

Choose a reason for hiding this comment

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

Original file line number Diff line number Diff line change
@@ -1,50 +1,53 @@
'use client'
'use client';

import { Box, Container } from '@mui/material';
import { Open_Sans } from 'next/font/google';
import { FC, useState } from 'react';
import { Open_Sans } from 'next/font/google'
import { Box, Container } from '@mui/material'

import Header from '@/components/organisms/Header';
import NavBar from '@/components/organisms/Navbar';

const openSansFont = Open_Sans({
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
subsets: ['latin'],
weight: ['300', '400', '500', '600', '700']
});

interface Props {
children: React.ReactNode
children: React.ReactNode;
}

export const Wrapper:FC<Props> = ({
children
}) => {

const [isExpanded, setIsExpanded] = useState<boolean>(true)
let isOpen = true;

const handleToggle = () => {
setIsExpanded(!isExpanded)
isOpen = !isOpen
}

return (
<Box className={openSansFont.className} component={'body'} sx={{
margin: 0,
backgroundColor: 'background-primary'
export const Wrapper: FC<Props> = ({ children }) => {
const [isExpanded, setIsExpanded] = useState<boolean>(true);
let isOpen = true;

const handleToggle = () => {
setIsExpanded(!isExpanded);
isOpen = !isOpen;
};

return (
<Box
className={openSansFont.className}
component={'body'}
sx={{
margin: 0,
backgroundColor: 'background-primary'
}}>
<Header />
<Box display={'flex'}>
<NavBar expanded={isExpanded} handleToggle={handleToggle} />
<Container
maxWidth={false}
disableGutters
sx={{
marginLeft: isExpanded ? '200px' : '66px',
transition: 'margin 0.3s'
}}>
<Header />
<Box display={'flex'}>
<NavBar expanded={isExpanded} handleToggle={handleToggle}/>
<Container maxWidth={false} disableGutters sx={{
marginLeft: isExpanded ? '200px' : '66px',
transition: 'margin 0.3s'
}}>
{children}
</Container>
</Box>
</Box>
)
}

export default Wrapper
{children}
</Container>
</Box>
</Box>
);
};

export default Wrapper;
20 changes: 20 additions & 0 deletions web/src/assets/icons/FilterCog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { SvgIcon } from '@mui/material';

interface Props {
style?: string;
}

export const FilterCog = ({ style = '' }: Props) => {
return (
<SvgIcon className={style}>
<svg
width='20'
height='20'
viewBox='0 0 20 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path d='M18.975 16.1L18.0834 15.4167C18.1 15.275 18.1167 15.1417 18.1167 15C18.1167 14.8583 18.1084 14.725 18.0834 14.5833L18.9667 13.9C19.0417 13.8333 19.0667 13.725 19.0167 13.6333L18.1834 12.1917C18.1334 12.0833 18.025 12.0833 17.9167 12.0833L16.8917 12.5C16.6667 12.35 16.4417 12.2083 16.1834 12.1083L16.025 11.0083C16.0167 10.9083 15.925 10.8333 15.8334 10.8333H14.1667C14.0584 10.8333 13.9667 10.9083 13.95 11.0083L13.7917 12.1083C13.5417 12.2167 13.3 12.35 13.0834 12.5L12.05 12.0833C11.9584 12.0833 11.85 12.0833 11.7917 12.1917L10.9584 13.6333C10.9084 13.725 10.925 13.8333 11.0084 13.9L11.8917 14.5833C11.875 14.725 11.8667 14.8583 11.8667 15C11.8667 15.1417 11.875 15.275 11.8917 15.4167L11.0084 16.1C10.9334 16.1667 10.9084 16.275 10.9584 16.3667L11.7917 17.8083C11.8417 17.9167 11.95 17.9167 12.05 17.9167L13.0834 17.5C13.3 17.65 13.5334 17.7917 13.7917 17.8917L13.95 18.9917C13.9667 19.0917 14.05 19.1667 14.1667 19.1667H15.8334C15.925 19.1667 16.0167 19.0917 16.0334 18.9917L16.1917 17.8917C16.4417 17.7833 16.6667 17.65 16.8917 17.5L17.9167 17.9167C18.025 17.9167 18.1334 17.9167 18.1917 17.8083L19.025 16.3667C19.075 16.275 19.05 16.1667 18.975 16.1ZM15 16.25C14.3 16.25 13.75 15.6917 13.75 15C13.75 14.3083 14.3084 13.75 15 13.75C15.6917 13.75 16.25 14.3083 16.25 15C16.25 15.6917 15.6917 16.25 15 16.25ZM2.50002 2.5C2.31669 2.5 2.14169 2.56667 1.98336 2.68333C1.62502 2.96667 1.55836 3.49167 1.84169 3.85L6.64169 10H6.66669V14.8917C6.63336 15.1333 6.71669 15.3917 6.90836 15.5833L8.58336 17.2583C8.87502 17.55 9.32502 17.5667 9.65002 17.3333C9.33336 16.5917 9.16669 15.8 9.16669 15C9.16669 13.9417 9.45836 12.9167 10 12V10H10.025L14.825 3.85C15.1084 3.49167 15.0417 2.96667 14.6834 2.68333C14.525 2.56667 14.35 2.5 14.1667 2.5H2.50002Z' />
</svg>
</SvgIcon>
);
};
20 changes: 20 additions & 0 deletions web/src/assets/icons/FilterRemove.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { SvgIcon } from '@mui/material';

interface Props {
style?: string;
}

export const FilterRemove = ({ style = '' }: Props) => {
return (
<SvgIcon className={style}>
<svg
width='20'
height='20'
viewBox='0 0 20 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path d='M12.3 17.3583L14.6667 15L12.3 12.6417L13.475 11.4667L15.8334 13.8083L18.1917 11.4667L19.3667 12.6417L17.025 15L19.3667 17.3583L18.1917 18.5333L15.8334 16.1667L13.475 18.5333L12.3 17.3583ZM10 10V16.5667C10.0334 16.8167 9.95002 17.0833 9.75836 17.2583C9.43336 17.5833 8.90836 17.5833 8.58336 17.2583L6.90836 15.5833C6.71669 15.3917 6.63336 15.1333 6.66669 14.8917V10H6.64169L1.84169 3.85C1.55836 3.49167 1.62502 2.96667 1.98336 2.68333C2.14169 2.56667 2.31669 2.5 2.50002 2.5H14.1667C14.35 2.5 14.525 2.56667 14.6834 2.68333C15.0417 2.96667 15.1084 3.49167 14.825 3.85L10.025 10H10Z' />
</svg>
</SvgIcon>
);
};
32 changes: 23 additions & 9 deletions web/src/assets/icons/Logo.tsx

Large diffs are not rendered by default.

36 changes: 36 additions & 0 deletions web/src/assets/styles/Filter.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.button {
height: 52px;
width: 52px;
background-color: white;
transition: background-color 0.3s;
}

.button:hover {
background-color: #2a3f52;
}

.active {
background-color: #2a3f52;
}

.icon {
height: 20px;
width: 20px;
transition: fill 0.3s;
fill: #3e5367;
}

.iconWhite {
height: 20px;
width: 20px;
transition: fill 0.3s;
fill: white;
}

.button:hover .icon {
fill: white;
}

.input {
background-color: white;
}
17 changes: 17 additions & 0 deletions web/src/components/atoms/StatusChip/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { ChipColors } from '@/utils/constants/statusChipColor';
import { Chip, ChipProps } from '@mui/material';
import { FC } from 'react';

const StatusChip: FC<ChipProps> = ({ label }: ChipProps) => {
return (
<Chip
label={label}
sx={{
backgroundColor: ChipColors[label as string] ?? '#65707b33',
Copy link
Contributor

Choose a reason for hiding this comment

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

Please define every hex value colors, so that it would be easily identified by developers.

typography: 'label1r'
}}
/>
);
};

export default StatusChip;
22 changes: 22 additions & 0 deletions web/src/components/molecules/CreatedDateRangeFilter/hooks.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Moment } from 'moment';
import { useState } from 'react';

export const useHooks = () => {
const [startDate, setStartDate] = useState<Moment | null>();
const [endDate, setEndDate] = useState<Moment | null>();

const handleStartDateChange = (date: Moment | null): void => {
Copy link
Contributor

Choose a reason for hiding this comment

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

do we need to use union types? This function requires date always right?

setStartDate(date);
};

const handleEndDateChange = (date: Moment | null): void => {
Copy link
Contributor

Choose a reason for hiding this comment

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

do we need to use union types? This function requires date always right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jeremiahC Yes sir, there would be a type mismatch without the null as seen in this error message.
image

It's also possible to clear the date fields (i.e. when we no longer want to filter jobs by date) using null as the on change value. I'll include that change here since I implemented it in the FE task.

setEndDate(date);
};

return {
startDate,
handleStartDateChange,
endDate,
handleEndDateChange
};
};
51 changes: 51 additions & 0 deletions web/src/components/molecules/CreatedDateRangeFilter/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
'use-client';

import styles from '@/assets/styles/Filter.module.css';
import { Box } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { useHooks } from './hooks';

const CreateDateRangeFilter = () => {
const { startDate, handleStartDateChange, endDate, handleEndDateChange } =
useHooks();
Copy link
Contributor

Choose a reason for hiding this comment

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

format each variable by line


return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
label='Created at - Start Date'
value={startDate}
onChange={handleStartDateChange}
className={styles.input}
slotProps={{
textField: {
size: 'small',
color: 'secondary',
id: 'created-start',
name: 'created-start'
}
}}
/>
{' - '}
<DatePicker
label='Created at - End Date'
value={endDate}
onChange={handleEndDateChange}
className={styles.input}
slotProps={{
textField: {
size: 'small',
color: 'secondary',
id: 'created-end',
name: 'created-end'
}
}}
/>
</LocalizationProvider>
</Box>
);
};

export default CreateDateRangeFilter;
15 changes: 15 additions & 0 deletions web/src/components/molecules/EstimationStatusFilter/hooks.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { SelectChangeEvent } from '@mui/material';
import { useState } from 'react';

export const useHooks = () => {
const [status, setStatus] = useState('');

const handleChange = (e: SelectChangeEvent) => {
setStatus(e.target.value);
};

return {
status,
handleChange
};
};
Loading