Merge pull request #31 from Star-Academy/graph-show-user

feat: Added showing user ability, and also refactored URLs
Star-Academy · Aug 31, 2024 · 9d0fa55 · 9d0fa55
2 parents d15882f + b848e97
commit 9d0fa55
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 9 deletions.
diff --git a/project/src/app/components/dashboard/manage-users/manage-users.component.ts b/project/src/app/components/dashboard/manage-users/manage-users.component.ts
@@ -39,7 +39,7 @@ export class ManageUsersComponent {
 
   ngOnInit(): void {
     const token = this.getToken();
-    this.http.get<User[]>(API_BASE_URL + 'identity', {headers: {'Authorization': "bearer " + token}})
+    this.http.get<User[]>(API_BASE_URL + 'users', {headers: {'Authorization': "bearer " + token}})
       .subscribe((response) => {
       this.users = response;
       this.finalUsers = response;
@@ -83,7 +83,7 @@ export class ManageUsersComponent {
         role: this.formGroup.value.role,
       }
       const token = this.getToken();
-      this.http.post<User>(API_BASE_URL + 'identity/signup', data, {headers: {'Authorization': "Bearer " + token}})
+      this.http.post<User>(API_BASE_URL + 'users/signup', data, {headers: {'Authorization': "Bearer " + token}})
         .subscribe((res) => {
           this.finalUsers?.push(res);
           this.handleClose();

diff --git a/project/src/app/components/dashboard/show-data/show-data.component.html b/project/src/app/components/dashboard/show-data/show-data.component.html
@@ -47,9 +47,58 @@ <h4>هیچ داده ای برای نمایش یافت نشد.</h4>
   </div>
   <div id="graph-container" #graphElement></div>
 </section>
+
 <div #contextElement class="context-menu-container" appBlurClick (blurClick)="handleCloseContext()">
   <ul>
-    <li>نمایش کاربر</li>
+    <li (click)="handleShowUser()" data-trigger-button>نمایش کاربر</li>
     <li>افزایش تراکنش ها</li>
   </ul>
 </div>
+
+<div class="showUserContainer" #userContainer appBlurClick (blurClick)="handleCloseUser()">
+    <ng-icon (click)="handleCloseUser()" name="heroXMark" class="xicon"></ng-icon>
+    <table>
+      <tbody>
+        <tr>
+          <td>ایدی حساب:</td>
+          <td>{{ account?.accountId }}</td>
+        </tr>
+        <tr>
+          <td>شماره کارت:</td>
+          <td>{{ account?.cardId }}</td>
+        </tr>
+        <tr>
+          <td>شماره شبا:</td>
+          <td>{{ account?.iban }}</td>
+        </tr>
+        <tr>
+          <td>نوع حساب:</td>
+          <td>{{ account?.accountType }}</td>
+        </tr>
+        <tr>
+          <td>شماره تلفن شعبه:</td>
+          <td>{{ account?.branchTelephone }}</td>
+        </tr>
+        <tr>
+          <td>ادرس شعبه:</td>
+          <td>{{ account?.branchAddress }}</td>
+        </tr>
+        <tr>
+          <td>شعبه:</td>
+          <td>{{ account?.branchName }}</td>
+        </tr>
+        <tr>
+          <td>نام صاحب حساب:</td>
+          <td>{{ account?.ownerName }}</td>
+        </tr>
+        <tr>
+          <td>نام خانوادگی صاحب حساب:</td>
+          <td>{{ account?.ownerLastName }}</td>
+        </tr>
+        <tr>
+          <td>کد ملی صاحب حساب:</td>
+          <td>{{ account?.ownerId }}</td>
+        </tr>
+      </tbody>
+    </table>
+</div>
diff --git a/project/src/app/components/dashboard/show-data/show-data.component.scss b/project/src/app/components/dashboard/show-data/show-data.component.scss
@@ -100,6 +100,26 @@
     @apply self-stretch flex-grow m-8 rounded-xl flex flex-row justify-center items-center;
     background-color: $secondary-color;
   }
+  .showUserContainer {
+    @apply hidden flex-row justify-center items-center absolute text-[2rem] rounded-2xl;
+    background-color: $primary-color;
+    color: $bg-color;
+
+    inline-size: 85rem;
+    block-size: 60rem;
+
+    inset-inline-end: calc(50vw - 42.5rem);
+    inset-block-start: calc(50vh - 30rem);
+
+    table {
+      @apply table-auto border-4;
+      border-color: $text-color;
+
+      td {
+        @apply p-3;
+      }
+    }
+  }
 }
 .context-menu-container {
   position: absolute;

diff --git a/project/src/app/components/dashboard/show-data/show-data.component.ts b/project/src/app/components/dashboard/show-data/show-data.component.ts
@@ -39,6 +39,19 @@ interface Link {
   type: string;
 }
 
+interface Account {
+  "accountId": number,
+  "cardId": number,
+  "iban": string,
+  "accountType": string,
+  "branchTelephone": string,
+  "branchAddress": string,
+  "branchName": string,
+  "ownerName": string,
+  "ownerLastName": string,
+  "ownerId": number
+}
+
 @Component({
   selector: 'app-show-data',
   standalone: true,
@@ -58,6 +71,7 @@ export class ShowDataComponent {
   data: Transaction[] | undefined = undefined;
   nodes: Node[] = [];
   links: Link[] = [];
+  account: Account | undefined = undefined;
 
   element!: d3.Selection<SVGSVGElement, unknown, null, undefined>;
   svgGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;
@@ -69,7 +83,6 @@ export class ShowDataComponent {
   node!: d3.Selection<SVGCircleElement, Node, SVGGElement, unknown>;
   nodeLabels!: d3.Selection<SVGTextElement, Node, SVGGElement, unknown>;
 
-
   @Output() dataGotEvent = new EventEmitter();
 
   @ViewChild('labelElement') labelElement!: ElementRef<HTMLLabelElement>;
@@ -79,6 +92,7 @@ export class ShowDataComponent {
   @ViewChild('graphElement') graphElement!: ElementRef<HTMLDivElement>;
   @ViewChild('contextElement') contextElement!: ElementRef<HTMLDivElement>;
   @ViewChild('searchIdElement') searchIdElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('userContainer') userElement!: ElementRef<HTMLDivElement>;
 
   constructor(private userService: UserService, private http: HttpClient, private fetchDataService: FetchDataService) {
     this.user = this.userService.getUser();
@@ -99,14 +113,18 @@ export class ShowDataComponent {
   }
 
   async handleGetUser() {
+    this.nodes = [];
+    this.links = [];
+    this.clearGraphTable();
+    if (this.searchIdElement.nativeElement.value === '') {
+      await this.getAllData();
+      return;
+    }
     const response = await this.fetchDataService.fetchDataById(this.searchIdElement.nativeElement.value);
     if (response.length === 0) {
       this.graphElement.nativeElement.textContent = "داده ای یافت نشد!";
       return;
     }
-    this.nodes = [];
-    this.links = [];
-    this.clearGraphTable();
     this.nodes.push({
       x: 1,
       y: 1,
@@ -175,6 +193,10 @@ export class ShowDataComponent {
   }
 
   async ngOnInit() {
+    await this.getAllData();
+  }
+
+  async getAllData(): Promise<void> {
     const response = await this.fetchDataService.fetchData();
     this.data = response;
     for (const trans of response) {
@@ -314,6 +336,13 @@ export class ShowDataComponent {
     this.node.on('contextmenu', (event: MouseEvent, d: Node) => {
       event.preventDefault();
 
+      const token = this.getToken();
+
+      this.http.get<Account>(API_BASE_URL + `accounts/${d.label}`, {headers: {'Authorization': "Bearer " + token}})
+        .subscribe((res) => {
+        this.account = res;
+      });
+
       this.contextElement.nativeElement.style.display = 'flex';
       this.contextElement.nativeElement.style.top = event.clientY + 'px';
       this.contextElement.nativeElement.style.left = event.clientX + 'px';
@@ -371,4 +400,12 @@ export class ShowDataComponent {
   handleCloseContext() {
     this.contextElement.nativeElement.style.display = 'none';
   }
+
+  handleShowUser() {
+    this.userElement.nativeElement.style.display = 'flex';
+  }
+
+  handleCloseUser() {
+    this.userElement.nativeElement.style.display = 'none';
+  }
 }
diff --git a/project/src/app/services/modify-user/modify-user.service.ts b/project/src/app/services/modify-user/modify-user.service.ts
@@ -58,7 +58,7 @@ export class ModifyUserService {
       role
     }
 
-    this.http.patch(API_BASE_URL + 'identity/change-role', data, {headers: {'Authorization': "Bearer " + token}})
+    this.http.patch(API_BASE_URL + 'users/change-role', data, {headers: {'Authorization': "Bearer " + token}})
       .subscribe((response) => {
         console.log(response);
       })

diff --git a/project/src/app/services/user/user.service.ts b/project/src/app/services/user/user.service.ts
@@ -36,7 +36,7 @@ export class UserService {
       username: user.identifier.includes('@') ? null : user.identifier,
       password: user.password,
     }
-    this.http.post(`${API_BASE_URL}identity/login`, obj).subscribe((res: any) => {
+    this.http.post(`${API_BASE_URL}users/login`, obj).subscribe((res: any) => {
       this.user = {};
       this.user.userName = res?.username;
       localStorage.setItem('token', JSON.stringify(res?.token));