HRM(NEW)

Модуль створення компаній (Company)

Модуль створення компаній (Company)

UI частина (створення сторінки Company)

На даній сторінці потрібно розмістити наступні віджети:

Всім віджетам потрібно давати інформативні назви, для того щоб було зручно і зрозуміло використовувати дані. За замовчуванням при додаванні віджета на сторінку автоматично генерується назва, наприклад віджету INPUT генерується назва Input1.
Для зміни назви необхідно у вікні Settings widget вписати нову назву на місці старої і натиснути кнопку Enter.

1.png

Після того, як будуть розміщені всі віджети з назвами відповідно до прикладу, створення сторінки користувача можна вважати завершеною.

Результат виконання

2.png

Важливо!

Для подальшої роботи потрібно піднести середовище Node-RED[посилання] та піднесення бази даних[посилання]

Модуль створення компаній (Company)

Створення компанії

Під створенням компанії мається на увазі реалізація однієї з операцій CRUD, а саме Create - тобто ми повинні здійснити запис в базі даних (в нашому випадку це буде база даних MongoDB) про компанію.

Дані для запису в базу даних ми повинні передати з раніше створених віджетів на сторінці Company.

Отже для цього нам потрібно:

  1. Створити EndPoint в середовищі NodeRed, куди ми будемо передавати дані та здійснюватимемо запис в базу даних.

1.1. EndPoint в середовищі NodeRed - це вузол “http in”, що прийматиме дані, які ми будемо на нього відправляти. З бокової панелі вузлів пересуваємо вузол “http in”, вибираємо в даному випадку Метод “Post” та вказуємо URL на приклад /createCompany. Кожний EndPoint повинен щось повертати, для цього нам потрібно додати вузол “http response” і приєднати його до вузла “http in”. Для того щоб в вікні “debug messages” побачити дані, які ми передаємо на цей EndPoint нам потрібно підключити вузол “debug” до вузла “http in”.

3.png

1.2. Для здійснення безпосередньо самого запису в базу даних, ми використовуватимемо вузол “mongodb out” (детальніше про підключення тут). Підключаємо вузол “mongodb out” до вузла “function” та у вузлі "function" додаємо нове поле до даних, які приходить з UI.

4.png

mongodb out” потрібно вибрати тип операції “insert” (або "save", детальніше тут), додати назву колекції, в яку будуть записуватись дані та зробити активним поле “Only store msg.payload object”.

Важливо!

Користувач повинен надати колекції інформативну назву. Також не слід забувати, що оперуючи із даними однієї колекції, в інших запитах (GET, PUT, etc) назви колекції повинні бути одинаковими.

5.png

Даний потік(flow) здійснить запис в базу даних, тобто все що буде відправлено на EndPoint (“/createCompany”) буде записано в базу даних.

Передача динамічних даних з середовище UiEditor в середовище NodeRed:
Для передачі даних з UiEditor в середовище NodeRed, нам потрібно створити API Call (детальніше тут), використовуючи відповідний метод вузла “http in”. Створимо метод POST, якому в body потрібно передати дані з наших віджетів.

6.png

