feat wiki/ayuda section

This commit is contained in:
amazuecos
2025-03-02 10:22:01 +01:00
parent 3406fb3005
commit 3140e527e8
24 changed files with 735 additions and 168 deletions

View File

@ -19,10 +19,10 @@ export const initAutonumeric = () => {
new AutoNumeric(this, {
digitGroupSeparator: ".",
decimalCharacter: ",",
allowDecimalPadding : 'floats',
allowDecimalPadding: 'floats',
decimalPlaces: 2,
unformatOnSubmit: true,
});
}
})
@ -32,10 +32,10 @@ export const initAutonumeric = () => {
new AutoNumeric(this, {
digitGroupSeparator: ".",
decimalCharacter: ",",
allowDecimalPadding : 'floats',
allowDecimalPadding: 'floats',
decimalPlaces: $(this).data('decimal-places'),
unformatOnSubmit: true,
});
}
})
@ -49,7 +49,7 @@ export const initAutonumeric = () => {
// allowDecimalPadding : 'floats',
// decimalPlaces: 2,
// unformatOnSubmit: true,
// });
// }
// })
@ -85,4 +85,26 @@ export const initAutonumeric = () => {
// });
// }
// })
}
export const getTablerIconClassName = () => {
const classNames = [];
for (const sheet of document.styleSheets) {
try {
if (sheet.cssRules) {
for (const rule of sheet.cssRules) {
if (rule.selectorText && rule.selectorText.startsWith(".ti-")) {
let className = rule.selectorText.split(" ")[0].replace(".", "");
className = className.split("::")[0]
className = className.split(":")[0]
classNames.push(className);
}
}
}
} catch (e) {
console.warn("Cannot access stylesheet:", sheet.href);
}
}
return classNames.reverse();
}

View File

@ -13,7 +13,6 @@ import EditorJS from '../../../../../themes/vuexy/js/editorjs.mjs';
import TranslationHelper from '../../common/TranslationHelper.js';
import { alertConfirmAction, alertError, alertSuccess, alertWarning } from '../alerts/sweetAlert.js';
import Modal from '../modal.js'
import WikiSectionForm from '../forms/WikiSectionForm.js'
@ -22,29 +21,19 @@ class WikiEditor extends TranslationHelper{
constructor() {
super();
this.sectionId = $("#wiki-section-id").val();
this.modalSection = $("#modalSection")
this.newSectionBtn = $("#new-section")
this.editSectionBtn = $("#edit-section")
this.modal = new Modal(this.modalSection)
this.wikiFormSection = new WikiSectionForm()
this.wikiFormSection.setId(this.sectionId)
}
async initEditor()
{
this.wikiFormSection
this.newSectionBtn.on('click',() => {
this.modal.toggle()
this.wikiFormSection.initPost()
})
this.editSectionBtn.on('click',() => {
this.modal.toggle()
this.wikiFormSection.initUpdate()
})
this.wikiFormSection.init()
await this.get_translations("Wiki")
this.editor = new EditorJS({
holder: 'editorjs',
i18n: this.locale == "es" ? es : null,
autofocus: true,
placeholder: this.get_lang('header-placeholder'),
readOnly: true,
tunes: {
alignment: {
@ -121,6 +110,7 @@ class WikiEditor extends TranslationHelper{
async initViewOnly()
{
try {
await this.initEditor()
await this.editor.isReady;
this.handleGetDataPublished();
} catch (reason) {
@ -135,7 +125,7 @@ class WikiEditor extends TranslationHelper{
/** Do anything you need after editor initialization */
$('#save-editor').on('click', () => {
this.editor.save().then(outputData => {
alertConfirmAction('Guardar contenido').then(result => {
alertConfirmAction(this.get_lang('save_content')).then(result => {
if (result.isConfirmed) {
this.handleSaveContent(outputData)
}
@ -153,7 +143,7 @@ class WikiEditor extends TranslationHelper{
console.log(result)
});
}).catch((error) => {
alertError('Tienes que estar en modo editar para publicar').fire()
alertError(this.get_lang('need_editor_to_save')).fire()
})
})
@ -187,7 +177,7 @@ class WikiEditor extends TranslationHelper{
ajax.get()
}
handleGetDataSuccess(response) {
if (response.data.contents) {
if (response.data.contents?.editor_data) {
alertSuccess(response.message).fire()
this.renderContent(response.data.contents.editor_data)
} else {
@ -202,16 +192,16 @@ class WikiEditor extends TranslationHelper{
const ajax = new Ajax(`/wiki/section/${this.sectionId}`,
null,
null,
this.handleGetDataSuccess.bind(this),
this.handleGetDataError.bind(this))
this.handleGetDataPublishedSuccess.bind(this),
this.handleGetDataPublishedError.bind(this))
ajax.get()
}
handleGetDataPublishedSuccess(response) {
if (response.data.contents) {
if (response.data.contents?.published_data) {
alertSuccess(response.message).fire()
this.renderContent(response.data.contents.published_data)
} else {
alertWarning('No hay contenido').fire()
alertWarning(this.get_lang('no_content')).fire()
}
}
handleGetDataPublishedError(error) {

View File

@ -1,41 +1,73 @@
import Ajax from "../ajax.js";
import { alertError, alertSuccess } from "../alerts/sweetAlert.js";
class WikiSectionForm
{
import { alertConfirmAction, alertConfirmationDelete, alertError, alertSuccess } from "../alerts/sweetAlert.js";
import Modal from "../modal.js"
import { getTablerIconClassName } from "../../common/common.js";
class WikiSectionForm {
constructor() {
this.item = $("#formSection")
this.btnNew = $("#submit-new-section")
this.btnUpdate = $("#submit-update-section")
this.btnDelete = $("#delete-section")
this.name = this.item.find('#section-name')
this.icon = this.item.find('#section-icon')
this.roles = this.item.find('#section-roles').select2({
dropdownParent: this.item.parent()
})
this.newSectionBtn = $("#new-section")
this.editSectionBtn = $("#edit-section")
this.modalSection = $("#modalSection")
this.modal = new Modal(this.modalSection)
this.icons = getTablerIconClassName().map((e, index) => {
return { 'text': e, 'id': `ti ${e}` }
})
}
renderIcon(option) {
var icon = `<i class="ti ${option.text}"></i> ${option.text}`;
return icon;
}
init() {
this.icon.wrap('<div class="position-relative"></div>').select2({
data: this.icons,
dropdownParent: this.icon.parent(),
templateResult: this.renderIcon,
templateSelection: this.renderIcon,
escapeMarkup: function (m) { return m; }
})
this.icon.on('change', () => {
console.log(this.icon.val())
})
this.btnNew.on('click', this.post.bind(this))
this.btnUpdate.on('click', this.update.bind(this))
this.btnDelete.on('click',this.deleteConfirm.bind(this))
initPost()
{
this.newSectionBtn.on('click', () => {
this.initPost()
})
this.editSectionBtn.on('click', () => {
this.initUpdate()
})
}
setId(id) {
this.sectionId = id
}
initPost() {
this.showPost()
this.btnNew.on('click',this.post.bind(this))
this.btnUpdate.off('click')
}
initUpdate()
{
this.showUpdate()
this.btnUpdate.on('click',this.update.bind(this))
this.btnNew.off('click')
}
getFormData()
{
initUpdate() {
this.showUpdate()
}
getFormData() {
return {
name : this.name.val(),
icon : this.icon.val()
name: this.name.val(),
icon: this.icon.val(),
roles: this.roles.val()
}
}
post(){
post() {
const ajax = new Ajax('/wiki/section',
this.getFormData(),
null,
@ -45,30 +77,90 @@ class WikiSectionForm
ajax.post()
}
update(){
update() {
const ajax = new Ajax('/wiki/update/section',
this.getFormData(),
{
wiki_section_id: this.sectionId,
...this.getFormData()
},
null,
this.success.bind(this),
this.error.bind(this)
)
ajax.post()
}
success(response)
{
alertSuccess(response.message).fire()
deleteConfirm() {
alertConfirmAction('Eliminar sección').then(result => {
if (result.isConfirmed) {
this.delete()
}
console.log(result)
});
}
error(error)
{
delete() {
const ajax = new Ajax('/wiki/section/' + this.sectionId,
null,
null,
this.success.bind(this),
this.error.bind(this)
)
ajax.delete()
}
success(response) {
alertSuccess(response.message).fire()
this.modal.toggle()
}
error(error) {
alertError(error?.message).fire()
}
showPost(){
showPost() {
this.empty()
this.btnNew.removeClass('d-none')
this.btnUpdate.addClass('d-none')
$("#modalTitleNew").removeClass('d-none')
$("#modalTitleEdit").addClass('d-none')
this.modal.toggle()
}
showUpdate(){
async showUpdate() {
this.empty()
const sectionData = await this.handleShowSection()
if (sectionData) {
console.log(sectionData)
this.name.val(sectionData.data.name)
this.icon.val(sectionData.data.icon).trigger('change')
this.roles.val(sectionData.data.roles_array).trigger('change')
}
this.btnUpdate.removeClass('d-none')
this.btnNew.addClass('d-none')
$("#modalTitleNew").addClass('d-none')
$("#modalTitleEdit").removeClass('d-none')
this.modal.toggle()
}
handleShowSection() {
return new Promise((resolve, reject) => {
const ajax = new Ajax('/wiki/section/' + this.sectionId,
null,
null,
(response) => {
resolve(response)
},
(error) => {
alertError(error.message).fire()
resolve(false)
}
)
ajax.get()
})
}
empty() {
this.name.val(null)
this.icon.val("").trigger('change')
this.roles.val("").trigger('change')
}
}

View File

@ -0,0 +1,37 @@
import "../../../../../themes/vuexy/vendor/libs/sortablejs/sortable.js"
class ListSortable{
constructor(listItem,config = {}) {
this.list = Sortable.create($(listItem)[0], {
animation: 150,
group: 'menuSorting',
handle: '.drag-handle',
direction : 'vertical',
...config,
});
}
getArray(){
const list = this.list.toArray()
return list
}
onChange(callback)
{
this.list.option('onChange',callback)
}
onMove(callback)
{
this.list.option('onMove',callback)
}
onEnd(callback)
{
this.list.option('onEnd',callback)
}
}
export default ListSortable

View File

@ -9,6 +9,7 @@ class Modal{
show(){
this.item.modal('show');
}
}
export default Modal;

View File

@ -1,11 +1,12 @@
import WikiEditor from "../../components/editorjs/WikiEditor.js"
import Ajax from "../../components/ajax.js"
$(async () => {
try {
const editor = new WikiEditor()
await editor.init()
} catch (error) {
}

View File

@ -0,0 +1,25 @@
import Ajax from "../../components/ajax.js"
import { alertError, alertSuccess } from "../../components/alerts/sweetAlert.js"
import ListSortable from "../../components/listSortable.js"
$(() => {
const menuSectionList = new ListSortable('#menu-inner-list')
menuSectionList.onEnd(updateWikiSectionOrder)
})
const updateWikiSectionOrder = (evt) =>
{
let list = new ListSortable('#menu-inner-list')
const ajax = new Ajax('/wiki/section/update/order',
{
orders : list.getArray()
},
null,
(response) => alertSuccess(response.message).fire(),
(error) => alertError(error.message).fire(),
)
ajax.post();
}

View File

@ -6,7 +6,7 @@ $(async() => {
try {
const editor = new WikiEditor()
await editor.init()
await editor.initViewOnly()
} catch (error) {
}