Skip to content

Commit

Permalink
feat(profile): add profile image and fix bugs
Browse files Browse the repository at this point in the history
* feat(profile): add profile header and image

* fix(test): fix new tests

* fix(profile): bind user info

* fix(test): fix test

* feat(test): add tests for manage-account

* fix(profile): fix comments

* fix(profile): connect to back and fix tests

* fix(data-analysis): show node information in graph

* fix(manage-user): fixed username , select role on edit by default

* fix(test): fixed username Change to userName

---------

Co-authored-by: Mojtaba Erfan Rad <[email protected]>
  • Loading branch information
asAlwaysZahra and mojerf authored Sep 7, 2024
1 parent 79e42c8 commit 82a3585
Show file tree
Hide file tree
Showing 22 changed files with 631 additions and 186 deletions.
38 changes: 19 additions & 19 deletions src/app/graph/components/data-analysis/data-analysis.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,25 @@
</form>
<div class="accounts">
@for (account of accounts; track $index) {
<div class="account-data">
{{ account.entityName }}
<div class="icons">
<button
class="material-symbols-outlined"
matTooltip="Show node as graph"
(click)="showAsGraph(account)"
>
network_node
</button>
<mat-icon
class="info-icon"
matTooltip="Show node information"
(click)="getInfo(account)"
>
info
</mat-icon>
</div>
<div class="account-data">
{{ account.entityName }}
<div class="icons">
<button
class="material-symbols-outlined"
matTooltip="Show node as graph"
(click)="showAsGraph(account)"
>
network_node
</button>
<mat-icon
class="info-icon"
matTooltip="Show node information"
(click)="getInfo(account.id)"
>
info
</mat-icon>
</div>
</div>
}
</div>
<mat-paginator
Expand All @@ -75,6 +75,6 @@
</app-card>
<mat-menu #menu="matMenu" id="right-click-node-info">
<button mat-menu-item (click)="getInfo()">Show node information</button>
<button mat-menu-item (click)="getGraph()">Get all edges</button>
<button mat-menu-item (click)="getGraph()">Show as graph</button>
</mat-menu>
</div>
24 changes: 11 additions & 13 deletions src/app/graph/components/data-analysis/data-analysis.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export class DataAnalysisComponent implements AfterViewInit {
private loadGraphService: LoadGraphService,
private dialog: MatDialog,
private changeDetector: ChangeDetectorRef,
private loadingService: LoadingService,
private loadingService: LoadingService
) {}

handlePageEvent(e: PageEvent) {
Expand Down Expand Up @@ -109,7 +109,7 @@ export class DataAnalysisComponent implements AfterViewInit {
this.networkInstance = new Network(
this.el.nativeElement,
this.data,
getOptions(),
getOptions()
);

// Listen for the context menu event (right-click)
Expand All @@ -127,7 +127,7 @@ export class DataAnalysisComponent implements AfterViewInit {

this.changeDetector.detectChanges();
const rightClickNodeInfoElem = document.getElementById(
'right-click-node-info',
'right-click-node-info'
) as HTMLElement;

rightClickNodeInfoElem.dataset['nodeid'] = nodeId.toString();
Expand Down Expand Up @@ -208,17 +208,15 @@ export class DataAnalysisComponent implements AfterViewInit {
console.log('edge click: ', edgeId);
}

getInfo(
account: { id: number; entityName: string } = { id: 0, entityName: 'test' },
) {
getInfo(account?: number) {
// todo: fix this
// if (!account) {
// account = (
// document.getElementById('right-click-node-info') as HTMLElement
// ).dataset['nodeid'];
// }
if (!account) {
account = (
document.getElementById('right-click-node-info') as HTMLElement
).dataset['nodeid'] as unknown as number;
}

this.loadGraphService.getNodeInfo(account.id).subscribe({
this.loadGraphService.getNodeInfo(account).subscribe({
next: (data) => {
this.dialog.open(InfoDialogComponent, {
width: '105rem',
Expand Down Expand Up @@ -293,7 +291,7 @@ export class DataAnalysisComponent implements AfterViewInit {

const dialogRef = this.dialog.open(
ColorPickerDialogComponent,
dialogConfig,
dialogConfig
);

dialogRef.afterClosed().subscribe((result) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,74 +1,76 @@
<app-dashboard-header [title]="'Manage Account'"></app-dashboard-header>

<div class="container">
<app-card class="form">
<form
[formGroup]="myForm"
action=""
method="post"
class="add-user-form"
(submit)="onSubmit()"
>
<mat-form-field class="form-field">
<mat-label>First Name</mat-label>
<input
matInput
type="text"
name="firstName"
id="firstName"
formControlName="firstName"
(focus)="focusedField = 'firstName'"
/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Last Name</mat-label>
<input
matInput
type="text"
name="lastName"
id="lastName"
formControlName="lastName"
(focus)="focusedField = 'lastName'"
/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Email</mat-label>
<input
matInput
type="email"
name="email"
id="email"
formControlName="email"
(focus)="focusedField = 'email'"
/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Phone Number</mat-label>
<input
matInput
type="tel"
name="phoneNumber"
id="phoneNumber"
formControlName="phoneNumber"
(focus)="focusedField = 'phoneNumber'"
/>
</mat-form-field>
<div class="btn_container">
<button class="btn" type="submit" mat-flat-button>Update</button>
<button
mat-stroked-button
class="btn"
type="button"
(click)="resetUserInfo()"
>
Reset
</button>
</div>
</form>
</app-card>
<app-validation-status
class="validation"
[myForm]="myForm"
[fields]="validationFields"
></app-validation-status>
<app-profile-header [userInfo]="userInfo"></app-profile-header>
<div class="info-container">
<app-card class="form">
<form
[formGroup]="myForm"
action=""
method="post"
class="add-user-form"
(submit)="onSubmit()"
>
<mat-form-field class="form-field">
<mat-label>First Name</mat-label>
<input
matInput
type="text"
name="firstName"
id="firstName"
formControlName="firstName"
(focus)="focusedField = 'firstName'"
/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Last Name</mat-label>
<input
matInput
type="text"
name="lastName"
id="lastName"
formControlName="lastName"
(focus)="focusedField = 'lastName'"
/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Email</mat-label>
<input
matInput
type="email"
name="email"
id="email"
formControlName="email"
(focus)="focusedField = 'email'"
/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Phone Number</mat-label>
<input
matInput
type="tel"
name="phoneNumber"
id="phoneNumber"
formControlName="phoneNumber"
(focus)="focusedField = 'phoneNumber'"
/>
</mat-form-field>
<div class="btn_container">
<button class="btn" type="submit" mat-flat-button>Update</button>
<button
mat-stroked-button
class="btn"
type="button"
(click)="resetUserInfo()"
>
Reset
</button>
</div>
</form>
</app-card>
<app-validation-status
class="validation"
[myForm]="myForm"
[fields]="validationFields"
></app-validation-status>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
.add-user-form {
.container {
display: flex;
flex-direction: column;
gap: 1rem;
}

.container {
width: 100%;
display: flex;
gap: 1rem;
.add-user-form {
display: flex;
flex-direction: column;
gap: 1rem;
}

.info-container {
width: 100%;
display: flex;
gap: 1rem;

.form {
width: 50%;
.form {
width: 50%;

.btn_container {
display: flex;
gap: 1rem;
.btn_container {
display: flex;
gap: 1rem;

.btn {
width: 25%;
.btn {
width: 25%;
}
}
}
}

.validation {
width: 50%;
.validation {
width: 50%;
}
}
}
Loading

0 comments on commit 82a3585

Please sign in to comment.