Skip to content

Commit fa5f936

Browse files
kagegrifonkagegrifon
authored
Add draft dashboard panel
* feat: add mui and top dashboad part * refactor: move components, create Line * feat: add project block layout * chore: add draft of projectStore.ts * chore: add comments
1 parent 231c537 commit fa5f936

File tree

14 files changed

+1050
-48
lines changed

14 files changed

+1050
-48
lines changed

‎package-lock.json‎

Lines changed: 673 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,12 @@
1313
"openapi-generate": "node open-api-generate.js"
1414
},
1515
"dependencies": {
16+
"@emotion/react": "^11.14.0",
17+
"@emotion/styled": "^11.14.1",
1618
"@hello-pangea/dnd": "^18.0.1",
1719
"@hookform/resolvers": "^3.9.0",
20+
"@mui/icons-material": "^7.3.1",
21+
"@mui/material": "^7.3.1",
1822
"@tanstack/react-router": "^1.130.2",
1923
"@tanstack/react-router-devtools": "^1.130.2",
2024
"@tanstack/react-table": "^8.20.5",

‎src/features/project/projectStore.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { devtools } from 'zustand/middleware'
2+
import type { ProjectDto, ShortProjectDataDto } from '../../data-contracts'
3+
import { create } from 'zustand'
4+
import { workTechApi } from '../../shared/api/endpoint'
5+
6+
interface userProjectStoreState {
7+
userProjects: ShortProjectDataDto[]
8+
activeProjectId: ProjectDto['id'] | null
9+
10+
getAllUserProjects: () => Promise<void>
11+
}
12+
13+
// доработка вынесена в отдельную задачу
14+
export const useUserProjectStore = create<userProjectStoreState>()(
15+
devtools(
16+
(set) => ({
17+
userProjects: [],
18+
activeProjectId: null,
19+
20+
async getAllUserProjects() {
21+
const allProjectResponse = await Promise.all([
22+
workTechApi.project.getAllUserProjects(),
23+
workTechApi.project.getActiveProject(),
24+
])
25+
console.log({ allProjectResponse })
26+
},
27+
}),
28+
{
29+
name: 'user-project-store',
30+
},
31+
),
32+
)

‎src/shared/ui/Line.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import styled from '@emotion/styled'
2+
3+
const DEFAULT_SIZE = '3px'
4+
const DEFAULT_COLOR = 'rgba(256, 256, 256, 1)'
5+
6+
type LineType = 'vertical' | 'horizontal'
7+
8+
type LineProps = {
9+
className?: string
10+
size?: string
11+
color?: string
12+
}
13+
14+
export const VerticalLine = function ({
15+
className,
16+
size = DEFAULT_SIZE,
17+
color = DEFAULT_COLOR,
18+
}: LineProps) {
19+
return (
20+
<Line className={className} type="vertical" color={color} size={size} />
21+
)
22+
}
23+
24+
export const HorizontalLine = function ({
25+
className,
26+
size = DEFAULT_SIZE,
27+
color = DEFAULT_COLOR,
28+
}: LineProps) {
29+
return (
30+
<Line className={className} type="horizontal" color={color} size={size} />
31+
)
32+
}
33+
34+
const Line = styled.div<{ size: string; color: string; type: LineType }>`
35+
${({ type, size }) => type === 'horizontal' && `height: ${size};`}
36+
${({ type, size }) => type === 'vertical' && `width: ${size};`}
37+
38+
background-color: ${({ color }) => color};
39+
flex-shrink: 0;
40+
`

‎src/style/globals.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,14 @@ button {
1111
display: flex;
1212
flex-direction: column;
1313
}
14+
15+
ul,
16+
ol,
17+
li {
18+
padding: 0;
19+
}
20+
21+
a {
22+
color: inherit;
23+
text-decoration: none;
24+
}

‎src/style/reset.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ h6 {
6969
}
7070

7171
/* 10. Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
72-
ul[role='list'],
73-
ol[role='list'] {
72+
ul,
73+
ol {
7474
list-style: none;
7575
}

‎src/widget/DashboardLayout/DashboardLayout.tsx‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,42 @@
1-
// import { CreateTaskModal } from "@/features/tasks/components/create-task-modal";
2-
// import { CreateProjectModal } from "@/features/projects/components/create-project-modal";
3-
4-
// import { Navbar } from "@/components/layout/navbar";
5-
// import { Sidebar } from "@/components/layout/sidebar";
1+
import styled from '@emotion/styled'
2+
import { Header } from './component/Header'
3+
import { Sidebar } from './component/Sidebar'
4+
import { HorizontalLine, VerticalLine } from '../../shared/ui/Line'
5+
import { blockBorderWidthPx } from './constant'
66

77
interface DashboardLayoutProps {
88
children: React.ReactNode
99
}
1010

1111
export const DashboardLayout = ({ children }: DashboardLayoutProps) => {
1212
return (
13-
<div className="min-h-screen">
14-
{/* <CreateProjectModal />
15-
<CreateTaskModal /> */}
16-
17-
<div className="flex w-full h-full">
18-
<div className="fixed left-0 top-0 hidden lg:block lg:w-[264px] h-full overflow-y-auto">
19-
{/* <Sidebar /> */}
20-
</div>
21-
<div className="lg:pl-[264px] w-full">
22-
<div className="mx-auto max-w-screen-2xl h-full">
23-
{/* <Navbar /> */}
24-
<main className="h-full py-8 px-6 flex flex-col">{children}</main>
25-
</div>
26-
</div>
27-
</div>
28-
</div>
13+
<PageWrapper>
14+
<Header />
15+
<HorizontalLine size={blockBorderWidthPx} />
16+
<MainBlock>
17+
<Sidebar />
18+
<VerticalLine size={blockBorderWidthPx} />
19+
<ContentBlock>{children}</ContentBlock>
20+
</MainBlock>
21+
</PageWrapper>
2922
)
3023
}
24+
25+
const PageWrapper = styled.div`
26+
display: flex;
27+
flex-direction: column;
28+
29+
border: 1px solid rgba(0, 0, 0, 1);
30+
border-radius: 30px;
31+
background-color: rgba(255, 255, 255, 1);
32+
overflow: hidden;
33+
`
34+
35+
const MainBlock = styled.div`
36+
display: flex;
37+
`
38+
39+
const ContentBlock = styled.main`
40+
flex-grow: 1;
41+
background-color: rgba(224, 228, 234, 1);
42+
`