В тілі запиту дані передаються у форматі JSON, тому важливо пам'ятати про базові правила: всі поля мають бути розділеними комами(в останньому рядку кому ставити не потрібно) та обгорнутими в подвійні лапки (наприклад,"name").
Зі скріна вище, “CompanyNameInput” - це назва(об'єкт) віджету (в даному випадку це віджет “INPUT”), “.text” - це властивість віджету, “companyName” - це назва змінної, яку ми передаємо.

Далі на кнопку створення вакансії потрібно додати виклик API

Модуль створення компаній (Company)

Відображення компанії

Для відображення створеної нами компанії, потрібно зробити “EndPoint” в середовищі NodeRed, який витягне з бази даних інформацію про компанію.

7.png

Для цього ми використовуємо 4 вузла: http in, mongodb in, function, http response.
mongo in

9.png

function

8.png

Тобто даний потік(flow) здійснить запит в базу даних, отримає всю інформацію з колекції “companies”, за допомогою вузла function присвоїть змінній msg.payload параметри за якими шукати компанії, і вузол http response повертає відповідь у точку запиту.

В UiEditor ми створюємо новий API Call, в якому обираємо метод GET, і потрібний нам EndPoint (http in).

10.png

В розділі Settings цього API Call, потрібно зробити активним поле Run api on Page load, для того щоб це запит виконувався при загрузці сторінки. Далі нам потрібно відобразити отримані цим запитом дані в створені раніше віджети.

11.png

Відображення отриманих даних у таблиці:
Для відображення отриманих даних, нам потрібно в налаштуваннях віджету в поле TableData, передати об'єкт запиту.


Відображення дефолтного тексту в віджеті INPUT:


Відображення дефолтного тексту в віджеті SELECT:

13.png

Також потрібно додати до onClick кнопки в метод onSuccess виклик API getCompanyInfo щоб отримати оновлені дані.

14.png

Модуль створення компаній (Company)

Оновлення створеної компанії

Для оновлення даних про компанію, потрібно створити потік (flow) в середовищі NodeRed, який отримує дані, здійснить запит в базу даних та API Call в середовищі UiEditor який передасть дані в середовище NodeRed.

Даний flow складається з 6 вузлів: http in, function, mongodb out, http response, 2 debug15.png

updateQuery

16.png

Оскільки "_id" - унікальний, його потрібно видалити перед оператором оновлення "$set".

17.png

18.png

 

В середовищі UiEditor ми створюємо новий API call з методом PUT, в тілі(body) якого передаємо динамічні значення з віджетів. В даному випадку тіло запиту буде практично аналогічним до запиту для створення компанії, окрім нового поля “_id”, по якому ми ідентифікуватимемо об'єкт, що потрібно оновити.

19.png

Для зручної навігації в Node-red, варто розділяти запити, які стосуються одного модуля на різні флови. Наприклад, для модуля компанії - існує флов "Company", в якому розміщують всі HTTP запити (також їх називають endponits, ланцюги), пов'язані з ним.

image.png

Модуль створення вакансій (Recruit)

Модуль створення вакансій (Recruit)

UI частина (створення сторінки Recruit)

Для додавання нової сторінки в середовищі UIEditor, потрібно натиснути на символ "+" в розділі SIDEBAR на проти поля PAGES.

1.png

Отже, дана сторінка складається з наступних віджетів:

2.png

Модуль створення вакансій (Recruit)

Вибір компанії

Потрібно створити запит у БД який повертає _id i companyName.
Flow складається з вузлів: http in, 2 function, mongodb in, http response

3.png

4.png

5.png

6.png

 

Модуль створення вакансій (Recruit)

Відображаємо вакансії для вибору

Далі в UI частині потрібно створити API:

8.png

У віджеті вибору вакансії потрібно добавити у поле Options дані для вибору

9.png

 

Модуль створення вакансій (Recruit)

Створення вакансії

В середовищі Node Red створюємо flow, який cкладатиметься з 5 вузлів: http in, debug, function, mongodb out, http response

10.png

 

11.png

12.png

Для створення компанії, в UI Editori створюємо API call (createJob) в тілі якого передаємо значення з усіх віджетів модального вікна створення вакансії(Create job).

13.png

 

 

Модуль створення вакансій (Recruit)

Відображення створених вакансій

Для відображення створених вакансій в таблиці, потрібно створити в середовищі Node Red flow який складається з 5 вузлів:http in, debug, function, mongodb in, http response

14.png

16.png


В середовищі UI Edtior створюємо в API call, з методом GET який здійснить запуск вище створеного потоку в середовищі Node Red.

17.png

Для відображення отриманих вакансій в таблиці в налаштуваннях віджету Table1 в полі Default Data ми вписуємо в фігурних дужках назву API call, та властивість data.18.pngДля створення кнопки в таблиці потрібно в налаштування віджету Table1 натиснути на кнопку “Add a new column” та в налаштуваннях вибрати у полі Column Type вибрати Button

 

Модуль створення вакансій (Recruit)

Редагування створених вакансій

Для редагування створеної вакансії, спочатку потрібно відобразити інформацію про створену вакансію у віджетах модального вікна (Edit Job info), для цього потрібно в налаштуваннях кожного віджету в поле default text або default options передати відповідну властивість виділеного в таблиці об'єкта:

19.png

Для оновлення виділеного в таблиці об'єкта (вакансії) потрібно створити потік (flow) в середовищі Node Red, який складається з наступних вузлів:
http in, debug, function(схожий як і для оновлення компаній), http response, mongodb out

20.png

function

21.png

Створюємо в середовищі UI Editor API call, METHOD: PUT, в тілі запиту передаємо значення з віджетів модального вікна (ModalEditJob), та поле “_id” виділеної в таблиці вакансії.

22.png

Модальні вікна: дії на кнопки Create та Update
При кліку на вказані кнопки ми повинні виконати 3 дії:
1) Здійснити API call (createJob або updateJob);
2) Здійснити API call (getJobs);
3) Закрити Модальне вікно

Отже в налаштування віджету button ми пишемо:

image.png

 

Модуль створення вакансій (Recruit)

Видалення створених вакансій

Для видалення виділеної в таблиці вакансії створюємо flow(потік) в середовищі NodeRed, який складається з наступних вузлів: http in (method :deleted), function, debug, http response, mongodb out

24.png

Вузол function (query):

25.png

26.png

Вузол mongodb out:

27.png

Тобто даний потік, буде здійснювати не безпосереднє видалення об'єкта з бази даних, а оновлюватиме його властивість “deleted”.
В середовищі UI Editor створюємо API Call, method DELETE, в тілі якого передаємо лише поле "_id" яке виступає унікальним ідентифікатором обєкта який видаляємо.

28.png

На кнопку Delete здійснюємо дві дії:

1) Виклик API call (deleteJob)
2) Виклик API call (getJobs)

29.png

 

Модуль деталі про компанію

Модуль деталі про компанію

Company Jobs

На сторінці Company у таблицю з компаніями потрібно додати кнопку яка буде перенаправляти на сторінку зі списком робіт вибраної компанії

1.png

Потрібно написати flow який візьме з колекції jobs всі вакансії, які належать до вибраної компанії.

Приклад API яка бере з query params ID вибраної компанії

2.png

Підказка! Варто використати операцію aggregate