wiki

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

@@ -1,6 +1,5 @@
 
 
-
 export const alertConfirmationDelete = (title, type = "primary") => {
   return Swal.fire({
     title: '¿Está seguro?',
@@ -63,4 +62,54 @@ export const toastPresupuestoSummary = (value, target = 'body') => {
     timerProgressBar: false,
     stopKeydownPropagation: false,
   })
+}
+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>`,
+    customClass: {
+      popup: 'bg-success text-white',
+    },
+    icon : 'success',
+    iconColor: 'white',
+    target: target,
+    showConfirmButton: false,
+    timer: 2000,
+    timerProgressBar: true,
+  })
+}
+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>`,
+    customClass: {
+      popup: 'bg-error text-white',
+    },
+    icon : 'error',
+    iconColor: 'white',
+    target: target,
+    showConfirmButton: false,
+    timer: 2000,
+    timerProgressBar: true,
+  })
+}
+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>`,
+    customClass: {
+      popup: 'bg-warning text-white',
+    },
+    icon : 'warning',
+    iconColor: 'white',
+    target: target,
+    showConfirmButton: false,
+    timer: 2000,
+    timerProgressBar: true,
+  })
 }

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

@@ -0,0 +1,170 @@
+
+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 { alertError, alertSuccess, alertWarning } from '../alerts/sweetAlert.js';
+
+class WikiEditor {
+    constructor() {
+        this.sectionId = $("#wiki-section-id").val();
+        this.editor = new EditorJS({
+            holder: 'editorjs',
+            i18n: es,
+            autofocus: true,
+            placeholder: 'Empieza a diseñar aquí',
+            readOnly: true,
+            tunes: {
+                alignment: {
+                    class: AlignmentBlockTune,
+                },
+            },
+            tools: {
+
+                header: {
+                    class: Header,
+                    tunes : ['alignment'],
+                    config: {
+                        placeholder: 'Introduce un encabezado ...',
+                        levels: [1, 2, 3, 4], 
+                        defaultLevel: 3
+                    },
+                },
+                nestedchecklist: {
+                    class: editorjsNestedChecklist ,
+                    config : {
+                        maxLevel : 1,
+                    }
+                },
+                alert: {
+                    class: Alert,
+                    inlineToolbar: true,
+                    tunes : ['alignment'],
+                    shortcut: 'CMD+SHIFT+W',
+                    config: {
+                        alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
+                        defaultType: 'primary',
+                        messagePlaceholder: 'Introduzca texto',
+                    },
+                },
+                image: {
+                    class: ImageTool,
+                    tunes : ['alignment'],
+                    config: {
+                        features: {
+                            border: false,
+                            caption: 'optional',
+                            stretch: false
+                        },
+                        endpoints: {
+                            byFile: `/wiki/file/upload/${this.sectionId}`, // Your backend file uploader endpoint
+                            byUrl: 'fetchUrl', // Your endpoint that provides uploading by Url
+                        }
+                    }
+                },
+                table: {
+                    class: Table,
+                    tunes : ['alignment'],
+                    inlineToolbar: true,
+                    config: {
+                        rows: 2,
+                        cols: 3,
+                        maxRows: 5,
+                        maxCols: 5,
+                    },
+                },
+                alignment: {
+                    class:AlignmentBlockTune,
+                    config:{
+                      default: "left",
+                      blocks: {
+                        header: 'left',
+                        list: 'left'
+                      }
+                    }
+                },
+
+
+            },
+        })
+    }
+    async init() {
+        try {
+            await this.editor.isReady;
+            new DragDrop(this.editor);
+            /** Do anything you need after editor initialization */
+            $('#save-editor').on('click', () => {
+                this.editor.save().then(outputData => {
+                    console.log("Data saved", outputData)
+                    this.handleSaveContent(outputData)
+                })
+            })
+            $('#preview-editor').on('click', () => {
+                this.editor.readOnly.toggle()
+                $('#edit-editor').removeClass('d-none')
+                $('#preview-editor').addClass('d-none')
+            })
+            $('#edit-editor').on('click', () => {
+                $('#edit-editor').addClass('d-none')
+                $('#preview-editor').removeClass('d-none')
+                this.editor.readOnly.toggle()
+            })
+            this.handleGetData();
+        } catch (reason) {
+            console.log(`Editor.js initialization failed because of ${reason}`)
+        }
+    }
+
+    handleGetData() {
+        const ajax = new Ajax(`/wiki/section/${this.sectionId}`,
+            null,
+            null,
+            this.handleGetDataSuccess.bind(this),
+            this.handleGetDataError.bind(this))
+        ajax.get()
+    }
+    handleGetDataSuccess(response) {
+        if (response.data.contents) {
+            alertSuccess(response.message).fire()
+            this.renderContent(response.data.contents.editor_data)
+        } else {
+            alertWarning('No hay contenido').fire()
+
+        }
+    }
+    handleGetDataError(error) {
+        console.log(error)
+    }
+    renderContent(content) {
+        try {
+            let parsedContent = JSON.parse(content)
+            this.editor.render(parsedContent)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+    handleSaveContent(data) {
+
+        const ajax = new Ajax(`/wiki/save/${this.sectionId}`,
+            data,
+            null,
+            this.handleSaveContentSuccess.bind(this),
+            this.handleSaveContentError.bind(this))
+        ajax.post()
+    }
+    handleSaveContentSuccess(response) { 
+        this.handleGetData()
+        // alertSuccess(response.message).fire()
+    }
+    handleSaveContentError(response) { }
+
+}
+export default WikiEditor

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

@@ -1,76 +1,13 @@
-import { es } from './lang/es.js';
-import '../../../../../themes/vuexy/js/editorjs/list.js';
-import '../../../../../themes/vuexy/js/editorjs/header.js';
-import EditorJS from '../../../../../themes/vuexy/js/editorjs.mjs';
-import '../../../../../themes/vuexy/js/editorjs/alert.js';
-import '../../../../../themes/vuexy/js/editorjs/drag-drop.js';
-import '../../../../../themes/vuexy/js/editorjs/image.js';
-import { dataExample } from './demo.js';
+import WikiEditor from "../../components/editorjs/WikiEditor.js"
 
 
-const editor = new EditorJS({
-    holder : 'editorjs',
-    i18n : es,
-    autofocus: true,
-    placeholder : 'Empieza a diseñar aquí',
-    readOnly : true,
-    tools: {
-        header: {
-            class: Header,
-            config: {
-              placeholder: 'Introduce un encabezado ...',
-              levels: [1,2, 3,4],
-              defaultLevel: 3
-            },
-        },
-        list: {
-          class: EditorjsList,
-          inlineToolbar: true,
-          config: {
-            defaultStyle: 'unordered'
-          },
-        },
-        alert: {
-            class: Alert ,
-            inlineToolbar: true,
-            shortcut: 'CMD+SHIFT+W',
-            config: {
-              alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
-              defaultType: 'primary',
-              messagePlaceholder: 'Introduzca texto',
-            },
-          },
-          image: {
-            class: ImageTool,
-            config: {
-              endpoints: {
-                byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
-                byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
-              }
-            }
-          }
-      },
-})
-try {
-  await editor.isReady;
-  new DragDrop(editor);
-  editor.render(dataExample)
-  /** Do anything you need after editor initialization */
-  $('#save-editor').on('click',() => {
-    editor.save().then(outputData => {
-      console.log("Data saved",outputData)
-    })
-  })
-  $('#preview-editor').on('click',() => {
-      editor.readOnly.toggle()
-      $('#edit-editor').removeClass('d-none')
-      $('#preview-editor').addClass('d-none')
-  })
-  $('#edit-editor').on('click',() => {
-    $('#edit-editor').addClass('d-none')
-    $('#preview-editor').removeClass('d-none')
-    editor.readOnly.toggle()
-})
-} catch (reason) {
-  console.log(`Editor.js initialization failed because of ${reason}`)
-}
+
+$(async() => {
+
+  try {
+    const editor = new WikiEditor()
+    await editor.init()
+  } catch (error) {
+    
+  }
+})