yevhen/notes_list
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Complete main functionallity, some code cleaning etc

Browse Source
This commit is contained in:
Yevhen Odynets
2021-10-08 06:54:16 +03:00
parent dc19bb1fa5
commit 5433fe65ea
27 changed files with 482 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/modules/DOMController.js
View File

@@ -1,6 +1,8 @@
import Templates from '../templates/Views'
import { msgBox, createNode, destroyNode, findDates, formatDate, ucWords } from '../helpers'
import { createNode, destroyNode, findDates, formatDate, ucWords } from '../helpers'
import NotesAPI from './NotesAPI'
import ValidationController from './ValidationController'
import Alert from './AlertController'
export default class DOMController {
@@ -10,20 +12,25 @@ export default class DOMController {
try {
this.root.innerHTML = Templates.grid
} catch (e) {
DOMController.alert(e.toString(), 0, 3)
Alert.displayDialog(e.toString(), 0, 3)
}
this.btnCreateNote = this.root.querySelector(window.env.querySelectors.btnCreateNote)
this.btnPrepopulate = this.root.querySelector(window.env.querySelectors.btnPrepopulate)
this.createNotesGrid(window.env.prePopulateAmount || 0)
this.listener([
[this.btnCreateNote, 'click', (this.btnCreateNote.dataset.action || 'showError'), { legend: 'Create Note' }],
[this.btnPrepopulate, 'click', (this.btnPrepopulate.dataset.action || 'showError')],
])
this.navTabs()
}
/**
* Launches the events for Navigation panel to switch between the views of the App
*/
navTabs () {
const navTabs = document.querySelectorAll(window.env.querySelectors.navTabs + ' > li > a')
@@ -32,31 +39,54 @@ export default class DOMController {
}
}
prePopulate () {
const fakerAmount = document.querySelector(env.querySelectors.selectPrepopulate)
if (+fakerAmount.value <= 0) {
return
}
env.fakerAmount = (+fakerAmount.value > 44) ? 44 : +fakerAmount.value
localStorage.removeItem(window.env.localStorageKey)
fakerAmount.selectedIndex = 0
document.querySelector('.nav-tab.uk-active > a').click()
}
/**
* The method is being called for typical DOM-event task inside the table row
* to manipulate with records: deleting, editing, archiving.
*
* @param node
* @param method
*/
showError () {
DOMController.alert('Error occurred :(', 3000, 3)
noteToAction (node, method) {
const row = node.closest('tr')
NotesAPI[method](parseInt(row.dataset.id, 10))
row.classList.add('as-removing')
setTimeout(() => {
row.remove()
document.querySelector('.nav-tab.uk-active > a').click()
}, 1050)
}
/**
*
* @param msg
* @param fadeOut
* @param type
* @param womb
* @param node
*/
static alert (msg = 'Alert without message', fadeOut = 0, type = 0, womb = null) {
const alertTypes = window.env.alertTypes
const alert = createNode('div', { class: `uk-alert-${alertTypes[type]} uk-padding-small`, 'uk-alert': null }, msg)
alert.style.display = 'block'
womb instanceof Element ? womb.appendChild(alert) : msgBox.appendChild(alert)
noteToArchive (node) {
this.noteToAction(node, 'archiveNote')
}
if (fadeOut > 0) {
setTimeout(() => {
alert.remove()
}, fadeOut)
}
/**
*
* @param node
*/
noteFromArchive (node) {
this.noteToAction(node, 'unArchiveNote')
}
/**
@@ -64,26 +94,29 @@ export default class DOMController {
* @param node
*/
noteToTrash (node) {
const row = node.closest('tr')
NotesAPI.deleteNote(parseInt(row.dataset.id, 10))
row.classList.add('as-removing')
setTimeout(() => {
row.remove()
this.createNotesGrid(window.env.prePopulateAmount || 0)
}, 3000)
this.noteToAction(node, 'deleteNote')
}
createNotesGridByRoute (navTab) {
const route = new URL( navTab.href ).pathname.slice(1).split('\/')[0]
const route = new URL(navTab.href).pathname.slice(1).split('\/')[0]
document.querySelector('li.nav-tab.uk-active').classList.remove('uk-active')
navTab.closest('li').classList.add( 'uk-active' )
navTab.closest('li').classList.add('uk-active')
document.getElementById(window.env.querySelectors.notesGrid.slice(1)).classList.remove('uk-hidden')
switch ( route ){
case 'all': this.createNotesGrid( 0, null ); break;
case '': this.createNotesGrid( window.env.prePopulateAmount || 0 ); break;
case 'archived': this.createNotesGrid( window.env.prePopulateAmount || 0, true ); break;
default: console.log(route)
switch (route) {
case 'all':
this.createNotesGrid(0, null)
break
case '':
this.createNotesGrid(window.env.prePopulateAmount || 0)
break
case 'archived':
this.createNotesGrid(window.env.prePopulateAmount || 0, true)
break
case 'analytics':
console.log(NotesAPI.getAnalytics())
document.getElementById(window.env.querySelectors.notesGrid.slice(1)).classList.add('uk-hidden')
break
}
}
@@ -94,15 +127,12 @@ export default class DOMController {
*/
createNotesGrid (len = window.env.prePopulateAmount || 0, archived = false) {
const notes = NotesAPI.getNotesSanitized(len, archived)
if (notes.length === 0) { return }
const notesGrid = document.querySelector(window.env.querySelectors.notesGrid + ' tbody')
notesGrid.innerHTML = ''
const notes = NotesAPI.getNotesSanitized(len, archived)
if (notes.length === 0) { return }
notes.forEach(el => {
const row = createNode('tr')
@@ -117,29 +147,23 @@ export default class DOMController {
value = formatDate(value)
break
case 'category':
value = ucWords( value )
value = ucWords(value)
break
case 'title':
//attrs.class = 'uk-text-truncate'
attrs.class = 'uk-text-bold'
break
case 'content':
//attrs.class = 'uk-text-truncate'
//attrs.title = value
break
case 'dates':
attrs.style = 'font-size: 12px'
value = findDates(el.content).join(', ')
//attrs.class = 'uk-text-truncate'
//attrs.title = value
break
case 'edit' :
attrs.class = 'icon icon-edit grid-control'
attrs.class = 'grid-control icon icon-edit'
attrs['data-action'] = 'getEditForm'
break
case 'archive' :
attrs.class = 'icon icon-archive grid-control'
attrs['data-action'] = 'toArchive'
attrs.class = 'grid-control icon ' + (value === 'on' ? 'icon-unarchive' : 'icon-archive')
attrs['data-action'] = value === 'on' ? 'noteFromArchive' : 'noteToArchive'
value = ''
break
case 'delete' :
attrs.class = 'icon icon-delete grid-control'
@@ -172,11 +196,72 @@ export default class DOMController {
for (let key of formData.keys()) {
data[key] = formData.get(key)
}
return data
}
/**
*
* @param args
*/
getEditForm (args = {}) {
const node = createNode('div', { class: window.env.querySelectors.modal.slice(1) },
Templates.templates.editForm)
if (args.legend) {
node.querySelector('legend').innerHTML = args.legend
} else {
DOMController.fillTheForm(node, args)
}
//console.log( .getAttribute('maxlength') )
this.root.appendChild(node)
node.style.display = 'block'
const contentInput = node.querySelector('textarea[maxlength]')
const titleInput = node.querySelector('input[maxlength]')
this.listener([
[node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', destroyNode, node], //Remove modal dialog
[node.querySelector('form'), 'submit', NotesAPI.saveNote],
[contentInput, 'keydown', ValidationController.lengthOnKeyUp, contentInput],
[titleInput, 'keydown', ValidationController.lengthOnKeyUp, titleInput],
])
}
/**
*
* @param $form
* @param $el
*/
static fillTheForm ($form, $el) {
if ($el instanceof Element) {
const note = NotesAPI.getNoteByID(+$el.closest('tr').dataset.id)
if (note.length === 1) {
for (const [key, value] of Object.entries(note[0])) {
const $input = $form.querySelector(`[name='${key}']`)
if ($input instanceof Element) {
if ($input.type === 'checkbox') {
if (value !== '') {
$input.click()
}
} else {
$input.value = value
}
}
}
}
}
}
/**
* The function takes single DOM element or list of them
*
* @param els
* @returns {void|*}
@@ -184,15 +269,16 @@ export default class DOMController {
listener (els) { return els[0] instanceof Element ? this.on(els) : els.forEach(el => this.on(el)) }
/**
*
* @param args //selector, event, method, params
* TODO: guessed this should be rethought
* @param args
*/
on (args) {
const [selector, event, method] = args
if (!(selector instanceof Element)) {
return
Alert.displayDialog(`Internal Error: Try reload a page`, 3000, 3)
return false
}
try {
@@ -207,7 +293,7 @@ export default class DOMController {
evt.preventDefault()
setTimeout(() => {
this.createNotesGrid(window.env.prePopulateAmount || 0)
document.querySelector('.nav-tab.uk-active > a').click()
}, 300)
}
@@ -218,26 +304,13 @@ export default class DOMController {
}
})
return true
} catch (err) {
console.error(err)
Alert.displayDialog(`Error: ${err.toString()}`, 3000, 3)
return false
}
}
getEditForm (args = {}) {
const node = createNode('div', { class: window.env.querySelectors.modal.slice(1) },
Templates.templates.editForm)
if (args.legend) {
node.querySelector('legend').innerHTML = args.legend
}
this.root.appendChild(node)
node.style.display = 'block'
this.listener([
[node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', destroyNode, node], //Remove modal dialog
[node.querySelector('form'), 'submit', NotesAPI.saveNote],
])
}
}