editor form

httpdocs/assets/js/safekat/common/TranslationHelper.js

@@ -0,0 +1,41 @@
+import Ajax from "../components/ajax.js";
+class TranslationHelper {
+    constructor() {
+        this.locale = "es"
+        this.lang = {}
+    }
+    async get_translations(translationFile) {
+        return new Promise(async (resolve,reject) => {
+
+            this.locale = $("meta[name='locale']").attr("content");
+            this.translationFile = translationFile
+
+            const ajax = new Ajax('/translate/getTranslation',
+                {
+                    locale: this.locale,
+                    translationFile: this.translationFile
+                },
+                null,
+                (response) => {
+                    this.lang = JSON.parse(response)
+                    resolve(this.lang)
+                },
+                (error) => {
+                    reject(error)
+                }
+            );
+            ajax.post()
+        })
+
+    }
+    get_lang(key) {
+        if (key in this.lang) {
+            return this.lang[key]
+        }else{
+            return key
+        }
+    }
+
+}
+
+export default TranslationHelper;

httpdocs/assets/js/safekat/components/alerts/sweetAlert.js

@@ -83,8 +83,7 @@ export const alertSuccess = (value, target = 'body') => {
   return Swal.mixin({
     toast: true,
     position: 'bottom-end',
-    html: `
-    <span class="badge badge-label-primary fs-big">${value}</span>`,
+    html: `<span class="text-sm-left text-wrap">${value}</span>`,
     customClass: {
       popup: 'bg-success text-white',
     },
@@ -100,9 +99,9 @@ export const alertError = (value, target = 'body') => {
   return Swal.mixin({
     toast: true,
     position: 'bottom-end',
-    html: `<span class="badge badge-label-error fs-big">${value}</span>`,
+    html: `<span class="text-sm-left text-wrap">${value}</span>`,
     customClass: {
-      popup: 'bg-error text-white',
+      popup: 'bg-danger text-white',
     },
     icon : 'error',
     iconColor: 'white',
@@ -116,8 +115,7 @@ export const alertWarning = (value, target = 'body') => {
   return Swal.mixin({
     toast: true,
     position: 'bottom-end',
-    html: `
-       <span class="badge badge-label-warning fs-big">${value}</span>`,
+    html: `<span class="text-sm-left text-wrap">${value}</span>`,
     customClass: {
       popup: 'bg-warning text-white',
     },

httpdocs/assets/js/safekat/components/editorjs/WikiEditor.js

@@ -1,26 +1,50 @@
 
-import { es } from './lang/es.js';
-import EditorJS from '../../../../../themes/vuexy/js/editorjs.mjs';
-import '../../../../../../themes/vuexy/js/editorjs/header.js';
-import  '../../../../../themes/vuexy/js/editorjs/list.js';
-import '../../../../../../themes/vuexy/js/editorjs/alert.js';
-import '../../../../../../themes/vuexy/js/editorjs/drag-drop.js';
-import '../../../../../../themes/vuexy/js/editorjs/image.js';
-import '../../../../../themes/vuexy/js/editorjs/table.js';
-import '../../../../../themes/vuexy/js/editorjs/tune.js';
-
-
 import Ajax from '../ajax.js'
+import { es } from './lang/es.js';
+import '../../../../../themes/vuexy/js/editorjs/toc.js';
+import '../../../../../themes/vuexy/js/editorjs/list.js';
+import '../../../../../themes/vuexy/js/editorjs/tune.js';
+import '../../../../../themes/vuexy/js/editorjs/table.js';
+import '../../../../../../themes/vuexy/js/editorjs/image.js';
+import '../../../../../../themes/vuexy/js/editorjs/alert.js';
+import '../../../../../../themes/vuexy/js/editorjs/header.js';
+import '../../../../../../themes/vuexy/js/editorjs/drag-drop.js';
+import EditorJS from '../../../../../themes/vuexy/js/editorjs.mjs';
+import TranslationHelper from '../../common/TranslationHelper.js';
 import { alertConfirmAction, alertError, alertSuccess, alertWarning } from '../alerts/sweetAlert.js';
 
-class WikiEditor {
+import Modal from '../modal.js'
+import WikiSectionForm from '../forms/WikiSectionForm.js'
+
+
+
+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()
+    }
+    async initEditor()
+    {
+        this.wikiFormSection
+        this.newSectionBtn.on('click',() => {
+            this.modal.toggle()
+            this.wikiFormSection.initPost()
+        })
+        this.editSectionBtn.on('click',() => {
+            this.modal.toggle()
+            this.wikiFormSection.initUpdate()
+        })
+        await this.get_translations("Wiki")
         this.editor = new EditorJS({
             holder: 'editorjs',
-            i18n: es,
+            i18n: this.locale == "es" ? es : null,
             autofocus: true,
-            placeholder: 'Empieza a diseñar aquí',
+            placeholder: this.get_lang('header-placeholder'),
             readOnly: true,
             tunes: {
                 alignment: {
@@ -28,26 +52,26 @@ class WikiEditor {
                 },
             },
             tools: {
-
+                toc: TOC,
                 header: {
                     class: Header,
-                    tunes : ['alignment'],
+                    tunes: ['alignment'],
                     config: {
-                        placeholder: 'Introduce un encabezado ...',
-                        levels: [1, 2, 3, 4], 
-                        defaultLevel: 3
+                        placeholder: "",
+                        levels: [1, 2, 3, 4],
+                        defaultLevel: 1
                     },
                 },
                 nestedchecklist: {
-                    class: editorjsNestedChecklist ,
-                    config : {
-                        maxLevel : 1,
+                    class: editorjsNestedChecklist,
+                    config: {
+                        maxLevel: 1,
                     }
                 },
                 alert: {
                     class: Alert,
                     inlineToolbar: true,
-                    tunes : ['alignment'],
+                    tunes: ['alignment'],
                     config: {
                         alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
                         defaultType: 'primary',
@@ -56,10 +80,9 @@ class WikiEditor {
                 },
                 image: {
                     class: ImageTool,
-                    tunes : ['alignment'],
                     config: {
                         features: {
-                            border: false,
+                            border: true,
                             caption: 'optional',
                             stretch: false
                         },
@@ -71,7 +94,7 @@ class WikiEditor {
                 },
                 table: {
                     class: Table,
-                    tunes : ['alignment'],
+                    tunes: ['alignment'],
                     inlineToolbar: true,
                     config: {
                         rows: 2,
@@ -81,13 +104,13 @@ class WikiEditor {
                     },
                 },
                 alignment: {
-                    class:AlignmentBlockTune,
-                    config:{
-                      default: "left",
-                      blocks: {
-                        header: 'left',
-                        list: 'left'
-                      }
+                    class: AlignmentBlockTune,
+                    config: {
+                        default: "left",
+                        blocks: {
+                            header: 'left',
+                            list: 'left'
+                        }
                     }
                 },
 
@@ -95,47 +118,58 @@ class WikiEditor {
             },
         })
     }
+    async initViewOnly()
+    {
+        try {
+            await this.editor.isReady;
+            this.handleGetDataPublished();
+        } catch (reason) {
+            console.log(`Editor.js initialization failed because of ${reason}`)
+        }  
+    }
     async init() {
         try {
+            await this.initEditor()
             await this.editor.isReady;
             new DragDrop(this.editor);
             /** Do anything you need after editor initialization */
             $('#save-editor').on('click', () => {
-
-                this.editor.save().then(outputData => {
-                    this.editor.readOnly.toggle()
-                    console.log("Data saved", outputData)
-                    alertConfirmAction('Guardar contenido').then(result => {
-                        if(result.isConfirmed){
-                            this.handleSaveContent(outputData)
-                        }
-                    });
-                })
+                    this.editor.save().then(outputData => {
+                        alertConfirmAction('Guardar contenido').then(result => {
+                            if (result.isConfirmed) {
+                                this.handleSaveContent(outputData)
+                            }
+                        });
+                    })
+          
             })
             $('#release-editor').on('click', () => {
 
-                this.editor.save().then(outputData => {
-                    this.editor.readOnly.toggle()
-                    console.log("Data published", outputData)
-                    alertConfirmAction('Publicar contenido').then(result => {
-                        if(result.isConfirmed){
-                            this.handlePublishContent(outputData)
-                        }
-                    });
-                })
+                    this.editor.save().then(outputData => {
+                        alertConfirmAction('Publicar contenido').then(result => {
+                            if (result.isConfirmed) {
+                                this.handlePublishContent(outputData)
+                            }
+                            console.log(result)
+                        });
+                    }).catch((error) => {
+                        alertError('Tienes que estar en modo editar para publicar').fire()
+                    })
+          
             })
             $('#preview-editor').on('click', () => {
                 this.editor.readOnly.toggle()
                 $('#edit-editor').removeClass('d-none')
                 $('#preview-editor').addClass('d-none')
-                $('#release-editor').attr('disabled',null)
-                $('#save-editor').attr('disabled',null)
+                $('#release-editor').attr('disabled', 'disabled')
+                $('#save-editor').attr('disabled', 'disabled')
             })
             $('#edit-editor').on('click', () => {
                 $('#edit-editor').addClass('d-none')
                 $('#preview-editor').removeClass('d-none')
-                $('#release-editor').attr('disabled','disabled')
-                $('#save-editor').attr('disabled','disabled')
+
+                $('#release-editor').attr('disabled', null)
+                $('#save-editor').attr('disabled', null)
                 this.editor.readOnly.toggle()
             })
             this.handleGetData();
@@ -175,7 +209,7 @@ class WikiEditor {
     handleGetDataPublishedSuccess(response) {
         if (response.data.contents) {
             alertSuccess(response.message).fire()
-            this.renderContent(response.data.contents.editor_data)
+            this.renderContent(response.data.contents.published_data)
         } else {
             alertWarning('No hay contenido').fire()
         }
@@ -188,6 +222,7 @@ class WikiEditor {
         try {
             let parsedContent = JSON.parse(content)
             this.editor.render(parsedContent)
+            this.centerImages()
         } catch (error) {
             console.log(error)
         }
@@ -201,7 +236,7 @@ class WikiEditor {
             this.handleSaveContentError.bind(this))
         ajax.post()
     }
-    handleSaveContentSuccess(response) { 
+    handleSaveContentSuccess(response) {
         this.handleGetData()
     }
     handleSaveContentError(response) { }
@@ -213,10 +248,18 @@ class WikiEditor {
             this.handleSaveContentError.bind(this))
         ajax.post()
     }
-    handleSaveContentSuccess(response) { 
+    handleSaveContentSuccess(response) {
         this.handleGetData()
     }
     handleSaveContentError(response) { }
+    centerImages(){
+        setInterval(() => {
+
+            $(".image-tool img").css('margin','0 auto')
+            $(".image-tool__caption").css('margin','0 auto').css('border','none').css('text-align','center').css('box-shadow','none')
+
+        },500)
+    }
 
 }
 export default WikiEditor

httpdocs/assets/js/safekat/components/editorjs/lang/es.js

@@ -45,6 +45,7 @@ export const es = {
         "Checklist": "Checklist",
         "Quote": "Cita",
         "Code": "Codigo",
+        "Nested Checklist": "Lista anidada",
         "Delimiter": "Delimitador",
         "Raw HTML": "Raw HTML",
         "Table": "Tabla",
@@ -55,7 +56,8 @@ export const es = {
         "InlineCode": "Código",
         "Image" :  "Imagen",
         "Alert" : "Alerta",
-        "Convert to" : "Convertir a"
+        "Convert to" : "Convertir a",
+        "TOC" : "Tabla de contenidos"
 
       },
   
@@ -76,7 +78,22 @@ export const es = {
               "Unordered": "Sin orden",
               "Ordered" : "Ordenada",
               "Counter type" : "Contador",
-              "Convert to" : "Convertir a"
+              "Convert to" : "Convertir a",
+
+        },
+        "toc" : {
+          'Refresh' : "Actualizar",
+        },
+        "table" : {
+          "Add column to left" : "Añadir columna a la izquierda",
+          "Add column to right" : "Añadir columna a la derecha",
+          "Delete column" : "Eliminar columna",
+          "Delete row" : "Eliminar fila",
+          "Without headings" : "Sin encabezados",
+          "With headings" : "Con encabezados",
+          "Stretch" : "Ampliar",
+          "Add row above" : "Añadir fila arriba",
+          "Add row below" : "Añadir fila abajo",
         },
         /**
          * Link is the internal Inline Tool
@@ -107,6 +124,8 @@ export const es = {
           "With border" : "Con borde",
           "Stretch image" : "Estirar imagen",
           "With background" : "Añadir fondo",
+          "Select an Image" : "Seleccione una imagen",
+          "With caption" : "Con título"
         }
       },
   

httpdocs/assets/js/safekat/components/forms/WikiSectionForm.js

@@ -0,0 +1,76 @@
+import Ajax from "../ajax.js";
+import { alertError, alertSuccess } from "../alerts/sweetAlert.js";
+
+class WikiSectionForm
+{
+    constructor() {
+        this.item = $("#formSection")
+        this.btnNew = $("#submit-new-section")
+        this.btnUpdate = $("#submit-update-section")
+        this.name = this.item.find('#section-name')
+        this.icon = this.item.find('#section-icon')
+
+
+    }
+
+    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()
+    {
+        return {
+            name : this.name.val(),
+            icon : this.icon.val()
+        }
+    }
+    post(){
+        
+        const ajax = new Ajax('/wiki/section',
+            this.getFormData(),
+            null,
+            this.success.bind(this),
+            this.error.bind(this)
+        )
+        ajax.post()
+    }
+
+    update(){
+        const ajax = new Ajax('/wiki/update/section',
+            this.getFormData(),
+            null,
+            this.success.bind(this),
+            this.error.bind(this)
+        )
+        ajax.post()
+    }
+    success(response)
+    {
+        alertSuccess(response.message).fire()
+    }
+    error(error)
+    {
+        alertError(error?.message).fire()
+    }
+    showPost(){
+        this.btnNew.removeClass('d-none')
+        this.btnUpdate.addClass('d-none')
+    }
+    showUpdate(){
+        this.btnUpdate.removeClass('d-none')
+        this.btnNew.addClass('d-none')
+
+    }
+}
+
+export default WikiSectionForm

httpdocs/assets/js/safekat/pages/wiki/home.js

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

httpdocs/assets/js/safekat/pages/wiki/viewOnly.js

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