Робота з колекціями на сторінці home
На сторінці home у користувача має бути можливість зберегти зображення до колекції та створити нову колекцію.
Крок 1. Створення бази даних та налаштування.
За цим посиланням дізнаєтеся про налаштування бази даних. Палета для встановлення - node-red-node-mongodb
Створюємо три запити до бази даних.
Крок 2. NodeRed
1. Створення колекцій.
Використовуємо ноди:
- http in(POST)
- function. У тілі фукнції пишемо, що до даних відправлених з UI додаємо властивість deleted зі значенням false
msg.payload.deleted = false return msg;
- mongodb out.
- http response
2. Отримати колекції
Використовуємо ноди:
- http in(GET)
- function. У тілі фукнції вказуємо, що повертаємо лише ті об'єкти, у яких властивість deleted = false
msg.payload = { deleted: false } return msg;
- mongodb in
- http response
3. Збереження зображень до колекції
Використовуємо ноди:
- http in(POST)
- function. До кожного зображення додаємо id колекції та властивість deleted. У ноді функції додаємо бібліотеку objectid .
msg.payload = msg.payload.images.map((e) =>{ return { ...e, collection: objectid(msg.payload.collection), deleted: false } }) return msg;
- mongodb out. Важливо: запис робимо в нову колекцію!
Крок 3. UI
Створюємо три API
- getCollection. Обов'язково запускається при завантаженні сторінки.
- createCollection.
- addImageToCollection. В тілі передаємо id обраної користувачем колекції та дані API, яка повернула зображення - createImage
При натиску на button має відкритися модальне вікно з можливість зберегти зображення до запропонованих колекцій або створити нову колекцію.
У віджеті select показуємо дані API getCollectios у вигляді label - name, value - _id.
{{getCollections.data.map((e) => {
return{
label: e.name,
value: e._id
}
})}}
За замовчуванням обраний перший елемент
{{getCollections.data[0]._id}}
При натиску на "+" відкривається інше модальне вікно, де можна створити колекцію.
При натиску на icon button відкривається інше модальне вікно
Після натиску на button Create робиться запис у базу даних та відкривається модальне вікно з можливістю зберегти картинки у колекцію.
{{createNewCollection.run(() => getCollections.run(() => showModal('addToCollection')), () => {})}}
No Comments