Refactoring

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

@@ -42,6 +42,10 @@ export class AdminNavbarComponent {
       {
         title: 'Select boxes',
         links: [
+          {
+            title: 'Professions',
+            url: '/admin/professions'
+          },
           {
             title: 'Skills',
             url: '/admin/skills'

src/app/models/salaries/salary.model.ts

@@ -4,7 +4,7 @@ import { Currency } from "./currency";
 import { UserProfession } from "./user-profession";
 import { KazakhstanCity } from "./kazakhstan-city";
 
-export interface UserSalaryAdminDto extends UserSalary{
+export interface UserSalaryAdminDto extends UserSalary {
     id: string;
     updatedAt: Date | null;
 }
@@ -20,5 +20,6 @@ export interface UserSalary {
     city: KazakhstanCity | null;
     skillId: number | null;
     workIndustryId: number | null;
+    professionId: number | null;
     createdAt: Date;
 }

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

@@ -7,8 +7,9 @@ import { UsersAdminPageComponent } from './components/users/users-admin-page/use
 import { SalariesAdminPageComponent } from './components/salaries/salaries-admin-page/salaries-admin-page.component';
 import { SalariesAddingChartComponent } from './components/salaries/salaries-adding-chart/salaries-adding-chart.component';
 import { SalariesNotInStatsAdminPageComponent } from './components/salaries/salaries-not-in-stat-admin-page/salaries-not-in-stat-admin-page.component';
-import { SkillsPaginatedTableComponent } from './components/skills/skills-paginated-table/skills-paginated-table.component';
-import { WorkIndustriesPaginatedTableComponent } from './components/work-industries/work-industries-paginated-table/work-indusrties-paginated-table.component';
+import { SkillsPaginatedTableComponent } from './components/label-entities/skills-paginated-table/skills-paginated-table.component';
+import { WorkIndustriesPaginatedTableComponent } from './components/label-entities/work-industries-paginated-table/work-indusrties-paginated-table.component';
+import { ProfessionsPaginatedTableComponent } from './components/label-entities/professions-paginated-table/professions-paginated-table.component';
 
 const routes: Routes = [
   { path: '', component: AdminStartPageComponent },
@@ -17,6 +18,7 @@ const routes: Routes = [
   { path: 'background-jobs', component: BackgroundJobsComponent },
   { path: 'skills', component: SkillsPaginatedTableComponent },
   { path: 'work-industries', component: WorkIndustriesPaginatedTableComponent },
+  { path: 'professions', component: ProfessionsPaginatedTableComponent },
   { path: 'salaries', component: SalariesAdminPageComponent },
   { path: 'salaries/not-in-stats', component: SalariesNotInStatsAdminPageComponent },
   { path: 'salaries/salaries-adding-trend-chart', component: SalariesAddingChartComponent },

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

@@ -14,8 +14,9 @@ import { SalariesAdminPageComponent } from './components/salaries/salaries-admin
 import { SalariesAddingChartComponent } from './components/salaries/salaries-adding-chart/salaries-adding-chart.component';
 import { SalariesAdminPaginatedTableComponent } from './components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component';
 import { SalariesNotInStatsAdminPageComponent } from './components/salaries/salaries-not-in-stat-admin-page/salaries-not-in-stat-admin-page.component';
-import { SkillsPaginatedTableComponent } from './components/skills/skills-paginated-table/skills-paginated-table.component';
-import { WorkIndustriesPaginatedTableComponent } from './components/work-industries/work-industries-paginated-table/work-indusrties-paginated-table.component';
+import { SkillsPaginatedTableComponent } from './components/label-entities/skills-paginated-table/skills-paginated-table.component';
+import { WorkIndustriesPaginatedTableComponent } from './components/label-entities/work-industries-paginated-table/work-indusrties-paginated-table.component';
+import { ProfessionsPaginatedTableComponent } from './components/label-entities/professions-paginated-table/professions-paginated-table.component';
 
 @NgModule({
   declarations: [
@@ -31,6 +32,7 @@ import { WorkIndustriesPaginatedTableComponent } from './components/work-industr
     SalariesNotInStatsAdminPageComponent,
     SkillsPaginatedTableComponent,
     WorkIndustriesPaginatedTableComponent,
+    ProfessionsPaginatedTableComponent,
   ],
   imports: [
     CommonModule,

src/app/modules/admin/components/skills/skills-paginated-table/skill-edit-form.ts → src/app/modules/admin/components/label-entities/label-entity-edit-form.ts

@@ -1,10 +1,10 @@
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { CreateSkillRequest, Skill, SkillAdmiDto, UpdateSkillRequest } from '@services/skills.service';
+import { CreateLabelEntityRequest, LabelEntityAdmiDto, UpdateLabelEntityRequest } from '@services/label-entity.model';
 import { RandomHexColor } from '@shared/value-objects/random-hex-color';
 
-export class SkillEditForm extends FormGroup {
+export class LabelEntityEditForm extends FormGroup {
   private readonly itemId: number | null;
-  constructor(item: SkillAdmiDto | null) {
+  constructor(item: LabelEntityAdmiDto | null) {
     super({
       title: new FormControl(item?.title, [Validators.required, Validators.maxLength(50)]),
       hexColor: new FormControl(item?.hexColorAsString ?? new RandomHexColor().toString(), [
@@ -20,7 +20,7 @@ export class SkillEditForm extends FormGroup {
     this.get('hexColor')?.setValue(new RandomHexColor().toString());
   }
 
-  createRequestOrNull(): CreateSkillRequest | null {
+  createRequestOrNull(): CreateLabelEntityRequest | null {
     if (!this.valid) {
       this.markAllAsTouched();
       return null;
@@ -32,7 +32,7 @@ export class SkillEditForm extends FormGroup {
     };
   }
 
-  updateRequestOrNull(): UpdateSkillRequest | null {
+  updateRequestOrNull(): UpdateLabelEntityRequest | null {
     if (!this.valid) {
       this.markAllAsTouched();
       return null;

src/app/modules/admin/components/label-entities/professions-paginated-table/professions-paginated-table.component.html

@@ -0,0 +1,81 @@
+<app-page-header>Professions</app-page-header>
+
+<div class="container mt-3" *ngIf="items; else dataLoading">
+  <div class="card">
+    <div class="card-body">
+
+      <div class="mb-2">
+        <button class="btn btn-sm btn-primary" (click)="create()">Create</button>
+      </div>
+
+      <div class="table-responsive mb-3" *ngIf="items.length > 0; else nothingToShow">
+        <table class="table table-hover table-sm">
+          <thead>
+            <th>ID</th>
+            <th>Title</th>
+            <th>Color</th>
+            <th>Email</th>
+            <th></th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of items; let i = index">
+              <td>{{ item.id }}</td>
+              <td>{{ item.title }}</td>
+              <td>
+                <span class="user-label px-3 small border-2 border-radius-2" [style.backgroundColor]="item.hexColorAsString">{{
+                  item.hexColorAsString
+                }}</span>
+              </td>
+              <td>{{ item.createdBy }}</td>
+              <td>
+                <button type="button" class="btn-link-sm" (click)="edit(item)">Edit</button>
+                <button
+                  type="button"
+                  class="ms-2 btn-link-sm btn-link-danger"
+                  (click)="delete(item)"
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<app-confirm-dialog *ngIf="confirmDeletionMessage" [message]="confirmDeletionMessage"></app-confirm-dialog>
+
+<app-dialog [show]="!!editForm" (closed)="onEditModalDlgClose()" [header]="'Edit profession'">
+  <form class="mb-5" *ngIf="!!editForm" [formGroup]="editForm" (ngSubmit)="onEditFormSubmit()">
+    <div class="mb-3">
+      <label>Title</label>
+      <input type="text" class="form-control" formControlName="title" />
+      <app-field-error [field]="editForm.get('title')"></app-field-error>
+    </div>
+
+    <div class="mb-3">
+      <div class="d-flex justify-content-between">
+        <label>Color</label>
+        <button type="button" (click)="editForm.randomizeColor()" class="btn-link-sm">Random</button>
+      </div>
+      <input type="color" class="form-control" formControlName="hexColor" />
+      <app-field-error [field]="editForm.get('hexColor')"></app-field-error>
+    </div>
+
+    <div class="mb-3">
+      <button class="btn btn-primary" type="submit">Save</button>
+    </div>
+  </form>
+</app-dialog>
+
+<ng-template #dataLoading>
+  <div class="container mt-3">
+    <app-data-loader></app-data-loader>
+  </div>
+</ng-template>
+
+<ng-template #nothingToShow>
+  <div class="text-center p-3 text-muted">No one has not created any profession yet</div>
+</ng-template>

src/app/modules/admin/components/label-entities/professions-paginated-table/professions-paginated-table.component.spec.ts

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

src/app/modules/admin/components/label-entities/professions-paginated-table/professions-paginated-table.component.ts

@@ -0,0 +1,112 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { TitleService } from '@services/title.service';
+import { AlertService } from '@shared/components/alert/services/alert.service';
+import { ConfirmMsg } from '@shared/components/dialogs/models/confirm-msg';
+import { DialogMessage } from '@shared/components/dialogs/models/dialog-message';
+import { untilDestroyed } from '@shared/subscriptions/until-destroyed';
+import { LabelEntityAdmiDto } from '@services/label-entity.model';
+import { LabelEntityEditForm } from '../label-entity-edit-form';
+import { ProfessionsService } from '@services/professions.service';
+
+@Component({
+  templateUrl: './professions-paginated-table.component.html'
+})
+export class ProfessionsPaginatedTableComponent implements OnInit, OnDestroy {
+  items: Array<LabelEntityAdmiDto> | null = null;
+
+  confirmDeletionMessage: DialogMessage<ConfirmMsg> | null = null;
+  editForm: LabelEntityEditForm | null = null;
+  itemToEdit: LabelEntityAdmiDto | null = null;
+
+  constructor(
+    private readonly title: TitleService,
+    private readonly alert: AlertService,
+    private readonly service: ProfessionsService
+  ) {}
+
+  ngOnDestroy(): void {
+    this.title.resetTitle();
+  }
+
+  ngOnInit(): void {
+    this.title.setTitle('Professions');
+    this.service
+      .all()
+      .pipe(untilDestroyed(this))
+      .subscribe((data) => {
+        this.items = data;
+      });
+  }
+
+  edit(item: LabelEntityAdmiDto): void {
+    this.editForm = new LabelEntityEditForm(item);
+    this.itemToEdit = item;
+  }
+
+  create(): void {
+    this.editForm = new LabelEntityEditForm(null);
+    this.itemToEdit = null;
+  }
+
+  onEditFormSubmit(): void {
+
+    if (this.editForm == null) {
+      return;
+    }
+
+    if (this.itemToEdit != null) {
+      const updateRequest = this.editForm.updateRequestOrNull();
+      if (updateRequest == null) {
+        return;
+      }
+
+      this.service
+        .update(updateRequest)
+        .pipe(untilDestroyed(this))
+        .subscribe(() => {
+          this.alert.success('The profession was updated');
+          this.editForm = null;
+          this.ngOnInit();
+        });
+
+        return;
+    }
+
+    const createRequest = this.editForm.createRequestOrNull();
+      if (createRequest == null) {
+        return;
+      }
+
+      this.service
+        .create(createRequest)
+        .pipe(untilDestroyed(this))
+        .subscribe(() => {
+          this.alert.success('The profession was created');
+          this.editForm = null;
+          this.ngOnInit();
+        });
+  }
+
+  onEditModalDlgClose(): void {
+    this.editForm = null;
+  }
+
+  delete(item: LabelEntityAdmiDto): void {
+    this.confirmDeletionMessage = new DialogMessage(
+      new ConfirmMsg(
+        'Delete the profession',
+        'Are you sure to delete?',
+        () => {
+          this.service
+            .delete(item.id!)
+            .pipe(untilDestroyed(this))
+            .subscribe(() => {
+              this.alert.success('The profession was removed');
+              this.confirmDeletionMessage = null;
+              this.ngOnInit();
+            });
+        }
+      )
+    );
+  }
+}

src/app/modules/admin/components/skills/skills-paginated-table/skills-paginated-table.component.ts → src/app/modules/admin/components/label-entities/skills-paginated-table/skills-paginated-table.component.ts

@@ -1,22 +1,22 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Label } from '@models/user-label.model';
 import { TitleService } from '@services/title.service';
 import { AlertService } from '@shared/components/alert/services/alert.service';
 import { ConfirmMsg } from '@shared/components/dialogs/models/confirm-msg';
 import { DialogMessage } from '@shared/components/dialogs/models/dialog-message';
 import { untilDestroyed } from '@shared/subscriptions/until-destroyed';
-import { SkillEditForm } from './skill-edit-form';
-import { SkillAdmiDto, SkillsService } from '@services/skills.service';
+import { SkillsService } from '@services/skills.service';
+import { LabelEntityAdmiDto } from '@services/label-entity.model';
+import { LabelEntityEditForm } from '../label-entity-edit-form';
 
 @Component({
   templateUrl: './skills-paginated-table.component.html'
 })
 export class SkillsPaginatedTableComponent implements OnInit, OnDestroy {
-  skills: Array<SkillAdmiDto> | null = null;
+  skills: Array<LabelEntityAdmiDto> | null = null;
 
   confirmDeletionMessage: DialogMessage<ConfirmMsg> | null = null;
-  editForm: SkillEditForm | null = null;
-  itemToEdit: SkillAdmiDto | null = null;
+  editForm: LabelEntityEditForm | null = null;
+  itemToEdit: LabelEntityAdmiDto | null = null;
 
   constructor(
     private readonly title: TitleService,
@@ -38,13 +38,13 @@ export class SkillsPaginatedTableComponent implements OnInit, OnDestroy {
       });
   }
 
-  edit(item: SkillAdmiDto): void {
-    this.editForm = new SkillEditForm(item);
+  edit(item: LabelEntityAdmiDto): void {
+    this.editForm = new LabelEntityEditForm(item);
     this.itemToEdit = item;
   }
 
   create(): void {
-    this.editForm = new SkillEditForm(null);
+    this.editForm = new LabelEntityEditForm(null);
     this.itemToEdit = null;
   }
 
@@ -91,7 +91,7 @@ export class SkillsPaginatedTableComponent implements OnInit, OnDestroy {
     this.editForm = null;
   }
 
-  delete(item: SkillAdmiDto): void {
+  delete(item: LabelEntityAdmiDto): void {
     this.confirmDeletionMessage = new DialogMessage(
       new ConfirmMsg(
         'Delete the skill',