3.5.1.1 Отправка формы по нажатию кнопки “Submit”

При нажатии кнопки “Submit” была реализована валидация заполненных полей, после успешного прохождения которой фронтенд отправляет на бэкенд POST запросы на создание Hiring Request’а и связанных с ним отношением relationships объектов Employee Address, Employee Info, Hiring Employee Position, Financial Info и It Equipment. Далее отправляется запрос на создание объекта Attachment Documents для созданного Hiring Request’а, после чего отправляется PATCH запрос, присваивающий Hiring Request’y статус Draft. После создания всех необходимых объектов дочерний компонент New Hiring Request Wizard уведомляет родительский компонент о создании нового Hiring Request’а: Hiring Request, являющийся порождаемым событием (рисунки 20 и 21) передается в компонент Requests in Progress, который несет ответственность за выполнение логики, реализованной методом “submitHiringRequest()” (рисунок 22): закрытие окна Wizard’а, навигацию до страницы созданного Hiring Request’а и “включение” режима редактирования его страницы.

Рисунок 20 – EventEmitter onSubmit

Рисунок 21 – onSubmit.next()

Рисунок 22 – Класс компонента Requests in Progress, onSubmit () и onClose()

3.5.2 Поиск Hiring Request’а по названию

В классе компонента Header реализован ряд методов, обеспечивающих логику поиска Hiring Request’а по его названию. Изменение вводимого значения генерирует отслеживаемое в классе компонента Header событие. Для разгрузки цикла событий и снижения количества запросов к серверу используется функция debounce() (рисунок 23).

Рисунок 23 – searchValue$.pipe()

3.5.3 Настройка видимости колонок таблиц дашбордов

На страницах Requests in Progress и Archive в шапке веб-приложения доступна кнопка, по нажатию которой генерируется событие, на которое подписаны классы компонентов Archive и Requests in Progress, отвечающие за дальнейшую логику появления всплывающего окна настроек параметров видимости (рисунок 24) и вызов метода updateTable() (рисунок 25), реализующего применение и сохранение настроек c помощью LocalStorage (рисунок 26), из класса сервиса HiringRequestsTableService.

Рисунок 24 – Окно настройки параметров видимости колонок таблицы

Рисунок 25 – Сервис HiringRequestTableService - метод udateTable()

Рисунок 26 – localStorage.setItem(), localStorage.getItem()

В классе Host Application, отвечающем за refresh access токена, был добавлен сброс настроек видимости при истечении срока действия токена (рисунок 27).

Рисунок 27 – refreshToken()  setToken()

3.5.4 Оправка нотификации “Send to Payroll Group”

Из Notification Toolbar (рисунок 28), расположенного на странице Hiring Request’а и представленного дочерним компонентом компонента, реализующего функциональность вкладки Summary, пользователь может скачать и в дальнейшем отправить нотификацию “Send to Payroll Group” (рисунок 29).

Рисунок 28 – Notification Toolbar

Рисунок 29 – Payroll Group Notification

При нажатии кнопки “Send to Payroll Group” метод в компоненте Notification Toolbar, обрабатывающий это событие, вызывает методы проверки заполнения необходимых для отправки нотификации полей Hiring Request’а. В случае успешного прохождения всех проверок вызывается метод downloadPayrollGroupNotice() (рисунок 30), который определяет списки первичных и вторичных получателей письма, вызывает метод сервиса NotificationService - createPayrollGroupNoticeTemplate() (рисунок 31), которому передает эти списки в качестве аргументов, и генерирует событие о том, что пользователь скачал нотификацию.

Рисунок 30 – Частичная реализация метода downloadPayrollGroupNotice()

Рисунок 31 – createPayrollGroupNoticeTemplate()

В методе createPayrollGroupNoticeTemplate() формируется модель NotificationModel, в качестве параметра body которой подставляется заполняемый необходимыми значениями шаблон (рисунок 32).

Рисунок 32 – Шаблон payrollGroupNotice

Из полученной модели данных создается Blob, который передается методу, реализующему его скачивание на ПК пользователя в EML-формате.

В родительском компоненте HiringRequestSummaryComponent осуществлена подписка на скачивание пользователем нотификации (рисунок 33). Когда нотификация скачивается, вызывается метод watchStatusChanges() (рисунок 34), реализующий асинхронный опрос бэкенда о смене статуса Hiring Request’а. Когда письмо попадет в системную почту Hiring, проставленную во вторичных получателях нотификации, бэкенд меняет статус Hiring Request’а, о чем благодаря асинхронному опросу узнает фронтенд и отображает изменения в интерфейсе на всех вкладках Hiring Request’а без перезагрузки страницы. При переходе пользователя на другую страницу опрос бэкенда прекращается.

Рисунок 33 – payrollGroupNoticeWasDownloaded$.subscribe()

Рисунок 34 – async watchStatusChanges()