From 581953f643847e5e0296ec3c422c548cf14efadf Mon Sep 17 00:00:00 2001
From: "maxim.gorbatyuk" <maxim.gorbatyuk@outlook.com>
Date: Sat, 29 Jun 2024 19:37:22 +0400
Subject: [PATCH 1/4] Adjusted

---
 .../admin-navbar/admin-navbar.component.ts    |  4 +
 src/app/models/salaries/salary.model.ts       |  6 ++
 src/app/modules/admin/admin-routing.module.ts |  5 +
 src/app/modules/admin/admin.module.ts         |  2 +
 ...aries-admin-paginated-table.component.html |  4 +-
 .../components/salaries/salary-admin-item.ts  |  8 +-
 ...sourced-salaries-admin-page.component.html | 22 +++++
 ...rced-salaries-admin-page.component.spec.ts | 33 +++++++
 .../sourced-salaries-admin-page.component.ts  | 94 +++++++++++++++++++
 .../salaries-chart.component.ts               |  3 +
 .../shared/global-filters-form-group.ts       |  4 +
 src/app/services/user-salaries.service.ts     | 15 ++-
 12 files changed, 196 insertions(+), 4 deletions(-)
 create mode 100644 src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.html
 create mode 100644 src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts
 create mode 100644 src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.ts

diff --git a/src/app/components/admin-navbar/admin-navbar.component.ts b/src/app/components/admin-navbar/admin-navbar.component.ts
index aaa93752..81cafc96 100644
--- a/src/app/components/admin-navbar/admin-navbar.component.ts
+++ b/src/app/components/admin-navbar/admin-navbar.component.ts
@@ -67,6 +67,10 @@ export class AdminNavbarComponent {
             title: "Анкеты вне статистики",
             url: "/admin/salaries/not-in-stats",
           },
