feat(manage-user): manage user page created

* feat(data-analysis): made the page * fix(data-analysis): added search form * fix(data-analysis): show graph and sidebar and fake data in data analysis page * fix(data-analysis): added font to the graph * fix(dashbaord): added logout button * fix(dashboard0: fix font path and logout link * feat(manage-user): manage user page added * fix(lint): fixed lint problem --------- Co-authored-by: aliyaghini <[email protected]>
Star-Academy · Aug 18, 2024 · c9fa607 · c9fa607
1 parent 354c1db
commit c9fa607
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 31 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -3,9 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './user/components/login/login.component';
 import { DashboardComponent } from './user/components/dashboard/dashboard.component';
 import { MainPageComponent } from './user/components/dashboard/main-page/main-page.component';
-import { AddUserComponent } from './user/components/dashboard/add-user/add-user.component';
 import { ManageAccountComponent } from './user/components/dashboard/manage-account/manage-account.component';
 import { DataAnalysisComponent } from './graph/data-analysis/data-analysis.component';
+import { ManageUsersComponent } from './user/components/dashboard/manage-users/manage-users.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent, title: 'StarData | Login' },
@@ -20,9 +20,9 @@ const routes: Routes = [
         title: 'StarData | Dashboard',
       },
       {
-        path: 'add-user',
-        component: AddUserComponent,
-        title: 'StarData | Add User',
+        path: 'manage-users',
+        component: ManageUsersComponent,
+        title: 'StarData | Manage Users',
       },
       {
         path: 'manage-account',

diff --git a/src/app/user/components/dashboard/add-user/add-user.component.html b/src/app/user/components/dashboard/add-user/add-user.component.html
@@ -1,4 +1,4 @@
-<app-card>
+<div class="card">
   <form action="" method="post" class="add-user-form">
     <mat-form-field appearance="fill" class="form-field">
       <mat-label>First Name</mat-label>
@@ -12,7 +12,7 @@
       <mat-label>Username</mat-label>
       <input matInput name="Username" id="Username" />
     </mat-form-field>
-    <mat-form-field class="form-field">
+    <mat-form-field appearance="fill" class="form-field">
       <mat-label>Password</mat-label>
       <input
         placeholder="at least 8 chracters"
@@ -22,7 +22,7 @@
         id="Password"
       />
     </mat-form-field>
-    <mat-form-field class="form-field">
+    <mat-form-field appearance="fill" class="form-field">
       <mat-label>Confirm Password</mat-label>
       <input matInput type="password" name="Password" id="Password" />
     </mat-form-field>
@@ -40,6 +40,8 @@
       <mat-radio-button name="role" value="2">Option 2</mat-radio-button>
       <mat-radio-button name="role" value="3">Option 3</mat-radio-button>
     </mat-radio-group>
-    <button type="submit" mat-flat-button>Add user</button>
+    <div class="submit-button-container">
+      <button type="submit" mat-flat-button>Add user</button>
+    </div>
   </form>
-</app-card>
+</div>
diff --git a/src/app/user/components/dashboard/add-user/add-user.component.scss b/src/app/user/components/dashboard/add-user/add-user.component.scss
@@ -1,20 +1,28 @@
-.add-user-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.card {
+  padding: 2rem;
+  overflow: auto;
+  max-height: 80vh;
 
-  .radio-buttons {
+  .add-user-form {
     display: flex;
-    align-items: center;
-  }
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .radio-buttons {
+      display: flex;
+      align-items: center;
+    }
+    .submit-button-container {
+      padding-block-start: 1rem;
 
-  > button {
-    font-size: 1rem;
-    width: 100%;
-    height: 3.3rem;
-    border-radius: 4rem;
-    background-color: var(--button-background-color);
-    color: var(--button-text-color);
-    margin-block: 1.6rem;
+      > button {
+        font-size: 1rem;
+        width: 100%;
+        height: 3.3rem;
+        border-radius: 0.5rem;
+        background-color: var(--button-background-color);
+        color: var(--button-text-color);
+      }
+    }
   }
 }
diff --git a/src/app/user/components/dashboard/dashboard.component.html b/src/app/user/components/dashboard/dashboard.component.html
@@ -29,19 +29,19 @@ <h2 class="title">StarData</h2>
         <a
           class="nav-link"
           matRipple
-          [routerLink]="['add-user']"
+          [routerLink]="['manage-users']"
           routerLinkActive="active"
         >
-          <mat-icon>person_add</mat-icon>
-          Add User
+          <mat-icon>manage_accounts</mat-icon>
+          Manage Users
         </a>
         <a
           class="nav-link"
           matRipple
           [routerLink]="['manage-account']"
           routerLinkActive="active"
         >
-          <mat-icon>manage_accounts</mat-icon>
+          <mat-icon>settings</mat-icon>
           Manage Account
         </a>
         <a class="nav-link logout-button" matRipple>

diff --git a/src/app/user/components/dashboard/manage-users/manage-users.component.html b/src/app/user/components/dashboard/manage-users/manage-users.component.html
@@ -0,0 +1,58 @@
+<app-card>
+  <button mat-button class="add-user" (click)="addUser()">
+    <mat-icon>person_add</mat-icon>Add new user
+  </button>
+  <table mat-table [dataSource]="dataSource">
+    <ng-container matColumnDef="userName">
+      <th mat-header-cell *matHeaderCellDef>Username</th>
+      <td mat-cell *matCellDef="let element">{{ element.userName }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="fullName">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let element">
+        {{ element.firstName }} {{ element.lastName }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="phoneNumber">
+      <th mat-header-cell *matHeaderCellDef>Phone number</th>
+      <td mat-cell *matCellDef="let element">{{ element.phoneNumber }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="email">
+      <th mat-header-cell *matHeaderCellDef>Email</th>
+      <td mat-cell *matCellDef="let element">{{ element.email }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="edit/delete">
+      <th mat-header-cell *matHeaderCellDef>edit/delete</th>
+      <td mat-cell *matCellDef="let element">
+        <button (click)="editUser(element.guid)">
+          <mat-icon class="edit">edit</mat-icon>
+        </button>
+        <button (click)="deleteUser(element.guid)">
+          <mat-icon class="delete">delete</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+
+  <mat-paginator
+    #paginator
+    class="demo-paginator"
+    (page)="handlePageEvent($event)"
+    [length]="length"
+    [pageSize]="pageSize"
+    [disabled]="disabled"
+    [showFirstLastButtons]="showFirstLastButtons"
+    [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
+    [hidePageSize]="hidePageSize"
+    [pageIndex]="pageIndex"
+    aria-label="Select page"
+  >
+  </mat-paginator>
+</app-card>
diff --git a/src/app/user/components/dashboard/manage-users/manage-users.component.scss b/src/app/user/components/dashboard/manage-users/manage-users.component.scss
@@ -0,0 +1,9 @@
+.delete {
+  color: #f44336;
+}
+.edit {
+  color: #2196f3;
+}
+.add-user {
+  margin-block-end: 1rem;
+}
diff --git a/src/app/user/components/dashboard/manage-users/manage-users.component.spec.ts b/src/app/user/components/dashboard/manage-users/manage-users.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageUsersComponent } from './manage-users.component';
+
+describe('ManageUsersComponent', () => {
+  let component: ManageUsersComponent;
+  let fixture: ComponentFixture<ManageUsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ManageUsersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ManageUsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user/components/dashboard/manage-users/manage-users.component.ts b/src/app/user/components/dashboard/manage-users/manage-users.component.ts
@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { ManageUser } from '../../../interfaces/manage-users.interface';
+import { MatDialog } from '@angular/material/dialog';
+import { AddUserComponent } from '../add-user/add-user.component';
+import { PageEvent } from '@angular/material/paginator';
+
+const ELEMENT_DATA: ManageUser[] = [
+  {
+    guid: 'daw-awd-awd-awd',
+    userName: 'mamad-plus',
+    firstName: 'mamad',
+    lastName: 'mamadi',
+    phoneNumber: '09134456735',
+    email: '[email protected]',
+    imgURL: null,
+  },
+  {
+    guid: 'daw-awd-awd-awd',
+    userName: 'mamad-plus',
+    firstName: 'mamad',
+    lastName: 'mamadi',
+    phoneNumber: '09134456735',
+    email: '[email protected]',
+    imgURL: null,
+  },
+];
+
+@Component({
+  selector: 'app-manage-users',
+  templateUrl: './manage-users.component.html',
+  styleUrl: './manage-users.component.scss',
+})
+export class ManageUsersComponent {
+  displayedColumns: string[] = [
+    'userName',
+    'fullName',
+    'phoneNumber',
+    'email',
+    'edit/delete',
+  ];
+  dataSource = ELEMENT_DATA;
+  length = 50;
+  pageSize = 10;
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+
+  hidePageSize = false;
+  showPageSizeOptions = true;
+  showFirstLastButtons = true;
+  disabled = false;
+
+  handlePageEvent(e: PageEvent) {
+    this.length = e.length;
+    this.pageSize = e.pageSize;
+    this.pageIndex = e.pageIndex;
+  }
+
+  constructor(private readonly dialog: MatDialog) {}
+
+  addUser() {
+    this.dialog.open(AddUserComponent, {
+      width: '105rem',
+    });
+  }
+
+  editUser(guid: string) {
+    console.log(guid);
+  }
+
+  deleteUser(guid: string) {
+    console.log(guid);
+  }
+}
diff --git a/src/app/user/interfaces/manage-users.interface.ts b/src/app/user/interfaces/manage-users.interface.ts
@@ -0,0 +1,9 @@
+export interface ManageUser {
+  guid: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  userName: string;
+  imgURL: string | null;
+}
diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts
@@ -18,6 +18,9 @@ import { SharedModule } from '../shared/shared.module';
 import { AddUserComponent } from './components/dashboard/add-user/add-user.component';
 import { MatRadioModule } from '@angular/material/radio';
 import { ManageAccountComponent } from './components/dashboard/manage-account/manage-account.component';
+import { ManageUsersComponent } from './components/dashboard/manage-users/manage-users.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 @NgModule({
   declarations: [
@@ -26,6 +29,7 @@ import { ManageAccountComponent } from './components/dashboard/manage-account/ma
     MainPageComponent,
     AddUserComponent,
     ManageAccountComponent,
+    ManageUsersComponent,
   ],
   imports: [
     CommonModule,
@@ -43,6 +47,8 @@ import { ManageAccountComponent } from './components/dashboard/manage-account/ma
     AppRoutingModule,
     SharedModule,
     MatRadioModule,
+    MatTableModule,
+    MatPaginatorModule,
   ],
 })
 export class UserModule {}
diff --git a/src/styles.scss b/src/styles.scss
@@ -309,7 +309,7 @@ h2,
   --logo-filter: invert(75%);
   --content-background-color: #f9f9f9;
 
-  --card-background-color: #fff;
+  --card-background-color: #fdfbff;
 }
 
 [data-set="dark"] {
@@ -336,6 +336,10 @@ h2,
   border-right: 0;
   border-left: 0;
 }
-.mat-mdc-paginator {
-  background-color: white !important;
+.mat-mdc-dialog-surface {
+  border-radius: 1rem !important;
+}
+
+.mat-mdc-paginator-container {
+  justify-content: center !important;
 }