Added filters to admin page

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

@@ -36,4 +36,8 @@ export enum UserProfession {
     TechLeader = 17,
 
     SystemAnalyst = 18,
+
+    ItHr = 19,
+
+    ItRecruiter = 20,
 }

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

@@ -3,6 +3,46 @@
 <div class="container my-5" *ngIf="salaries; else dataLoading">
   <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>
+
+        <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>

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

@@ -9,6 +9,7 @@ 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';
 
 @Component({
   templateUrl: './salaries-admin-page.component.html'
@@ -19,6 +20,8 @@ export class SalariesAdminPageComponent implements OnInit, OnDestroy {
   source: PaginatedList<UserSalaryAdminDto> | null = null;
   confirmDeletionMessage: DialogMessage<ConfirmMsg> | null = null;
 
+  readonly filter = new SalariesTableFilter();
+
   constructor(
     private readonly service: UserSalariesService,
     private readonly titleService: TitleService,
@@ -30,8 +33,18 @@ export class SalariesAdminPageComponent implements OnInit, OnDestroy {
   }
 
   loadData(page = 1): void {
+
+    this.salaries = null;
+    this.source = null;
+
     this.service
-      .all({ ...defaultPageParams, page })
+      .all({ 
+        page,
+        pageSize: defaultPageParams.pageSize,
+        profession: this.filter.profession ?? null,
+        company: this.filter.company ?? null,
+        grade: this.filter.grade ?? null,
+       })
       .pipe(untilDestroyed(this))
       .subscribe((x) => {
         this.salaries = x.results.map((x) => new SalaryAdminItem(x));
@@ -60,4 +73,10 @@ export class SalariesAdminPageComponent implements OnInit, OnDestroy {
       )
     );
   }
+
+  clearFilter(): void {
+    this.filter.profession = null;
+    this.filter.company = null;
+    this.loadData();
+  }
 }

src/app/modules/admin/components/salaries/salaries-admin-page/salaries-table-filter.ts

@@ -0,0 +1,19 @@
+import { DeveloperGrade } from "@models/enums";
+import { CompanyType } from "@models/salaries/company-type";
+import { UserProfession } from "@models/salaries/user-profession";
+import { CompanyTypeSelectItem } from "@shared/select-boxes/company-type-select-item";
+import { DeveloperGradeSelectItem } from "@shared/select-boxes/developer-grade-select-item";
+import { ProfessionSelectItem } from "@shared/select-boxes/profession-select-item";
+
+export class SalariesTableFilter {
+
+    readonly professions: Array<ProfessionSelectItem> = ProfessionSelectItem.allItems();
+    readonly companies: Array<CompanyTypeSelectItem> = CompanyTypeSelectItem.allItems();
+    readonly grades: Array<DeveloperGradeSelectItem> = DeveloperGradeSelectItem.gradesSimpleOnly();
+
+    profession: UserProfession | null = null;
+    company: CompanyType | null = null;
+    grade: DeveloperGrade | null = null;
+
+    constructor() {}
+}

src/app/modules/salaries/components/add-salary/add-salary.component.html

@@ -49,7 +49,7 @@
 
           <div class="mb-3">
             <select formControlName="company" class="form-select" aria-label="Select a company">
-              <option [value]="null" selected disabled>Работаете в казахстанской компании или удаленно</option>
+              <option [value]="null" selected disabled>Работаете в казахстанской компании или иностранной</option>
               <option *ngFor="let option of companyTypes" [value]="option.value">{{ option.label }}</option>
             </select>
             <app-field-error [field]="addSalaryForm.get('company')"></app-field-error>

src/app/services/user-salaries.service.ts

@@ -63,15 +63,24 @@ export interface UpdateSalaryRequest {
   grade: DeveloperGrade | null;
 }
 
+export interface AdminAllSalariesQueryParams extends PageParams {
+  page: number;
+  pageSize: number;
+  profession: UserProfession | null;
+  company: CompanyType | null;
+  grade: DeveloperGrade | null;
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class UserSalariesService {
   private readonly root = '/api/salaries/';
   constructor(private readonly api: ApiService) {}
 
-  all(pageParams: PageParams = defaultPageParams): Observable<PaginatedList<UserSalaryAdminDto>> {
-    return this.api.get<PaginatedList<UserSalaryAdminDto>>(this.root + 'all?' + new ConvertObjectToHttpParams(pageParams).get());
+  all(pageParams: AdminAllSalariesQueryParams): Observable<PaginatedList<UserSalaryAdminDto>> {
+    return this.api.get<PaginatedList<UserSalaryAdminDto>>(
+      this.root + 'all?' + new ConvertObjectToHttpParams(pageParams).get());
   }
 
   charts(): Observable<SalariesChartResponse> {

src/app/shared/select-boxes/company-type-select-item.ts

@@ -16,7 +16,7 @@ export class CompanyTypeSelectItem implements SelectItem<CompanyType> {
         this.label = 'Казахстанская';
         break;
       case CompanyType.Remote:
-        this.label = 'Удаленно на иностранную компанию';
+        this.label = 'Иностранная компания (оплата в валюте)';
         break;
       default:
         this.label = new SplittedByWhitespacesString(CompanyType[item]).value;

src/app/shared/value-objects/convert-object-to-http.ts

@@ -14,6 +14,11 @@ export class ConvertObjectToHttpParams {
     let httpParams: HttpParams = new HttpParams();
 
     for (const field of Object.keys(this.params)) {
+      const value = this.params[field];
+      if (value == null) {
+        continue;
+      }
+
       httpParams = httpParams.append(field, this.params[field]);
     }