działa już lepiej, cssy nawet ładne też wyszły

JanisBe · Dec 4, 2023 · bcada31 · bcada31
1 parent e0b7751
commit bcada31
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 6 deletions.
diff --git a/src/main/frontend/src/app/component/common/header-menu/header-menu.component.html b/src/main/frontend/src/app/component/common/header-menu/header-menu.component.html
@@ -1,5 +1,4 @@
 <ng-container *ngIf="isAuthenticated">
-  <button mat-button routerLink="dashboard">Dashboard</button>
 
   <button [matMenuTriggerFor]="categoryMenu" mat-button>Category</button>
   <mat-menu #categoryMenu="matMenu">

diff --git a/src/main/frontend/src/app/component/dashboard/dashboard/dashboard.component.scss b/src/main/frontend/src/app/component/dashboard/dashboard/dashboard.component.scss
@@ -8,9 +8,9 @@
 }
 
 .content {
-  background: #0a53be;
   grid-column: 2/3;
   grid-row: 2/3;
+  padding: 20px;
 }
 
 .logo {
@@ -20,19 +20,18 @@
 }
 
 header {
-  background: #0dcaf0;
   grid-column: 2/3;
   grid-row: 1/2;
 }
 
 footer {
-  background: #0f5132;
 }
 
 .sidebar {
-  background: #20c997;
+  background: #263238;
   grid-row: 2/3;
   grid-column: 1/2;
+  box-shadow: 0.063rem 0 1.25rem 0 #8690a3;
 }
 
 .logo-font {

diff --git a/src/main/frontend/src/app/component/dashboard/my-groups/my-groups.component.html b/src/main/frontend/src/app/component/dashboard/my-groups/my-groups.component.html
@@ -0,0 +1,16 @@
+<div class="flex">
+  <div class="your-groups">Twoje grupy to:</div>
+  <div class="add-group" routerLink="/group/add">Dodaj
+    <mat-icon class="add-group-icon">group_add</mat-icon>
+  </div>
+</div>
+<div class="sidenav">
+  <ul class="sidenav-nav">
+    <li *ngFor="let group of allGroups" class="sidenav-nav-item">
+      <a (click)="navigate(group.id!)" class="sidenav-nav-link">
+        <mat-icon class="icon">groups</mat-icon>
+        <span class="sidenav-link-text pointer">{{group.name}}</span>
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/src/main/frontend/src/app/component/dashboard/my-groups/my-groups.component.scss b/src/main/frontend/src/app/component/dashboard/my-groups/my-groups.component.scss
@@ -0,0 +1,90 @@
+@import "../../app.component";
+
+.sidenav {
+  list-style-type: none;
+  font-size: 14px;
+  background: #263238;
+  //transition: all .5s ease;
+  position: fixed;
+
+}
+
+.sidenav-nav {
+  list-style: none;
+  padding: 0.938rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+
+  .sidenav-nav-item {
+    width: 100%;
+    margin-bottom: 0.625rem;
+
+    .sidenav-nav-link {
+      display: flex;
+      align-items: center;
+      height: 3rem;
+      color: #f3f3f3;
+      text-decoration: none;
+      border-radius: 0.625rem;
+      transition: all .3s ease;
+      padding: 10px;
+
+      .sidenav-link-icon {
+        font-size: 22px;
+        width: 2rem;
+        min-width: 2rem;
+        margin: 0 0.5rem;
+        text-align: center;
+      }
+
+      .sidenav-link-text {
+        margin-left: 1.5rem;
+      }
+    }
+
+    .sidenav-nav-link:hover {
+      background-color: #fff;
+      color: #000;
+
+      .menu-collapse-icon {
+        color: #000;
+      }
+    }
+  }
+}
+
+.active {
+  background-color: #fff;
+
+  .menu-collapse-icon,
+  .sidenav-link-icon,
+  .sidenav-link-text {
+    color: #000;
+  }
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.your-groups {
+  font-size: 26px;
+  color: white;
+  padding: 10px;
+}
+
+.add-group {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: white;
+  padding-right: 10px;
+}
+
+.add-group-icon {
+  margin-left: 1rem;
+}
diff --git a/src/main/frontend/src/app/component/dashboard/my-groups/my-groups.component.ts b/src/main/frontend/src/app/component/dashboard/my-groups/my-groups.component.ts
@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {Group} from "../../../model/group";
+import {GroupService} from "../../../service/group.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'my-groups',
+  templateUrl: './my-groups.component.html',
+  styleUrl: './my-groups.component.scss'
+})
+export class MyGroupsComponent {
+  allGroups: Group[];
+
+  constructor(private groupService: GroupService,
+              private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.findAllGroupsForUser();
+  }
+
+  findAllGroupsForUser() {
+    this.groupService.findAllGroupsForUser().subscribe(groups => this.allGroups = groups.body!);
+
+  }
+
+  navigate(groupId: number) {
+    this.router.navigate(['group/details', groupId]);
+  }
+}
diff --git a/src/main/frontend/src/app/component/group/add-group/add-group.component.ts b/src/main/frontend/src/app/component/group/add-group/add-group.component.ts
@@ -107,7 +107,7 @@ export class AddGroupComponent implements OnInit {
 
   onCancel() {
     console.log(this.groupForm);
-    // this.router.navigate(['group/list'])
+    this.router.navigate(['group/list'])
   }
 
   onOptionSelected(selectedUser: MatAutocompleteSelectedEvent, i: number) {