+          {
+            title: "Импортированные анкеты",
+            url: "/admin/salaries/imported-salaries",
+          },
         ],
       },
       {
diff --git a/src/app/models/salaries/salary.model.ts b/src/app/models/salaries/salary.model.ts
index 74e9612e..53967073 100644
--- a/src/app/models/salaries/salary.model.ts
+++ b/src/app/models/salaries/salary.model.ts
@@ -4,6 +4,11 @@ import { Currency } from "./currency";
 import { KazakhstanCity } from "./kazakhstan-city";
 import { Gender } from "@models/enums/gender.enum";
 
+export enum SalarySourceType {
+  Undefined = 0,
+  KolesaDevelopersCsv2022 = 1,
+}
+
 export interface UserSalarySimple {
   value: number;
   quarter: number;
@@ -24,6 +29,7 @@ export interface UserSalary extends UserSalarySimple {
   skillId: number | null;
   workIndustryId: number | null;
   professionId: number | null;
+  salarySourceType: SalarySourceType | null;
 }
 
 export interface UserSalaryAdminDto extends UserSalary {
diff --git a/src/app/modules/admin/admin-routing.module.ts b/src/app/modules/admin/admin-routing.module.ts
index 99bbe0e8..50c1cb0a 100644
--- a/src/app/modules/admin/admin-routing.module.ts
+++ b/src/app/modules/admin/admin-routing.module.ts
@@ -11,6 +11,7 @@ import { WorkIndustriesPaginatedTableComponent } from "./components/label-entiti
 import { ProfessionsPaginatedTableComponent } from "./components/label-entities/professions-paginated-table/professions-paginated-table.component";
 import { TelegramBotUsagesComponent } from "./components/telegram/telegram-bot-usages/telegram-bot-usages.component";
 import { TelegramUserSettingsComponent } from "./components/telegram/telegram-user-settings/telegram-user-settings.component";
+import { SourcedSalariesAdminPageComponent } from "./components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component";
 
 const routes: Routes = [
   { path: "", component: AdminStartPageComponent },
@@ -28,6 +29,10 @@ const routes: Routes = [
     path: "salaries/not-in-stats",
     component: SalariesNotInStatsAdminPageComponent,
   },
+  {
+    path: "salaries/imported-salaries",
+    component: SourcedSalariesAdminPageComponent,
+  },
   { path: "telegram/bot-usages", component: TelegramBotUsagesComponent },
   { path: "telegram/user-settings", component: TelegramUserSettingsComponent },
 ];
diff --git a/src/app/modules/admin/admin.module.ts b/src/app/modules/admin/admin.module.ts
index b9db7966..049dcdb0 100644
--- a/src/app/modules/admin/admin.module.ts
+++ b/src/app/modules/admin/admin.module.ts
@@ -18,6 +18,7 @@ import { WorkIndustriesPaginatedTableComponent } from "./components/label-entiti
 import { ProfessionsPaginatedTableComponent } from "./components/label-entities/professions-paginated-table/professions-paginated-table.component";
 import { TelegramBotUsagesComponent } from "./components/telegram/telegram-bot-usages/telegram-bot-usages.component";
 import { TelegramUserSettingsComponent } from "./components/telegram/telegram-user-settings/telegram-user-settings.component";
+import { SourcedSalariesAdminPageComponent } from "./components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component";
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { TelegramUserSettingsComponent } from "./components/telegram/telegram-us
     SalariesAdminPageComponent,
     SalariesAdminPaginatedTableComponent,
     SalariesNotInStatsAdminPageComponent,
+    SourcedSalariesAdminPageComponent,
     SkillsPaginatedTableComponent,
     WorkIndustriesPaginatedTableComponent,
     ProfessionsPaginatedTableComponent,
diff --git a/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html b/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html
index 352dd239..bb5784aa 100644
--- a/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html
+++ b/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html
@@ -93,7 +93,7 @@
       <th>Город</th>
       <th>Навык</th>
       <th>Сфера</th>
-      <th>Создано</th>
+      <th>Источник</th>
       <th>Обновлено</th>
       <th></th>
     </thead>
@@ -114,7 +114,7 @@
         <td>{{ item.city }}</td>
         <td>{{ item.skill }}</td>
         <td>{{ item.industry }}</td>
-        <td>{{ item.createdAt | date : "yyyy-MM-dd HH:mm" }}</td>
+        <td>{{ item.salarySourceType }}</td>
         <td>{{ item.updatedAt | date : "yyyy-MM-dd HH:mm" }}</td>
         <td>
           <button
diff --git a/src/app/modules/admin/components/salaries/salary-admin-item.ts b/src/app/modules/admin/components/salaries/salary-admin-item.ts
index 37a692f1..0a0a21e3 100644
--- a/src/app/modules/admin/components/salaries/salary-admin-item.ts
+++ b/src/app/modules/admin/components/salaries/salary-admin-item.ts
@@ -3,7 +3,7 @@ import { GenderEnum } from "@models/enums/gender.enum";
 import { CompanyType } from "@models/salaries/company-type";
 import { Currency } from "@models/salaries/currency";
 import { KazakhstanCity } from "@models/salaries/kazakhstan-city";
-import { UserSalaryAdminDto } from "@models/salaries/salary.model";
+import { SalarySourceType, UserSalaryAdminDto } from "@models/salaries/salary.model";
 import { LabelEntityDto } from "@services/label-entity.model";
 
 export class SalaryAdminItem {
@@ -22,6 +22,7 @@ export class SalaryAdminItem {
   readonly city: string;
   readonly skill: string;
   readonly industry: string;
+  readonly salarySourceType: string | null;
   readonly createdAt: Date;
   readonly updatedAt: Date;
 
@@ -53,6 +54,11 @@ export class SalaryAdminItem {
       item.workIndustryId != null
         ? industries.find((x) => x.id == item.workIndustryId)?.title ?? "-"
         : "-";
+
+    this.salarySourceType = item.salarySourceType
+      ? SalarySourceType[item.salarySourceType]
+      : null;
+
     this.createdAt = item.createdAt;
     this.updatedAt = item.updatedAt ?? item.createdAt;
   }
diff --git a/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.html b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.html
new file mode 100644
index 00000000..d0af7e9e
--- /dev/null
+++ b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.html
@@ -0,0 +1,22 @@
+<app-page-header>Импортированные анкеты</app-page-header>
+
+<div class="container my-5" *ngIf="salaries; else dataLoading">
+  <div class="card">
+    <div class="card-body">
+      <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>
+  </div>
+</div>
+
+<ng-template #dataLoading>
+  <div class="container mt-5">
+    <app-data-loader></app-data-loader>
+  </div>
+</ng-template>
diff --git a/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts
new file mode 100644
index 00000000..8fd37c2d
--- /dev/null
+++ b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts
@@ -0,0 +1,33 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { UserAdminService } from "@services/user-admin.service";
+import {
+  mostUsedImports,
+  testUtilStubs,
+  mostUsedServices,
+} from "@shared/test-utils";
+import { SalariesNotInStatsAdminPageComponent } from "./salaries-not-in-stat-admin-page.component";
+
+describe("SalariesNotInStatsAdminPageComponent", () => {
+  let component: SalariesNotInStatsAdminPageComponent;
+  let fixture: ComponentFixture<SalariesNotInStatsAdminPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SalariesNotInStatsAdminPageComponent],
+      imports: [...mostUsedImports],
+      providers: [...testUtilStubs, ...mostUsedServices, UserAdminService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SalariesNotInStatsAdminPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.ts b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.ts
new file mode 100644
index 00000000..939c1855
--- /dev/null
+++ b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.ts
@@ -0,0 +1,94 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+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 {
+  AdminAllSalariesQueryParams,
+  UserSalariesService,
+} from "@services/user-salaries.service";
+import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
+import { AlertService } from "@shared/components/alert/services/alert.service";
+import { SalaryAdminItem } from "../salary-admin-item";
+import { SalariesTableFilter } from "../salaries-table-filter";
+import { LabelEntityDto } from "@services/label-entity.model";
+
+@Component({
+  templateUrl: "./sourced-salaries-admin-page.component.html",
+})
+export class SourcedSalariesAdminPageComponent implements OnInit, OnDestroy {
+  salaries: Array<SalaryAdminItem> | null = null;
+  source: PaginatedList<UserSalaryAdminDto> | null = null;
+
+  professions: Array<LabelEntityDto> = [];
+  skills: Array<LabelEntityDto> = [];
+  industries: Array<LabelEntityDto> = [];
+
+  filter: SalariesTableFilter | null = null;
+  currentPage: number = 1;
+
+  constructor(
+    private readonly service: UserSalariesService,
+    titleService: TitleService,
+    private readonly alert: AlertService
+  ) {
+    titleService.setTitle("Импортированные анкеты");
+  }
+
+  ngOnInit(): void {
+    this.salaries = null;
+    this.source = null;
+
+    this.service
+      .selectBoxItems()
+      .pipe(untilDestroyed(this))
+      .subscribe((x) => {
+        this.professions = x.professions;
+        this.skills = x.skills;
+        this.industries = x.industries;
+
+        this.filter = new SalariesTableFilter(this.professions);
+        this.loadData({
+          page: this.currentPage,
+          pageSize: defaultPageParams.pageSize,
+          ...this.filter,
+        });
+      });
+  }
+
+  loadData(data: AdminAllSalariesQueryParams): void {
+    this.salaries = null;
+    this.source = null;
+    this.currentPage = data.page;
+
+    this.service
+      .sourcedSalaries(data)
+      .pipe(untilDestroyed(this))
+      .subscribe((x) => {
+        this.salaries = x.results.map(
+          (x) =>
+            new SalaryAdminItem(
+              x,
+              this.professions,
+              this.skills,
+              this.industries
+            )
+        );
+        this.source = x;
+      });
+  }
+
+  ngOnDestroy(): void {
+    // ignored
+  }
+
+  deleteSalary(salary: SalaryAdminItem): void {
+    this.service
+      .delete(salary.id)
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        this.alert.success("Анкета удалена");
+        this.ngOnInit();
+      });
+  }
+}
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
index 8c60eda0..30a78d30 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
@@ -224,6 +224,9 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
         grade: data?.grade ?? null,
         profsInclude: data?.profsInclude ?? null,
         cities: data?.cities ?? null,
+        salarySourceType: data?.salarySourceType ?? null,
+        quarterTo: data?.quarterTo ?? null,
+        yearTo: data?.yearTo ?? null,
       })
       .pipe(untilDestroyed(this))
       .subscribe((x) => {
diff --git a/src/app/modules/salaries/components/shared/global-filters-form-group.ts b/src/app/modules/salaries/components/shared/global-filters-form-group.ts
index e19b59fd..b03d0ac6 100644
--- a/src/app/modules/salaries/components/shared/global-filters-form-group.ts
+++ b/src/app/modules/salaries/components/shared/global-filters-form-group.ts
@@ -1,12 +1,16 @@
 import { FormControl, FormGroup } from "@angular/forms";
 import { DeveloperGrade } from "@models/enums";
 import { KazakhstanCity } from "@models/salaries/kazakhstan-city";
+import { SalarySourceType } from "@models/salaries/salary.model";
 import { DeveloperGradeSelectItem } from "@shared/select-boxes/developer-grade-select-item";
 
 export class SalaryChartGlobalFiltersData {
   grade: DeveloperGrade | null = null;
   profsInclude: Array<number> = [];
   cities: Array<KazakhstanCity> = [];
+  salarySourceType: SalarySourceType | null = null;
+  quarterTo: number | null = null;
+  yearTo: number | null = null;
 
   constructor(
     grade: DeveloperGrade | null = null,
diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts
index 6c3f5ed8..6be5d7a4 100644
--- a/src/app/services/user-salaries.service.ts
+++ b/src/app/services/user-salaries.service.ts
@@ -4,7 +4,7 @@ import { ApiService } from "./api.service";
 import { DeveloperGrade } from "@models/enums";
 import { CompanyType } from "@models/salaries/company-type";
 import { Currency } from "@models/salaries/currency";
-import { UserSalary, UserSalaryAdminDto } from "@models/salaries/salary.model";
+import { SalarySourceType, UserSalary, UserSalaryAdminDto } from "@models/salaries/salary.model";
 import { PageParams } from "@models/page-params";
 import { PaginatedList } from "@models/paginated-list";
 import { ConvertObjectToHttpParams } from "@shared/value-objects/convert-object-to-http";
@@ -117,6 +117,9 @@ export interface SalariesChartFilterData {
   grade: DeveloperGrade | null;
   profsInclude: Array<number> | null;
   cities: Array<KazakhstanCity> | null;
+  salarySourceType: SalarySourceType | null;
+  quarterTo: number | null;
+  yearTo: number | null;
 }
 
 export interface SalariesAddingTrendChartParams {
@@ -184,6 +187,16 @@ export class UserSalariesService {
     );
   }
 
+  sourcedSalaries(
+    pageParams: AdminAllSalariesQueryParams
+  ): Observable<PaginatedList<UserSalaryAdminDto>> {
+    return this.api.get<PaginatedList<UserSalaryAdminDto>>(
+      this.root +
+        "sourced-salaries?" +
+        new ConvertObjectToHttpParams(pageParams).get()
+    );
+  }
+
   addingSalariesaTrendChart(
     params: SalariesAddingTrendChartParams
   ): Observable<SalariesAddingTrendChart> {

From 5e42dea20673d2ba36f438a73679f9b8fdf9345d Mon Sep 17 00:00:00 2001
From: "maxim.gorbatyuk" <maxim.gorbatyuk@outlook.com>
Date: Sat, 29 Jun 2024 20:57:24 +0400
Subject: [PATCH 2/4] Added props to form

---
 ...rced-salaries-admin-page.component.spec.ts | 12 ++---
 .../salaries-chart.component.html             |  1 +
 .../salaries-chart.component.ts               |  1 +
 ...salary-chart-global-filters.component.html | 46 ++++++++++++-------
 .../salary-chart-global-filters.component.ts  | 12 +++++
 .../shared/global-filters-form-group.ts       | 38 +++++++++++++--
 src/app/services/user-salaries.service.ts     |  1 +
 7 files changed, 86 insertions(+), 25 deletions(-)

diff --git a/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts
index 8fd37c2d..0f1f10e6 100644
--- a/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts
+++ b/src/app/modules/admin/components/salaries/sourced-salaries-admin-page/sourced-salaries-admin-page.component.spec.ts
@@ -6,15 +6,15 @@ import {
   testUtilStubs,
   mostUsedServices,
 } from "@shared/test-utils";
-import { SalariesNotInStatsAdminPageComponent } from "./salaries-not-in-stat-admin-page.component";
+import { SourcedSalariesAdminPageComponent } from "./sourced-salaries-admin-page.component";
 
-describe("SalariesNotInStatsAdminPageComponent", () => {
-  let component: SalariesNotInStatsAdminPageComponent;
-  let fixture: ComponentFixture<SalariesNotInStatsAdminPageComponent>;
+describe("SourcedSalariesAdminPageComponent", () => {
+  let component: SourcedSalariesAdminPageComponent;
+  let fixture: ComponentFixture<SourcedSalariesAdminPageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SalariesNotInStatsAdminPageComponent],
+      declarations: [SourcedSalariesAdminPageComponent],
       imports: [...mostUsedImports],
       providers: [...testUtilStubs, ...mostUsedServices, UserAdminService],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -22,7 +22,7 @@ describe("SalariesNotInStatsAdminPageComponent", () => {
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SalariesNotInStatsAdminPageComponent);
+    fixture = TestBed.createComponent(SourcedSalariesAdminPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
index 4b653f60..66a4e1e8 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
@@ -205,6 +205,7 @@
           <app-salary-chart-global-filters
             [filterData]="filterData"
             [professions]="professions"
+            [skills]="skills"
             (filtersApplied)="applyGlobalFilters($event)"
             (filtersReset)="resetGlobalFilters()"
             (shareClicked)="share($event)"
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
index 30a78d30..d838dd56 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
@@ -224,6 +224,7 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
         grade: data?.grade ?? null,
         profsInclude: data?.profsInclude ?? null,
         cities: data?.cities ?? null,
+        skills: data?.skills ?? null,
         salarySourceType: data?.salarySourceType ?? null,
         quarterTo: data?.quarterTo ?? null,
         yearTo: data?.yearTo ?? null,
diff --git a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
index 2f5cd4eb..6b12d570 100644
--- a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
+++ b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
@@ -48,23 +48,37 @@
         >
         </ng-select>
       </div>
-
+      <div class="col-md-3 mb-1">
+        <label class="text-sm">Навыки</label>
+        <ng-select
+          [items]="skillsAsOptions"
+          [hideSelected]="true"
+          [selectOnTab]="true"
+          bindLabel="label"
+          bindValue="item"
+          placeholder="Выберите навыки"
+          appendTo="body"
+          formControlName="skills"
+          [multiple]="true"
+        >
+        </ng-select>
+      </div>
+    </div>
+    <div class="row">
       <div class="col-md-4 mb-1 d-flex align-items-end">
-        <div>
-          <button type="submit" class="btn btn-outline-dark">Применить</button>
-          <button
-            type="reset"
-            class="btn btn-outline-secondary ms-2 me-2"
-            (click)="reset()"
-          >
-            Сброс
-          </button>
-          <app-share-button
-            [title]="'Поделиться'"
-            [cssBtnSize]="''"
-            (shareClicked)="share()"
-          ></app-share-button>
-        </div>
+        <button type="submit" class="btn btn-outline-dark">Применить</button>
+        <button
+          type="reset"
+          class="btn btn-outline-secondary ms-2 me-2"
+          (click)="reset()"
+        >
+          Сброс
+        </button>
+        <app-share-button
+          [title]="'Поделиться'"
+          [cssBtnSize]="'small'"
+          (shareClicked)="share()"
+        ></app-share-button>
       </div>
     </div>
   </form>
diff --git a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.ts b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.ts
index 9af43934..c6739649 100644
--- a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.ts
+++ b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.ts
@@ -26,6 +26,9 @@ export class SalaryChartGlobalFiltersComponent implements OnInit {
   @Input()
   professions: Array<LabelEntityDto> = [];
 
+  @Input()
+  skills: Array<LabelEntityDto> = [];
+
   @Output()
   readonly filtersApplied = new EventEmitter<SalaryChartGlobalFiltersData>();
 
@@ -37,6 +40,7 @@ export class SalaryChartGlobalFiltersComponent implements OnInit {
 
   form: GlobalFiltersFormGroup | null = null;
   professionsAsOptions: Array<SelectItem<number>> = [];
+  skillsAsOptions: Array<SelectItem<number>> = [];
 
   constructor(private readonly alert: AlertService) {}
 
@@ -49,6 +53,14 @@ export class SalaryChartGlobalFiltersComponent implements OnInit {
       };
     });
 
+    this.skillsAsOptions = this.skills.map((x) => {
+      return {
+        value: x.id.toString(),
+        item: x.id,
+        label: x.title,
+      };
+    });
+
     this.form = new GlobalFiltersFormGroup(this.filterData);
   }
 
diff --git a/src/app/modules/salaries/components/shared/global-filters-form-group.ts b/src/app/modules/salaries/components/shared/global-filters-form-group.ts
index b03d0ac6..1b652c96 100644
--- a/src/app/modules/salaries/components/shared/global-filters-form-group.ts
+++ b/src/app/modules/salaries/components/shared/global-filters-form-group.ts
@@ -8,6 +8,7 @@ export class SalaryChartGlobalFiltersData {
   grade: DeveloperGrade | null = null;
   profsInclude: Array<number> = [];
   cities: Array<KazakhstanCity> = [];
+  skills: Array<number> = [];
   salarySourceType: SalarySourceType | null = null;
   quarterTo: number | null = null;
   yearTo: number | null = null;
@@ -15,7 +16,11 @@ export class SalaryChartGlobalFiltersData {
   constructor(
     grade: DeveloperGrade | null = null,
     profsInclude: Array<number> = [],
-    cities: Array<KazakhstanCity> = []
+    cities: Array<KazakhstanCity> = [],
+    skills: Array<number> = [],
+    salarySourceType: SalarySourceType | null = null,
+    quarterTo: number | null = null,
+    yearTo: number | null = null
   ) {
     if (grade === DeveloperGrade.Unknown) {
       grade = null;
@@ -24,13 +29,21 @@ export class SalaryChartGlobalFiltersData {
     this.grade = grade;
     this.profsInclude = profsInclude;
     this.cities = cities;
+    this.skills = skills;
+    this.salarySourceType = salarySourceType;
+    this.quarterTo = quarterTo;
+    this.yearTo = yearTo;
   }
 
   equals(other: SalaryChartGlobalFiltersData): boolean {
     return (
       this.grade === other.grade &&
       this.cities.length === other.cities.length &&
-      this.isEqualArrays(this.profsInclude, other.profsInclude)
+      this.isEqualArrays(this.profsInclude, other.profsInclude) &&
+      this.isEqualArrays(this.skills, other.skills) &&
+      this.salarySourceType === other.salarySourceType &&
+      this.quarterTo === other.quarterTo &&
+      this.yearTo === other.yearTo
     );
   }
 
@@ -52,6 +65,10 @@ export class GlobalFiltersFormGroup extends FormGroup {
       grade: new FormControl(filterData?.grade, []),
       profsToInclude: new FormControl(filterData?.profsInclude, []),
       cities: new FormControl(filterData?.cities, []),
+      skills: new FormControl(filterData?.skills, []),
+      salarySourceType: new FormControl(filterData?.salarySourceType, []),
+      quarterTo: new FormControl(filterData?.quarterTo, []),
+      yearTo: new FormControl(filterData?.yearTo, []),
     });
   }
 
@@ -68,7 +85,22 @@ export class GlobalFiltersFormGroup extends FormGroup {
 
     const profsToInclude = (this.value.profsToInclude as Array<number>) ?? [];
     const cities = (this.value.cities as Array<KazakhstanCity>) ?? [];
+    const skills = (this.value.skills as Array<number>) ?? [];
+    const salarySourceType =
+      this.value.salarySourceType != null && this.value.salarySourceType !== "null"
+      ? this.value.salarySourceType as SalarySourceType
+      : null;
 
-    return new SalaryChartGlobalFiltersData(grade, profsToInclude, cities);
+    const quarterTo = this.value.quarterTo ?? null;
+    const yearTo = this.value.yearTo ?? null;
+
+    return new SalaryChartGlobalFiltersData(
+      grade,
+      profsToInclude,
+      cities,
+      skills,
+      salarySourceType,
+      quarterTo,
+      yearTo);
   }
 }
diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts
index 6be5d7a4..f9ecd06a 100644
--- a/src/app/services/user-salaries.service.ts
+++ b/src/app/services/user-salaries.service.ts
@@ -117,6 +117,7 @@ export interface SalariesChartFilterData {
   grade: DeveloperGrade | null;
   profsInclude: Array<number> | null;
   cities: Array<KazakhstanCity> | null;
+  skills: Array<number> | null;
   salarySourceType: SalarySourceType | null;
   quarterTo: number | null;
   yearTo: number | null;

From 95cc49e622a41263f62e7cb2f63259d07c14a825 Mon Sep 17 00:00:00 2001
From: "maxim.gorbatyuk" <maxim.gorbatyuk@outlook.com>
Date: Sun, 30 Jun 2024 15:12:20 +0400
Subject: [PATCH 3/4] Adjusted code

---
 src/app/models/salaries/salary.model.ts       |  2 +-
 ...aries-admin-paginated-table.component.html |  2 +-
 .../components/salaries/salary-admin-item.ts  |  6 ++---
 .../salaries-chart.component.html             |  6 ++---
 .../salaries-chart.component.ts               | 19 ++++++++++++--
 ...salary-chart-global-filters.component.html | 10 +++++++
 .../salaries-paginated-table.component.ts     |  6 ++++-
 .../shared/global-filters-form-group.ts       | 26 ++++++++++++++++---
 src/app/services/user-salaries.service.ts     |  4 +++
 9 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/src/app/models/salaries/salary.model.ts b/src/app/models/salaries/salary.model.ts
index 53967073..12b6a3eb 100644
--- a/src/app/models/salaries/salary.model.ts
+++ b/src/app/models/salaries/salary.model.ts
@@ -29,7 +29,7 @@ export interface UserSalary extends UserSalarySimple {
   skillId: number | null;
   workIndustryId: number | null;
   professionId: number | null;
-  salarySourceType: SalarySourceType | null;
+  sourceType: SalarySourceType | null;
 }
 
 export interface UserSalaryAdminDto extends UserSalary {
diff --git a/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html b/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html
index bb5784aa..42dd4a3a 100644
--- a/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html
+++ b/src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html
@@ -114,7 +114,7 @@
         <td>{{ item.city }}</td>
         <td>{{ item.skill }}</td>
         <td>{{ item.industry }}</td>
-        <td>{{ item.salarySourceType }}</td>
+        <td>{{ item.sourceType }}</td>
         <td>{{ item.updatedAt | date : "yyyy-MM-dd HH:mm" }}</td>
         <td>
           <button
diff --git a/src/app/modules/admin/components/salaries/salary-admin-item.ts b/src/app/modules/admin/components/salaries/salary-admin-item.ts
index 0a0a21e3..3900ced0 100644
--- a/src/app/modules/admin/components/salaries/salary-admin-item.ts
+++ b/src/app/modules/admin/components/salaries/salary-admin-item.ts
@@ -22,7 +22,7 @@ export class SalaryAdminItem {
   readonly city: string;
   readonly skill: string;
   readonly industry: string;
-  readonly salarySourceType: string | null;
+  readonly sourceType: string | null;
   readonly createdAt: Date;
   readonly updatedAt: Date;
 
@@ -55,8 +55,8 @@ export class SalaryAdminItem {
         ? industries.find((x) => x.id == item.workIndustryId)?.title ?? "-"
         : "-";
 
-    this.salarySourceType = item.salarySourceType
-      ? SalarySourceType[item.salarySourceType]
+    this.sourceType = item.sourceType
+      ? SalarySourceType[item.sourceType]
       : null;
 
     this.createdAt = item.createdAt;
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
index 66a4e1e8..65d0fdda 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
@@ -345,7 +345,7 @@
           <span>Исходные данные</span>
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3" *ngIf="showSalariesPaginatedTable">
           <app-salaries-paginated-table
             [filter]="filterData"
             [skills]="skills"
@@ -354,14 +354,14 @@
           ></app-salaries-paginated-table>
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3" *ngIf="noImportSourceWasSelected">
           <app-salaries-adding-chart
             [filter]="filterData"
           ></app-salaries-adding-chart>
         </div>
 
         <div class="mb-3">
-          <div class="mb-5">
+          <div class="mb-5" *ngIf="noImportSourceWasSelected">
             <div>
               Сырые данные можно выгрузить в
               <button
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
index d838dd56..d3ad91cb 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { UserSalary } from "@models/salaries/salary.model";
+import { SalarySourceType, UserSalary } from "@models/salaries/salary.model";
 import { UserSalariesService } from "@services/user-salaries.service";
 import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
 import { SalariesChart } from "./salaries-chart";
@@ -46,6 +46,9 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
   isAuthenticated = false;
   hasPredefinedFilter = false;
   shouldShowSurveyBlock = false;
+  kolesaImportedSalariesWasSelected = false;
+  noImportSourceWasSelected = true;
+  showSalariesPaginatedTable = false;
 
   gradeFilter: DeveloperGrade | null = null;
 
@@ -84,6 +87,7 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
     this.salariesChart = null;
     this.openAddSalaryModal = false;
     this.currentUserSalary = null;
+    this.showSalariesPaginatedTable = false;
 
     const shouldLoadSelectBoxItems =
       this.skills.length === 0 ||
@@ -157,8 +161,18 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
 
     this.filterData = data;
     const selectedGrade = data.grade ? DeveloperGrade[data.grade] : "empty";
-    this.gtag.event("salaries_filters_applied", "salary_chart", selectedGrade);
+    const selectedSourceType = data.salarySourceType
+      ? SalarySourceType[data.salarySourceType]
+      : "empty";
+
+    this.gtag.event("salaries_filters_applied_grade", "salary_chart", selectedGrade);
+    this.gtag.event("salaries_filters_applied_sourcetype", "salary_chart", selectedSourceType);
+
     this.load(data);
+
+    this.noImportSourceWasSelected = data.salarySourceType == null;
+    this.kolesaImportedSalariesWasSelected
+      = data.salarySourceType === SalarySourceType.KolesaDevelopersCsv2022;
   }
 
   resetGlobalFilters(): void {
@@ -247,6 +261,7 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
           const developerProfessionId = 1;
           this.showDataStub = false;
           this.shouldShowSurveyBlock = !x.hasRecentSurveyReply;
+          this.showSalariesPaginatedTable = true;
           this.showAdjustCurrentSalaryProfessionModal =
             x.currentUserSalary != null &&
             x.currentUserSalary.professionId === developerProfessionId;
diff --git a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
index 6b12d570..b748e5a5 100644
--- a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
+++ b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
@@ -65,6 +65,16 @@
       </div>
     </div>
     <div class="row">
+      <div class="col-md-2 mb-1">
+        <label class="text-sm">Источник данных</label>
+        <select class="form-select" formControlName="salarySourceType">
+          <option [value]="null" selected>Собственная статистика</option>
+          <option *ngFor="let item of form.sourceTypes" [value]="item.item">
+            {{ item.label }}
+          </option>
+        </select>
+      </div>
+
       <div class="col-md-4 mb-1 d-flex align-items-end">
         <button type="submit" class="btn btn-outline-dark">Применить</button>
         <button
diff --git a/src/app/modules/salaries/components/salaries-paginated-table/salaries-paginated-table.component.ts b/src/app/modules/salaries/components/salaries-paginated-table/salaries-paginated-table.component.ts
index 7a0071a1..d2ceed25 100644
--- a/src/app/modules/salaries/components/salaries-paginated-table/salaries-paginated-table.component.ts
+++ b/src/app/modules/salaries/components/salaries-paginated-table/salaries-paginated-table.component.ts
@@ -2,7 +2,6 @@ import { Component, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { PaginatedList } from "@models/paginated-list";
 import { UserSalary } from "@models/salaries/salary.model";
 import {
-  SelectBoxItemsResponse,
   UserSalariesService,
 } from "@services/user-salaries.service";
 import { SalaryChartGlobalFiltersData } from "../shared/global-filters-form-group";
@@ -32,6 +31,7 @@ export class SalariesPaginatedTableComponent implements OnInit, OnDestroy {
   filter: SalaryChartGlobalFiltersData | null = null;
 
   source: PaginatedList<UserSalary> | null = null;
+
   private currentPage = 1;
 
   constructor(private readonly service: UserSalariesService) {}
@@ -52,6 +52,10 @@ export class SalariesPaginatedTableComponent implements OnInit, OnDestroy {
         profsInclude: this.filter?.profsInclude ?? [],
         grade: this.filter?.grade ?? null,
         cities: this.filter?.cities ?? [],
+        skills: this.filter?.skills ?? [],
+        salarySourceType: this.filter?.salarySourceType ?? null,
+        quarterTo: this.filter?.quarterTo ?? null,
+        yearTo: this.filter?.yearTo ?? null,
       })
       .pipe(untilDestroyed(this))
       .subscribe((x) => {
diff --git a/src/app/modules/salaries/components/shared/global-filters-form-group.ts b/src/app/modules/salaries/components/shared/global-filters-form-group.ts
index 1b652c96..d2b413f2 100644
--- a/src/app/modules/salaries/components/shared/global-filters-form-group.ts
+++ b/src/app/modules/salaries/components/shared/global-filters-form-group.ts
@@ -3,6 +3,7 @@ import { DeveloperGrade } from "@models/enums";
 import { KazakhstanCity } from "@models/salaries/kazakhstan-city";
 import { SalarySourceType } from "@models/salaries/salary.model";
 import { DeveloperGradeSelectItem } from "@shared/select-boxes/developer-grade-select-item";
+import { SelectItem } from "@shared/select-boxes/select-item";
 
 export class SalaryChartGlobalFiltersData {
   grade: DeveloperGrade | null = null;
@@ -60,6 +61,14 @@ export class GlobalFiltersFormGroup extends FormGroup {
   readonly grades: Array<DeveloperGradeSelectItem> =
     DeveloperGradeSelectItem.gradesSimpleOnly();
 
+  readonly sourceTypes: Array<SelectItem<SalarySourceType>> = [
+    {
+      value: SalarySourceType.KolesaDevelopersCsv2022.toString(),
+      label: "Источник: Kolesa Developers 2022",
+      item: SalarySourceType.KolesaDevelopersCsv2022,
+    },
+  ];
+
   constructor(filterData: SalaryChartGlobalFiltersData | null) {
     super({
       grade: new FormControl(filterData?.grade, []),
@@ -78,18 +87,27 @@ export class GlobalFiltersFormGroup extends FormGroup {
       return null;
     }
 
-    const grade =
+    let grade =
       this.value.grade != null && this.value.grade !== "null"
         ? (this.value.grade as DeveloperGrade)
         : null;
 
+    if (grade === DeveloperGrade.Unknown) {
+      grade = null;
+    }
+
     const profsToInclude = (this.value.profsToInclude as Array<number>) ?? [];
     const cities = (this.value.cities as Array<KazakhstanCity>) ?? [];
     const skills = (this.value.skills as Array<number>) ?? [];
-    const salarySourceType =
+
+    let salarySourceType =
       this.value.salarySourceType != null && this.value.salarySourceType !== "null"
-      ? this.value.salarySourceType as SalarySourceType
-      : null;
+        ? (this.value.salarySourceType as SalarySourceType | null)
+        : null;
+
+    if (salarySourceType === SalarySourceType.Undefined) {
+      salarySourceType = null;
+    }
 
     const quarterTo = this.value.quarterTo ?? null;
     const yearTo = this.value.yearTo ?? null;
diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts
index f9ecd06a..15cec0eb 100644
--- a/src/app/services/user-salaries.service.ts
+++ b/src/app/services/user-salaries.service.ts
@@ -104,6 +104,10 @@ export interface PublicAllSalariesQueryParams extends PageParams {
   grade: DeveloperGrade | null;
   profsInclude: Array<number> | null;
   cities: Array<KazakhstanCity> | null;
+  skills: Array<number> | null;
+  salarySourceType: SalarySourceType | null;
+  quarterTo: number | null;
+  yearTo: number | null;
 }
 
 export interface AdminAllSalariesQueryParams extends PageParams {

From 04a9bdf1f8bd82eb12f90d94b00e71f50a0c16e2 Mon Sep 17 00:00:00 2001
From: "maxim.gorbatyuk" <maxim.gorbatyuk@outlook.com>
Date: Sun, 30 Jun 2024 15:30:03 +0400
Subject: [PATCH 4/4] Added block for kolesa

---
 .../salaries-chart.component.html             |  13 ++
 .../salaries-chart.component.ts               |  31 +--
 ...salary-chart-global-filters.component.html | 182 +++++++++---------
 3 files changed, 123 insertions(+), 103 deletions(-)

diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
index 65d0fdda..1ff96115 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html
@@ -211,6 +211,19 @@
             (shareClicked)="share($event)"
           >
           </app-salary-chart-global-filters>
+
+          <div class="mt-3 alert alert-info" *ngIf="kolesaImportedSalariesWasSelected">
+            <div class="h5">Внимание!</div>
+            <div class="mt-2">
+              Вы просматриваете импортированную статистику <a href="https://zerttey.kolesa.group/developers-2022?utm=techinterview.space" target="_blank" class="text-reset">исследования зарплат работников в IT</a> от 2022 года, проведенного компанией
+              <a href="https://kolesa.group?utm=techinterview.space" target="_blank" class="text-reset">Kolesa Group</a>. 
+              Статистика была собрана в ноябре-декабре 2021 года и включает в себя данные о зарплатах, специализациях и опыте работы. 
+              Список валют показывает те рейты, которые были актуальны на декабрь 2021 года по данным нацбанка РК.
+            </div>
+            <div class="mt-2">
+              Спасибо команде Kolesa Group за предоставленные данные.
+            </div>
+          </div>
         </div>
 
         <div class="mb-5 display-4 chapter-title">
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
index d3ad91cb..e044d18d 100644
--- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
+++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts
@@ -169,10 +169,6 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
     this.gtag.event("salaries_filters_applied_sourcetype", "salary_chart", selectedSourceType);
 
     this.load(data);
-
-    this.noImportSourceWasSelected = data.salarySourceType == null;
-    this.kolesaImportedSalariesWasSelected
-      = data.salarySourceType === SalarySourceType.KolesaDevelopersCsv2022;
   }
 
   resetGlobalFilters(): void {
@@ -233,16 +229,19 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
   private loadChartWithFilter(
     data: SalaryChartGlobalFiltersData | null = null
   ): void {
+
+    const filterToApply = {
+      grade: data?.grade ?? null,
+      profsInclude: data?.profsInclude ?? null,
+      cities: data?.cities ?? null,
+      skills: data?.skills ?? null,
+      salarySourceType: data?.salarySourceType ?? null,
+      quarterTo: data?.quarterTo ?? null,
+      yearTo: data?.yearTo ?? null,
+    };
+
     this.service
-      .charts({
-        grade: data?.grade ?? null,
-        profsInclude: data?.profsInclude ?? null,
-        cities: data?.cities ?? null,
-        skills: data?.skills ?? null,
-        salarySourceType: data?.salarySourceType ?? null,
-        quarterTo: data?.quarterTo ?? null,
-        yearTo: data?.yearTo ?? null,
-      })
+      .charts(filterToApply)
       .pipe(untilDestroyed(this))
       .subscribe((x) => {
         this.isAuthenticated = x.hasAuthentication;
@@ -265,6 +264,12 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
           this.showAdjustCurrentSalaryProfessionModal =
             x.currentUserSalary != null &&
             x.currentUserSalary.professionId === developerProfessionId;
+
+          this.noImportSourceWasSelected = filterToApply.salarySourceType == null;
+          this.kolesaImportedSalariesWasSelected
+            = filterToApply.salarySourceType == SalarySourceType.KolesaDevelopersCsv2022;
+
+          console.log(filterToApply.salarySourceType);
         }
       });
   }
diff --git a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
index b748e5a5..2659b3aa 100644
--- a/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
+++ b/src/app/modules/salaries/components/salaries-chart/salary-chart-global-filters/salary-chart-global-filters.component.html
@@ -1,95 +1,97 @@
 <div>
-  <form *ngIf="form" [formGroup]="form" (ngSubmit)="apply()">
-    <div class="h3 mb-2">Фильтр</div>
-    <div class="mb-2 fst-italic">
-      Вы можете поделиться информацией с кем-то в соцсетях или телеграме. Для
-      этого сначала примените нужные фильтры, а затем нажмите на кнопку
-      "Поделиться". Ссылка будет скопирована в буфер обмена
-    </div>
-    <div class="row">
-      <div class="col-md-2 mb-1">
-        <label class="text-sm">Грейд</label>
-        <select class="form-select" formControlName="grade">
-          <option [value]="null" selected>Все грейды</option>
-          <option *ngFor="let item of form.grades" [value]="item.item">
-            {{ item.label }}
-          </option>
-        </select>
+  <div class="">
+    <form *ngIf="form" [formGroup]="form" (ngSubmit)="apply()">
+      <div class="h3 mb-2">Фильтр</div>
+      <div class="mb-2 fst-italic">
+        Вы можете поделиться информацией с кем-то в соцсетях или телеграме. Для
+        этого сначала примените нужные фильтры, а затем нажмите на кнопку
+        "Поделиться". Ссылка будет скопирована в буфер обмена
       </div>
-
-      <div class="col-md-3 mb-1">
-        <label class="text-sm">Cпециализации</label>
-        <ng-select
-          [items]="professionsAsOptions"
-          [hideSelected]="true"
-          [selectOnTab]="true"
-          bindLabel="label"
-          bindValue="item"
-          placeholder="Все специальности"
-          appendTo="body"
-          formControlName="profsToInclude"
-          [multiple]="true"
-        >
-        </ng-select>
+      <div class="row">
+        <div class="col-md-2 mb-1">
+          <label class="text-sm">Грейд</label>
+          <select class="form-select" formControlName="grade">
+            <option [value]="null" selected>Все грейды</option>
+            <option *ngFor="let item of form.grades" [value]="item.item">
+              {{ item.label }}
+            </option>
+          </select>
+        </div>
+  
+        <div class="col-md-3 mb-1">
+          <label class="text-sm">Cпециализации</label>
+          <ng-select
+            [items]="professionsAsOptions"
+            [hideSelected]="true"
+            [selectOnTab]="true"
+            bindLabel="label"
+            bindValue="item"
+            placeholder="Все специальности"
+            appendTo="body"
+            formControlName="profsToInclude"
+            [multiple]="true"
+          >
+          </ng-select>
+        </div>
+  
+        <div class="col-md-3 mb-1">
+          <label class="text-sm">Города</label>
+          <ng-select
+            [items]="allCities"
+            [hideSelected]="true"
+            [selectOnTab]="true"
+            bindLabel="label"
+            bindValue="item"
+            placeholder="Выберите города"
+            appendTo="body"
+            formControlName="cities"
+            [multiple]="true"
+          >
+          </ng-select>
+        </div>
+        <div class="col-md-3 mb-1">
+          <label class="text-sm">Навыки</label>
+          <ng-select
+            [items]="skillsAsOptions"
+            [hideSelected]="true"
+            [selectOnTab]="true"
+            bindLabel="label"
+            bindValue="item"
+            placeholder="Выберите навыки"
+            appendTo="body"
+            formControlName="skills"
+            [multiple]="true"
+          >
+          </ng-select>
+        </div>
       </div>
-
-      <div class="col-md-3 mb-1">
-        <label class="text-sm">Города</label>
-        <ng-select
-          [items]="allCities"
-          [hideSelected]="true"
-          [selectOnTab]="true"
-          bindLabel="label"
-          bindValue="item"
-          placeholder="Выберите города"
-          appendTo="body"
-          formControlName="cities"
-          [multiple]="true"
-        >
-        </ng-select>
+      <div class="row">
+        <div class="col-md-2 mb-1">
+          <label class="text-sm">Источник данных</label>
+          <select class="form-select" formControlName="salarySourceType">
+            <option [value]="null" selected>Собственная статистика</option>
+            <option *ngFor="let item of form.sourceTypes" [value]="item.item">
+              {{ item.label }}
+            </option>
+          </select>
+        </div>
+  
+        <div class="col-md-4 mb-1 d-flex align-items-end">
+          <button type="submit" class="btn btn-outline-dark">Применить</button>
+          <button
+            type="reset"
+            class="btn btn-outline-secondary ms-2 me-2"
+            (click)="reset()"
+          >
+            Сброс
+          </button>
+          <app-share-button
+            [title]="'Поделиться'"
+            [cssBtnSize]="'small'"
+            (shareClicked)="share()"
+          ></app-share-button>
+        </div>
       </div>
-      <div class="col-md-3 mb-1">
-        <label class="text-sm">Навыки</label>
-        <ng-select
-          [items]="skillsAsOptions"
-          [hideSelected]="true"
-          [selectOnTab]="true"
-          bindLabel="label"
-          bindValue="item"
-          placeholder="Выберите навыки"
-          appendTo="body"
-          formControlName="skills"
-          [multiple]="true"
-        >
-        </ng-select>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-2 mb-1">
-        <label class="text-sm">Источник данных</label>
-        <select class="form-select" formControlName="salarySourceType">
-          <option [value]="null" selected>Собственная статистика</option>
-          <option *ngFor="let item of form.sourceTypes" [value]="item.item">
-            {{ item.label }}
-          </option>
-        </select>
-      </div>
-
-      <div class="col-md-4 mb-1 d-flex align-items-end">
-        <button type="submit" class="btn btn-outline-dark">Применить</button>
-        <button
-          type="reset"
-          class="btn btn-outline-secondary ms-2 me-2"
-          (click)="reset()"
-        >
-          Сброс
-        </button>
-        <app-share-button
-          [title]="'Поделиться'"
-          [cssBtnSize]="'small'"
-          (shareClicked)="share()"
-        ></app-share-button>
-      </div>
-    </div>
-  </form>
+    </form>
+  </div>
 </div>