Initial import
This commit is contained in:
Admin Nasledstvo
@@ -0,0 +1,361 @@
|
||||
class SelectorBase {
|
||||
find(selector, parent) {
|
||||
const p = parent || document
|
||||
return parent.querySelector(selector)
|
||||
}
|
||||
|
||||
findAll(selector, parent, callback) {
|
||||
const p = parent || document,
|
||||
result = parent.querySelectorAll(selector)
|
||||
result.forEach((e, i) => {
|
||||
callback(e, i)
|
||||
})
|
||||
return result;
|
||||
}
|
||||
|
||||
set(obj) {
|
||||
obj = obj || {};
|
||||
const element = document.createElement(obj.tagName || 'div')
|
||||
if (obj.type) element.type = obj.type
|
||||
if (obj.className) element.className = obj.className
|
||||
if (obj.innerHTML) element.innerHTML = obj.innerHTML
|
||||
if (obj.name) element.name = obj.name
|
||||
if (obj.events) {
|
||||
Object.keys(obj.events).forEach(event => {
|
||||
element.addEventListener(event, e => {
|
||||
obj.events[event](element)
|
||||
})
|
||||
})
|
||||
}
|
||||
if (obj.attributes) {
|
||||
Object.keys(obj.attributes).forEach(attr => {
|
||||
element.setAttribute(attr, obj.attributes[attr])
|
||||
})
|
||||
}
|
||||
if (obj.parent) obj.parent.appendChild(element)
|
||||
return element
|
||||
}
|
||||
|
||||
toggleClass(e, classFrom, classTo) {
|
||||
e.classList.remove(classFrom)
|
||||
e.classList.add(classTo)
|
||||
}
|
||||
}
|
||||
|
||||
class InnerTableItems extends SelectorBase {
|
||||
updateUrl
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.setDefault()
|
||||
}
|
||||
|
||||
setChangeToSelect(e) {
|
||||
this.typeValueSelectorChange(e, e.name.replace('user_interface_type', 'select_data'))
|
||||
}
|
||||
|
||||
setChangeDataType(e) {
|
||||
console.log(e.value)
|
||||
}
|
||||
|
||||
setUpdateUrl(url) {
|
||||
this.updateUrl = url;
|
||||
}
|
||||
|
||||
setDefault() {
|
||||
this.findAll('.type-value-selector', document, e => {
|
||||
e.addEventListener('change', () => {
|
||||
this.typeValueSelectorChange(e, e.name.replace('user_interface_type', 'select_data'))
|
||||
})
|
||||
})
|
||||
this.findAll('.inner-td-table .add-row', document, e => {
|
||||
e.addEventListener('click', () => {
|
||||
this.addNewRow(e)
|
||||
})
|
||||
})
|
||||
this.findAll('.inner-td-table .remove', document, e => {
|
||||
e.addEventListener('click', () => {
|
||||
this.deleteRow(e)
|
||||
})
|
||||
})
|
||||
this.findAll('.inner-td-table .add-bg, .inner-td-table .add-en', document, e => {
|
||||
e.addEventListener('keydown', () => {
|
||||
this.addNewRow(e)
|
||||
})
|
||||
})
|
||||
this.findAll('.inner-td-table .update-bg, .inner-td-table .update-en', document, e => {
|
||||
e.addEventListener('keydown', () => {
|
||||
this.updateRow(e)
|
||||
})
|
||||
e.addEventListener('blur', () => {
|
||||
this.updateRow(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
addNewRow(e) {
|
||||
const erd = this.eventRetrieveData(e)
|
||||
if (erd) {
|
||||
const lg = !erd.inputEn ? 1 : null;
|
||||
const row = this.setRow(erd.tbody, erd.dataTable, 'update', lg)
|
||||
row.inputBg.value = erd.inputBg.value
|
||||
if (row.inputEn && erd.inputEn) {
|
||||
row.inputEn.value = erd.inputEn.value
|
||||
}
|
||||
if(erd.inputBg.value !== '') {
|
||||
if (erd.tbody.dataset.id !== 'undefined') {
|
||||
console.log(erd.tbody.dataset.id)
|
||||
if (this.updateUrl && erd.tbody.dataset.id) {
|
||||
erd.tr.classList.add('disabled')
|
||||
this.request({
|
||||
url: this.updateUrl,
|
||||
data: {
|
||||
parent_id: erd.tbody.dataset.id,
|
||||
bg: erd.inputBg.value,
|
||||
en: erd.inputEn ? erd.inputEn.value : '',
|
||||
},
|
||||
success: r => {
|
||||
if (r.id) {
|
||||
row.tr.setAttribute('data-option-id', r.id);
|
||||
erd.tbody.insertBefore(row.tr, erd.tr)
|
||||
erd.inputBg.value = ''
|
||||
if (erd.inputEn) erd.inputEn.value = ''
|
||||
erd.tr.classList.remove('disabled')
|
||||
erd.inputBg.focus()
|
||||
this.setData(erd.tbody, erd.hidden)
|
||||
flash.success('Опцията е добавена успешно')
|
||||
} else {
|
||||
flash.error('Опцията не беше добавена поради грешка в системата')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
erd.tbody.insertBefore(row.tr, erd.tr)
|
||||
erd.inputBg.value = ''
|
||||
if (erd.inputEn) erd.inputEn.value = ''
|
||||
erd.tr.classList.remove('disabled')
|
||||
erd.inputBg.focus()
|
||||
this.setData(erd.tbody, erd.hidden)
|
||||
}
|
||||
} else {
|
||||
errorElement(erd.inputBg, 'Стойността не може да бъде празна')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateRow(e) {
|
||||
const erd = this.eventRetrieveData(e)
|
||||
if (erd) {
|
||||
if(erd.tr && erd.tr.dataset.optionId) {
|
||||
erd.tr.classList.add('disabled');
|
||||
this.request({
|
||||
url: this.updateUrl,
|
||||
data: {
|
||||
id: erd.tr.dataset.optionId,
|
||||
bg: erd.inputBg.value,
|
||||
en: erd.inputEn ? erd.inputEn.value : '',
|
||||
},
|
||||
success: r => {
|
||||
if(r.id) {
|
||||
this.setData(erd.tbody, erd.hidden)
|
||||
flash.success('Опцията е актуализирана успешно')
|
||||
} else {
|
||||
flash.error('Опцията не беше актуализирана поради грешка в системата')
|
||||
}
|
||||
erd.tr.classList.remove('disabled');
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deleteRow(e) {
|
||||
const erd = this.eventRetrieveData(e)
|
||||
if (erd) {
|
||||
erd.tr.classList.add('disabled');
|
||||
if(erd.tr && erd.tr.dataset.optionId) {
|
||||
this.request({
|
||||
url: this.updateUrl,
|
||||
data: {
|
||||
id: erd.tr.dataset.optionId,
|
||||
remove: 1
|
||||
},
|
||||
success: r => {
|
||||
if(r.success) {
|
||||
erd.tr.remove()
|
||||
this.setData(erd.tbody, erd.hidden)
|
||||
flash.success('Опцията е премахната успешно')
|
||||
} else {
|
||||
flash.error('Опцията не беше премахната поради грешка в системата')
|
||||
erd.tr.classList.remove('disabled')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setRow(tbody, dataTable, type, lg) {
|
||||
const trObj = {tagName: 'tr', attributes: {"data-table": dataTable}};
|
||||
if (type === 'add')
|
||||
trObj.parent = tbody
|
||||
const
|
||||
tr = this.set(trObj),
|
||||
tdBg = this.set({tagName: 'td', parent: tr}),
|
||||
inputBg = this.set({
|
||||
tagName: 'input',
|
||||
parent: tdBg,
|
||||
className: `${type}-bg`,
|
||||
events: {
|
||||
keydown: () => {
|
||||
if (type === 'add')
|
||||
this.addNewRow(inputBg)
|
||||
if (type === 'update')
|
||||
this.updateRow(inputBg)
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
tdEn = this.set({tagName: 'td', parent: tr}),
|
||||
inputEn = this.set({
|
||||
tagName: 'input',
|
||||
parent: tdEn,
|
||||
className: `${type}-en`,
|
||||
events: {
|
||||
keydown: () => {
|
||||
if (type === 'add')
|
||||
this.addNewRow(inputEn)
|
||||
if (type === 'update')
|
||||
this.updateRow(inputEn)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (lg === 1) tdEn.remove()
|
||||
|
||||
|
||||
const button = this.set({
|
||||
tagName: 'td',
|
||||
className: type === 'add' ? 'add-row' : 'remove',
|
||||
parent: tr,
|
||||
innerHTML: `<i class="la la-${type === 'add' ? 'plus' : 'remove'}"></i>`,
|
||||
events: {
|
||||
click: () => {
|
||||
if (type === 'add')
|
||||
this.addNewRow(button)
|
||||
if (type === 'update')
|
||||
this.deleteRow(button)
|
||||
}
|
||||
}
|
||||
})
|
||||
if (type === 'add')
|
||||
inputBg.focus()
|
||||
if (type === 'update') {
|
||||
tr.className = 'added-row'
|
||||
tr.setAttribute('data-table', dataTable)
|
||||
}
|
||||
return {tr, inputBg, inputEn};
|
||||
|
||||
}
|
||||
|
||||
eventRetrieveData(e) {
|
||||
if (event.keyCode && event.keyCode !== 13) return
|
||||
var tr = "";
|
||||
if (event.keyCode === 13) event.preventDefault()
|
||||
if (e.tagName === "INPUT") tr = e.parentNode.parentNode
|
||||
if (e.tagName === "TD") tr = e.parentNode
|
||||
const
|
||||
dataTable = tr.dataset.table,
|
||||
tbody = document.querySelector(`.inner-td-table[data-table="${dataTable}"] tbody`),
|
||||
hidden = document.querySelector(`input[name="${dataTable}"]`),
|
||||
button = this.find('.add-row', tr),
|
||||
inputBg = this.find('td:nth-child(1) input', tr),
|
||||
inputEn = this.find('td:nth-child(2) input', tr)
|
||||
return {dataTable, tr, inputBg, inputEn, tbody, hidden, button}
|
||||
}
|
||||
|
||||
setData(tbody, hidden) {
|
||||
const data = []
|
||||
this.findAll('.added-row', tbody, (e, i) => {
|
||||
e.setAttribute('data-index', i)
|
||||
const objectRow = {};
|
||||
const bg = this.find('td:nth-child(1) input', e)
|
||||
const en = this.find('td:nth-child(2) input', e)
|
||||
if(e.dataset.optionId) objectRow['id'] = e.dataset.optionId
|
||||
if (bg) objectRow['bg'] = bg.value
|
||||
if (en) objectRow['en'] = en.value
|
||||
data.push(objectRow)
|
||||
})
|
||||
hidden.value = JSON.stringify(data)
|
||||
return data
|
||||
}
|
||||
|
||||
request(o) {
|
||||
console.log(o);
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.responseType = 'json'
|
||||
xhr.onload = () => {
|
||||
if(o.success) {
|
||||
o.success(xhr.response)
|
||||
}
|
||||
}
|
||||
xhr.open('post', o.url)
|
||||
const fd = new FormData()
|
||||
if(o.data) {
|
||||
Object.keys(o.data).forEach(key => {
|
||||
fd.append(key, o.data[key])
|
||||
})
|
||||
}
|
||||
xhr.send(fd)
|
||||
}
|
||||
|
||||
typeValueSelectorChange(elem, dataTable) {
|
||||
const
|
||||
existHidden = elem.parentNode.querySelector('input[type="hidden"]'),
|
||||
existTable = elem.parentNode.querySelector('table.inner-td-table')
|
||||
|
||||
if(existHidden) existHidden.remove()
|
||||
if(existTable) existTable.remove()
|
||||
|
||||
if (elem.value === 'list') {
|
||||
const
|
||||
hidden = this.set({tagName: 'input', type: 'hidden', name: dataTable}),
|
||||
table = this.set({
|
||||
tagName: 'table',
|
||||
className: 'inner-td-table',
|
||||
innerHTML:
|
||||
`<thead>
|
||||
<tr><td>стойност (bg)</td><td>стойност (en)</td><td></td></tr>
|
||||
</thead>`,
|
||||
attributes: {"data-table": dataTable}
|
||||
}),
|
||||
tbody = this.set({tagName: 'tbody', parent: table, attributes: {"data-id": elem.dataset.id}})
|
||||
this.setRow(tbody, dataTable, 'add')
|
||||
elem.parentNode.appendChild(hidden)
|
||||
elem.parentNode.appendChild(table)
|
||||
} else if (elem.value === 'list_simple') {
|
||||
const
|
||||
hidden = this.set({tagName: 'input', type: 'hidden', name: dataTable}),
|
||||
table = this.set({
|
||||
tagName: 'table',
|
||||
className: 'inner-td-table',
|
||||
innerHTML:
|
||||
`<thead>
|
||||
<tr><td>стойност</td></tr>
|
||||
</thead>`,
|
||||
attributes: {"data-table": dataTable}
|
||||
}),
|
||||
tbody = this.set({tagName: 'tbody', parent: table, attributes: {"data-id": elem.dataset.id}})
|
||||
this.setRow(tbody, dataTable, 'add', 1)
|
||||
elem.parentNode.appendChild(hidden)
|
||||
elem.parentNode.appendChild(table)
|
||||
} else {
|
||||
const
|
||||
hidden = this.find('input[type="hidden"]', elem.parentNode),
|
||||
table = this.find('table.inner-td-table', elem.parentNode)
|
||||
if (hidden) hidden.remove()
|
||||
if (table) table.remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user