init commit #90
init commit #90
Conversation
| import SortableList from '../../components/sortable-list/index.js'; | ||
| import NotificationMessage from '../../components/notification/index.js'; | ||
|
|
||
| export default class Categories { |
There was a problem hiding this comment.
good 👍
лайк за вынесение категорий в отдельный компонент
| element; //html element | ||
|
|
||
| toggleAccordion = (event) => { | ||
| event.preventDefault(); |
| const subcategoryElementArr = this.element.querySelectorAll("[data-element='subcategoryList']"); | ||
|
|
||
| subcategoryElementArr.forEach((subcategoryElement, index) => { | ||
| const sortableList = new SortableList({ items: subcategoryListArr[index] }); |
| loadData = async(start, end) => { | ||
| this.element.classList.add("column-chart_loading"); | ||
| const url = this.url.href + `?from=${start}&to=${end}`; | ||
| let data = await fetchJson(url).catch((error) => console.log(error)); |
|
|
||
| loadData = async(start, end) => { | ||
| this.element.classList.add("column-chart_loading"); | ||
| const url = this.url.href + `?from=${start}&to=${end}`; |
There was a problem hiding this comment.
не забывайте использовать new URL
| } = {}) { | ||
| this.formatHeading = formatHeading; | ||
| this.range = range; | ||
| this.url = new URL(url, BACKEND_URL); |
| <div data-element="body" class="column-chart__chart"> | ||
| ${this.getColumnBody(this.data)} | ||
| </div> | ||
| <div class="${this.chartClasses}" style="--chart-height: 50"> |
| @@ -0,0 +1,176 @@ | |||
| export default class DoubleSlider { | |||
|
|
||
| destroy() { | ||
| this.remove(); | ||
| document.removeEventListener('pointermove', this.onThumbPointerMove); |
| @@ -1,89 +1,107 @@ | |||
| const BACKEND_URL = 'https://course-js.javascript.ru'; | |||
There was a problem hiding this comment.
данное значение стоит взять из переменных окружения!
| } | ||
| createGraph() { | ||
| this.data.map(col => { | ||
| this.graph += `<div style="--value: ${col.value}" data-tooltip="${col.percent}"></div>`; |
There was a problem hiding this comment.
так делать не следует, не используйте строковую конкатенацию при работе с шаблонами;
лучше соберите массив и приведите его к строке
| price: 100, | ||
| discount: 0 | ||
| }; | ||
| const IMGUR_CLIENT_ID = '28aaa2e823b03b1'; |
There was a problem hiding this comment.
данные значения следует взять из переменных окружения
| this.createImagesList(); | ||
| this.initEventListeners(); | ||
| onImageListClick = (event) => { | ||
| const el = event.target.closest('.imgDeleteBtn'); |
There was a problem hiding this comment.
старайтесь именовать переменные как минимум из 3х символов
| async load(urlCategories, urlProduct) { | ||
| const categories = fetchJson(urlCategories).catch((error) => console.log('loadProduct', error)); | ||
| const product = fetchJson(urlProduct).catch((error) => console.log('loadProduct', error)); | ||
| return await Promise.all([categories, product]); |
There was a problem hiding this comment.
пожалуйста воспользуйтесь try...catch для обработки ошибки
| const product = this.getFormData(); | ||
| const result = await fetchJson(`${process.env.BACKEND_URL}api/rest/products`, { | ||
| method: 'PATCH', | ||
| let product = { |
| let product = { | ||
| 'images': this.product.images, | ||
| 'title': escapeHtml(this.subElements.productTitle.value), | ||
| 'description': escapeHtml(this.subElements.productDescription.value), |
There was a problem hiding this comment.
лайк за использование escapeHtml
| return this.categories.map(category => { | ||
| if (category.subcategories && category.subcategories.length > 0) { | ||
| return category.subcategories.map(subcategory => { | ||
| return `<option value="${subcategory.id}">${category.title} > ${subcategory.title}</option>`; |
There was a problem hiding this comment.
обратите внимание на использование new Option
| remove() { | ||
| this.element.remove(); | ||
| } | ||
| destroy() { | ||
| this.remove(); | ||
| this.subElements.productSave.removeEventListener('click', this.onClick); |
There was a problem hiding this comment.
удалять обработчики с внутренних эл-тов нет необходимости
| return ` | ||
| <div class="rangepicker__day-of-week"> | ||
| <div>Пн</div> | ||
| <div>Вт</div> |
There was a problem hiding this comment.
подумайте как можно сгенерировать данный список динамически
| }; | ||
|
|
||
| return this; | ||
| this.subElements.input.removeEventListener('click', this.onInputClick); |
| @@ -1,123 +1,40 @@ | |||
| import fetchJson from "../../utils/fetch-json.js"; | |||
| import fetchJson from './../../utils/fetch-json.js'; | |||
|
|
|||
| const BACKEND_URL = 'https://course-js.javascript.ru'; | |||
There was a problem hiding this comment.
снова, следует взять данное значение из переменных окружения
| this.element.classList.remove('sortable-table_loading'); | ||
|
|
||
| return data; | ||
| async loadData(_start, _end, _sort, _order) { |
| destroy() { | ||
| this.remove(); | ||
| this.subElements = {}; | ||
| this.subElements.header.removeEventListener('pointerdown', this.sortClick); | ||
| window.removeEventListener('scroll', this.infinityScroll); |
| element.innerHTML = this.getTemplate(); | ||
| this.element = element.firstElementChild; | ||
| this.subElements = this.getSubElements(this.element); | ||
| this.categories = await fetchJson('https://course-js.javascript.ru/api/rest/categories?_sort=weight&_refs=subcategory'); |
There was a problem hiding this comment.
не забывайте использовать new URL
| url.searchParams.set('from', from.toISOString()); | ||
| url.searchParams.set('to', to.toISOString()); | ||
|
|
||
| let sortableTableUrl = `api/dashboard/bestsellers?_start=1&_end=20&from=${from.toISOString()}&to=${to.toISOString()}`; |
| } | ||
|
|
||
| async update(from, to) { | ||
| await this.ordersChart.update(from, to); |
There was a problem hiding this comment.
так делать категорически нельзя!
каждый await блокирует следующий
|
|
||
| this.subElements.rangePicker.append(rangePicker.element); | ||
|
|
||
| this.subElements.ordersChart.append(this.ordersChart.element); |
There was a problem hiding this comment.
подумайте, может стоит разделить инициализацию компонент от рендера?
также подумайте, может стоит отрендерить компоненты динамично - в цикле?
| <div> | ||
| <h1>Edit page</h1> | ||
| </div>`; | ||
| const URLArray = window.location.href.split('/') |
There was a problem hiding this comment.
так делать не следует, id товара необходимо передать из роутера, обратите внимание на модуль render-page
No description provided.