From 71b889abf995aad71c368f1d261c2988ef9d6d24 Mon Sep 17 00:00:00 2001 From: Armin Date: Fri, 23 Aug 2024 15:41:40 +0330 Subject: [PATCH] fix(*): Clean up (#46) --- .../edit-password/edit-password.component.ts | 26 +-- .../edit-profile/edit-profile.component.ts | 30 ++-- .../edit-role/edit-role.component.ts | 28 ++- .../right-panel/right-panel.component.scss | 4 +- .../sigma/sigma/sigma.component.scss | 33 ++-- .../sigma/sigma/sigma.component.ts | 167 +++++++++++------- .../graph-tool-bar.component.html | 47 +++-- .../graph-tool-bar.component.scss | 9 +- .../toolbarl/popover/popover.component.html | 1 - .../toolbarl/popover/popover.component.scss | 0 .../popover/popover.component.spec.ts | 23 --- .../toolbarl/popover/popover.component.ts | 12 -- .../layouts/layouts.component.html | 29 ++- .../layouts/layouts.component.ts | 2 + .../hero-section/hero-section.component.html | 3 - .../hero-section/hero-section.component.ts | 5 +- .../login-form/login-form.component.html | 8 +- .../login-form/login-form.component.ts | 5 + .../components/sign-in/sign-in.component.html | 23 +-- .../components/sign-in/sign-in.component.ts | 3 +- src/app/models/form-control.ts | 6 + src/app/services/sigma/sigma.service.ts | 1 + 22 files changed, 247 insertions(+), 218 deletions(-) delete mode 100644 src/app/components/graph-components/toolbarl/popover/popover.component.html delete mode 100644 src/app/components/graph-components/toolbarl/popover/popover.component.scss delete mode 100644 src/app/components/graph-components/toolbarl/popover/popover.component.spec.ts delete mode 100644 src/app/components/graph-components/toolbarl/popover/popover.component.ts create mode 100644 src/app/models/form-control.ts diff --git a/src/app/components/edit-user-components/edit-password/edit-password.component.ts b/src/app/components/edit-user-components/edit-password/edit-password.component.ts index 70fd89d..c4b1efc 100644 --- a/src/app/components/edit-user-components/edit-password/edit-password.component.ts +++ b/src/app/components/edit-user-components/edit-password/edit-password.component.ts @@ -14,6 +14,7 @@ import { ActivatedRoute } from '@angular/router'; import { UserService } from '../../../services/user/user.service'; import { NotificationService } from '../../../services/notification/notification.service'; import { HttpErrorResponse } from '@angular/common/http'; +import { formControl } from '../../../models/form-control'; @Component({ selector: 'app-edit-password', @@ -24,39 +25,44 @@ import { HttpErrorResponse } from '@angular/common/http'; styleUrl: './edit-password.component.scss', }) export class EditPasswordComponent implements OnInit { - protected passwordForm: FormGroup; + protected passwordForm!: FormGroup; protected isSubmitted = false; + protected isUpdatingProfile = false; private userID = 0; - protected formControls: { - name: string; - type: string; - placeholder: string; - minLength: number; - }[] = [ + protected formControls: formControl[] = [ { name: 'oldpassword', type: 'password', placeholder: 'Current Password', minLength: 4 }, { name: 'newpassword', type: 'password', placeholder: 'New Password', minLength: 4 }, { name: 'confirmPassword', type: 'password', placeholder: 'Confirm New Password', minLength: 4 }, ]; - protected isUpdatingProfile = false; constructor( private fb: FormBuilder, private activeRoute: ActivatedRoute, private userService: UserService, private notificationService: NotificationService - ) { + ) {} + + ngOnInit(): void { + this.initializePasswordForm(); + this.setupFormValueChangeHandlers(); + this.subscribeToQueryParams(); + } + + private initializePasswordForm(): void { this.passwordForm = this.fb.group({ oldpassword: ['', [Validators.required, Validators.minLength(4)]], newpassword: ['', [Validators.required, Validators.minLength(4)]], confirmPassword: ['', [Validators.required, Validators.minLength(4), this.matchPassword('newpassword')]], }); + } + private setupFormValueChangeHandlers(): void { this.passwordForm.get('newpassword')?.valueChanges.subscribe(() => { this.passwordForm.get('confirmPassword')?.updateValueAndValidity(); }); } - ngOnInit(): void { + private subscribeToQueryParams(): void { this.activeRoute.queryParams.subscribe(async (params) => { this.userID = params['id']; this.isUpdatingProfile = this.userID ? false : true; diff --git a/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts b/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts index 25f234f..a79bd82 100644 --- a/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts +++ b/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input, OnChanges, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; import { NzModalModule } from 'ng-zorro-antd/modal'; import { NgIf, NgFor, NgClass } from '@angular/common'; @@ -12,30 +12,20 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography'; @Component({ selector: 'app-edit-profile', standalone: true, - imports: [NzModalModule, NgIf, NgFor, NgClass, ReactiveFormsModule , NzTypographyModule], + imports: [NzModalModule, NgIf, NgFor, NgClass, ReactiveFormsModule, NzTypographyModule], providers: [FormBuilder, Validators], templateUrl: './edit-profile.component.html', styleUrls: ['./edit-profile.component.scss'], }) -export class EditProfileComponent implements OnChanges { +export class EditProfileComponent implements OnChanges, OnInit { @Input() userData!: UserData; protected userForm!: FormGroup; protected isSubmitted = false; protected isUpdatingProfile = false; formControls = [ - { - name: 'firstName', - type: 'text', - placeholder: 'First Name', - minLength: 1, - }, - { - name: 'lastName', - type: 'text', - placeholder: 'Last Name', - minLength: 1, - }, + { name: 'firstName', type: 'text', placeholder: 'First Name', minLength: 1 }, + { name: 'lastName', type: 'text', placeholder: 'Last Name', minLength: 1 }, { name: 'email', type: 'email', placeholder: 'Email', minLength: 1 }, { name: 'username', type: 'text', placeholder: 'User Name', minLength: 3 }, ]; @@ -46,13 +36,19 @@ export class EditProfileComponent implements OnChanges { private userService: UserService, private notificationService: NotificationService, private router: Router - ) { + ) {} + + ngOnInit(): void { this.initializeForm(); } ngOnChanges(): void { this.initializeForm(); + this.subscribeToQueryParams(); + } + + private subscribeToQueryParams() { this.activeRoute.queryParams.subscribe(async (params) => { this.isUpdatingProfile = params['id'] ? false : true; }); @@ -89,7 +85,7 @@ export class EditProfileComponent implements OnChanges { if (response.message === 'User updated successfully!') { const successMessage = 'Success'; this.notificationService.createNotification('success', successMessage, response.message); - console.log('hey') + console.log('hey'); this.logout(); } else { const errorMessage = this.isUpdatingProfile ? 'Error Updating Profile' : 'Error Updating User'; diff --git a/src/app/components/edit-user-components/edit-role/edit-role.component.ts b/src/app/components/edit-user-components/edit-role/edit-role.component.ts index e93c9e8..659c6d1 100644 --- a/src/app/components/edit-user-components/edit-role/edit-role.component.ts +++ b/src/app/components/edit-user-components/edit-role/edit-role.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input, OnChanges, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms'; import { NgClass, NgIf, NgFor } from '@angular/common'; import { NzSelectModule } from 'ng-zorro-antd/select'; @@ -15,19 +15,29 @@ import { HttpErrorResponse } from '@angular/common/http'; templateUrl: './edit-role.component.html', styleUrl: './edit-role.component.scss', }) -export class EditRoleComponent implements OnChanges { - protected roleForm: FormGroup; +export class EditRoleComponent implements OnChanges, OnInit { + @Input({ required: true }) userData: UserData | undefined; + + protected roleForm!: FormGroup; protected formControls = [{ name: 'role', type: 'text', placeholder: 'Role', minLength: 1 }]; - protected listOfOption: { label: string; value: string }[] = [ + protected listOfTagOptions: string[] = []; + protected isSubmitted = false; + protected listOfOption = [ { label: 'System Administrator', value: 'Admin' }, { label: 'Data Admin', value: 'DataAdmin' }, { label: 'Data Analyst', value: 'DataAnalyst' }, ]; - protected listOfTagOptions: string[] = []; - protected isSubmitted = false; - @Input({ required: true }) userData: UserData | undefined; - constructor(private fb: FormBuilder, private userService: UserService, private notificationService: NotificationService) { + constructor( + private fb: FormBuilder, + private userService: UserService, + private notificationService: NotificationService + ) {} + ngOnInit(): void { + this.initializeForm(); + } + + initializeForm() { this.roleForm = this.fb.group({ role: ['', [Validators.required]], }); @@ -60,7 +70,7 @@ export class EditRoleComponent implements OnChanges { } else if (error.status === 400) { errorMessage = 'Bad Request: Please check your input'; } - + this.notificationService.createNotification('error', 'Unexpected Error', errorMessage); }, }); diff --git a/src/app/components/graph-components/right-panel/right-panel/right-panel.component.scss b/src/app/components/graph-components/right-panel/right-panel/right-panel.component.scss index 4c0a86a..86eb112 100644 --- a/src/app/components/graph-components/right-panel/right-panel/right-panel.component.scss +++ b/src/app/components/graph-components/right-panel/right-panel/right-panel.component.scss @@ -14,12 +14,11 @@ min-height: 100%; inline-size: 100%; overflow-y: auto; - padding-top: 0.5rem; } &__panel-block { flex-shrink: 0; - padding: 2rem; + padding: 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; @@ -32,6 +31,7 @@ &__title { font-size: 2.3rem; + text-align: center; } &__inner { diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.scss b/src/app/components/graph-components/sigma/sigma/sigma.component.scss index 09b62c2..06f6a7e 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.scss +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.scss @@ -1,18 +1,16 @@ #sigma-container { flex-grow: 1; - width: calc( - 100vw - 35rem - 6.4rem - ); - height: 100vh; - background-color: #F8F6F4; + width: calc(100vw - 35rem - 6.4rem); + height: 100vh; + background-color: #f8f6f4; } .sigma-container { flex-grow: 1; height: 100%; -position: relative; + position: relative; - &__toolbar-container{ + &__toolbar-container { right: 10px; bottom: 10px; padding: 1rem; @@ -21,16 +19,15 @@ position: relative; display: flex; flex-direction: column; gap: 1rem; - position: absolute; - &__btn{ - padding: 1rem; - background-color: black; - border: none; - border-radius: 1rem; - color: #fff; - font-size: 1.5rem; - cursor: pointer; - } + position: absolute; + &__btn { + padding: 1rem; + background-color: black; + border: none; + border-radius: 1rem; + color: #fff; + font-size: 1.5rem; + cursor: pointer; + } } - } diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts index 616921a..252b1a6 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.ts @@ -1,7 +1,7 @@ import { AfterViewInit, Component } from '@angular/core'; import Graph from 'graphology'; import Sigma from 'sigma'; -import { nodes, edges } from './data'; // Adjust path if needed +import { nodes, edges } from './data'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { SigmaService } from '../../../../services/sigma/sigma.service'; import { GraphData } from '../../../../models/graph-data'; @@ -14,14 +14,14 @@ interface State { hoveredNode?: string; searchQuery: string; - // State derived from query: selectedNode?: string; suggestions?: Set; - // State derived from hovered node: hoveredNeighbors?: Set; } +// ********** This component can be a bit confusing so I have to use comments to ease the understanding (Sorry if the comments are a bit informal ^.^) ********** + @Component({ selector: 'app-sigma', standalone: true, @@ -37,47 +37,39 @@ export class SigmaComponent implements AfterViewInit { isDragging = false; graph!: Graph; state: State = { searchQuery: '' }; + cancelCurrentAnimation: (() => void) | null = null; constructor(private sigmaService: SigmaService) {} ngAfterViewInit() { - // Create a new graph instance + //Initialize new graph this.graph = new Graph(); - // Add nodes - nodes.forEach((node) => { - this.graph.addNode(node.id, { - label: node.label, - x: node.x, - y: node.y, - size: node.size, - color: node.color, - age: node.age, - job: node.job, - bio: node.bio, - }); - }); + //Add nodes and edges to the graph + this.addNodes(); + this.addEdges(); - // Add edges - edges.forEach((edge) => { - this.graph.addEdge(edge.source, edge.target, { - label: edge.label, - }); - }); + // Initialize Sigma.js + this.sigmaInstance = new Sigma(this.graph, document.getElementById('sigma-container') as HTMLDivElement); + this.sigmaInstance.refresh(); + // Listen for the circular layout trigger from SigmaService. + // When it’s triggered, apply the circular layout to the graph. + // We need this because the button that triggers the layout is in a different component (toolbar). + // So, we use SigmaService to pass the event to this component. this.sigmaService.circularLayoutTrigger$.subscribe(() => { this.circularLayout(); }); + //Same as above this.sigmaService.randomLayoutTrigger$.subscribe(() => { this.randomLayout(); }); - // Initialize Sigma.js - this.sigmaInstance = new Sigma(this.graph, document.getElementById('sigma-container') as HTMLDivElement); - this.sigmaInstance.refresh(); - + // Listen for clicks on nodes in Sigma.js. + // When a node is clicked, grab its details and tell SigmaService about it. + // This helps other parts of the app respond to node clicks, like showing node info somewhere else. this.sigmaInstance.on('clickNode', async (event) => { const nodeId = event.node; const nodeAttributes = this.graph.getNodeAttributes(nodeId); @@ -96,12 +88,15 @@ export class SigmaComponent implements AfterViewInit { ); }); + // Send graph info like the number of nodes and edges to SigmaService. + // This lets other components that are subscribed to SigmaService display this data. const data: GraphData = { numberOfNodes: this.graph.order, numberOfEdges: this.graph.size, }; this.sigmaService.changeData(data); + //Sets the initial state of camera (used later for zoom in and out) const camera = this.sigmaInstance.getCamera(); this.initialCameraState = { x: camera.x, @@ -109,34 +104,11 @@ export class SigmaComponent implements AfterViewInit { ratio: camera.ratio, }; - this.sigmaInstance.on('downNode', (e) => { - this.isDragging = true; - this.draggedNode = e.node; - - this.graph.setNodeAttribute(this.draggedNode, 'highlighted', true); - }); - - this.sigmaInstance.getMouseCaptor().on('mousemovebody', (e) => { - if (!this.isDragging || !this.draggedNode) return; - const pos = this.sigmaInstance.viewportToGraph(e); - - this.graph.setNodeAttribute(this.draggedNode, 'x', pos.x); - this.graph.setNodeAttribute(this.draggedNode, 'y', pos.y); - - // Prevent sigma to move camera: - e.preventSigmaDefault(); - e.original.preventDefault(); - e.original.stopPropagation(); - }); - - this.sigmaInstance.getMouseCaptor().on('mouseup', () => { - if (this.draggedNode) { - this.graph.removeNodeAttribute(this.draggedNode, 'highlighted'); - } - this.isDragging = false; - this.draggedNode = null; - }); + this.addDragNodeFuntionality(); + // On mouse down, check if a custom bounding box is set for the Sigma instance. + // If not, set it to the current bounding box. This ensures the graph’s viewport + // remains consistent and prevents unintended camera movements during interactions. this.sigmaInstance.getMouseCaptor().on('mousedown', () => { if (!this.sigmaInstance.getCustomBBox()) this.sigmaInstance.setCustomBBox(this.sigmaInstance.getBBox()); }); @@ -144,48 +116,47 @@ export class SigmaComponent implements AfterViewInit { this.sigmaInstance.on('enterNode', ({ node }) => { this.setHoveredNode(node); }); - - this.sigmaInstance.on("leaveNode", () => { + this.sigmaInstance.on('leaveNode', () => { this.setHoveredNode(undefined); }); - this.sigmaInstance.setSetting("nodeReducer", (node, data) => { + this.sigmaInstance.setSetting('nodeReducer', (node, data) => { const res: Partial = { ...data }; - + if (this.state.hoveredNeighbors && !this.state.hoveredNeighbors.has(node) && this.state.hoveredNode !== node) { - res.label = ""; - res.color = "#f6f6f6"; + res.label = ''; + res.color = '#f6f6f6'; } - + if (this.state.selectedNode === node) { res.highlighted = true; } else if (this.state.suggestions) { if (this.state.suggestions.has(node)) { res.forceLabel = true; } else { - res.label = ""; - res.color = "#f6f6f6"; + res.label = ''; + res.color = '#f6f6f6'; } } - + return res; }); - this.sigmaInstance.setSetting("edgeReducer", (edge, data) => { + this.sigmaInstance.setSetting('edgeReducer', (edge, data) => { const res: Partial = { ...data }; - + if (this.state.hoveredNode && !this.graph.hasExtremity(edge, this.state.hoveredNode)) { res.hidden = true; } - + if ( this.state.suggestions && (!this.state.suggestions.has(this.graph.source(edge)) || !this.state.suggestions.has(this.graph.target(edge))) ) { res.hidden = true; } - + return res; }); } @@ -276,4 +247,64 @@ export class SigmaComponent implements AfterViewInit { skipIndexation: true, }); } + + addNodes() { + nodes.forEach((node) => { + this.graph.addNode(node.id, { + label: node.label, + x: node.x, + y: node.y, + size: node.size, + color: node.color, + age: node.age, + job: node.job, + bio: node.bio, + }); + }); + } + + addEdges() { + // Add edges + edges.forEach((edge) => { + this.graph.addEdge(edge.source, edge.target, { + label: edge.label, + }); + }); + } + + addDragNodeFuntionality() { + // When a node is clicked and held down, start dragging it. + // Set the node as highlighted to show it’s being dragged. + this.sigmaInstance.on('downNode', (e) => { + this.isDragging = true; + this.draggedNode = e.node; + + this.graph.setNodeAttribute(this.draggedNode, 'highlighted', true); + }); + + // While dragging a node, update its position based on mouse movement. + // Also, stop Sigma from moving the camera during the drag. + this.sigmaInstance.getMouseCaptor().on('mousemovebody', (e) => { + if (!this.isDragging || !this.draggedNode) return; + const pos = this.sigmaInstance.viewportToGraph(e); + + this.graph.setNodeAttribute(this.draggedNode, 'x', pos.x); + this.graph.setNodeAttribute(this.draggedNode, 'y', pos.y); + + // Prevent sigma to move camera: + e.preventSigmaDefault(); + e.original.preventDefault(); + e.original.stopPropagation(); + }); + + // When the mouse is released, stop dragging the node. + // Remove the highlight from the node and reset dragging state. + this.sigmaInstance.getMouseCaptor().on('mouseup', () => { + if (this.draggedNode) { + this.graph.removeNodeAttribute(this.draggedNode, 'highlighted'); + } + this.isDragging = false; + this.draggedNode = null; + }); + } } diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html index dcefeb0..0200293 100644 --- a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html +++ b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html @@ -1,22 +1,27 @@
+ +
+
- + + + + +
-
+
+ + +
+
-

Toggle show connected nodes on hover

-

More options to be added

+

+ Toggle show connected nodes on hover + +

+

More options to be added

 +
diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss index 4ebb190..4f7d633 100644 --- a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss +++ b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss @@ -32,7 +32,6 @@ outline: none; border-radius: .375rem 0 0 .375rem; padding: 1rem; - // margin: 0 0 0 .4em; background: none; display: flex; justify-content: center; @@ -40,10 +39,6 @@ cursor: pointer; position: relative; transition: all 1sec linear ; - - // &:hover{ - - // } } } @@ -66,4 +61,8 @@ border-top-right-radius: 1rem; } +} + +.grow-div{ + flex-grow: 1; } \ No newline at end of file diff --git a/src/app/components/graph-components/toolbarl/popover/popover.component.html b/src/app/components/graph-components/toolbarl/popover/popover.component.html deleted file mode 100644 index 2233e0c..0000000 --- a/src/app/components/graph-components/toolbarl/popover/popover.component.html +++ /dev/null @@ -1 +0,0 @@ -

popover works!

diff --git a/src/app/components/graph-components/toolbarl/popover/popover.component.scss b/src/app/components/graph-components/toolbarl/popover/popover.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/graph-components/toolbarl/popover/popover.component.spec.ts b/src/app/components/graph-components/toolbarl/popover/popover.component.spec.ts deleted file mode 100644 index 06d9030..0000000 --- a/src/app/components/graph-components/toolbarl/popover/popover.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PopoverComponent } from './popover.component'; - -describe('PopoverComponent', () => { - let component: PopoverComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [PopoverComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(PopoverComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/graph-components/toolbarl/popover/popover.component.ts b/src/app/components/graph-components/toolbarl/popover/popover.component.ts deleted file mode 100644 index 2fc9854..0000000 --- a/src/app/components/graph-components/toolbarl/popover/popover.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-popover', - standalone: true, - imports: [], - templateUrl: './popover.component.html', - styleUrl: './popover.component.scss' -}) -export class PopoverComponent { - -} diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.html b/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.html index 100468f..1f19d0a 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.html +++ b/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.html @@ -1,16 +1,15 @@
-
-

Circular layout

- - -
- -
-

Random layout

- -
-
\ No newline at end of file +
+

Circular layout

+ +
+ +
+

Random layout

+ +
+
diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.ts b/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.ts index 8465475..ddb3fa7 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.ts @@ -10,7 +10,9 @@ import { NzDividerModule } from 'ng-zorro-antd/divider'; styleUrl: './layouts.component.scss' }) export class LayoutsComponent { + constructor(private sigmaService: SigmaService){} + onCircularLayoutButtonClick() { this.sigmaService.triggerCircularLayout(); } diff --git a/src/app/components/landing-components/hero-section/hero-section.component.html b/src/app/components/landing-components/hero-section/hero-section.component.html index c069070..8183e8a 100644 --- a/src/app/components/landing-components/hero-section/hero-section.component.html +++ b/src/app/components/landing-components/hero-section/hero-section.component.html @@ -28,6 +28,3 @@

Unlock Insights Visualize Data Make Decisions

- - - diff --git a/src/app/components/landing-components/hero-section/hero-section.component.ts b/src/app/components/landing-components/hero-section/hero-section.component.ts index fd76147..592ece9 100644 --- a/src/app/components/landing-components/hero-section/hero-section.component.ts +++ b/src/app/components/landing-components/hero-section/hero-section.component.ts @@ -15,11 +15,12 @@ import { NgClass, NgIf } from '@angular/common'; styleUrl: './hero-section.component.scss', }) export class HeroSectionComponent implements OnInit { - protected id = 'tsparticles'; - protected animationConfig: IOptions = config as IOptions; @Input() showForm = false; @Output() handleForm: EventEmitter = new EventEmitter(); + protected id = 'tsparticles'; + protected animationConfig: IOptions = config as IOptions; + constructor(private readonly ngParticlesService: NgParticlesService) {} ngOnInit(): void { diff --git a/src/app/components/landing-components/login-form/login-form.component.html b/src/app/components/landing-components/login-form/login-form.component.html index 4f4a277..ea171da 100644 --- a/src/app/components/landing-components/login-form/login-form.component.html +++ b/src/app/components/landing-components/login-form/login-form.component.html @@ -38,7 +38,13 @@

Login

Forgot password?

- + diff --git a/src/app/components/landing-components/login-form/login-form.component.ts b/src/app/components/landing-components/login-form/login-form.component.ts index 2aaeafe..70ce3d9 100644 --- a/src/app/components/landing-components/login-form/login-form.component.ts +++ b/src/app/components/landing-components/login-form/login-form.component.ts @@ -9,6 +9,7 @@ import { NotificationService } from '../../../services/notification/notification import { Router } from '@angular/router'; import { HttpErrorResponse } from '@angular/common/http'; import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzSpinModule } from 'ng-zorro-antd/spin'; @Component({ selector: 'app-login-form', @@ -21,6 +22,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; NzInputModule, NgIf, NzIconModule, + NzSpinModule, ], providers: [FormBuilder, Validators], templateUrl: './login-form.component.html', @@ -29,6 +31,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; export class LoginFormComponent { protected loginForm: FormGroup; protected passwordVisible = false; + protected onWait = false; constructor( private loginService: LoginService, @@ -43,7 +46,9 @@ export class LoginFormComponent { } onSubmit() { + if (this.loginForm.valid) { + this.onWait = true; const { username, password } = this.loginForm.value; this.loginService.login(username, password).subscribe({ diff --git a/src/app/components/sign-in/sign-in.component.html b/src/app/components/sign-in/sign-in.component.html index f2de40b..fc8bf4d 100644 --- a/src/app/components/sign-in/sign-in.component.html +++ b/src/app/components/sign-in/sign-in.component.html @@ -8,14 +8,9 @@

Log In

data-testid="auth-form" > -