From 5ecb1f607aa29a6ae29b2339205a416e439f4e06 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 22 Jan 2024 16:33:31 +0600 Subject: [PATCH 1/5] Adjusted existing form --- ...html => add-or-edit-salary.component.html} | 0 ...scss => add-or-edit-salary.component.scss} | 0 ...s => add-or-edit-salary.component.spec.ts} | 12 ++++----- ...ent.ts => add-or-edit-salary.component.ts} | 21 ++++++++------- ...add-salary-form.ts => edit-salary-form.ts} | 27 ++++++++++--------- .../salaries-chart.component.html | 5 ++-- src/app/modules/salaries/salaries.module.ts | 4 +-- 7 files changed, 36 insertions(+), 33 deletions(-) rename src/app/modules/salaries/components/add-salary/{add-salary.component.html => add-or-edit-salary.component.html} (100%) rename src/app/modules/salaries/components/add-salary/{add-salary.component.scss => add-or-edit-salary.component.scss} (100%) rename src/app/modules/salaries/components/add-salary/{add-salary.component.spec.ts => add-or-edit-salary.component.spec.ts} (64%) rename src/app/modules/salaries/components/add-salary/{add-salary.component.ts => add-or-edit-salary.component.ts} (78%) rename src/app/modules/salaries/components/add-salary/{add-salary-form.ts => edit-salary-form.ts} (66%) diff --git a/src/app/modules/salaries/components/add-salary/add-salary.component.html b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html similarity index 100% rename from src/app/modules/salaries/components/add-salary/add-salary.component.html rename to src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html diff --git a/src/app/modules/salaries/components/add-salary/add-salary.component.scss b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.scss similarity index 100% rename from src/app/modules/salaries/components/add-salary/add-salary.component.scss rename to src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.scss diff --git a/src/app/modules/salaries/components/add-salary/add-salary.component.spec.ts b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.spec.ts similarity index 64% rename from src/app/modules/salaries/components/add-salary/add-salary.component.spec.ts rename to src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.spec.ts index 035696de..d00727dc 100644 --- a/src/app/modules/salaries/components/add-salary/add-salary.component.spec.ts +++ b/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; +describe('AddOrEditSalaryComponent', () => { + let component: AddOrEditSalaryComponent; + let fixture: ComponentFixture; 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(); }); diff --git a/src/app/modules/salaries/components/add-salary/add-salary.component.ts b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts similarity index 78% rename from src/app/modules/salaries/components/add-salary/add-salary.component.ts rename to src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts index feeac6f6..a6309b69 100644 --- a/src/app/modules/salaries/components/add-salary/add-salary.component.ts +++ b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts @@ -1,21 +1,22 @@ -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 { 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 { + + @Input() + salarytoBeEdited: UserSalary | null = null; @Output() closed: EventEmitter = new EventEmitter(); @@ -23,7 +24,7 @@ export class AddSalaryComponent implements OnInit, OnDestroy { @Output() salaryAdded: EventEmitter = new EventEmitter(); - addSalaryForm: AddSalaryForm | null = null; + addSalaryForm: EditSalaryForm | null = null; errorMessage: string | null = null; readonly companyTypes: Array = CompanyTypeSelectItem.allItems(); @@ -35,7 +36,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 { diff --git a/src/app/modules/salaries/components/add-salary/add-salary-form.ts b/src/app/modules/salaries/components/add-salary/edit-salary-form.ts similarity index 66% rename from src/app/modules/salaries/components/add-salary/add-salary-form.ts rename to src/app/modules/salaries/components/add-salary/edit-salary-form.ts index c0a63f96..0c907bc4 100644 --- a/src/app/modules/salaries/components/add-salary/add-salary-form.ts +++ b/src/app/modules/salaries/components/add-salary/edit-salary-form.ts @@ -2,46 +2,47 @@ import { FormControl, FormGroup, Validators } from "@angular/forms"; import { DeveloperGrade } from "@models/enums"; import { CompanyType } from "@models/salaries/company-type"; import { Currency } from "@models/salaries/currency"; +import { UserSalary } from "@models/salaries/salary.model"; import { UserProfession } from "@models/salaries/user-profession"; import { CreateUserSalaryRequest } from "@services/user-salaries.service"; -export class AddSalaryForm extends FormGroup { +export class EditSalaryForm extends FormGroup { static readonly digitsPattern = '^[0-9]*$'; - constructor() { + constructor(private readonly salarytoBeEdited: UserSalary | null) { const now = new Date(Date.now()); const currentQuarter = Math.floor((now.getMonth() + 3) / 3); super({ value: new FormControl( - null, + salarytoBeEdited?.value ?? null, [ - Validators.pattern(AddSalaryForm.digitsPattern), + Validators.pattern(EditSalaryForm.digitsPattern), Validators.required, Validators.min(42500), Validators.max(10000000), ]), quarter: new FormControl( - currentQuarter, + salarytoBeEdited?.quarter ?? currentQuarter, [ - Validators.pattern(AddSalaryForm.digitsPattern), + Validators.pattern(EditSalaryForm.digitsPattern), Validators.min(1), Validators.max(4), Validators.required ]), year: new FormControl( - now.getFullYear(), + salarytoBeEdited?.year ?? now.getFullYear(), [ - Validators.pattern(AddSalaryForm.digitsPattern), + Validators.pattern(EditSalaryForm.digitsPattern), Validators.min(2000), Validators.max(2100), Validators.required ]), - currency: new FormControl(Currency.KZT, [Validators.required]), - company: new FormControl(null, [Validators.required]), - grade: new FormControl(null, []), - profession: new FormControl(null, [Validators.required]), + currency: new FormControl(salarytoBeEdited?.currency ?? Currency.KZT, [Validators.required]), + company: new FormControl(salarytoBeEdited?.currency ?? null, [Validators.required]), + grade: new FormControl(salarytoBeEdited?.currency ?? null, [Validators.required]), + profession: new FormControl(salarytoBeEdited?.currency ?? null, [Validators.required]), }); } @@ -66,4 +67,4 @@ static readonly digitsPattern = '^[0-9]*$'; this.markAllAsTouched(); return null; } -} \ No newline at end of file +} 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 a42e92f3..27fa8c4b 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 @@ -123,11 +123,12 @@ - + >
diff --git a/src/app/modules/salaries/salaries.module.ts b/src/app/modules/salaries/salaries.module.ts index 5c95c7ff..e64ed26a 100644 --- a/src/app/modules/salaries/salaries.module.ts +++ b/src/app/modules/salaries/salaries.module.ts @@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgSelectModule } from '@ng-select/ng-select'; import { SharedModule } from '@shared/shared.module'; import { SalariesChartComponent } from './components/salaries-chart/salaries-chart.component'; -import { AddSalaryComponent } from './components/add-salary/add-salary.component'; +import { AddOrEditSalaryComponent } from './components/add-salary/add-or-edit-salary.component'; import { SalariesByGradesChartComponent } from './components/salaries-by-grades-chart/salaries-by-grades-chart.component'; import { SalaryBlockValueComponent } from './components/salaries-chart/salary-block-value/salary-block-value.component'; import { SalaryBlockRemoteValueComponent } from './components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component'; @@ -14,7 +14,7 @@ import { SalaryChartGlobalFiltersComponent } from './components/salaries-chart/s @NgModule({ declarations: [ SalariesChartComponent, - AddSalaryComponent, + AddOrEditSalaryComponent, SalariesByGradesChartComponent, SalaryBlockValueComponent, SalaryBlockRemoteValueComponent, From e61fb8331d786b8b3d883f0fda45c88347b3d07d Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 22 Jan 2024 16:53:23 +0600 Subject: [PATCH 2/5] Adjusted models --- src/app/models/salaries/salary.model.ts | 1 + .../add-or-edit-salary.component.ts | 29 +++++++++++++++---- .../salaries-chart/salaries-chart.ts | 9 ++++++ src/app/services/user-salaries.service.ts | 25 +++++++++++----- 4 files changed, 52 insertions(+), 12 deletions(-) diff --git a/src/app/models/salaries/salary.model.ts b/src/app/models/salaries/salary.model.ts index 7fd6bed3..a02e5a8e 100644 --- a/src/app/models/salaries/salary.model.ts +++ b/src/app/models/salaries/salary.model.ts @@ -8,6 +8,7 @@ export interface UserSalaryAdminDto extends UserSalary{ } export interface UserSalary { + id: string; value: number; quarter: number; year: number; diff --git a/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts index a6309b69..290f7598 100644 --- a/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts +++ b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts @@ -5,7 +5,7 @@ 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 { UserSalary, UserSalaryAdminDto } from '@models/salaries/salary.model'; import { AlertService } from '@shared/components/alert/services/alert.service'; @Component({ @@ -16,7 +16,7 @@ import { AlertService } from '@shared/components/alert/services/alert.service'; export class AddOrEditSalaryComponent implements OnInit, OnDestroy { @Input() - salarytoBeEdited: UserSalary | null = null; + salarytoBeEdited: UserSalaryAdminDto | null = null; @Output() closed: EventEmitter = new EventEmitter(); @@ -46,6 +46,25 @@ export class AddOrEditSalaryComponent 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)) @@ -53,14 +72,14 @@ export class AddOrEditSalaryComponent implements OnInit, OnDestroy { (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 { diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts index bcc64f0f..98acf667 100644 --- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts +++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts @@ -1,6 +1,7 @@ import { formatNumber } from "@angular/common"; import { SalariesByMoneyBarChart, SalariesChartResponse } from "@services/user-salaries.service"; import { SalariesPerProfession } from "../salaries-per-profession"; +import { UserSalary } from "@models/salaries/salary.model"; export class SalariesChart { @@ -18,6 +19,9 @@ export class SalariesChart { readonly salariesPerProfessionForLocal: Array | null; readonly salariesPerProfessionForRemote: Array | null; + readonly currentUserSalary: UserSalary | null = null; + readonly currentUserSalaryValue: string | null = null; + readonly hasRemoteSalaries: boolean; constructor(readonly data: SalariesChartResponse) { @@ -37,6 +41,11 @@ export class SalariesChart { this.salariesPerProfessionForLocal = salariesPerProfession.local; this.salariesPerProfessionForRemote = salariesPerProfession.remote; this.hasRemoteSalaries = this.salariesPerProfessionForRemote.length > 0; + + this.currentUserSalary = data.currentUserSalary; + this.currentUserSalaryValue = data.currentUserSalary + ? SalariesChart.formatNumber(data.currentUserSalary.value) + : null; } private static formatNumber(value: number | null): string | null { diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts index 46974013..787cc69c 100644 --- a/src/app/services/user-salaries.service.ts +++ b/src/app/services/user-salaries.service.ts @@ -33,6 +33,8 @@ export interface SalariesChartResponse { salariesByMoneyBarChart: SalariesByMoneyBarChart | null; salariesByMoneyBarChartForRemote: SalariesByMoneyBarChart | null; + + currentUserSalary: UserSalaryAdminDto | null; } export interface SalariesByProfessionMoneyBarChartItem { @@ -58,11 +60,6 @@ export interface CreateSalaryRecordResponse { createdSalary: UserSalary | null; } -export interface UpdateSalaryRequest { - company: CompanyType; - grade: DeveloperGrade | null; -} - export interface AdminAllSalariesQueryParams extends PageParams { page: number; pageSize: number; @@ -75,6 +72,16 @@ export interface SalariesChartFilterData { grade: DeveloperGrade | null; } +export interface SalariesAddingTrendAdminChart { + labels: string[]; + items: Array<{ + count: number, + startedAt: Date, + }>; + + salariesPerUser: number; +} + @Injectable({ providedIn: 'root' }) @@ -87,6 +94,10 @@ export class UserSalariesService { this.root + 'all?' + new ConvertObjectToHttpParams(pageParams).get()); } + addingSalariesaTrendAdminChart(): Observable { + return this.api.get(this.root + 'salaries-adding-trend-chart'); + } + charts(filters: SalariesChartFilterData): Observable { return this.api.get( this.root + 'chart?' + new ConvertObjectToHttpParams(filters).get()); @@ -96,8 +107,8 @@ export class UserSalariesService { return this.api.post(this.root, data); } - update(id: string, data: UpdateSalaryRequest): Observable { - return this.api.post(this.root + id, data); + update(id: string, data: CreateUserSalaryRequest): Observable { + return this.api.post(this.root + id, data); } delete(dataId: string): Observable { From 3b5b455feef63887b021f43c06f403c33a67ee75 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 22 Jan 2024 18:29:33 +0600 Subject: [PATCH 3/5] Adjusted front page --- src/app/models/salaries/salary.model.ts | 1 - .../add-or-edit-salary.component.html | 24 ++--- .../add-or-edit-salary.component.ts | 8 ++ .../components/add-salary/edit-salary-form.ts | 6 +- .../salaries-chart.component.html | 93 +++++++++++-------- .../salaries-chart.component.ts | 31 +++++++ .../salaries-chart/salaries-chart.ts | 4 +- .../salary-block-remote-value.component.html | 2 +- .../salary-block-remote-value.component.ts | 2 +- .../salaries-chart/stub-salaries-chart.ts | 1 + src/styles.scss | 3 +- 11 files changed, 115 insertions(+), 60 deletions(-) diff --git a/src/app/models/salaries/salary.model.ts b/src/app/models/salaries/salary.model.ts index a02e5a8e..7fd6bed3 100644 --- a/src/app/models/salaries/salary.model.ts +++ b/src/app/models/salaries/salary.model.ts @@ -8,7 +8,6 @@ export interface UserSalaryAdminDto extends UserSalary{ } export interface UserSalary { - id: string; value: number; quarter: number; year: number; diff --git a/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html index 3b9c31ee..7367625d 100644 --- a/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html +++ b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html @@ -2,28 +2,28 @@
- Добавьте свою зарплату + {{ modalTitle }}
-
+
Для того, чтобы просматривать график зарплат, вам нужно сначала внести свою. График открывается, только если среди данных есть ваша зарплата за последний год.
-
+
-
- - - -
+ *ngIf="addSalaryForm" + [formGroup]="addSalaryForm" + (ngSubmit)="addSalarySubmitAction()"> +
+ + + +
@@ -81,7 +81,7 @@
- +
diff --git a/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts index 290f7598..3443fe95 100644 --- a/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts +++ b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.ts @@ -15,6 +15,14 @@ import { AlertService } from '@shared/components/alert/services/alert.service'; }) export class AddOrEditSalaryComponent implements OnInit, OnDestroy { + get modalTitle(): string { + return this.salarytoBeEdited ? 'Редактирование зарплаты' : 'Добавьте свою зарплату'; + } + + get saveButtonTitle(): string { + return this.salarytoBeEdited ? 'Сохранить изменения' : 'Добавить'; + } + @Input() salarytoBeEdited: UserSalaryAdminDto | null = null; diff --git a/src/app/modules/salaries/components/add-salary/edit-salary-form.ts b/src/app/modules/salaries/components/add-salary/edit-salary-form.ts index 0c907bc4..58461a80 100644 --- a/src/app/modules/salaries/components/add-salary/edit-salary-form.ts +++ b/src/app/modules/salaries/components/add-salary/edit-salary-form.ts @@ -40,9 +40,9 @@ static readonly digitsPattern = '^[0-9]*$'; Validators.required ]), currency: new FormControl(salarytoBeEdited?.currency ?? Currency.KZT, [Validators.required]), - company: new FormControl(salarytoBeEdited?.currency ?? null, [Validators.required]), - grade: new FormControl(salarytoBeEdited?.currency ?? null, [Validators.required]), - profession: new FormControl(salarytoBeEdited?.currency ?? null, [Validators.required]), + company: new FormControl(salarytoBeEdited?.company ?? null, [Validators.required]), + grade: new FormControl(salarytoBeEdited?.grade ?? null, [Validators.required]), + profession: new FormControl(salarytoBeEdited?.profession ?? null, [Validators.required]), }); } 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 697fd8d2..c20f68fd 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 @@ -34,48 +34,56 @@
-
-
Демонстрационные данные:
-
- -
- - -
- +
+
+
Демонстрационные данные:
+
+ +
+ + +
+ +
+ +
+ +
+ + + +
+ +
+
+ + +
+
+ Рассчитано на основании {{ salariesChart.countOfRecords }} анкет(ы)
- -
- -
- - - -
- +
+
Ваша текущая зарплата указана за {{ salariesChart.currentUserSalary.quarter }} квартал {{salariesChart.currentUserSalary.year}} года.
+
+ Вы можете + или к статистике. +
-
- - -
-
- Рассчитано на основании {{ salariesChart.countOfRecords }} анкет(ы) -
-
- -
-
Данные сгенерированы для демонстрации. - для получения актуальных данных.
-
+ +
+
Данные сгенерированы для демонстрации. + для получения актуальных данных.
+
+
@@ -129,6 +137,13 @@ (closed)="closeAddSalaryAction()" (salaryAdded)="onSalaryAdded($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 8ef95591..281e16a9 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 @@ -24,10 +24,25 @@ export class SalariesChartComponent implements OnInit, OnDestroy { showDataStub = false; openAddSalaryModal = false; + openEditCurrentSalaryModal = false; isAuthenticated = false; gradeFilter: DeveloperGrade | null = null; + get userExistingSalaryLabel() : string { + + if (this.showDataStub) { + return 'Здесь будут отображаться возможные действия'; + } + + if (this.salariesChart == null || this.salariesChart.currentUserSalary == null) { + return ''; + } + + const salary = this.salariesChart.currentUserSalary; + return `Вы указали зарплату за ${salary.quarter}.${salary.year}`; + } + constructor( private readonly service: UserSalariesService, title: TitleService, @@ -76,15 +91,31 @@ export class SalariesChartComponent implements OnInit, OnDestroy { this.authService.login(); } + openEditSalaryAction(): void { + if (this.salariesChart?.currentUserSalary) { + this.openEditCurrentSalaryModal = true; + return; + } + } + closeAddSalaryAction(): void { this.openAddSalaryModal = false; } + closeEditSalaryAction(): void { + this.openEditCurrentSalaryModal = false; + } + onSalaryAdded(salary: UserSalary): void { this.openAddSalaryModal = false; this.load(); } + onSalaryUpdated(salary: UserSalary): void { + this.openEditCurrentSalaryModal = false; + this.load(); + } + applyGlobalFilters(data: SalaryChartGlobalFiltersData): void { if (this.filterData.equals(data)) { diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts index 98acf667..ea86d821 100644 --- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts +++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts @@ -1,7 +1,7 @@ import { formatNumber } from "@angular/common"; import { SalariesByMoneyBarChart, SalariesChartResponse } from "@services/user-salaries.service"; import { SalariesPerProfession } from "../salaries-per-profession"; -import { UserSalary } from "@models/salaries/salary.model"; +import { UserSalary, UserSalaryAdminDto } from "@models/salaries/salary.model"; export class SalariesChart { @@ -19,7 +19,7 @@ export class SalariesChart { readonly salariesPerProfessionForLocal: Array | null; readonly salariesPerProfessionForRemote: Array | null; - readonly currentUserSalary: UserSalary | null = null; + readonly currentUserSalary: UserSalaryAdminDto | null = null; readonly currentUserSalaryValue: string | null = null; readonly hasRemoteSalaries: boolean; diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html index 7a29e4a7..7cbb8c1d 100644 --- a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html @@ -1,5 +1,5 @@
-
{{ title }}
+
{{ title }}
{{ value }} тг. diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts index 6a888c7f..8e18a751 100644 --- a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts @@ -8,7 +8,7 @@ import { Component, Input } from '@angular/core'; export class SalaryBlockRemoteValueComponent { @Input() - title: string = ''; + title: string | null = ''; @Input() value: string = ''; diff --git a/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts b/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts index 806b3233..106fcd92 100644 --- a/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts +++ b/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts @@ -40,6 +40,7 @@ export class StubSalariesChart extends SalariesChart { averageRemoteSalary: StubSalariesChart.getRandomNumber(1_200, 600) * 1000, medianRemoteSalary: StubSalariesChart.getRandomNumber(1_200, 600) * 1000, shouldAddOwnSalary: true, + currentUserSalary: null, salaries: salaries, salariesByMoneyBarChart: { items: StubSalariesChart.salaryLabels.map((x) => { diff --git a/src/styles.scss b/src/styles.scss index 70a83f10..d59f509e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -76,7 +76,7 @@ ul.no-bullets { background-color: transparent; border: 0; font-weight: 600; - font-size: 0.875rem; + /*font-size: 0.875rem;*/ text-decoration: none; &:disabled { @@ -116,6 +116,7 @@ ul.no-bullets { color: $color-info; &:hover { color: darken($color: $color-info, $amount: 20%); + font-weight: 600; } } } From 4fae5270b516c3b3172faddcf9de66a1d32ee58f Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 22 Jan 2024 18:55:41 +0600 Subject: [PATCH 4/5] Added component for admin chart --- .../admin-navbar/admin-navbar.component.ts | 4 ++ src/app/modules/admin/admin-routing.module.ts | 4 +- src/app/modules/admin/admin.module.ts | 4 +- .../salaries-adding-chart.component.html | 29 +++++++++ .../salaries-adding-chart.component.scss | 10 +++ .../salaries-adding-chart.component.spec.ts | 29 +++++++++ .../salaries-adding-chart.component.ts | 48 ++++++++++++++ .../salaries-adding-chart.ts | 63 +++++++++++++++++++ .../salaries-by-grades-chart.component.ts | 14 ++--- .../salaries-chart-js-object.ts | 2 - .../salaries-chart.component.ts | 2 +- 11 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html create mode 100644 src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss create mode 100644 src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts create mode 100644 src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts create mode 100644 src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts diff --git a/src/app/components/admin-navbar/admin-navbar.component.ts b/src/app/components/admin-navbar/admin-navbar.component.ts index 8216d098..1a7e4198 100644 --- a/src/app/components/admin-navbar/admin-navbar.component.ts +++ b/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' } ] }, diff --git a/src/app/modules/admin/admin-routing.module.ts b/src/app/modules/admin/admin-routing.module.ts index 90e8b7bb..0fdf865a 100644 --- a/src/app/modules/admin/admin-routing.module.ts +++ b/src/app/modules/admin/admin-routing.module.ts @@ -6,6 +6,7 @@ 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 }, @@ -13,7 +14,8 @@ const routes: Routes = [ { 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({ diff --git a/src/app/modules/admin/admin.module.ts b/src/app/modules/admin/admin.module.ts index 31dbd104..a117455a 100644 --- a/src/app/modules/admin/admin.module.ts +++ b/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] }) diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html new file mode 100644 index 00000000..fc85e2b4 --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html @@ -0,0 +1,29 @@ +All salaries chart + +
+
+
+ +
+
+ {{ chart }} +
+
+ +
+
+
+ + +
+ +
+ + + +
+
+
There is no salaries.
+
+
+ \ No newline at end of file diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss new file mode 100644 index 00000000..260e2ae6 --- /dev/null +++ b/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; +} diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts new file mode 100644 index 00000000..1348dd1d --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts new file mode 100644 index 00000000..4036524f --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts @@ -0,0 +1,48 @@ +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; + + readonly canvasId = 'canvas_' + Math.random().toString(36).substring(7); + + constructor( + private readonly service: UserSalariesService, + private readonly titleService: TitleService) {} + + ngOnInit(): void { + this.titleService.setTitle('All salaries chart'); + this.chart = null; + this.service + .addingSalariesaTrendAdminChart() + .pipe(untilDestroyed(this)) + .subscribe((x) => { + this.data = x; + }); + } + + ngAfterViewInit() { + if (this.data != null) { + this.chart = new SalariesAddingChart(this.canvasId, this.data); + /*var chartEl = document.getElementById(this.canvasId); + if (chartEl != null && chartEl.parentElement != null) { + chartEl.style.height = chartEl?.parentElement.style.height ?? '100%'; + }*/ + } else { + this.chart = null; + } + } + + ngOnDestroy(): void { + // ignored + } +} diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts new file mode 100644 index 00000000..00c3b4c0 --- /dev/null +++ b/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; + borderWidth: number; + borderColor: string; + backgroundColor: string; +} + +export class SalariesAddingChart extends Chart { + + private readonly datasets: Array = []; + + constructor(canvasId: string, chartData: SalariesAddingTrendAdminChart) { + const randomColor = new RandomRgbColor(); + const datasets: Array = [ + { + 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; + } +} \ No newline at end of file diff --git a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts index 76f05090..b8a18cbc 100644 --- a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts +++ b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts @@ -46,14 +46,14 @@ export class SalariesByGradesChartComponent implements OnInit, OnDestroy { private initChart(): void { if (this.chart == null || this.salaries == null) { return; - } + } - this.chartDataLocal = new SalariesChartJsObject(this.canvasId, this.chart); - this.chartDataLocal.hideProfessionDatasets(); + this.chartDataLocal = new SalariesChartJsObject(this.canvasId, this.chart); + this.chartDataLocal.hideProfessionDatasets(); - var chartEl = document.getElementById(this.canvasId); - if (chartEl != null && chartEl.parentElement != null) { - chartEl.style.height = chartEl?.parentElement.style.height ?? '100%'; - } + var chartEl = document.getElementById(this.canvasId); + if (chartEl != null && chartEl.parentElement != null) { + chartEl.style.height = chartEl?.parentElement.style.height ?? '100%'; + } } } diff --git a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-chart-js-object.ts b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-chart-js-object.ts index 00702e26..6639c1da 100644 --- a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-chart-js-object.ts +++ b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-chart-js-object.ts @@ -18,8 +18,6 @@ export class SalariesChartJsObject extends Chart { private readonly datasets: Array = []; constructor(canvasId: string, chartData: SalariesByMoneyBarChart) { - - const ctx = document.getElementById(canvasId) as HTMLCanvasElement; const randomColor = new RandomRgbColor(); const datasets: Array = [ { 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 281e16a9..1ac3facb 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 @@ -40,7 +40,7 @@ export class SalariesChartComponent implements OnInit, OnDestroy { } const salary = this.salariesChart.currentUserSalary; - return `Вы указали зарплату за ${salary.quarter}.${salary.year}`; + return `Вы указали зарплату за ${salary.quarter}.${salary.year}. Вы можете `; } constructor( From 2b112397298bfc489a2cbd76096ff26b553b0e82 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 22 Jan 2024 19:01:08 +0600 Subject: [PATCH 5/5] Fixed chart --- .../salaries-adding-chart.component.html | 22 ++++--------------- .../salaries-adding-chart.component.ts | 21 +++++------------- 2 files changed, 9 insertions(+), 34 deletions(-) diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html index fc85e2b4..0f03acff 100644 --- a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html @@ -1,29 +1,15 @@ All salaries chart -
+
-
-
- {{ chart }} +
+
+ {{ chart }}
- - -
- -
- - - -
-
-
There is no salaries.
-
-
- \ No newline at end of file diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts index 4036524f..841e2a49 100644 --- a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts @@ -13,35 +13,24 @@ export class SalariesAddingChartComponent implements OnInit, OnDestroy { data: SalariesAddingTrendAdminChart | null = null; chart: SalariesAddingChart | null = null; - readonly canvasId = 'canvas_' + Math.random().toString(36).substring(7); - constructor( private readonly service: UserSalariesService, - private readonly titleService: TitleService) {} + private readonly titleService: TitleService) { + this.titleService.setTitle('All salaries chart'); + } ngOnInit(): void { - this.titleService.setTitle('All salaries chart'); + this.chart = null; this.service .addingSalariesaTrendAdminChart() .pipe(untilDestroyed(this)) .subscribe((x) => { this.data = x; + this.chart = new SalariesAddingChart('canvas', this.data); }); } - ngAfterViewInit() { - if (this.data != null) { - this.chart = new SalariesAddingChart(this.canvasId, this.data); - /*var chartEl = document.getElementById(this.canvasId); - if (chartEl != null && chartEl.parentElement != null) { - chartEl.style.height = chartEl?.parentElement.style.height ?? '100%'; - }*/ - } else { - this.chart = null; - } - } - ngOnDestroy(): void { // ignored }