Additional pages

src/app/components/admin-navbar/admin-navbar.component.ts

@@ -55,6 +55,10 @@ export class AdminNavbarComponent {
             title: 'All salaries',
             url: '/admin/salaries'
           },
+          {
+            title: 'Salaries not in stats',
+            url: '/admin/salaries/not-in-stats'
+          },
           {
             title: 'Salaries adding chart',
             url: '/admin/salaries/salaries-adding-trend-chart'

src/app/models/salaries/user-profession.ts

@@ -52,4 +52,6 @@ export enum UserProfession {
     ProductManager = 25,
 
     ProductDesigner = 26,
+
+    HrNonIt = 27,
 }

src/app/modules/admin/admin-routing.module.ts

@@ -7,6 +7,7 @@ import { AllOrganizationsAdminComponent } from './components/organizations/all-o
 import { UsersAdminPageComponent } from './components/users/users-admin-page/users-admin-page.component';
 import { SalariesAdminPageComponent } from './components/salaries/salaries-admin-page/salaries-admin-page.component';
 import { SalariesAddingChartComponent } from './components/salaries/salaries-adding-chart/salaries-adding-chart.component';
+import { SalariesNotInStatsAdminPageComponent } from './components/salaries/salaries-not-in-stat-admin-page/salaries-not-in-stat-admin-page.component';
 
 const routes: Routes = [
   { path: '', component: AdminStartPageComponent },
@@ -15,6 +16,7 @@ const routes: Routes = [
   { path: 'background-jobs', component: BackgroundJobsComponent },
   { path: 'organizations', component: AllOrganizationsAdminComponent },
   { path: 'salaries', component: SalariesAdminPageComponent },
+  { path: 'salaries/not-in-stats', component: SalariesNotInStatsAdminPageComponent },
   { path: 'salaries/salaries-adding-trend-chart', component: SalariesAddingChartComponent },
 ];
 

src/app/modules/admin/admin.module.ts

@@ -13,6 +13,8 @@ import { AllOrganizationsAdminComponent } from './components/organizations/all-o
 import { AdminStartPageComponent } from './components/admin-start-page/admin-start-page.component';
 import { SalariesAdminPageComponent } from './components/salaries/salaries-admin-page/salaries-admin-page.component';
 import { SalariesAddingChartComponent } from './components/salaries/salaries-adding-chart/salaries-adding-chart.component';
+import { SalariesAdminPaginatedTableComponent } from './components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component';
+import { SalariesNotInStatsAdminPageComponent } from './components/salaries/salaries-not-in-stat-admin-page/salaries-not-in-stat-admin-page.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +27,14 @@ import { SalariesAddingChartComponent } from './components/salaries/salaries-add
     AdminStartPageComponent,
     SalariesAdminPageComponent,
     SalariesAddingChartComponent,
+    SalariesAdminPaginatedTableComponent,
+    SalariesNotInStatsAdminPageComponent
   ],
-  imports: [CommonModule, SharedModule, AdminRoutingModule, FormsModule, ReactiveFormsModule]
+  imports: [
+    CommonModule,
+    SharedModule,
+    AdminRoutingModule,
+    FormsModule,
+    ReactiveFormsModule]
 })
 export class AdminModule {}

src/app/modules/admin/components/salaries/salaries-admin-page/salaries-admin-page.component.html

@@ -4,75 +4,15 @@
   <div class="card">
     <div class="card-body">
 
-      <div class="mb-3 row">
-        <div class="col-md-3">
-          <label for="profession" class="form-label">Company</label>
-            <select class="form-select" id="company" name="company" [(ngModel)]="filter.company">
-              <option selected value="">All</option>
-              <option *ngFor="let item of filter.companies" [value]="item.item">
-                {{ item.label }}
-              </option>
-            </select>
-        </div>
+      <app-salaries-admin-paginated-table
+        [source]="source"
+        [salaries]="salaries"
+        [filter]="filter"
+        [showApproveButton]="false"
+        (loadDataRequested)="loadData($event)"
+        (deleteRequested)="deleteSalary($event)"
+        ></app-salaries-admin-paginated-table>
 