‎src/widget/DashboardLayout/component/Header/Header.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import styled from '@emotion/styled'
2+
import Button from '@mui/material/Button'
3+
import AddIcon from '@mui/icons-material/Add'
4+
import Avatar from '@mui/material/Avatar'
5+
import { blockBorderWidthPx, leftSideWidthPx } from '../../constant'
6+
import { VerticalLine } from '../../../../shared/ui/Line'
7+
8+
export function Header() {
9+
return (
10+
<TopBlock>
11+
<HeaderSideBlock>
12+
<WorkTaskLogo />
13+
</HeaderSideBlock>
14+
<VerticalLine size={blockBorderWidthPx} />
15+
<HeaderMainBlock>
16+
<CreateNewTaskButton />
17+
<ProjectName>WorkTask</ProjectName>
18+
<Spacer />
19+
<UserProfile />
20+
</HeaderMainBlock>
21+
</TopBlock>
22+
)
23+
}
24+
25+
// в будущем перенесем скорее всего отсюда
26+
function WorkTaskLogo() {
27+
return (
28+
<div
29+
style={{
30+
color: 'rgba(98, 0, 255, 1)',
31+
fontSize: '35px',
32+
fontWeight: 200,
33+
}}
34+
>
35+
WorkTask
36+
</div>
37+
)
38+
}
39+
40+
const TopBlock = styled.header`
41+
height: 120px;
42+
width: 100%;
43+
display: flex;
44+
`
45+
46+
const HeaderSideBlock = styled.div`
47+
width: ${leftSideWidthPx};
48+
flex-shrink: 0;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
53+
background-color: rgba(224, 228, 234, 1);
54+
`
55+
const HeaderMainBlock = styled.div`
56+
flex-grow: 1;
57+
display: flex;
58+
align-items: center;
59+
width: 100%;
60+
padding-left: 60px;
61+
padding-right: 20px;
62+
gap: 16px;
63+
64+
background-color: rgba(224, 228, 234, 1);
65+
`
66+
67+
const Spacer = styled.div`
68+
flex-grow: 1;
69+
`
70+
// в будущем перенесем скорее всего отсюда
71+
function CreateNewTaskButton() {
72+
return (
73+
<PurpleButton variant="contained" startIcon={<AddIcon />}>
74+
New task
75+
</PurpleButton>
76+
)
77+
}
78+
79+
const ProjectName = styled.div`
80+
color: 'rgba(13, 6, 45, 1)';
81+
font-size: 35px;
82+
font-weight: 500;
83+
`
84+
85+
interface UserProfileProps {
86+
className?: string
87+
}
88+
89+
// в будущем перенесем скорее всего отсюда
90+
function UserProfile({ className }: UserProfileProps) {
91+
return (
92+
<Avatar
93+
className={className}
94+
sx={{ bgcolor: 'rgba(98, 0, 255, 1)' }}
95+
alt="Grigorii Veinin"
96+
>
97+
GV
98+
</Avatar>
99+
)
100+
}
101+
102+
const PurpleButton = styled(Button)({
103+
backgroundColor: 'rgba(80, 48, 229, 0.73)',
104+
borderColor: 'rgba(80, 48, 229, 0.73)',
105+
})

