Edit salary form

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

@@ -54,6 +54,10 @@ export class AdminNavbarComponent {
           {
             title: 'All salaries',
             url: '/admin/salaries'
+          },
+          {
+            title: 'Salaries adding chart',
+            url: '/admin/salaries/salaries-adding-trend-chart'
           }
         ]
       },

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

@@ -6,14 +6,16 @@ import { InterviewTemplatesAdminPageComponent } from './components/interviews/in
 import { AllOrganizationsAdminComponent } from './components/organizations/all-organizations-admin/all-organizations-admin.component';
 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';
 
 const routes: Routes = [
   { path: '', component: AdminStartPageComponent },
   { path: 'users', component: UsersAdminPageComponent },
   { path: 'interview-templates', component: InterviewTemplatesAdminPageComponent },
   { path: 'background-jobs', component: BackgroundJobsComponent },
   { path: 'organizations', component: AllOrganizationsAdminComponent },
-  { path: 'salaries', component: SalariesAdminPageComponent }
+  { path: 'salaries', component: SalariesAdminPageComponent },
+  { path: 'salaries/salaries-adding-trend-chart', component: SalariesAddingChartComponent },
 ];
 
 @NgModule({

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

@@ -12,6 +12,7 @@ import { UsersAdminPageComponent } from './components/users/users-admin-page/use
 import { AllOrganizationsAdminComponent } from './components/organizations/all-organizations-admin/all-organizations-admin.component';
 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';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { SalariesAdminPageComponent } from './components/salaries/salaries-admin
     UsersAdminPageComponent,
     AllOrganizationsAdminComponent,
     AdminStartPageComponent,
-    SalariesAdminPageComponent
+    SalariesAdminPageComponent,
+    SalariesAddingChartComponent,
   ],
   imports: [CommonModule, SharedModule, AdminRoutingModule, FormsModule, ReactiveFormsModule]
 })

src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html

@@ -0,0 +1,15 @@
+<app-page-header>All salaries chart</app-page-header>
+
+<div class="container my-5">
+  <div class="card">
+    <div class="card-body">
+
+      <div class="">
+        <div id="canvas-container">
+          <canvas id="canvas">{{ chart }}</canvas>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss

@@ -0,0 +1,10 @@
+#canvas {
+    min-height: 400px;
+}
+
+#canvas-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+}

src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts

@@ -0,0 +1,29 @@
+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 { SalariesAddingChartComponent } from './salaries-adding-chart.component';
+
+describe('SalariesAddingChartComponent', () => {
+  let component: SalariesAddingChartComponent;
+  let fixture: ComponentFixture<SalariesAddingChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SalariesAddingChartComponent],
+      imports: [...mostUsedImports],
+      providers: [...testUtilStubs, ...mostUsedServices, UserAdminService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SalariesAddingChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { TitleService } from '@services/title.service';
+import { SalariesAddingTrendAdminChart, UserSalariesService } from '@services/user-salaries.service';
+import { untilDestroyed } from '@shared/subscriptions/until-destroyed';
+import { SalariesAddingChart } from './salaries-adding-chart';
+
+@Component({
+  templateUrl: './salaries-adding-chart.component.html',
+  styleUrl: './salaries-adding-chart.component.scss'
+})
+export class SalariesAddingChartComponent implements OnInit, OnDestroy {
+
+  data: SalariesAddingTrendAdminChart | null = null;
+  chart: SalariesAddingChart | null = null;
+
+  constructor(
+    private readonly service: UserSalariesService,
+    private readonly titleService: TitleService) {
+      this.titleService.setTitle('All salaries chart');
+    }
+
+  ngOnInit(): void {
+
+    this.chart = null;
+    this.service
+      .addingSalariesaTrendAdminChart()
+      .pipe(untilDestroyed(this))
+      .subscribe((x) => {
+        this.data = x;
+        this.chart = new SalariesAddingChart('canvas', this.data);
+      });
+  }
+
+  ngOnDestroy(): void {
+    // ignored
+  }
+}

src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts

@@ -0,0 +1,63 @@
+import { RandomRgbColor } from "@modules/salaries/components/salaries-by-grades-chart/random-rgb-color";
+import { SalariesAddingTrendAdminChart } from "@services/user-salaries.service";
+import { Chart, ChartType }  from 'chart.js/auto';
+
+interface ChartDatasetType {
+    label: string;
+    data: Array<number>;
+    borderWidth: number;
+    borderColor: string;
+    backgroundColor: string;
+}
+
+export class SalariesAddingChart extends Chart {
+
+    private readonly datasets: Array<ChartDatasetType> = [];
+
+    constructor(canvasId: string, chartData: SalariesAddingTrendAdminChart) {
+        const randomColor = new RandomRgbColor();
+        const datasets: Array<ChartDatasetType> = [
+            {
+                label: 'All salaries',
+                data: chartData.items.map(x => x.count),
+                borderWidth: 1,
+                borderColor: randomColor.toString(1),
+                backgroundColor: randomColor.toString(0.5),
+            },
+        ];
+
+        super(
+            canvasId,
+            {
+                type: 'line' as ChartType,
+                data: {
+                    labels: chartData.labels,
+                    datasets: datasets,
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                        },
+                    },
+                    elements: {
+                        line: {
+                            tension: 0.4
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            title: {
+                                position: 'start',
+                            },
+                          }
+                    }
+                },
+            });
+
+        this.datasets = datasets;
+    }
+}

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

