Skip to content

Commit

Permalink
refactor(admin-ui): js in edit revision (DateTime, Reorder, Sortable,…
Browse files Browse the repository at this point in the history
… ..) (#770)
  • Loading branch information
theus77 committed Feb 16, 2024
1 parent 064ea2a commit e31c86d
Show file tree
Hide file tree
Showing 15 changed files with 235 additions and 78 deletions.
12 changes: 0 additions & 12 deletions EMS/admin-ui-bundle/_to_be_ref/js/editRevisionEventListeners.js
Original file line number Diff line number Diff line change
Expand Up @@ -223,18 +223,6 @@ function editRevisionEventListeners(target, onChangeCallback = null){
}
});

target.find('.datetime-picker').each(function( ) {
let $element = $(this);
$element.unbind('change');
$element.datetimepicker({
keepInvalid: true, //otherwise daysOfWeekDisabled or disabledHours will not work!
extraFormats: [moment.ISO_8601]
});
if (onChangeCallback) {
$element.not(".ignore-ems-update").on('dp.change', onChangeCallback);
}
});

target.find('.ems_daterangepicker').each(function( ) {

const options = $(this).data('display-option');
Expand Down
7 changes: 0 additions & 7 deletions EMS/admin-ui-bundle/_to_be_ref/js/initEms.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,6 @@ import ajaxModal from "../../js/core/helpers/ajaxModal";
});
}

function autoOpenModal(queryString) {
if(queryString.open) {
$('#content_type_structure_fieldType'+queryString.open).modal('show');
}
}

