Skip to content

Commit 9b7ff3e

Browse files
noob-coder14noob-coder14
committed
education UI updated
1 parent b449369 commit 9b7ff3e

File tree

7 files changed

+108
-26
lines changed

7 files changed

+108
-26
lines changed

‎client/src/app/components/dashboard-components/educations-dashboard/educations-dashboard.component.html

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,48 @@
1-
<p>educations-dashboard works!</p>
1+
<div class="self-center pt-10 pl-12 overflow-auto">
2+
<h2 class="underline">User Account Info</h2>
3+
4+
<div>
5+
<div *ngFor="let item of items" class="border-dashed border border-gray-700 w-6/12 py-2 mb-4">
6+
7+
<div class="my-3 mx-3">
8+
9+
<!-- <label for="Full Name" class="form-label inline-block mb-2 text-gray-700">Full Name</label> -->
10+
<input type="text" class="form-control block w-full px-3 py-1.5
11+
text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300
12+
rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
13+
id="exampleText0" placeholder="Education Level" />
14+
</div>
15+
<div class="my-3 mx-3">
16+
<!-- <label for="Full Name" class="form-label inline-block mb-2 text-gray-700">Full Name</label> -->
17+
<input type="text" class="form-control block w-full px-3 py-1.5
18+
text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300
19+
rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
20+
id="exampleText0" placeholder="Institution Name" />
21+
</div>
22+
<div class="my-3 mx-3">
23+
<!-- <label for="Full Name" class="form-label inline-block mb-2 text-gray-700">Full Name</label> -->
24+
<textarea type="text" class="form-control block w-full px-3 py-1.5
25+
text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300
26+
rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
27+
id="exampleText0" placeholder="Description"></textarea>
28+
</div>
29+
<button class="mt-2 w-1/3 mx-3 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded">
30+
Edit
31+
</button>
32+
<button class="mt-2 w-1/3 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 border border-red-700 rounded">
33+
Remove
34+
</button>
35+
</div>
36+
</div>
37+
38+
39+
<div>
40+
41+
</div>
42+
43+
<button class="mt-8 bg-transparent hover:bg-gray-200 text-gray-900 font-semibold py-2 px-4 w-6/12 border border-gray-900 rounded">
44+
Add More Institutions
45+
</button>
46+
47+
48+
</div>

‎client/src/app/components/dashboard-components/educations-dashboard/educations-dashboard.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Component } from '@angular/core';
2+
import { FormArray } from '@angular/forms';
23

34
@Component({
45
selector: 'app-educations-dashboard',
56
templateUrl: './educations-dashboard.component.html',
67
styleUrls: ['./educations-dashboard.component.css']
78
})
89
export class EducationsDashboardComponent {
9-
10+
items = ['hello','hi']
1011
}

‎client/src/app/components/dashboard-components/sidenav/sidenav.component.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
<div class="w-60 pt-8 h-screen shadow-md bg-white px-1">
1+
<div class="w-60 pt-8 min-h-screen bg-white px-1">
22
<ul class="relative">
3-
<li class="relative">
4-
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">Basic Info</a>
3+
<li (click)="navclick('basic-info')" class="relative">
4+
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="dark">Basic Info</a>
55
</li>
6-
<li class="relative">
7-
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">Accounts</a>
6+
<li (click)="navclick('user-accounts')" class="relative">
7+
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="dark">Accounts</a>
88
</li>
9-
<li class="relative">
10-
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">Education</a>
9+
<li (click)="navclick('educations')" class="relative">
10+
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="dark">Education</a>
1111
</li>
12-
<li class="relative">
13-
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">Experience</a>
12+
<li (click)="navclick('experiences')" class="relative">
13+
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="dark">Experience</a>
1414
</li>
15-
<li class="relative">
16-
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">Projects</a>
15+
<li (click)="navclick('projects')" class="relative">
16+
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="dark">Projects</a>
1717
</li>
18-
<li class="relative">
19-
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">Reach Me</a>
18+
<li (click)="navclick('contact')" class="relative">
19+
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="dark">Reach Me</a>
2020
</li>
2121
</ul>
2222
</div>

‎client/src/app/components/dashboard-components/sidenav/sidenav.component.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1-
import { Component } from '@angular/core';
1+
import { Component,EventEmitter,OnInit,Output } from '@angular/core';
22

33
@Component({
44
selector: 'app-sidenav',
55
templateUrl: './sidenav.component.html',
66
styleUrls: ['./sidenav.component.css']
77
})
88
export class SidenavComponent {
9-
9+
@Output()
10+
navClicked = new EventEmitter();
11+
navclick(clickedElements: string){
12+
this.navClicked.emit(clickedElements)
13+
console.log(clickedElements)
14+
}
15+
ngInit():void{
16+
17+
}
1018
}

‎client/src/app/pages/dashboard/dashboard.component.html

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
1-
<div class="flex">
2-
<app-sidenav></app-sidenav>
3-
<div class="h-screen w-full bg-slate-100 grow flex-col">
4-
<!-- <app-basic-info-dashboard></app-basic-info-dashboard> -->
5-
<app-user-accounts-dashboard></app-user-accounts-dashboard>
1+
<div class="flex h-full">
2+
<app-sidenav (navClicked)="setNavElements($event)"></app-sidenav>
3+
<div [ngSwitch]="navElements" class="h-full w-full bg-slate-100 grow flex-col">
4+
5+
<div *ngSwitchCase="'basic-info'">
6+
<app-basic-info-dashboard ></app-basic-info-dashboard>
7+
</div>
8+
9+
<div *ngSwitchCase="'user-accounts'">
10+
<app-user-accounts-dashboard></app-user-accounts-dashboard>
11+
</div>
12+
13+
<div *ngSwitchCase="'educations'">
14+
<app-educations-dashboard></app-educations-dashboard>
15+
</div>
16+
17+
<div *ngSwitchCase="'experiences'">
18+
<app-experiences-dashboard></app-experiences-dashboard>
19+
</div>
20+
21+
<div *ngSwitchCase="'projects'">
22+
<app-projects-dashboard></app-projects-dashboard>
23+
</div>
24+
25+
<div *ngSwitchCase="'contact'">
26+
<app-contact-form-dashboard></app-contact-form-dashboard>
27+
</div>
28+
629
</div>
730

831
</div>

‎client/src/app/pages/dashboard/dashboard.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ import { Component } from '@angular/core';
66
styleUrls: ['./dashboard.component.css']
77
})
88
export class DashboardComponent {
9-
9+
navElements = "basic-info"
10+
setNavElements(clickedItem:string){
11+
this.navElements = clickedItem
12+
}
1013
}

‎server/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ app.get('/', (req, res) => {
1818
res.send('Hello World!')
1919
})
2020

21-
app.use('/dasboard', dashboardRoutes)
22-
app.use('/webview', webViewRoutes)
23-
app.use('/hr', hrClientRoutes)
21+
// app.use('/dasboard', dashboardRoutes)
22+
// app.use('/webview', webViewRoutes)
23+
// app.use('/hr', hrClientRoutes)
2424

2525
app.listen(port, () => {
2626
console.log(`Example app listening on port ${port}`)

0 commit comments

Comments
 (0)