fixed items component

This commit is contained in:
Sergey Yarkov 2020-02-12 22:22:05 +03:00
parent 6a577b8dc4
commit a50caef3ce
10 changed files with 93 additions and 23 deletions

View File

@ -89,7 +89,7 @@ hr {
height: 100%;
width: 100%;
top: 0;
z-index: 999;
z-index: 99999999;
left: 0;
bottom: 0;
right: 0;
@ -514,6 +514,7 @@ footer.main-footer .container {
.items-list__name {
max-width: 525px;
overflow-x: hidden;
overflow-y: hidden;
}
.items-list__name,

File diff suppressed because one or more lines are too long

View File

@ -2,6 +2,16 @@ include ./assets/head.pug
body.has-fixed-sidenav
include ./assets/templates/header.pug
main.admin-main
#loader.loader-fullscreen.hide
.loader-fullscreen__wrap
.preloader-wrapper.big.active
.spinner-layer.spinner-green-only
.circle-clipper.left
.circle
.gap-patch
.circle
.circle-clipper.right
.circle
.container
.row
.col.s12
@ -45,9 +55,7 @@ body.has-fixed-sidenav
th Сумма
th Информация о покупке
.divider
tbody
#loader.progress
.indeterminate
tbody
ul#pagination.pagination.center(data-page="1")
include ./assets/templates/modals/bill_data.pug
include ./assets/templates/footer.pug

View File

@ -2,6 +2,16 @@ include ./assets/head.pug
body.has-fixed-sidenav
include ./assets/templates/header.pug
main.admin-main
#loader.loader-fullscreen.hide
.loader-fullscreen__wrap
.preloader-wrapper.big.active
.spinner-layer.spinner-green-only
.circle-clipper.left
.circle
.gap-patch
.circle
.circle-clipper.right
.circle
.container
.row
.col.s12
@ -32,8 +42,6 @@ body.has-fixed-sidenav
.divider
tbody
#loader.progress
.indeterminate
ul#pagination.pagination.center(data-page="1")
.divider
.items-add

View File

@ -57,6 +57,15 @@ module.exports = function(server, db) {
}
});
server.get('/api/items/id/:id', async (req, res) => {
try {
const item = await db.collection('items').findOne({_id: ObjectID(req.params.id)})
res.json(item)
} catch {
res.status(500).render('main/404');
}
});
server.get('/api/items/page/:page', async (req, res) => {
try {
const page = parseInt(req.params.page),
@ -77,6 +86,15 @@ module.exports = function(server, db) {
}
});
server.get('/api/items/data/:id', checkAuthenticated, async (req, res) => {
try {
const data = await db.collection('info').findOne({_id: ObjectID(req.params.id)});
res.json(data)
} catch {
res.status(500).render('main/404');
}
})
server.get('/api/buyers', checkAuthenticated, async (req, res) => {
try {
const buyers = await db.collection('buyers').find({}).toArray();

View File

@ -25,7 +25,7 @@ const content = new ContentComponent('content');
const administrator = new AdministratorComponent('administrator');
// Modals
const itemEdit = new ItemEditModal('editItemModal', 'edit', 'editItemClose');
const itemEdit = new ItemEditModal('editItemModal', 'edit', 'editItemClose', {loader});
const itemDelete = new ItemDeleteModal('deleteItemModal', 'edit', 'deleteItemClose');
const categoryEdit = new CategoryEditModal('editCategoryModal', 'editCategory_select', 'editCategoryClose');
const billData = new BillDataModal('billDataModal', 'dashboard', 'billDataClose');

View File

@ -1,4 +1,5 @@
import { Modal } from "../core/modal";
import { apiService } from "../services/api.service";
import axios from "axios";
export class ItemDeleteModal extends Modal {
@ -19,10 +20,16 @@ export class ItemDeleteModal extends Modal {
this.$button = this.$el.querySelector('.delete-item');
}
openHandler(e) {
const data = JSON.parse(e.target.parentNode.parentNode.dataset.info);
this.$content.innerHTML = `Вы действительно хотите удалить товар "${data.title}"? Находящиеся в нем аккаунты будут удалены.`;
this.$button.onclick = this.deleteHandler.bind(this, data.id);
async openHandler(e) {
try {
const id = e.target.parentNode.parentNode.dataset.id,
item = await apiService.getItemById(id);
this.$content.innerHTML = `Вы действительно хотите удалить товар "${item.title}"? Находящиеся в нем аккаунты будут удалены.`;
this.$button.onclick = this.deleteHandler.bind(this, item._id);
} catch (error) {
alert('Произошла ошибка, попробуйте обновить страницу.')
}
}
async deleteHandler(id) {

View File

@ -3,8 +3,9 @@ import { apiService } from "../services/api.service";
import { renderCategories } from "../templates/categories.template";
export class ItemEditModal extends Modal {
constructor(id, open, close) {
constructor(id, open, close, {loader}) {
super(id, open, close);
this.loader = loader
}
show(e) {
@ -25,19 +26,28 @@ export class ItemEditModal extends Modal {
}
async openHandler(e) {
const data = JSON.parse(e.target.parentNode.parentNode.dataset.info),
categories = await apiService.getCategories();
try {
this.loader.show();
const id = e.target.parentNode.parentNode.dataset.id,
item = await apiService.getItemById(id),
data = await apiService.getDataById(id),
categories = await apiService.getCategories();
item.data = data.data
this.$category.innerHTML = `<option value='{"title": "${data.category}"}' selected>Оставить прежнюю</option>`;
this.$id.value = data.id;
this.$title.value = data.title;
this.$price.value = data.price;
this.$description.value = data.description;
this.$category.innerHTML = `<option value='{"title": "${item.category}"}' selected>Оставить прежнюю</option>`;
this.$id.value = item._id;
this.$title.value = item.title;
this.$price.value = item.price;
this.$description.value = item.description;
this.$category.insertAdjacentHTML('beforeend', renderCategories(categories));
this.$data.value = data.data;
this.$data.value = item.data;
M.FormSelect.init(this.$category);
M.textareaAutoResize(this.$description);
M.textareaAutoResize(this.$data);
M.updateTextFields();
M.updateTextFields();
this.loader.hide();
} catch (error) {
alert('Произошла ошибка, обновите страницу')
}
}
}

View File

@ -56,6 +56,24 @@ class ApiService {
}
}
async getItemById(id) {
try {
const request = `${this.url}/api/items/id/${id}`;
return useRequest(request);
} catch (error) {
console.log(error)
}
}
async getDataById(id) {
try {
const request = `${this.url}/api/items/data/${id}`;
return useRequest(request);
} catch (error) {
console.log(error)
}
}
async getItemsOne(category, sorting) {
try {
if (sorting) {

View File

@ -3,7 +3,7 @@ export function renderItems(items, categories, info) {
return categories.map(category => {
return items.map((item, i) => {
if (item.category.toLowerCase() === category.title.toLowerCase()) {
return `<tr data-info='{"id": "${item._id}", "title": "${item.title}", "category": "${item.category}", "price": "${item.price}", "description": "${item.description}", "data": "${info[i].data}"}'><td><img src="../img/service-icons/${category.img}" alt="alt"></td><td>${item.title}</td><td>${item.category[0].toUpperCase() + item.category.slice(1)}</td><td>${new Date(item.date).toLocaleDateString()}</td><td>${item.count}</td><td>${item.price} ₽</td><td><button id="deleteItem" class="btn red">Удалить</button><button id="editItem" class="btn orange">Изменить</button></td></tr>`;
return `<tr data-id="${item._id}"><td><img src="../img/service-icons/${category.img}" alt="alt"></td><td>${item.title}</td><td>${item.category[0].toUpperCase() + item.category.slice(1)}</td><td>${new Date(item.date).toLocaleDateString()}</td><td>${item.count}</td><td>${item.price} ₽</td><td style="display: flex"><button id="deleteItem" class="btn red">Удалить</button><button id="editItem" class="btn orange">Изменить</button></td></tr>`;
}
}).join('');
}).join('');