HRM(NEW)
- Модуль створення компаній (Company)
- UI частина (створення сторінки Company)
- Створення компанії
- Відображення компанії
- Оновлення створеної компанії
- Модуль створення вакансій (Recruit)
- UI частина (створення сторінки Recruit)
- Вибір компанії
- Відображаємо вакансії для вибору
- Створення вакансії
- Відображення створених вакансій
- Редагування створених вакансій
- Видалення створених вакансій
- Модуль деталі про компанію
Модуль створення компаній (Company)
UI частина (створення сторінки Company)
На даній сторінці потрібно розмістити наступні віджети:
CONTAINER
, розтягнутий на всю сторінку в середині якого розмістимо всі інші віджети;- 7
INPUT
, 6 з яких з Data_type : text, 1 - Number;- 3
SELECT
;- 2
BUTTON
.
Всім віджетам потрібно давати інформативні назви, для того щоб було зручно і зрозуміло використовувати дані. За замовчуванням при додаванні віджета на сторінку автоматично генерується назва, наприклад віджету INPUT генерується назва Input1.
Для зміни назви необхідно у вікні Settings widget вписати нову назву на місці старої і натиснути кнопку Enter.
Після того, як будуть розміщені всі віджети з назвами відповідно до прикладу, створення сторінки користувача можна вважати завершеною.
Результат виконання
Важливо!
Для подальшої роботи потрібно піднести середовище Node-RED[посилання] та піднесення бази даних[посилання]
Створення компанії
Під створенням компанії мається на увазі реалізація однієї з операцій CRUD, а саме Create - тобто ми повинні здійснити запис в базі даних (в нашому випадку це буде база даних MongoDB) про компанію.
Дані для запису в базу даних ми повинні передати з раніше створених віджетів на сторінці Company.
Отже для цього нам потрібно:
- Створити EndPoint в середовищі NodeRed, куди ми будемо передавати дані та здійснюватимемо запис в базу даних.
1.1. EndPoint в середовищі NodeRed - це вузол “http in
”, що прийматиме дані, які ми будемо на нього відправляти. З бокової панелі вузлів пересуваємо вузол “http in
”, вибираємо в даному випадку Метод “Post” та вказуємо URL на приклад “/createCompany”. Кожний EndPoint повинен щось повертати, для цього нам потрібно додати вузол “http response
” і приєднати його до вузла “http in
”. Для того щоб в вікні “debug messages
” побачити дані, які ми передаємо на цей EndPoint нам потрібно підключити вузол “debug
” до вузла “http in
”.
1.2. Для здійснення безпосередньо самого запису в базу даних, ми використовуватимемо вузол “mongodb out
” (детальніше про підключення тут). Підключаємо вузол “mongodb out
” до вузла “function
” та у вузлі "function
" додаємо нове поле до даних, які приходить з UI.
“mongodb out”
потрібно вибрати тип операції “insert” (або "save", детальніше тут), додати назву колекції, в яку будуть записуватись дані та зробити активним поле “Only store msg.payload object”.
Важливо!
Користувач повинен надати колекції інформативну назву. Також не слід забувати, що оперуючи із даними однієї колекції, в інших запитах (GET, PUT, etc) назви колекції повинні бути одинаковими.
Даний потік(flow) здійснить запис в базу даних, тобто все що буде відправлено на EndPoint (“/createCompany”) буде записано в базу даних.
Передача динамічних даних з середовище UiEditor в середовище NodeRed:
Для передачі даних з UiEditor в середовище NodeRed, нам потрібно створити API Call (детальніше тут), використовуючи відповідний метод вузла “http in
”. Створимо метод POST, якому в body потрібно передати дані з наших віджетів.
В тілі запиту дані передаються у форматі JSON, тому важливо пам'ятати про базові правила: всі поля мають бути розділеними комами(в останньому рядку кому ставити не потрібно) та обгорнутими в подвійні лапки (наприклад,"name").
Зі скріна вище, “CompanyNameInput” - це назва(об'єкт) віджету (в даному випадку це віджет “INPUT”), “.text” - це властивість віджету, “companyName” - це назва змінної, яку ми передаємо.
Далі на кнопку створення вакансії потрібно додати виклик API
Відображення компанії
Для відображення створеної нами компанії, потрібно зробити “EndPoint” в середовищі NodeRed, який витягне з бази даних інформацію про компанію.
Для цього ми використовуємо 4 вузла: http in, mongodb in, function, http response.
mongo in
function
Тобто даний потік(flow) здійснить запит в базу даних, отримає всю інформацію з колекції “companies”, за допомогою вузла function присвоїть змінній msg.payload
параметри за якими шукати компанії, і вузол http response повертає відповідь у точку запиту.
В UiEditor ми створюємо новий API Call, в якому обираємо метод GET, і потрібний нам EndPoint (http in).
В розділі Settings цього API Call, потрібно зробити активним поле Run api on Page load
, для того щоб це запит виконувався при загрузці сторінки. Далі нам потрібно відобразити отримані цим запитом дані в створені раніше віджети.
Відображення отриманих даних у таблиці:
Для відображення отриманих даних, нам потрібно в налаштуваннях віджету в поле TableData, передати об'єкт запиту.
Відображення дефолтного тексту в віджеті INPUT:
Відображення дефолтного тексту в віджеті SELECT:
Також потрібно додати до onClick кнопки в метод onSuccess виклик API getCompanyInfo щоб отримати оновлені дані.
Оновлення створеної компанії
Для оновлення даних про компанію, потрібно створити потік (flow) в середовищі NodeRed, який отримує дані, здійснить запит в базу даних та API Call в середовищі UiEditor який передасть дані в середовище NodeRed.
Даний flow складається з 6 вузлів: http in
, function
, mongodb out
, http response
, 2 debug
updateQuery
Оскільки "_id" - унікальний, його потрібно видалити перед оператором оновлення "$set".
В середовищі UiEditor ми створюємо новий API call з методом PUT, в тілі(body) якого передаємо динамічні значення з віджетів. В даному випадку тіло запиту буде практично аналогічним до запиту для створення компанії, окрім нового поля “_id”, по якому ми ідентифікуватимемо об'єкт, що потрібно оновити.
Для зручної навігації в Node-red, варто розділяти запити, які стосуються одного модуля на різні флови. Наприклад, для модуля компанії - існує флов "Company", в якому розміщують всі HTTP запити (також їх називають endponits, ланцюги), пов'язані з ним.
Модуль створення вакансій (Recruit)
UI частина (створення сторінки Recruit)
Для додавання нової сторінки в середовищі UIEditor, потрібно натиснути на символ "+" в розділі SIDEBAR на проти поля PAGES.
Отже, дана сторінка складається з наступних віджетів:
- Table, в які відображаємо існуючі вакансії (в таблиці є button, при натисканні на який нас переадресовує на сторінку кандидатів до обраної вакансії)
- 3 Buttons (Create Job, Update, Delete) При натисканні на кнопку Create Job та Edit Job Info відкриваються модальні вікна, на кнопку видалення здійснюється видалення виділеної в таблиці вакансії.
- 2 Модальні вікна: створення вакансії (Create Job) та оновлення інформації про вакансію (Edit Job Info) містять в собі 5 inputs, 5 select, 2 buttons
Вибір компанії
Потрібно створити запит у БД який повертає _id i companyName.
Flow складається з вузлів: http in, 2 function, mongodb in, http response
- необіхідно знайти в базі даних компанії у який поле deleted має значення false.
- вузол mongodb in
- повертаєм тільки _id та companyName
Відображаємо вакансії для вибору
Далі в UI частині потрібно створити API:
У віджеті вибору вакансії потрібно добавити у поле Options дані для вибору
Створення вакансії
В середовищі Node Red створюємо flow, який cкладатиметься з 5 вузлів: http in, debug, function, mongodb out, http response
- Вузол function
- Вузол mongodb out (Insert Job):
Для створення компанії, в UI Editori створюємо API call (createJob) в тілі якого передаємо значення з усіх віджетів модального вікна створення вакансії(Create job).
Відображення створених вакансій
Для відображення створених вакансій в таблиці, потрібно створити в середовищі Node Red flow який складається з 5 вузлів:http in, debug, function, mongodb in, http response
В середовищі UI Edtior створюємо в API call, з методом GET який здійснить запуск вище створеного потоку в середовищі Node Red.
Для відображення отриманих вакансій в таблиці в налаштуваннях віджету Table1 в полі Default Data ми вписуємо в фігурних дужках назву API call, та властивість data.Для створення кнопки в таблиці потрібно в налаштування віджету Table1 натиснути на кнопку “Add a new column” та в налаштуваннях вибрати у полі Column Type вибрати Button
Редагування створених вакансій
Для редагування створеної вакансії, спочатку потрібно відобразити інформацію про створену вакансію у віджетах модального вікна (Edit Job info), для цього потрібно в налаштуваннях кожного віджету в поле default text або default options передати відповідну властивість виділеного в таблиці об'єкта:
Для оновлення виділеного в таблиці об'єкта (вакансії) потрібно створити потік (flow) в середовищі Node Red, який складається з наступних вузлів: http in
, debug
, function
(схожий як і для оновлення компаній), http response
, mongodb out
function
Створюємо в середовищі UI Editor API call, METHOD: PUT, в тілі запиту передаємо значення з віджетів модального вікна (ModalEditJob), та поле “_id” виділеної в таблиці вакансії.
Модальні вікна: дії на кнопки Create та Update
При кліку на вказані кнопки ми повинні виконати 3 дії:
1) Здійснити API call (createJob або updateJob);
2) Здійснити API call (getJobs);
3) Закрити Модальне вікно
Отже в налаштування віджету button ми пишемо:
Видалення створених вакансій
Для видалення виділеної в таблиці вакансії створюємо flow(потік) в середовищі NodeRed, який складається з наступних вузлів: http in (method :deleted), function, debug, http response, mongodb out
Вузол function (query):
Вузол mongodb out:
Тобто даний потік, буде здійснювати не безпосереднє видалення об'єкта з бази даних, а оновлюватиме його властивість “deleted”.
В середовищі UI Editor створюємо API Call, method DELETE, в тілі якого передаємо лише поле "_id" яке виступає унікальним ідентифікатором обєкта який видаляємо.
На кнопку Delete здійснюємо дві дії:
1) Виклик API call (deleteJob)
2) Виклик API call (getJobs)
Модуль деталі про компанію
Company Jobs
На сторінці Company у таблицю з компаніями потрібно додати кнопку яка буде перенаправляти на сторінку зі списком робіт вибраної компанії
Потрібно написати flow який візьме з колекції jobs всі вакансії, які належать до вибраної компанії.
Приклад API яка бере з query params ID вибраної компанії
Підказка! Варто використати операцію aggregate