Service/user manage

.gitignore

@@ -40,3 +40,6 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Folder config
+/api-config/api-url.ts

angular.json

@@ -54,7 +54,13 @@
                   "maximumError": "4kB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "api-config/api-url.ts",
+                  "with": "api-config/api-url.prod.ts"
+                }
+              ]
             },
             "development": {
               "optimization": false,

api-config/api-url.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  apiUrl: 'https://localhost:44322',
+};

src/app/graph/data-analysis/data-analysis.component.ts

@@ -30,10 +30,10 @@ export class DataAnalysisComponent implements AfterViewInit {
     const container = this.el.nativeElement;
     // create some nodes
     const nodes = new DataSet<Node>([
-      { id: 0, label: 'محمد رضا یاقوتی \n\n 16546220216446' },
-      { id: 1, label: 'محمد رضا یاقوتی \n\n 16546220216446' },
-      { id: 2, label: 'محمد رضا یاقوتی \n\n 16546220216446' },
-      { id: 50, label: 'محمد رضا یاقوتی \n\n 16546220216446' },
+      { id: 0, label: '16546220216446' },
+      { id: 1, label: '16546220216446' },
+      { id: 2, label: '16546220216446' },
+      { id: 50, label: '16546220216446' },
     ] as unknown as Node[]);
 
     // create some edges
@@ -71,7 +71,7 @@ export class DataAnalysisComponent implements AfterViewInit {
     const options: Options = {
       physics: false,
       edges: {
-        width: 2,
+        width: 1,
         smooth: { enabled: false, type: 'vertical', roundness: 0 },
         arrows: 'to',
         arrowStrikethrough: false,
@@ -85,7 +85,7 @@ export class DataAnalysisComponent implements AfterViewInit {
       nodes: {
         shape: 'image',
         image: svgDataUrl,
-        size: 15,
+        size: 10,
         color: {
           background: labelColor,
           border: labelBorder,

src/app/shared/components/dashboard-header/dashboard-header.component.html

@@ -1,15 +1,21 @@
 <h3 class="title">{{ title }}</h3>
 <div class="profile">
-  <mat-icon class="icon" [routerLink]="['/dashboard/manage-account']"
+  <mat-icon
+    class="icon"
+    [routerLink]="['/dashboard/manage-account']"
+    matTooltip="Settings"
     >settings</mat-icon
   >
   <mat-icon
     class="icon material-symbols-outlined"
     (click)="changeTheme()"
     id="theme-changer-icon"
+    matTooltip="Dark/Light theme"
   >
     routine
   </mat-icon>
-  <mat-icon class="icon" (click)="infoClick()">info</mat-icon>
+  <mat-icon class="icon" (click)="infoClick()" matTooltip="Information"
+    >info</mat-icon
+  >
   <img src="{{ profilePic }}" alt="" class="profile-image" />
 </div>

src/app/shared/components/dashboard-header/dashboard-header.component.ts

@@ -27,6 +27,9 @@ export class DashboardHeaderComponent {
   }
 
   infoClick() {
-    this._snackBar.open('Coming soon...', 'Ok :(');
+    this._snackBar.open('Coming soon...', 'Ok :(', {
+      duration: 2000,
+      panelClass: ['info-notification'],
+    });
   }
 }

src/app/user/components/dashboard/add-user/add-user.component.html → src/app/user/components/dashboard/manage-users/add-user/add-user.component.html

@@ -77,8 +77,12 @@ <h3 class="title">Add User</h3>
       formControlName="roleName"
     >
       <mat-radio-button name="role" value="admin">Admin</mat-radio-button>
-      <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-button name="role" value="dataManager"
+        >Data Manager</mat-radio-button
+      >
+      <mat-radio-button name="role" value="systemManager"
+        >System Manager</mat-radio-button
+      >
     </mat-radio-group>
     <div class="submit-button-container">
       <button type="submit" mat-flat-button class="mat-elevation-z5">

src/app/user/components/dashboard/manage-users/add-user/add-user.component.scss

@@ -0,0 +1,40 @@
+.title {
+  padding: 1.25rem 1.75rem;
+  color: var(--mat-sidenav-content-text-color);
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+hr {
+  color: var(--mat-sidenav-content-text-color);
+}
+
+.card {
+  padding: 2rem;
+  padding-block-start: 1rem;
+  overflow: auto;
+  max-height: 80vh;
+
+  .add-user-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .radio-buttons {
+      display: flex;
+      align-items: center;
+    }
+
+    .label {
+      color: var(--mat-sidenav-content-text-color);
+    }
+
+    .submit-button-container {
+      padding-block-start: 1rem;
+
+      > button {
+        width: 100%;
+      }
+    }
+  }
+}

src/app/user/components/dashboard/add-user/add-user.component.ts → src/app/user/components/dashboard/manage-users/add-user/add-user.component.ts

@@ -1,26 +1,28 @@
-import { Component, OnInit } from '@angular/core';
-import { AdminService } from '../../../services/admin/admin.service';
+import { Component, Inject, OnInit } from '@angular/core';
+import { AdminService } from '../../../../services/admin/admin.service';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { UserData } from '../../../interfaces/manage-users.interface';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-add-user',
   templateUrl: './add-user.component.html',
   styleUrl: './add-user.component.scss',
 })
 export class AddUserComponent implements OnInit {
-  constructor(private adminService: AdminService) {}
+  constructor(
+    private adminService: AdminService,
+    @Inject(MAT_DIALOG_DATA)
+    protected page: {
+      pagSize: number;
+      pageIndex: number;
+    }
+  ) {}
 
   myForm: FormGroup = new FormGroup({});
 
   ngOnInit() {
-    const userData: UserData = this.adminService.getUserById('some-id');
-
     this.myForm = new FormGroup({
-      firstName: new FormControl(
-        userData ? userData.firstName : '',
-        Validators.required,
-      ),
+      firstName: new FormControl('', Validators.required),
       lastName: new FormControl('', Validators.required),
       username: new FormControl('', Validators.required),
       password: new FormControl('', Validators.required),
@@ -36,7 +38,11 @@ export class AddUserComponent implements OnInit {
 
   onSubmit() {
     if (this.myForm.valid) {
-      this.adminService.createUser(this.myForm.value).subscribe(console.log);
+      this.adminService.createUser(
+        this.myForm.value,
+        this.page.pagSize,
+        this.page.pageIndex
+      );
     }
   }
 }

src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.html

@@ -0,0 +1,72 @@
+<h3 class="title">Edit User</h3>
+<hr />
+<div class="card">
+  <form
+    [formGroup]="myForm"
+    action=""
+    method="post"
+    class="add-user-form"
+    (submit)="onSubmit()"
+  >
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>First Name</mat-label>
+      <input
+        matInput
+        name="FirstName"
+        id="FirstName"
+        formControlName="firstName"
+      />
+    </mat-form-field>
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>Last Name</mat-label>
+      <input
+        matInput
+        name="LastName"
+        id="LastName"
+        formControlName="lastName"
+      />
+    </mat-form-field>
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>Username</mat-label>
+      <input
+        matInput
+        name="Username"
+        id="Username"
+        formControlName="username"
+      />
+    </mat-form-field>
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>Email</mat-label>
+      <input matInput name="Email" id="Email" formControlName="email" />
+    </mat-form-field>
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>Phone Number</mat-label>
+      <input
+        matInput
+        name="PhoneNumber"
+        id="PhoneNumber"
+        formControlName="phoneNumber"
+      />
+    </mat-form-field>
+    <label for="role" class="label">Select Role:</label>
+    <mat-radio-group
+      id="role"
+      aria-label="Select an option"
+      class="radio-buttons"
+      formControlName="roleName"
+    >
+      <mat-radio-button name="role" value="admin">Admin</mat-radio-button>
+      <mat-radio-button name="role" value="dataManager"
+        >Data Manager
+      </mat-radio-button>
+      <mat-radio-button name="role" value="systemManager"
+        >System Manager
+      </mat-radio-button>
+    </mat-radio-group>
+    <div class="submit-button-container">
+      <button type="submit" mat-flat-button class="mat-elevation-z5">
+        Edit user
+      </button>
+    </div>
+  </form>
+</div>

src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditUserComponent } from './edit-user.component';
+
+describe('EditUserComponent', () => {
+  let component: EditUserComponent;
+  let fixture: ComponentFixture<EditUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EditUserComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.ts

@@ -0,0 +1,61 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { AdminService } from '../../../../services/admin/admin.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { UserData } from '../../../../interfaces/manage-users.interface';
+
+@Component({
+  selector: 'app-edit-user',
+  templateUrl: './edit-user.component.html',
+  styleUrl: './edit-user.component.scss',
+})
+export class EditUserComponent implements OnInit {
+  constructor(
+    private adminService: AdminService,
+    @Inject(MAT_DIALOG_DATA)
+    protected pageData: {
+      user: UserData;
+      pagSize: number;
+      pageIndex: number;
+    },
+  ) {}
+
+  myForm: FormGroup = new FormGroup({});
+
+  ngOnInit() {
+    this.myForm = new FormGroup({
+      firstName: new FormControl(
+        this.pageData.user.firstName,
+        Validators.required,
+      ),
+      lastName: new FormControl(
+        this.pageData.user.lastName,
+        Validators.required,
+      ),
+      username: new FormControl(
+        this.pageData.user.username,
+        Validators.required,
+      ),
+      email: new FormControl(this.pageData.user.email, [
+        Validators.required,
+        Validators.email,
+      ]),
+      phoneNumber: new FormControl(this.pageData.user.phoneNumber, [
+        Validators.required,
+        Validators.pattern('^[0-9]*$'),
+      ]),
+      roleName: new FormControl(this.pageData.user.roleName),
+    });
+  }
+
+  onSubmit() {
+    if (this.myForm.valid) {
+      this.adminService.updateUser(
+        this.pageData.user.guid,
+        this.myForm.value,
+        this.pageData.pagSize,
+        this.pageData.pageIndex,
+      );
+    }
+  }
+}

src/app/user/components/dashboard/manage-users/manage-users.component.html

@@ -27,10 +27,15 @@
       <td mat-cell *matCellDef="let element">{{ element.email }}</td>
     </ng-container>
 
+    <ng-container matColumnDef="roleName">
+      <th mat-header-cell *matHeaderCellDef>Role</th>
+      <td mat-cell *matCellDef="let element">{{ element.roleName }}</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)">
+        <button (click)="editUser(element)">
           <mat-icon class="edit">edit</mat-icon>
         </button>
         <button (click)="deleteUser(element)">

src/app/user/components/dashboard/manage-users/manage-users.component.scss

@@ -8,6 +8,10 @@
   margin-block-end: 1rem;
 }
 
+tr:hover {
+  background-color: var(--hover-bg-color);
+}
+
 .header-container {
   display: flex;
   justify-content: space-between;