function initSearchForm() {

$('#add-search-filter-button').on('click', function(e) {
Expand Down Expand Up @@ -88,7 +82,6 @@ import ajaxModal from "../../js/core/helpers/ajaxModal";
closeModalNotification();
toggleMenu();
initSearchForm();
autoOpenModal(queryString());
intAjaxModalLinks();
});

Expand Down
6 changes: 3 additions & 3 deletions EMS/admin-ui-bundle/assets/js/core/components/jsonMenu.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import $ from 'jquery'
import { ChangeEvent } from '../events/changeEvent'
require('../librairies/nestedSortable')
import { v4 } from 'uuid'

const uuidv4 = require('uuid/v4')
require('../librairies/nestedSortable')

export default class JsonMenu {
constructor (target) {
Expand Down Expand Up @@ -63,7 +63,7 @@ export default class JsonMenu {
}

addItem ($target, prototypeTarget, data) {
const uuid = uuidv4()
const uuid = v4()
let itemHtml = this.parent.find('.json_menu_editor_fieldtype_widget').data(prototypeTarget)
itemHtml = itemHtml.replace(/%uuid%/g, uuid)
for (const [key, value] of Object.entries(data)) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import ajaxModal from '../../../js/core/helpers/ajaxModal'
import { ajaxJsonPost } from '../helpers/ajax'
import collapse from '../helpers/collapse'
import $ from 'jquery'
import { v4 } from 'uuid'

require('../librairies/nestedSortable')

const uuidv4 = require('uuid/v4')

export default class JsonMenuNested {
copyName = 'json_menu_nested_copy'
nodes = {}
Expand Down Expand Up @@ -198,7 +197,7 @@ export default class JsonMenuNested {

const json = JSON.parse(localStorage.getItem(this.copyName))

return loopJson(json, (key, value) => key === 'id' && value !== '_root' ? uuidv4() : value)
return loopJson(json, (key, value) => key === 'id' && value !== '_root' ? v4() : value)
}

return false
Expand All @@ -223,7 +222,7 @@ export default class JsonMenuNested {
}

const node = this.nodes[nodeId]
const addItemId = uuidv4()
const addItemId = v4()

const params = new URLSearchParams(window.location.search)

Expand Down Expand Up @@ -345,7 +344,7 @@ export default class JsonMenuNested {
}

return {
id: uuidv4(),
id: v4(),
label: item.label,
type: item.type,
object: item.object,
Expand Down
18 changes: 18 additions & 0 deletions EMS/admin-ui-bundle/assets/js/core/components/modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use strict'
import queryString from '../helpers/queryString'
import { Modal as BSModal } from 'bootstrap'

export default class Modal {
constructor () {
this.autoOpenModal()
}

autoOpenModal () {
const queryStringObject = queryString()
if (queryStringObject.open) {
const modalElement = document.getElementById(`content_type_structure_fieldType${queryStringObject.open}`)
const modal = BSModal.getOrCreateInstance(modalElement)
modal.show()
}
}
}
4 changes: 4 additions & 0 deletions EMS/admin-ui-bundle/assets/js/core/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Choice from './plugins/choice'
import CodeEditor from './plugins/codeEditor'
import CollapsibleCollection from './plugins/collapsibleCollection'
import Datatable from './plugins/datatable'
import Datetime from './plugins/datetime'
import File from './plugins/file'
import Form from './plugins/form'
import Iframe from './plugins/iframe'
Expand All @@ -21,6 +22,7 @@ import Tooltip from './plugins/tooltip'
import WYSIWYG from './plugins/wysiwyg'

import RevisionTask from './components/revisionTask'
import Modal from './components/modal'
import Sidebar from './components/sidebar'

import { EMS_ADDED_DOM_EVENT } from './events/addedDomEvent'
Expand All @@ -36,6 +38,7 @@ class Core {
new CodeEditor(),
new CollapsibleCollection(),
new Datatable(),
new Datetime(),
new File(),
new Form(),
new Iframe(),
Expand Down Expand Up @@ -75,6 +78,7 @@ class Core {
this.initCtrlSaveEvent()
this.components = [
new RevisionTask(),
new Modal(),
new Sidebar()
]
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
* http://www.opensource.org/licenses/mit-license.php
*/
/* eslint-disable */
require('jquery-ui');
require('jquery-ui/ui/widgets/sortable');

(function (factory) {
'use strict'

Expand Down Expand Up @@ -136,6 +139,12 @@
this.lastPositionAbs = this.positionAbs
}


this.dragDirection = {
vertical: this._getDragVerticalDirection(),
horizontal: this._getDragHorizontalDirection()
};

// Do scrolling
if (this.options.scroll) {
if (false && this.scrollParent[0] !== document && this.scrollParent[0].tagName !== 'HTML') {
Expand Down
42 changes: 42 additions & 0 deletions EMS/admin-ui-bundle/assets/js/core/plugins/datetime.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { TempusDominus } from '@eonasdan/tempus-dominus'
import '@eonasdan/tempus-dominus/src/scss/tempus-dominus.scss'
import ChangeEvent from '../events/changeEvent'

class Datetime {
#iframes = []

load (target) {
const datetimePickers = target.querySelectorAll('.datetime-picker')
for (let i = 0; i < datetimePickers.length; i++) {
const picker = new TempusDominus(datetimePickers[i], {
display: {
buttons: {
today: true,
clear: true,
close: true
}
},
localization: {
format: datetimePickers[i].dataset.dateFormat,
startOfTheWeek: 1
},
restrictions: {
daysOfWeekDisabled: JSON.parse(datetimePickers[i].dataset.dateDaysOfWeekDisabled),
disabledHours: JSON.parse(datetimePickers[i].dataset.dateDisabledHours)
}
})
if (datetimePickers[i].dataset.dateLocale) {
picker.locale(datetimePickers[i].dataset.dateLocale)
}
datetimePickers[i].addEventListener('change.td', function () {
if (datetimePickers[i].classList.contains('ignore-ems-update')) {
return
}
const event = new ChangeEvent(datetimePickers[i])
event.dispatch()
})
}
}
}

export default Datetime
4 changes: 2 additions & 2 deletions EMS/admin-ui-bundle/assets/js/core/plugins/text.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ class Text {
const spans = target.querySelectorAll('.text-counter[data-counter-label]')
for (let i = 0; i < spans.length; ++i) {
const span = spans[i]
const input = span.parentNode.querySelector('textarea,input')
if (!input || input.parentNode !== span.parentNode) {
const input = span.parentElement.querySelector('textarea,input')
if (input === null) {
return
}
const counterLabel = span.dataset.counterLabel
Expand Down
98 changes: 73 additions & 25 deletions EMS/admin-ui-bundle/assets/js/edit-revision.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,38 +122,86 @@ function onChange (allowAutoPublish = false) {
waitingResponse = ajaxRequest.post(primaryBox.data('ajax-update'), $('form[name=revision]').serialize())
.success(function (response) {
$('.is-invalid').removeClass('is-invalid')
$('span.help-block').remove()
$('.has-error').removeClass('has-error')
$('.invalid-feedback').html('')
$(response.formErrors).each(function (index, item) {
let target = item.propertyPath
const targetLabel = $('#' + target + '__label')
const targetError = $('#' + target + '__error')

const propPath = $('#' + item.propertyPath + '_value')
if (propPath.length && propPath.prop('nodeName') === 'TEXTAREA') {
target = item.propertyPath + '_value'
let targetElement = document.getElementById(target)
if (targetElement === null) {
targetElement = document.getElementById(`${target}_value`)
if (targetElement !== null) {
target = `${target}_value`
}
}

const targetParent = $('#' + target)
if (targetLabel.length) {
targetLabel.closest('div.form-group').addClass('has-error')
if (item.message && targetError.length > 0) {
targetError.addClass('has-error')
if ($('#' + target + '__error span.help-block').length === 0) {
targetError.append('<span class="help-block"><ul class="list-unstyled"></ul></span>')
if (targetElement !== null) {
switch (targetElement.nodeName) {
case 'DIV': {
const previousElement = targetElement.previousElementSibling
targetElement.classList.add('has-error')
if (previousElement !== null && previousElement.classList.contains('invalid-feedback') && item.message) {
$(previousElement).html(item.message)
} else {
console.log(targetElement)
}
break
}
$('#' + target + '__error' + ' span.help-block ul.list-unstyled').append('<li><span class="glyphicon glyphicon-exclamation-sign"></span> ' + item.message + '</li>')
}
} else {
$('#' + target).closest('div.form-group').addClass('has-error')
targetParent.parents('.form-group').addClass('has-error')
if (item.message) {
if (targetParent.parents('.form-group').find(' span.help-block').length === 0) {
targetParent.parent('.form-group').append('<span class="help-block"><ul class="list-unstyled"><li><span class="glyphicon glyphicon-exclamation-sign"></span> ' + item.message + '</li></ul></span>')
} else {
targetParent.parents('.form-group').find(' span.help-block ul.list-unstyled').append('<li><span class="glyphicon glyphicon-exclamation-sign"></span> ' + item.message + '</li>')
case 'INPUT': {
targetElement.classList.add('is-invalid')
const label = document.querySelector(`label[for=${target}]`)
if (label !== null) {
let parent = label.parentElement
if (parent.classList.contains('input-group')) {
parent = parent.parentElement
}
const invalidFeedback = label.parentElement.querySelector('.invalid-feedback')
if (invalidFeedback !== null) {
invalidFeedback.textContent = item.message
} else {
console.log(targetElement)
}
} else {
console.log(targetElement)
}
break
}
default: {
console.log(targetElement)
console.log(item)
}
}
} else {
console.log(item)
}

// const targetLabel = $('#' + target + '__label')
// const targetError = $('#' + target + '__error')
//
// const propPath = $('#' + item.propertyPath + '_value')
// if (propPath.length && propPath.prop('nodeName') === 'TEXTAREA') {
// target = item.propertyPath + '_value'
// }

// const targetParent = $('#' + target)
// if (targetLabel.length) {
// targetLabel.closest('div.form-group').addClass('has-error')
// if (item.message && targetError.length > 0) {
// targetError.addClass('has-error')
// if ($('#' + target + '__error span.help-block').length === 0) {
// targetError.append('<span class="help-block"><ul class="list-unstyled"></ul></span>')
// }
// $('#' + target + '__error' + ' span.help-block ul.list-unstyled').append('<li><span class="glyphicon glyphicon-exclamation-sign"></span> ' + item.message + '</li>')
// }
// } else {
// $('#' + target).closest('div.form-group').addClass('has-error')
// targetParent.parents('.form-group').addClass('has-error')
// if (item.message) {
// if (targetParent.parents('.form-group').find(' span.help-block').length === 0) {
// targetParent.parent('.form-group').append('<span class="help-block"><ul class="list-unstyled"><li><span class="glyphicon glyphicon-exclamation-sign"></span> ' + item.message + '</li></ul></span>')
// } else {
// targetParent.parents('.form-group').find(' span.help-block ul.list-unstyled').append('<li><span class="glyphicon glyphicon-exclamation-sign"></span> ' + item.message + '</li>')
// }
// }
// }
})
})
.always(function () {
Expand Down
Loading

0 comments on commit e31c86d

Please sign in to comment.