This commit is contained in:
tidusjar 2025-08-23 21:23:36 +01:00
commit 33e5706afa
2 changed files with 84 additions and 54 deletions

View file

@ -1,28 +1,43 @@
<div class="small-middle-container"> <div class="small-middle-container">
<div *ngIf="count"> @if (count()) {
<mat-tab-group> <mat-tab-group>
<mat-tab label="{{'Issues.PendingTitle' | translate}}"> <mat-tab label="{{'Issues.PendingTitle' | translate}}">
<ng-template matTabContent> <ng-template matTabContent>
<div *ngIf="pendingIssues.length > 0"> @if (hasPendingIssues()) {
<issues-table [issues]="pendingIssues" (changePage)="changePagePending($event)" [totalRecords]="count.pending"></issues-table> <issues-table
</div> [issues]="pendingIssues()"
</ng-template> (changePage)="changePagePending($event)"
</mat-tab> [totalRecords]="count()?.pending">
<mat-tab *ngIf="inProgressIssues.length > 0" label="{{'Issues.InProgressTitle' | translate}}"> </issues-table>
<ng-template matTabContent> }
<div *ngIf="inProgressIssues">
<issues-table [issues]="inProgressIssues" (changePage)="changePageInProg($event)" [totalRecords]="count.inProgress"></issues-table>
</div>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
@if (hasInProgressIssues()) {
<mat-tab label="{{'Issues.InProgressTitle' | translate}}">
<ng-template matTabContent>
@if (inProgressIssues()) {
<issues-table
[issues]="inProgressIssues()"
(changePage)="changePageInProg($event)"
[totalRecords]="count()?.inProgress">
</issues-table>
}
</ng-template>
</mat-tab>
}
<mat-tab label="{{'Issues.ResolvedTitle' | translate}}"> <mat-tab label="{{'Issues.ResolvedTitle' | translate}}">
<ng-template matTabContent> <ng-template matTabContent>
<div *ngIf="resolvedIssues.length > 0"> @if (hasResolvedIssues()) {
<issues-table [issues]="resolvedIssues" (changePage)="changePageResolved($event)" [totalRecords]="count.resolved"></issues-table> <issues-table
</div> [issues]="resolvedIssues()"
(changePage)="changePageResolved($event)"
[totalRecords]="count()?.resolved">
</issues-table>
}
</ng-template> </ng-template>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> }
</div> </div>

View file

@ -1,69 +1,84 @@
import { Component, OnInit } from "@angular/core"; import { Component, computed, inject, signal, ChangeDetectionStrategy } from "@angular/core";
import { IssuesService } from "../services";
import { IIssueCount, IIssues, IIssuesSummary, IPagenator, IssueStatus } from "../interfaces";
import { PageEvent } from '@angular/material/paginator'; import { PageEvent } from '@angular/material/paginator';
import { IssuesService } from "../services";
import { IssuesV2Service } from "../services/issuesv2.service"; import { IssuesV2Service } from "../services/issuesv2.service";
import { IIssueCount, IIssues, IIssuesSummary, IssueStatus } from "../interfaces";
import { CommonModule } from "@angular/common";
import { MatPaginatorModule } from "@angular/material/paginator";
@Component({ @Component({
standalone: false, standalone: false,
templateUrl: "issues.component.html", templateUrl: "issues.component.html",
styleUrls: ['issues.component.scss'] styleUrls: ['issues.component.scss']
}) })
export class IssuesComponent implements OnInit { export class IssuesComponent {
// Services using inject() function
private issuev2Service = inject(IssuesV2Service);
private issueService = inject(IssuesService);
public pendingIssues: IIssuesSummary[]; // State using signals
public inProgressIssues: IIssuesSummary[]; private pendingSkip = signal(0);
public resolvedIssues: IIssuesSummary[]; private inProgressSkip = signal(0);
private resolvedSkip = signal(0);
public count: IIssueCount;
private takeAmount = 50; private takeAmount = 50;
private pendingSkip = 0;
private inProgressSkip = 0;
private resolvedSkip = 0;
constructor(private issuev2Service: IssuesV2Service, private issueService: IssuesService) { } // Public state signals
public pendingIssues = signal<IIssuesSummary[]>([]);
public inProgressIssues = signal<IIssuesSummary[]>([]);
public resolvedIssues = signal<IIssuesSummary[]>([]);
public count = signal<IIssueCount | null>(null);
public ngOnInit() { // Computed properties for derived state
public hasPendingIssues = computed(() => this.pendingIssues().length > 0);
public hasInProgressIssues = computed(() => this.inProgressIssues().length > 0);
public hasResolvedIssues = computed(() => this.resolvedIssues().length > 0);
public totalIssues = computed(() => {
const count = this.count();
if (!count) return 0;
return count.pending + count.inProgress + count.resolved;
});
constructor() {
// Initialize data
this.loadInitialData();
}
private loadInitialData(): void {
this.getPending(); this.getPending();
this.getInProg(); this.getInProg();
this.getResolved(); this.getResolved();
this.issueService.getIssuesCount().subscribe(x => this.count = x); this.issueService.getIssuesCount().subscribe(count => this.count.set(count));
} }
public changePagePending(event: PageEvent) { public changePagePending(event: PageEvent): void {
this.pendingSkip = event.pageSize * event.pageIndex++; this.pendingSkip.set(event.pageSize * event.pageIndex);
this.getPending(); this.getPending();
} }
public changePageInProg(event: PageEvent) { public changePageInProg(event: PageEvent): void {
this.inProgressSkip = event.pageSize * event.pageIndex++; this.inProgressSkip.set(event.pageSize * event.pageIndex);
this.getInProg(); this.getInProg();
} }
public changePageResolved(event: PageEvent) { public changePageResolved(event: PageEvent): void {
this.resolvedSkip = event.pageSize * event.pageIndex++; this.resolvedSkip.set(event.pageSize * event.pageIndex);
this.getResolved(); this.getResolved();
} }
private getPending() { private getPending(): void {
this.issuev2Service.getIssues(this.pendingSkip, this.takeAmount, IssueStatus.Pending).subscribe(x => { this.issuev2Service.getIssues(this.pendingSkip(), this.takeAmount, IssueStatus.Pending)
this.pendingIssues = x; .subscribe(issues => this.pendingIssues.set(issues));
});
} }
private getInProg() { private getInProg(): void {
this.issuev2Service.getIssues(this.inProgressSkip, this.takeAmount, IssueStatus.InProgress).subscribe(x => { this.issuev2Service.getIssues(this.inProgressSkip(), this.takeAmount, IssueStatus.InProgress)
this.inProgressIssues = x; .subscribe(issues => this.inProgressIssues.set(issues));
});
} }
private getResolved() { private getResolved(): void {
this.issuev2Service.getIssues(this.resolvedSkip, this.takeAmount, IssueStatus.Resolved).subscribe(x => { this.issuev2Service.getIssues(this.resolvedSkip(), this.takeAmount, IssueStatus.Resolved)
this.resolvedIssues = x; .subscribe(issues => this.resolvedIssues.set(issues));
});
} }
} }