‎src/widget/DashboardLayout/component/Header/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Header } from './Header'

‎src/widget/DashboardLayout/component/Sidebar/Sidebar.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import SettingsIcon from '@mui/icons-material/Settings'
2+
import styled from '@emotion/styled'
3+
import ChecklistIcon from '@mui/icons-material/Checklist'
4+
import { Link } from '@tanstack/react-router'
5+
import {
6+
blockBorderWidthPx,
7+
leftSideWidthPx,
8+
mockProjects,
9+
} from '../../constant'
10+
import { ProjectBlock } from './component/ProjectBlock'
11+
import { HorizontalLine } from '../../../../shared/ui/Line'
12+
13+
interface SideBarProps {
14+
className?: string
15+
}
16+
17+
export function Sidebar({ className }: SideBarProps) {
18+
return (
19+
<SidebarContainer className={className}>
20+
<CommonLinks>
21+
<CommonLinksItem>
22+
<GrayLink to="/">
23+
<ChecklistIcon /> Задачи
24+
</GrayLink>
25+
</CommonLinksItem>
26+
<CommonLinksItem>
27+
<GrayLink to="/">
28+
<SettingsIcon /> Настройки
29+
</GrayLink>
30+
</CommonLinksItem>
31+
</CommonLinks>
32+
<HorizontalLine size={blockBorderWidthPx} />
33+
<ProjectBlock currentProject={mockProjects[0]} />
34+
</SidebarContainer>
35+
)
36+
}
37+
38+
const SidebarContainer = styled.aside`
39+
width: ${leftSideWidthPx};
40+
41+
flex-shrink: 0;
42+
background-color: rgba(224, 228, 234, 1);
43+
44+
display: flex;
45+
flex-direction: column;
46+
`
47+
48+
const CommonLinks = styled.ul`
49+
display: flex;
50+
flex-direction: column;
51+
height: 210px;
52+
width: 100%;
53+
gap: 16px;
54+
padding: 20px;
55+
`
56+
57+
const CommonLinksItem = styled.li`
58+
display: flex;
59+
`
60+
61+
const GrayLink = styled(Link)`
62+
display: flex;
63+
color: rgba(120, 116, 134, 1);
64+
gap: 10px;
65+
font-size: 16px;
66+
text-decoration: none;
67+
`

0 commit comments

Comments
 (0)