-        <div class="col-md-3">
-          <label for="profession" class="form-label">Profession</label>
-            <select class="form-select" id="profession" name="profession" [(ngModel)]="filter.profession">
-              <option selected value="">All</option>
-              <option *ngFor="let item of filter.professions" [value]="item.item">
-                {{ item.label }}
-              </option>
-            </select>
-        </div>
-
-        <div class="col-md-3">
-          <label for="profession" class="form-label">Grade</label>
-          <select class="form-select" id="grade" name="grade" [(ngModel)]="filter.grade">
-            <option selected value="">All</option>
-            <option *ngFor="let item of filter.grades" [value]="item.item">
-              {{ item.label }}
-            </option>
-          </select>
-        </div>
-
-        <div class="col-md-3 d-flex align-items-end">
-          <div>
-            <button type="button" class="btn btn-outline-primary" (click)="loadData()">Apply</button>
-            <button type="button" class="btn btn-outline-dark ms-2" (click)="clearFilter()">Reset</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="table-responsive mb-3" *ngIf="salaries.length > 0; else nothingToShow">
-        <table class="table table-hover table-sm">
-          <thead>
-            <th>Value</th>
-            <th>Period</th>
-            <th>Profession</th>
-            <th>Grade</th>
-            <th>Company</th>
-            <th>Created at</th>
-            <th></th>
-          </thead>
-          <tbody>
-            <tr *ngFor="let item of salaries; let i = index">
-              <td>{{ item.value | number: '1.0-0' }}</td>
-              <td>{{ item.quarter }}.{{ item.year }}</td>
-              <td>{{ item.profession }}</td>
-              <td>{{ item.grade }}</td>
-              <td>{{ item.company }}</td>
-              <td>{{ item.createdAt | date: 'yyyy-MM-dd' }}</td>
-              <td>
-                <button type="button" class="btn-link-sm" (click)="openDeleteDialog(item)">Delete</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="" *ngIf="source && source.results.length > 0">
-        <app-pagination-buttons [source]="source" (pageChange)="loadData($event)"></app-pagination-buttons>
-      </div>
     </div>
   </div>
 </div>
@@ -82,13 +22,3 @@
     <app-data-loader></app-data-loader>
   </div>
 </ng-template>
-
-<ng-template #nothingToShow>
-  <div class="card">
-    <div class="card-body">
-      <div class="text-center">There is no salaries.</div>
-    </div>
-  </div>
-</ng-template>
-
-<app-confirm-dialog *ngIf="confirmDeletionMessage" [message]="confirmDeletionMessage"></app-confirm-dialog>

src/app/modules/admin/components/salaries/salaries-admin-page/salaries-admin-page.component.ts

@@ -3,13 +3,11 @@ import { defaultPageParams } from '@models/page-params';
 import { PaginatedList } from '@models/paginated-list';
 import { UserSalaryAdminDto } from '@models/salaries/salary.model';
 import { TitleService } from '@services/title.service';
-import { UserSalariesService } from '@services/user-salaries.service';
+import { AdminAllSalariesQueryParams, UserSalariesService } from '@services/user-salaries.service';
 import { untilDestroyed } from '@shared/subscriptions/until-destroyed';
-import { SalaryAdminItem } from './salary-admin-item';
-import { ConfirmMsg } from '@shared/components/dialogs/models/confirm-msg';
-import { DialogMessage } from '@shared/components/dialogs/models/dialog-message';
 import { AlertService } from '@shared/components/alert/services/alert.service';
