Adjusted form

.github/workflows/test.yml

@@ -8,9 +8,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Cache NPM dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-npm-cache-${{ hashFiles('**/package-lock.json') }}

package.json

@@ -10,7 +10,7 @@
     "serve-staging": "ng serve --configuration=staging -o",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --browsers ChromiumNoSandbox",
-    "test-headless-ci-only": "ng test --browsers ChromiumNoSandbox",
+    "test-headless-ci-only": "ng test --no-watch --browsers ChromiumNoSandbox",
     "lint": "ng lint",
     "pretty": "pretty-quick",
     "pretty-all": "prettier --write \"src/**/*.ts\" \"src/**/*.html\" \"src/**/*.scss\" \"src/**/*.json\" \"e2e/**/*.ts\" \"tools/**/*.ts\" \"*.json\"",

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

@@ -2,7 +2,7 @@
 
 <div class="my-5 container">
   <div class="card">
-    <div class="card-body form-container">
+    <div class="card-body p-lg-5 p-3">
       <div class="mb-5 mt-1">
         <div class="mb-1 text-muted small fst-italic">
           Для того, чтобы просматривать график зарплат, вам нужно сначала внести
@@ -289,6 +289,29 @@
             ></app-field-error>
           </div>
 
+          <div class="mb-3" *ngIf="addSalaryForm.getInvalidFields().length > 0">
+            <div class="alert alert-warning">
+              <div class="mb-2">
+                <strong>Внимание!</strong> Следующие поля не заполнены:
+              </div>
+              <div
+                class="mb-2"
+                *ngFor="
+                  let field of addSalaryForm.getInvalidFields();
+                  let i = index
+                "
+              >
+                <div>{{ i + 1 }}. Страница {{ field.page }}</div>
+                <div
+                  class="ms-3"
+                  *ngFor="let control of field.fields; let j = index"
+                >
+                  {{ i + 1 }}.{{ j + 1 }}. {{ control }}
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="row mt-5">
             <div class="col-6">
               <button

src/app/modules/salaries/components/add-salary/edit-salary-form.ts

@@ -11,9 +11,22 @@ import {
 } from "@services/user-salaries.service";
 import { FormatAsMoneyPipe } from "@shared/directives/format-as-money.pipe";
 
+interface InvalidFieldsGroupedByPage {
+  page: number;
+  fields: string[];
+}
+
+interface InvalidField {
+  page: number;
+  controlName: string;
+  field: string;
+}
+
 export class EditSalaryForm extends FormGroup {
   static readonly digitsPattern = "^[0-9]*$";
 
+  private _invalidFields: InvalidField[] = [];
+
   constructor(
     salarytoBeEditedOrNull: UserSalary | null,
     hasIndustries: boolean = false,
@@ -144,6 +157,19 @@ export class EditSalaryForm extends FormGroup {
       };
     }
 
+    this._invalidFields = [];
+    const controls = this.controls;
+    for (const name in controls) {
+      const control = this.controls[name];
+      if (control.invalid) {
+        this._invalidFields.push({
+          page: this.getPageForField(name),
+          controlName: name,
+          field: this.getControlNameLable(name),
+        });
+      }
+    }
+
     this.markAllAsTouched();
     return null;
   }
@@ -193,4 +219,83 @@ export class EditSalaryForm extends FormGroup {
     this.markAllAsTouched();
     return null;
   }
+
+  getInvalidFields(): InvalidFieldsGroupedByPage[] {
+    if (this._invalidFields.length === 0) {
+      return [];
+    }
+
+    const groupedByPage: InvalidFieldsGroupedByPage[] = [
+      {
+        page: 1,
+        fields: [],
+      },
+      {
+        page: 2,
+        fields: [],
+      },
+      {
+        page: 3,
+        fields: [],
+      },
+    ];
+
+    for (const invalidField of this._invalidFields) {
+      const page = invalidField.page;
+      groupedByPage[page - 1].fields.push(invalidField.field);
+    }
+
+    return groupedByPage;
+  }
+
+  private getControlNameLable(name: string): string {
+    switch (name) {
+      case "value":
+        return "Зарплата, NET";
+      case "quarter":
+        return "Квартал";
+      case "company":
+        return "Казахстанская / Удаленная компания";
+      case "profession":
+        return "Ваша специализация";
+      case "grade":
+        return "Ваш грейд";
+      case "workIndustryId":
+        return "Сфера деятельности компании";
+      case "city":
+        return "Город, в котором вы живете";
+      case "yearOfStartingWork":
+        return "Год старта вашей карьеры";
+      case "gender":
+        return "Пол";
+      case "age":
+        return "Сколько вам полных лет?";
+
+      default:
+        return "";
+    }
+  }
+
+  private getPageForField(name: string): number {
+    switch (name) {
+      case "value":
+      case "quarter":
+      case "company":
+      case "profession":
+        return 1;
+
+      case "grade":
+      case "workIndustryId":
+      case "city":
+        return 2;
+
+      case "yearOfStartingWork":
+      case "gender":
+      case "age":
+        return 3;
+
+      default:
+        return 0;
+    }
+  }
 }

src/test.ts

@@ -36,5 +36,6 @@ window.onbeforeunload = jasmine.createSpy();
 
 // Then we find all the tests.
 const context = require.context("./", true, /\.spec\.ts$/);
+
 // And load the modules.
 context.keys().map(context);