@@ -2,28 +2,28 @@
   <div class="modal-dialog custom-alert modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <span class="h3 modal-title">Добавьте свою зарплату</span>
+        <span class="h3 modal-title">{{ modalTitle }}</span>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="close()"></button>
       </div>
 
       <div class="modal-body">
         <div class="p-1">
 
-          <div class="my-1 mb-3">
+          <div *ngIf="!salarytoBeEdited" class="my-1 mb-3">
             Для того, чтобы просматривать график зарплат, вам нужно сначала внести свою. График открывается, только если среди данных есть ваша зарплата за последний год.
           </div>
 
-          <hr class="mb-3" />
+          <hr *ngIf="!salarytoBeEdited" class="mb-3" />
 
           <form
-          *ngIf="addSalaryForm"
-          [formGroup]="addSalaryForm"
-          (ngSubmit)="addSalarySubmitAction()">
-          <div class="mb-3">
-            <label>Зарплата в тенге <strong>в месяц</strong>. Если вы получаете в иной валюте, переведите в тенге.</label>
-            <input formControlName="value" type="text" class="form-control form-control-lg" />
-            <app-field-error [field]="addSalaryForm.get('value')" [max]="10000000" [min]="42500"></app-field-error>
-          </div>
+            *ngIf="addSalaryForm"
+            [formGroup]="addSalaryForm"
+            (ngSubmit)="addSalarySubmitAction()">
+            <div class="mb-3">
+              <label>Зарплата в тенге <strong>в месяц</strong>. Если вы получаете в иной валюте, переведите в тенге.</label>
+              <input formControlName="value" type="text" class="form-control form-control-lg" />
+              <app-field-error [field]="addSalaryForm.get('value')" [max]="10000000" [min]="42500"></app-field-error>
+            </div>
 
           <div class="mb-3">
             <div class="row mb-1">
@@ -81,7 +81,7 @@
           </div>
 
           <div class="mb-3 pt-2">
-            <button class="btn btn-primary btn-lg w-100" type="submit">Добавить</button>
+            <button class="btn btn-primary btn-lg w-100" type="submit">{{ saveButtonTitle }}</button>
           </div>
         </form>
 

src/app/modules/salaries/components/add-salary/add-salary.component.spec.ts → src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.spec.ts

@@ -1,23 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AddSalaryComponent } from './add-salary.component';
+import { AddOrEditSalaryComponent } from './add-or-edit-salary.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { mostUsedImports, testUtilStubs, mostUsedServices } from '@shared/test-utils';
 
