feat: create base page component and refactor page inheritance

- Created a base page component to centralize common functionality.
- Injected refreshService and creationService into the base page.
- Added reset methods for refreshService and creationService in the constructor.
- Refactored all other page components to inherit from the base page component.
This commit is contained in:
Developer 02 2024-08-06 12:07:26 +02:00
parent efa79141cf
commit 86fae90d49
11 changed files with 66 additions and 33 deletions

View File

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

View File

@ -0,0 +1,21 @@
import { Component, inject } from '@angular/core';
import { RefreshService } from '../../services/refresh.service';
import { CreationService } from '../../services/creation.service';
@Component({
selector: 'app-base-page',
standalone: true,
imports: [],
templateUrl: './base-page.component.html',
styleUrl: './base-page.component.scss'
})
export class BasePageComponent {
protected refreshService: RefreshService = inject(RefreshService)
protected creationService: CreationService = inject(CreationService)
constructor(){
this.refreshService.removeAll()
this.creationService.disposeComponent();
}
}

View File

@ -1,11 +1,10 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
import { RefreshService } from '../../services/refresh.service';
import { MatTabsModule } from '@angular/material/tabs';
import { GuiSelectedRow } from '@generic-ui/ngx-grid';
import { CreationService } from '../../services/creation.service';
import { GroupFormComponent } from '../../components/forms/group-form/group-form.component';
import { BasePageComponent } from '../base-page/base-page.component';
@Component({
standalone: true,
@ -14,10 +13,9 @@ import { GroupFormComponent } from '../../components/forms/group-form/group-form
templateUrl: './group.component.html',
styleUrl: './group.component.css'
})
export class GroupComponent implements AfterViewInit {
export class GroupComponent extends BasePageComponent implements AfterViewInit {
initWithoutData = () => { }
private sGroupId = null;
constructor(private refreshService: RefreshService, private creationService: CreationService) { }
ngAfterViewInit(): void {
this.refreshService.removeAll()
@ -39,4 +37,4 @@ export class GroupComponent implements AfterViewInit {
this.userTable.fetchDataByGroupId(this.sGroupId);
}
}
}
}

View File

@ -1,23 +1,10 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from '../../services/authentication.service';
import { RefreshService } from '../../services/refresh.service';
import { Component } from '@angular/core';
import { BasePageComponent } from '../base-page/base-page.component';
@Component({
standalone: true,
selector: 'app-home',
templateUrl: './home.component.html',
//styleUrls: ['./home.component.css']
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
username: string = '';
password: string = '';
constructor(private authService: AuthenticationService, private router: Router, rService: RefreshService) {
rService.removeAll()
}
ngOnInit(): void {
}
export class HomeComponent extends BasePageComponent {
}

View File

@ -4,6 +4,7 @@ import { RefreshService } from '../../services/refresh.service';
import { MatTabsModule } from '@angular/material/tabs';
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
import { GuiSelectedRow } from '@generic-ui/ngx-grid';
import { BasePageComponent } from '../base-page/base-page.component';
@Component({
standalone: true,
@ -12,11 +13,10 @@ import { GuiSelectedRow } from '@generic-ui/ngx-grid';
templateUrl: './module.component.html',
styleUrl: './module.component.css'
})
export class ModuleComponent implements AfterViewInit {
export class ModuleComponent extends BasePageComponent implements AfterViewInit {
private uModuleId = null;
constructor(private refreshService: RefreshService) { }
initWithoutData = () => { }
ngAfterViewInit(): void {
this.refreshService.removeAll()

View File

@ -6,7 +6,7 @@ import { ModuleTableComponent } from '../../components/tables/module-table/modul
import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
import { User } from '../../models/user-management.api.models';
import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
import { RefreshService } from '../../services/refresh.service';
import { BasePageComponent } from '../base-page/base-page.component';
@Component({
standalone: true,
@ -15,7 +15,7 @@ import { RefreshService } from '../../services/refresh.service';
templateUrl: './user-assignment.component.html',
styleUrl: './user-assignment.component.scss'
})
export class UserAssignmentComponent implements OnInit, AfterViewInit {
export class UserAssignmentComponent extends BasePageComponent implements OnInit, AfterViewInit {
initWithoutData = () => { }
@ -47,8 +47,6 @@ export class UserAssignmentComponent implements OnInit, AfterViewInit {
private anySelected: boolean = false;
constructor(private refreshService: RefreshService) { }
ngOnInit(): void { }
ngAfterViewInit(): void {

View File

@ -8,6 +8,7 @@ import Swal from 'sweetalert2';
import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
import { env } from '../../../environments/environment';
import { RefreshService } from '../../services/refresh.service';
import { BasePageComponent } from '../base-page/base-page.component';
@Component({
standalone: true,
@ -16,7 +17,7 @@ import { RefreshService } from '../../services/refresh.service';
templateUrl: './user-representation.component.html',
styleUrl: './user-representation.component.css'
})
export class UserRepresentationComponent implements AfterViewInit {
export class UserRepresentationComponent extends BasePageComponent implements AfterViewInit {
useRepLabel: string = "";
groupRepCols: Array<GuiColumn>;
@ -29,7 +30,8 @@ export class UserRepresentationComponent implements AfterViewInit {
initWithoutData = () => { }
constructor(private userRepService: UserRepService, private refreshService: RefreshService) {
constructor(private userRepService: UserRepService) {
super()
this.groupRepCols = env.columnNames.group.representative;
this.groupRightColumns = env.columnNames.group.right;
this.userRepService = userRepService;

View File

@ -7,6 +7,7 @@ import { GroupTableComponent } from '../../components/tables/group-table/group-t
import { ModuleTableComponent } from '../../components/tables/module-table/module-table.component';
import { CreationService } from '../../services/creation.service';
import { UserFormComponent } from '../../components/forms/user-form/user-form.component';
import { BasePageComponent } from '../base-page/base-page.component';
@Component({
standalone: true,
@ -15,7 +16,7 @@ import { UserFormComponent } from '../../components/forms/user-form/user-form.co
templateUrl: './user.component.html',
styleUrl: './user.component.css'
})
export class UserComponent implements AfterViewInit {
export class UserComponent extends BasePageComponent implements AfterViewInit {
initWithoutData = () => { }
cellEditing: GuiCellEdit = {
@ -30,8 +31,6 @@ export class UserComponent implements AfterViewInit {
private sUsername = null;
constructor(private refreshService: RefreshService, private creationService: CreationService) { }
ngAfterViewInit(): void {
this.refreshService.removeAll()
this.refreshService.add(() => {

View File

@ -20,4 +20,8 @@ export class CreationService {
})
: undefined;
}
disposeComponent(){
this.component = undefined;
}
}