-import { SalariesTableFilter } from './salaries-table-filter';
+import { SalaryAdminItem } from '../salary-admin-item';
+import { SalariesTableFilter } from '../salaries-table-filter';
 
 @Component({
   templateUrl: './salaries-admin-page.component.html'
@@ -18,33 +16,36 @@ export class SalariesAdminPageComponent implements OnInit, OnDestroy {
 
   salaries: Array<SalaryAdminItem> | null = null;
   source: PaginatedList<UserSalaryAdminDto> | null = null;
-  confirmDeletionMessage: DialogMessage<ConfirmMsg> | null = null;
-
   readonly filter = new SalariesTableFilter();
+  currentPage: number = 1;
 
   constructor(
     private readonly service: UserSalariesService,
     private readonly titleService: TitleService,
-    private readonly alert: AlertService) {}
+    private readonly alert: AlertService) {
+      titleService.setTitle('All salaries');
+    }
 
   ngOnInit(): void {
-    this.loadData();
-    this.titleService.setTitle('All salaries');
+    this.salaries = null;
+    this.source = null;
+    this.loadData(
+      { 
+        page: this.currentPage,
+        pageSize: defaultPageParams.pageSize,
+        ...this.filter
+       }
+    );
   }
 
-  loadData(page = 1): void {
+  loadData(data: AdminAllSalariesQueryParams): void {
 
     this.salaries = null;
     this.source = null;
+    this.currentPage = data.page;
 
     this.service
-      .all({ 
-        page,
-        pageSize: defaultPageParams.pageSize,
-        profession: this.filter.profession ?? null,
-        company: this.filter.company ?? null,
-        grade: this.filter.grade ?? null,
-       })
+      .all(data)
       .pipe(untilDestroyed(this))
       .subscribe((x) => {
         this.salaries = x.results.map((x) => new SalaryAdminItem(x));
@@ -56,27 +57,13 @@ export class SalariesAdminPageComponent implements OnInit, OnDestroy {
     // ignored
   }
 
-  openDeleteDialog(salary: SalaryAdminItem): void {
-    this.confirmDeletionMessage = new DialogMessage(
-      new ConfirmMsg(
-        'Delete the salary record',
-        'Are you sure to delete?',
-        () => {
-          this.service
-            .delete(salary.id)
-            .pipe(untilDestroyed(this))
-            .subscribe(() => {
-              this.alert.success('Salary deleted');
-              this.loadData();
-            });
-        }
-      )
-    );
-  }
-
-  clearFilter(): void {
-    this.filter.profession = null;
-    this.filter.company = null;
-    this.loadData();
+  deleteSalary(salary: SalaryAdminItem): void {
+    this.service
+      .delete(salary.id)
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        this.alert.success('Salary deleted');
+        this.ngOnInit();
+      });
   }
 }

src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html

@@ -0,0 +1,95 @@
+<div *ngIf="filter" class="mb-3 row">
+  <div class="col-md-3">
+    <label for="profession" class="form-label">Company</label>
+      <select class="form-select" id="company" name="company" [(ngModel)]="filter.company">
+        <option selected value="">All</option>
+        <option *ngFor="let item of filter.companies" [value]="item.item">
+          {{ item.label }}
+        </option>
+      </select>
+  </div>
+
+  <div class="col-md-3">
+    <label for="profession" class="form-label">Profession</label>
+      <select class="form-select" id="profession" name="profession" [(ngModel)]="filter.profession">
+        <option selected value="">All</option>
+        <option *ngFor="let item of filter.professions" [value]="item.item">
+          {{ item.label }}
+        </option>
+      </select>
+  </div>
+
+  <div class="col-md-3">
+    <label for="profession" class="form-label">Grade</label>
+    <select class="form-select" id="grade" name="grade" [(ngModel)]="filter.grade">
+      <option selected value="">All</option>
+      <option *ngFor="let item of filter.grades" [value]="item.item">
+        {{ item.label }}
+      </option>
+    </select>
+  </div>
+
+  <div class="col-md-3 d-flex align-items-end">
+    <div>
+      <button type="button" class="btn btn-outline-primary" (click)="loadData()">Apply</button>
+      <button type="button" class="btn btn-outline-dark ms-2" (click)="clearFilter()">Reset</button>
+    </div>
+  </div>
+</div>
+
+<div class="table-responsive mb-3" *ngIf="salaries && salaries.length > 0; else nothingToShow">
+  <table class="table table-hover table-sm">
+    <thead>
+      <th>Value</th>
+      <th>Period</th>
+      <th>Profession</th>
+      <th>Grade</th>
+      <th>Company</th>
+      <th>Created at</th>
+      <th></th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let item of salaries; let i = index">
+        <td>{{ item.value | number: '1.0-0' }}</td>
+        <td>{{ item.quarter }}.{{ item.year }}</td>
+        <td>{{ item.profession }}</td>
+        <td>{{ item.grade }}</td>
+        <td>{{ item.company }}</td>
+        <td>{{ item.createdAt | date: 'yyyy-MM-dd HH:mm' }}</td>
+        <td>
+          <button
+            type="button"
+            class="btn-link-sm btn-link-danger"
+            (click)="openDeleteDialog(item)">Delete</button>
+          <button
+            *ngIf="showApproveButton"
+            type="button"
+            class="btn-link-sm ms-2"
+            (click)="openApproveDialog(item)">Approve</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="" *ngIf="source && source.results.length > 0">
+  <app-pagination-buttons [source]="source" (pageChange)="loadData($event)"></app-pagination-buttons>
+</div>
+
+<ng-template #dataLoading>
+  <div class="container mt-5">
+    <app-data-loader></app-data-loader>
+  </div>
+</ng-template>
+
+<ng-template #nothingToShow>
+  <div class="card">
+    <div class="card-body">
+      <div class="text-center">There is no salaries.</div>
+    </div>
+  </div>
+</ng-template>
+
+<app-confirm-dialog
+  *ngIf="confirmDeletionMessage"
+  [message]="confirmDeletionMessage"></app-confirm-dialog>

src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.spec.ts

@@ -0,0 +1,28 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { mostUsedImports, testUtilStubs, mostUsedServices } from '@shared/test-utils';
+import { SalariesAdminPaginatedTableComponent } from './salaries-admin-paginated-table.component';
+
+describe('SalariesAdminPaginatedTableComponent', () => {
+  let component: SalariesAdminPaginatedTableComponent;
+  let fixture: ComponentFixture<SalariesAdminPaginatedTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SalariesAdminPaginatedTableComponent],
+      imports: [...mostUsedImports],
+      providers: [...testUtilStubs, ...mostUsedServices],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SalariesAdminPaginatedTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});