-describe('AddSalaryComponent', () => {
-  let component: AddSalaryComponent;
-  let fixture: ComponentFixture<AddSalaryComponent>;
+describe('AddOrEditSalaryComponent', () => {
+  let component: AddOrEditSalaryComponent;
+  let fixture: ComponentFixture<AddOrEditSalaryComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AddSalaryComponent],
+      declarations: [AddOrEditSalaryComponent],
       imports: [...mostUsedImports],
       providers: [...testUtilStubs, ...mostUsedServices],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(AddSalaryComponent);
+    fixture = TestBed.createComponent(AddOrEditSalaryComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/modules/salaries/components/add-salary/add-salary.component.ts → src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts

@@ -1,29 +1,38 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { UserSalariesService } from '@services/user-salaries.service';
-import { AddSalaryForm } from './add-salary-form';
+import { EditSalaryForm } from './edit-salary-form';
 import { untilDestroyed } from '@shared/subscriptions/until-destroyed';
 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';
-import { UserSalary } from '@models/salaries/salary.model';
-import { error } from 'console';
+import { UserSalary, UserSalaryAdminDto } from '@models/salaries/salary.model';
 import { AlertService } from '@shared/components/alert/services/alert.service';
-import { catchError, tap } from 'rxjs';
 
 @Component({
-  selector: 'app-add-salary-modal',
-  templateUrl: './add-salary.component.html',
-  styleUrl: './add-salary.component.scss'
+  selector: 'app-add-or-edit-salary-modal',
+  templateUrl: './add-or-edit-salary.component.html',
+  styleUrl: './add-or-edit-salary.component.scss'
 })
-export class AddSalaryComponent implements OnInit, OnDestroy {
+export class AddOrEditSalaryComponent implements OnInit, OnDestroy {
+
+  get modalTitle(): string {
+    return this.salarytoBeEdited ? 'Редактирование зарплаты' : 'Добавьте свою зарплату';
+  }
+
+  get saveButtonTitle(): string {
+    return this.salarytoBeEdited ? 'Сохранить изменения' : 'Добавить';
+  }
+
+  @Input()
+  salarytoBeEdited: UserSalaryAdminDto | null = null;
 
   @Output()
   closed: EventEmitter<void> = new EventEmitter();
 
   @Output()
   salaryAdded: EventEmitter<UserSalary> = new EventEmitter();
 
-  addSalaryForm: AddSalaryForm | null = null;
+  addSalaryForm: EditSalaryForm | null = null;
   errorMessage: string | null = null;
 
   readonly companyTypes: Array<CompanyTypeSelectItem> = CompanyTypeSelectItem.allItems();
@@ -35,7 +44,7 @@ export class AddSalaryComponent implements OnInit, OnDestroy {
     private readonly alert: AlertService) {}
 
   ngOnInit(): void {
-    this.addSalaryForm = new AddSalaryForm();
+    this.addSalaryForm = new EditSalaryForm(this.salarytoBeEdited);
   }
 
   addSalarySubmitAction(): void {
@@ -45,21 +54,40 @@ export class AddSalaryComponent implements OnInit, OnDestroy {
       return;
     }
 
+    if (this.salarytoBeEdited) {
+      this.service
+        .update(this.salarytoBeEdited.id, data)
+        .pipe(untilDestroyed(this))
+        .subscribe(
+          (x) => {
+            if (x.isSuccess && x.createdSalary) {
+              this.errorMessage = null;
+              this.alert.success(this.salarytoBeEdited ? 'Зарплата обновлена' : 'Зарплата успешно записана');
+              this.salaryAdded.emit(x.createdSalary);
+            } else {
+              const error = 'За данный квартал уже есть запись';
+              this.alert.error(error);
+              this.errorMessage = error;
+            }});
+
+      return;
+    }
+
     this.service
       .create(data)
       .pipe(untilDestroyed(this))
       .subscribe(
         (x) => {
           if (x.isSuccess && x.createdSalary) {
             this.errorMessage = null;
-            this.alert.success('Зарплата успешно записана');
+            this.alert.success(this.salarytoBeEdited ? 'Зарплата обновлена' : 'Зарплата успешно записана');
             this.salaryAdded.emit(x.createdSalary);
           } else {
             const error = 'За данный квартал уже есть запись';
             this.alert.error(error);
             this.errorMessage = error;
-          }
-        });
+          }});
+
   }
 
   ngOnDestroy(): void {