-
Notifications
You must be signed in to change notification settings - Fork 0
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
base: master
Are you sure you want to change the base?
Changes from 7 commits
f5feb02
7ca69fd
6b414f8
68e7998
86e5426
c38cc39
1730d00
470017e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 }] | ||
} | ||
}; |
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); |
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 | ||
}; | ||
}; |
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; |
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> | ||
) | ||
); | ||
} |
This file was deleted.
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; |
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> | ||
); | ||
}; |
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> | ||
); | ||
}; |
Large diffs are not rendered by default.
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; | ||
} |
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', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; |
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 => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. It's also possible to clear the date fields (i.e. when we no longer want to filter jobs by date) using |
||
setEndDate(date); | ||
}; | ||
|
||
return { | ||
startDate, | ||
handleStartDateChange, | ||
endDate, | ||
handleEndDateChange | ||
}; | ||
}; |
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(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; |
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 | ||
}; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just request, why no use template.js instead of wrapper?
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#templates