From c082fee5c86abc528d334ab15ec12c52a00def74 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Thu, 26 Dec 2019 20:45:23 +0300 Subject: [PATCH] items updating sys --- config/routes/control-panel.js | 21 +++++++++++++ config/server.js | 4 ++- .../assets/templates/modals/edit_category.pug | 4 +-- .../assets/templates/modals/edit_item.pug | 31 +++++++++++++++++++ dist/views/admin/categories.pug | 16 +++++----- dist/views/admin/items.pug | 4 +-- src/admin/components/categories.component.js | 12 +++---- src/admin/core/modal.js | 14 +++++++-- src/admin/index.js | 4 ++- src/admin/modals/editCategory.modal.js | 3 +- src/admin/modals/editItem.modal.js | 31 +++++++++++++++++++ src/admin/templates/items.template.js | 2 +- 12 files changed, 120 insertions(+), 26 deletions(-) create mode 100644 src/admin/modals/editItem.modal.js diff --git a/config/routes/control-panel.js b/config/routes/control-panel.js index 3b81e47..48535d0 100644 --- a/config/routes/control-panel.js +++ b/config/routes/control-panel.js @@ -7,6 +7,7 @@ function checkAuthenticated(req, res, next) { } module.exports = function(server, db) { + // роуты server.get('/control-panel', checkAuthenticated, (req, res) => { try { res.render('admin/control-panel', { @@ -91,6 +92,8 @@ module.exports = function(server, db) { } }); + + // редактирование категорий server.post('/control-panel/categories/create', checkAuthenticated, (req, res) => { try { const data = { @@ -147,4 +150,22 @@ module.exports = function(server, db) { res.render('main/404'); } }); + + // товары + server.post('/control-panel/items/update', checkAuthenticated, (req, res) => { + try { + const data = { + id: req.body.id, + title: req.body.title, + price: parseFloat(req.body.price), + description: req.body.description, + category: JSON.parse(req.body.category) + } + db.collection('items').updateOne({"_id": ObjectID(data.id)}, {$set: {title: data.title, price: data.price, description: data.description, category: data.category.title}}); + res.redirect('/control-panel/items'); + } catch (error) { + console.log(error); + res.render('main/404'); + } + }); } \ No newline at end of file diff --git a/config/server.js b/config/server.js index f8f9815..310e6e2 100644 --- a/config/server.js +++ b/config/server.js @@ -53,5 +53,7 @@ MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: t }); }) .finally(() => { - server.listen(3000, () => console.log('Listen port 3000...')); + server.listen(3000, () => { + console.log('Listen port 3000...'); + }); }); diff --git a/dist/views/admin/assets/templates/modals/edit_category.pug b/dist/views/admin/assets/templates/modals/edit_category.pug index 0335ed2..aa71a34 100644 --- a/dist/views/admin/assets/templates/modals/edit_category.pug +++ b/dist/views/admin/assets/templates/modals/edit_category.pug @@ -1,5 +1,5 @@ // Edit Category -#editCategory.c_modal-wrap.hide +#editCategoryModal.c_modal-wrap.hide .container .row .c_modal @@ -32,5 +32,5 @@ input(type="text" name="format" required) label Формат аккаунтов .edit_success - button(type="submit" class="btn green waves-effect" style="width: 100%;height:50px") Редактировать + button(type="submit" class="btn orange waves-effect" style="width: 100%;height:50px") Редактировать // Edit Category END diff --git a/dist/views/admin/assets/templates/modals/edit_item.pug b/dist/views/admin/assets/templates/modals/edit_item.pug index e69de29..40db312 100644 --- a/dist/views/admin/assets/templates/modals/edit_item.pug +++ b/dist/views/admin/assets/templates/modals/edit_item.pug @@ -0,0 +1,31 @@ +// Edit Item +#editItemModal.c_modal-wrap.hide + .container + .row + .c_modal + .c_modal-content.editItem + .modal-content + .modal-content__header(style="margin-bottom: 1rem;") + h4.small-title Редактирование товара + span#editItemClose.modal-close + i.material-icons close + .modal-content__form + form(action="/control-panel/items/update" method="POST") + .input-field + input.id(style="color: gray;" type="text" name="id" required readonly) + label ID товара + .input-field + input.title(id="title" type="text" name="title" required) + label(for="title") Новое название товара + .input-field + input.price(id="price" type="text" name="price" required) + label(for="price") Цена + .input-field + textarea.description(id="description" class="materialize-textarea" type="text" name="description") + label(for="description") Описание товара + .input-field + select.category(name="category") + label Категория + .edit_success + button(type="submit" class="btn orange waves-effect" style="width: 100%;height:50px") Редактировать +// Edit Category END diff --git a/dist/views/admin/categories.pug b/dist/views/admin/categories.pug index ee7ad23..3d225e9 100644 --- a/dist/views/admin/categories.pug +++ b/dist/views/admin/categories.pug @@ -23,8 +23,8 @@ body.has-fixed-sidenav .input-field.col.l6.s12 input(name="title" type="text" required) label(for="title") Название категории - #icons.input-field.col.l6.s12 - select(name="img" required) + .input-field.col.l6.s12 + select#icons_select(name="img" required) option(value="" disabled selected) | Выберите иконку label(for="img") Иконка @@ -51,16 +51,16 @@ body.has-fixed-sidenav button(type="submit" class="btn right" style="margin-right: 10px;") Добавить .category-edit .row - #edit.input-field.col.s12 - select + .input-field.col.s12 + select#editCategory_select option(value="" disabled selected) | Выберите категорию для редактирования label Редактирование категории .icon-dell .row form(id="dellIcon" action="/control-panel/categories/dellicon" method="POST") - #dellIcon.input-field.col.s12 - select(name="img") + .input-field.col.s12 + select#dellIcon_select(name="img") option(value="" disabled selected) | Выберите иконку для удаления label Удаление иконки @@ -69,8 +69,8 @@ body.has-fixed-sidenav .category-delete .row form(id="dellCategory" action="/control-panel/categories/delete" method="POST") - #delete.input-field.col.s12 - select(name="category") + .input-field.col.s12 + select#delete_select(name="category") option(value="" disabled selected) | Выберите категорию для удаления label Удаление категории diff --git a/dist/views/admin/items.pug b/dist/views/admin/items.pug index 4fbd80d..641f3c1 100644 --- a/dist/views/admin/items.pug +++ b/dist/views/admin/items.pug @@ -30,11 +30,11 @@ body.has-fixed-sidenav th Редактирование .divider - tbody + tbody#editItem #loader.progress .indeterminate ul#pagination.pagination.center(data-page="1") - + include ./assets/templates/modals/edit_item.pug include ./assets/templates/footer.pug include ./assets/scripts.pug \ No newline at end of file diff --git a/src/admin/components/categories.component.js b/src/admin/components/categories.component.js index 29092f4..efed22d 100644 --- a/src/admin/components/categories.component.js +++ b/src/admin/components/categories.component.js @@ -9,13 +9,13 @@ export class CategoriesComponent extends Component { } setElems() { - // обозначим все селекты для рендера в них наши категории и иконки в дальнейшем - this.$editSelect = this.$el.querySelector('#edit select'); - this.$dellSelect = this.$el.querySelector('#delete select'); - this.$iconsSelect = this.$el.querySelector('#icons select'); - this.$dellIconsSelect = this.$el.querySelector('#dellIcon select'); + // селекты в которых рендерится контент + this.$editSelect = this.$el.querySelector('#editCategory_select'); // редактирование категории + this.$dellSelect = this.$el.querySelector('#delete_select'); // удаление категории + this.$iconsSelect = this.$el.querySelector('#icons_select'); // выбор иконки + this.$dellIconsSelect = this.$el.querySelector('#dellIcon_select'); // удаление иконки - // формы + // обработка форм this.$dellIconFrom = this.$el.querySelector('#dellIcon'); // удаление иконки this.$addForm = this.$el.querySelector('#addCategory'); // добавление категории this.$dellForm = this.$el.querySelector('#dellCategory'); // удаление категории diff --git a/src/admin/core/modal.js b/src/admin/core/modal.js index 2655e4d..7440d0b 100644 --- a/src/admin/core/modal.js +++ b/src/admin/core/modal.js @@ -8,18 +8,26 @@ export class Modal { init() { if (this.open) { + this.setElems(); this.open.addEventListener('click', this.show.bind(this)); this.close.addEventListener('click', this.hide.bind(this)); } } - show() { - this.$el.classList.remove('hide'); - document.body.style.overflowY = 'hidden'; + show(e) { + if (e.target.id === this.open.id) { + this.$el.classList.remove('hide'); + document.body.style.overflowY = 'hidden'; + this.openHandler(e); + } } hide() { this.$el.classList.add('hide'); document.body.style.overflowY = ''; } + + openHandler() {} + + setElems() {} } diff --git a/src/admin/index.js b/src/admin/index.js index b057c82..574b91c 100644 --- a/src/admin/index.js +++ b/src/admin/index.js @@ -4,11 +4,13 @@ import { editCategoryModal } from "./modals/editCategory.modal.js"; import { ItemsComponent } from "./components/items.component.js"; import { LoaderComponent } from "./components/loader.component.js"; import { PaginationComponent } from "./components/pagination.component.js"; +import { editItemModal } from "./modals/editItem.modal.js"; const loader = new LoaderComponent('loader'); const pagination = new PaginationComponent('pagination', {loader}); const categories = new CategoriesComponent('categories'); const items = new ItemsComponent('items', {pagination}); -const editCategory = new editCategoryModal('editCategory', 'edit', 'editCategoryClose'); +const editCategory = new editCategoryModal('editCategoryModal', 'editCategory_select', 'editCategoryClose'); +const editItem = new editItemModal('editItemModal', 'editItem', 'editItemClose') const materialize = new MaterializeConfig(); console.log('Control-Panel v1.0.0'); \ No newline at end of file diff --git a/src/admin/modals/editCategory.modal.js b/src/admin/modals/editCategory.modal.js index 633daad..b299e60 100644 --- a/src/admin/modals/editCategory.modal.js +++ b/src/admin/modals/editCategory.modal.js @@ -10,14 +10,13 @@ export class editCategoryModal extends Modal { // перепишем метод для перевода ивента open в событие onchange init() { if (this.open) { - this.open.addEventListener('change', this.openHandler.bind(this)); + this.open.addEventListener('change', this.show.bind(this)); this.close.addEventListener('click', this.hide.bind(this)); this.$el.querySelector('form').addEventListener('submit', this.updateCategory.bind(this)); } } async openHandler(e) { - this.show(); const data = JSON.parse(e.target.value); this.$el.querySelector('form .id input').value = data.id; this.$el.querySelector('form .originalTitle input').value = data.title[0].toUpperCase() + data.title.slice(1); diff --git a/src/admin/modals/editItem.modal.js b/src/admin/modals/editItem.modal.js new file mode 100644 index 0000000..f2d4d71 --- /dev/null +++ b/src/admin/modals/editItem.modal.js @@ -0,0 +1,31 @@ +import { Modal } from "../core/modal"; +import { apiService } from "../services/api.service"; +import { renderCategories } from "../templates/categories.template"; + +export class editItemModal extends Modal { + constructor(id, open, close) { + super(id, open, close); + } + + setElems() { + this.$id = this.$el.querySelector('.id'); + this.$title = this.$el.querySelector('.title'); + this.$price = this.$el.querySelector('.price'); + this.$description = this.$el.querySelector('.description'); + this.$category = this.$el.querySelector('.category'); + } + + async openHandler(e) { + const data = JSON.parse(e.target.parentNode.parentNode.dataset.info), + categories = await apiService.getCategories(); + + this.$category.innerHTML = ``; + this.$id.value = data.id; + this.$title.value = data.title; + this.$price.value = data.price; + this.$description.value = data.description; + this.$category.insertAdjacentHTML('beforeend', renderCategories(categories)); + M.FormSelect.init(this.$category); + M.updateTextFields(); + } +} \ No newline at end of file diff --git a/src/admin/templates/items.template.js b/src/admin/templates/items.template.js index cdb62e3..e354c95 100644 --- a/src/admin/templates/items.template.js +++ b/src/admin/templates/items.template.js @@ -3,7 +3,7 @@ export function renderItems(items, categories) { categories.forEach(category => { items.forEach(item => { - if (item.category.toLowerCase() === category.title.toLowerCase()) html += `alt${item.title}${item.category}${new Date(item.date).toLocaleDateString()}${item.count}${item.price} ₽` + if (item.category.toLowerCase() === category.title.toLowerCase()) html += `alt${item.title}${item.category}${new Date(item.date).toLocaleDateString()}${item.count}${item.price} ₽` }); }); return html;