editor form

ci4/app/Controllers/Wiki/WikiController.php

@@ -9,6 +9,7 @@ use App\Models\Wiki\WikiPageModel;
 use App\Models\Wiki\WikiSectionModel;
 use CodeIgniter\HTTP\RequestInterface;
 use CodeIgniter\HTTP\ResponseInterface;
+use CodeIgniter\I18n\Time;
 use Psr\Log\LoggerInterface;
 
 class WikiController extends BaseController
@@ -70,6 +71,7 @@ class WikiController extends BaseController
         $this->wikiContentModel->insert([
             "locale" => $this->locale,
             "page_id" => $wikiPageId,
+            "last_edit_by" => auth()->user()->id,
             "editor_data" => json_encode($bodyData)
         ]);
         return $this->response->setJSON(["data" => [], "message" => lang("App.global_alert_save_success")]);
@@ -80,11 +82,14 @@ class WikiController extends BaseController
         $wikiSectionPage = $this->wikiSectionModel->find($section_id)->page();
         if ($wikiSectionPage) {
             $wikiPageId = $wikiSectionPage->id;
-            $this->wikiContentModel->update($wikiPageId,[
+            $wikiContentId = $this->wikiContentModel->where("page_id",$wikiPageId)->where('locale',$this->locale)->first()->id;
-                "locale" => $this->locale,
+            $this->wikiContentModel->update($wikiContentId,[
-                "page_id" => $wikiPageId,
+                "published_by" => auth()->user()->id,
+                "last_edit_by" => auth()->user()->id,
                 "editor_data" => json_encode($bodyData),
-                "published_data" => json_encode($bodyData)
+                "published_data" => json_encode($bodyData),
+                "published_at" => Time::now()->format('Y-m-d H:i:s'),
+
             ]);
             $response = $this->response->setJSON(["data" => [], "message" => lang("App.global_alert_save_success")]);
         } else {

ci4/app/Database/Migrations/2025-02-22-080100_WikiContentsMigration.php

@@ -31,6 +31,18 @@ class WikiContentsMigration extends Migration
             'type' => 'LONGTEXT',
             'null' => true,
         ],
+        'published_by' => [
+            'type' => 'INT',
+            'unsigned' => true,
+            'null' => true,
+            'constraint' => 10,
+        ],
+        'last_edit_by' => [
+            'type' => 'INT',
+            'unsigned' => true,
+            'null' => true,
+            'constraint' => 10,
+        ],
     ];
 
     public function up()
@@ -38,6 +50,11 @@ class WikiContentsMigration extends Migration
         $this->forge->addField($this->COLUMNS);
         $currenttime = new RawSql('CURRENT_TIMESTAMP');
         $this->forge->addField([
+            'published_at' => [
+                'type' => 'TIMESTAMP',
+                'null' => true,
+            ],
+ 
             'created_at' => [
                 'type' => 'TIMESTAMP',
                 'default' => $currenttime,
@@ -54,6 +71,8 @@ class WikiContentsMigration extends Migration
         ]);
         $this->forge->addPrimaryKey('id');
         $this->forge->addForeignKey('page_id','wiki_pages','id');
+        $this->forge->addForeignKey('published_by','users','id');
+        $this->forge->addForeignKey('last_edit_by','users','id');
         $this->forge->createTable("wiki_contents");
     }
 

ci4/app/Database/Seeds/WikiSectionSeeder.php

@@ -8,65 +8,96 @@ use CodeIgniter\Database\Seeder;
 
 class WikiSectionSeeder extends Seeder
 {
-    protected array $data = [
+    protected array $dataAdmin = [
             [
                 "name" =>  'Introducción',
-                "slug" =>  'intro',
+                "slug" =>  'intro-admin',
                 "icon" => 'ti ti-home-2'
             ],
             [
                 "name" =>  'Presupuesto',
-                "slug" =>  'presupuesto-administrador',
+                "slug" =>  'presupuesto-admin',
-                "icon" => 'ti ti-currency-dollar'
-            ],
-            [
-                "name" =>  'Presupuesto cliente',
-                "slug" =>  'presupuesto-cliente',
-                "role" => 'cliente',
                 "icon" => 'ti ti-currency-dollar'
             ],
             [
                 "name" =>  'Pedidos',
-                "slug" =>  'pedidos',
+                "slug" =>  'pedidos-admin',
                 "icon" => 'ti ti-file-description'
 
             ],
             [
                 "name" =>  'Facturación',
-                "slug" =>  'facturacion',
+                "slug" =>  'facturacion-admin',
                 "icon" => 'ti ti-file-dollar'
 
             ],
             [
                 "name" =>  'Logística',
-                "slug" =>  'logistica',
+                "slug" =>  'logistica-admin',
                 "icon" => 'ti ti-truck'
 
             ],
             [
                 "name" =>  'Tarifas',
-                "slug" =>  'tarifas',
+                "slug" =>  'tarifas-admin',
                 "icon" => 'ti ti-receipt'
 
             ],
             [
                 "name" =>  'Configuración',
-                "slug" =>  'config',
+                "slug" =>  'config-admin',
                 "icon" => 'ti ti-adjustments-horizontal'
 
             ],
             [
                 "name" =>  'Mensajería',
-                "slug" =>  'messages',
+                "slug" =>  'messages-admin',
                 "icon" => 'ti ti-message'
 
             ]
     ];
+    protected array $dataCliente = [
+        [
+            "name" =>  'Presupuesto(Cliente)',
+            "slug" =>  'presupuesto-cliente',
+            "role" => 'cliente',
+            "icon" => 'ti ti-currency-dollar',
+            "role" => 'cliente',
+        ],
+        [
+            "name" =>  'Pedidos(Cliente)',
+            "slug" =>  'pedidos-cliente',
+            "icon" => 'ti ti-file-description',
+            "role" => 'cliente',
+        ],
+        [
+            "name" =>  'Facturación (Cliente)',
+            "slug" =>  'facturacion-cliente',
+            "icon" => 'ti ti-file-dollar',
+            "role" => 'cliente',
+        ],
+        [
+            "name" =>  'Tarifas (Cliente)',
+            "slug" =>  'tarifas-cliente',
+            "icon" => 'ti ti-receipt',
+            "role" => 'cliente',
+        ],
+        [
+            "name" =>  'Mensajería (Cliente)',
+            "slug" =>  'messages-cliente',
+            "icon" => 'ti ti-message',
+            "role" => 'cliente',
+        ]
+];
     public function run()
     {
 
         $wikiSectionModel = model(WikiSectionModel::class);
-        foreach ($this->data as $key => $row) {
+        foreach ($this->dataAdmin as $key => $row) {
+            # code...
+            $wikiSectionModel->insert($row);
+        }
+        foreach ($this->dataCliente as $key => $row) {
             # code...
             $wikiSectionModel->insert($row);
         }

ci4/app/Entities/Wiki/WikiContentEntity.php

@@ -1,6 +1,8 @@
 <?php
+
 namespace App\Entities\Wiki;
 
+use App\Models\Usuarios\UserModel;
 use CodeIgniter\Entity\Entity;
 
 class WikiContentEntity extends Entity
@@ -10,12 +12,24 @@ class WikiContentEntity extends Entity
         "page_id" => null,
         "editor_data" => null,
         "published_data" => null,
+        "last_edit_by" => null,
+        "published_by" => null,
+        "published_at" => null,
     ];
     protected $casts = [
         "locale" => "string",
         "page_id" => "int",
         "editor_data" => "string",
         "published_data" => "string",
+        "last_edit_by" => "int",
+        "published_by" => "int",
+        "published_at" => "string",
     ];
+    public function publish_by() : string
+    {
+        $m = model(UserModel::class);
+        $user = $m->find($this->attributes['published_by']);
+        return $user->first_name." ".$user->last_name;
+    }
 
 }

ci4/app/Entities/Wiki/WikiPageEntity.php

@@ -1,6 +1,7 @@
 <?php
 namespace App\Entities\Wiki;
 
+use App\Models\Usuarios\UserModel;
 use CodeIgniter\Entity\Entity;
 
 class WikiPageEntity extends Entity
@@ -12,4 +13,6 @@ class WikiPageEntity extends Entity
         "section_id" => "int",
     ];
 
+
+
 }

ci4/app/Entities/Wiki/WikiSectionEntity.php

@@ -58,4 +58,6 @@ class WikiSectionEntity extends Entity
         }
         return $content;
     }
+
+ 
 }

ci4/app/Language/en/Wiki.php

@@ -10,6 +10,11 @@ return [
     'tarifas' => "Tariff",
     'config' => "Configuration",
     'messages' => "Messages",
+    'save' => "Save",
+    'release' => "Release",
+    'preview' => "Preview",
+    'edit' => "Edit",
+    'new_section' => "New section", 
     'errors' => [
         'publish_before_save' => "You have to save before publish the content"
     ],

ci4/app/Language/es/Wiki.php

@@ -1,18 +1,34 @@
 <?php 
 
 return [
-    'intro' => "Introducción",
+    'intro-admin' => "Introducción",
-    'presupuesto-cliente' => "Presupuesto cliente",
+    'intro-cliente' => "Introducción",
-    'presupuesto-administrador'  => "Presupuesto admin",
+    'presupuesto-cliente' => "Presupuesto (Cliente)",
-    'pedidos' => "Pedidos",
+    'presupuesto-admin'  => "Presupuesto admin",
-    'facturacion' => "Facturación",
+    'pedidos-admin' => "Pedidos",
-    'logistica' => "Logística",
+    'pedidos-cliente' => "Pedidos (Cliente)",
-    'tarifas' => "Tarifas",
+    'facturacion-admin' => "Facturación",
-    'config' => "Configuración",
+    'facturacion-cliente' => "Facturación(Cliente)",
-    'messages' => "Mensajería",
+    'logistica-admin' => "Logística",
+    'tarifas-admin' => "Tarifas",
+    'tarifas-cliente' => "Tarifas (Cliente)",
+    'config-admin' => "Configuración",
+    'messages-admin' => "Mensajería",
+    'messages-cliente' => "Mensajería (Cliente)",
+    'save' => "Guardar",
+    'release' => "Publicar",
+    'preview' => "Vista previa",
+    'edit' => "Editar",
+    'name' => "Nombre sección",
+    'icon' => "Icono sección",
+    'section_placeholder' => "Introduce el nombre de la sección",
+    'section_icon_placeholder' => "Introduce el nombre de la sección",
+    'edit_section' => "Editar sección", 
+    'new_section' => "Nueva sección", 
+    'header-placeholder' => "Escribe un encabezado ...",
     'errors' => [
         'publish_before_save' => "Es necesario guardar antes de publicar"
     ],
     'published' => 'Publicado',
-    'not_published' => 'Sin publicar'
+    'not_published' => 'Sin publicar',
 ];

ci4/app/Models/Wiki/WikiContentModel.php

@@ -17,7 +17,10 @@ class WikiContentModel extends Model
         "locale",
         "page_id",
         "editor_data",
-        "published_data"
+        "published_data",
+        "last_edit_by",
+        "published_by",
+        "published_at"
 
     ];
 
@@ -50,4 +53,6 @@ class WikiContentModel extends Model
     protected $afterFind      = [];
     protected $beforeDelete   = [];
     protected $afterDelete    = [];
+
+
 }

ci4/app/Models/Wiki/WikiSectionModel.php

@@ -58,6 +58,6 @@ class WikiSectionModel extends Model
      */
     public function sections() : array
     {
-        return $this->where('role','admin')->findAll();
+        return $this->findAll();
     }
 }

ci4/app/Views/themes/vuexy/components/modals/modalSection.php

@@ -0,0 +1,39 @@
+<!-- Modal -->
+<div class="modal fade" id="modalSection" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel1"><?= lang('Wiki.new_section') ?></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="formSection">
+                    <div class="form-group">
+                        <div class="row">
+                            <div class="col-12 mb-2">
+                                <label for="section-name" class="form-label"><?= lang('Wiki.name') ?></label>
+                                <input type="text" id="section-name" name="title" placeholder="<?= lang('Wiki.section_placeholder') ?>" name="name" class="form-control" required />
+                            </div>
+                            <div class="col-12 mb-2">
+                                <label for="section-icon" class="form-label"><?= lang('Wiki.icon') ?></label>
+                                <input type="text" id="section-icon" name="icon" placeholder="<?= lang('Wiki.section_icon_placeholder') ?>" name="name" class="form-control" required />
+                            </div>
+
+
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal"><?= lang('App.global_come_back') ?></button>
+                <?php if (auth()->user()->inGroup('admin')) { ?>
+                    <button type="button" id="submit-new-section" class="btn btn-primary d-none"><?= lang('App.global_save') ?></button>
+                    <button type="button" id="submit-update-section" class="btn btn-primary d-none"><?= lang('App.global_save') ?></button>
+
+                <?php } ?>
+
+
+            </div>
+        </div>
+    </div>
+</div>

ci4/app/Views/themes/vuexy/main/menus/wiki_menu.php

@@ -1,8 +1,16 @@
 
 <!-- Messages -->
 <li class="menu-item">
-    <a href="<?= route_to('showWikiPage','intro') ?>" class="menu-link">
+    <?php if(auth()->user()->inGroup('admin')):?>
+    <a href="<?= route_to('showWikiPage','intro-admin') ?>" class="menu-link">
         <i class="menu-icon tf-icons ti ti-books"></i>
         <?= lang("Wiki") ?>
     </a>
+    <?php endif;?>
+    <?php if(auth()->user()->inGroup('cliente-editor')):?>
+    <a href="<?= route_to('showWikiPage','presupuesto-cliente') ?>" class="menu-link">
+        <i class="menu-icon tf-icons ti ti-books"></i>
+        <?= lang("Wiki") ?>
+    </a>
+    <?php endif;?>
 </li>

ci4/app/Views/themes/vuexy/wiki/layout.php

@@ -109,16 +109,16 @@ $picture = "/assets/img/default-user.png";
 
                     <!-- Iterate throught sections -->
                     <?php foreach ($wiki_sections as $key => $value) : ?>
-                        <li class="menu-item  <?= $value->slug == $slug ? 'active' : "" ?>">
+                        <?php if (auth()->user()->inGroup($value->role) || auth()->user()->inGroup('admin')): ?>
-                            <!-- Check if user can view the section link -->
+                            <li class="menu-item  <?= $value->slug == $slug ? 'active' : "" ?>">
-                            <?php if (auth()->user()->inGroup($value->role) || auth()->user()->inGroup('admin') ): ?>
+                                <!-- Check if user can view the section link -->
-                                <a href="<?= site_url("wiki/view/".$value->slug) ?>" class="menu-link" >
+                                <a href="<?= site_url("wiki/view/" . $value->slug) ?>" class="menu-link">
                                     <i class="menu-icon tf-icons <?= $value->icon ?>"></i>
-                                    <?= lang("Wiki.".$value->slug) ?>
+                                    <?= lang("Wiki." . $value->slug) ?>
                                 </a>
-                            <?php endif; ?>
+                            </li>
-                        </li>
+                        <?php endif; ?>
-                        <?php endforeach; ?>
+                    <?php endforeach; ?>
 
                 </ul>
             </aside>
@@ -135,9 +135,20 @@ $picture = "/assets/img/default-user.png";
                             <i class="ti ti-menu-2 ti-sm"></i>
                         </a>
                     </div>
+                    <div class="navbar-nav-left d-flex align-items-center" id="navbar-collapse">
+
+                        <ul class="navbar-nav flex-row justify-content-start align-items-center ms-auto">
+                            <div>
+                                <a class="nav-link" href="<?= route_to("home") ?>">
+                                    <i class="ti ti-home rounded-circle me-1 fs-3"></i>
+                                </a>
+                            </div>
+                        </ul>
+                    </div>
+
                     <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
 
-                        <ul class="navbar-nav flex-row align-items-center ms-auto">
+                        <ul class="navbar-nav flex-row justify-content-start align-items-center ms-auto">
 
                             <!-- Language -->
                             <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
@@ -145,6 +156,7 @@ $picture = "/assets/img/default-user.png";
                                     data-bs-toggle="dropdown">
                                     <i class="fi <?= getCurrentLanguageFlag(); ?> fis rounded-circle me-1 fs-3"></i>
                                 </a>
+
                                 <ul class="dropdown-menu dropdown-menu-end">
                                     <li>
                                         <a class="dropdown-item" href="<?= site_url('lang/es'); ?>" data-language="es">

ci4/app/Views/themes/vuexy/wiki/pages/render.php

@@ -3,15 +3,44 @@
 <?= $this->include('themes/_commonPartialsBs/_confirm2delete') ?>
 <?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
 <?= $this->extend('themes/vuexy/wiki/layout') ?>
+<?php
 
+use CodeIgniter\I18n\Time;
+?>
 <?= $this->section('content');  ?>
 <div class="row">
     <div class="col-md-12">
 
         <div class="card card-info">
             <div class="card-header">
+                <div class="row">
+                    <div class="col-md-6 d-flex flex-row flex-wrap justify-content-start align-items-center pb-2 gap-2">
+                        <?php if ($section->content()?->published_data): ?>
+                            <span class="badge badge-center rounded-pill text-bg-success"><i class="ti ti-check"></i></span>
+                            <strong><?= lang('Wiki.published') ?></strong>
+                            <strong><?= $section->content()->published_at ? Time::createFromFormat('Y-m-d H:i:s', $section->content()->published_at)->format('d/m/Y H:i') : "" ?></strong>
+                            <strong class="text-secondary"><?= $section->content()->publish_by() ?></strong>
 
+                        <?php else: ?>
+                            <span class="badge badge-center rounded-pill text-bg-danger"><i class="ti ti-alert-circle"></i></span>
+                            <strong><?= lang('Wiki.not_published') ?></strong>
+                        <?php endif; ?>
+
+
+                    </div>
+                    <div class="col-md-6 d-flex flex-row flex-wrap justify-content-end align-items-stretch pb-2 gap-2">
+                        <?php if (auth()->user()->inGroup('admin')): ?>
+                                <button type="button" class="btn btn-success btn-xs col-xs-12 " id="new-section"><i class="icon-base ti ti-plus icon-xs me-2"></i><?= lang('Wiki.new_section') ?></button>
+                                <button type="button" class="btn btn-warning btn-xs col-auto " id="edit-section"><i class="icon-base ti ti-pencil icon-xs me-2"></i><?= lang('Wiki.edit_section') ?></button>
+                                <button type="button" class="btn btn-primary btn-xs col-auto " id="save-editor"><i class="icon-base ti ti-device-floppy icon-xs me-2"></i><?= lang('App.global_save') ?></button>
+                                <button type="button" class="btn btn-danger btn-xs col-auto " id="release-editor"><i class="icon-base ti ti-upload icon-xs me-2"></i>Publicar</button>
+                                <button type="button" class="btn btn-secondary btn-xs d-none col-auto " id="preview-editor"><i class="icon-base ti ti-eye icon-xs me-2"></i>Vista previa</button>
+                                <button type="button" class="btn btn-warning btn-xs col-auto " id="edit-editor"><i class="icon-base ti ti-pencil icon-xs me-2"></i>Editar</button>
+                    </div>
+                <?php endif; ?>
+                </div>
             </div><!--//.card-header -->
+
             <div class="card-body">
                 <div class="row">
                     <form action="POST" id="form-wiki">
@@ -20,37 +49,9 @@
                         <input type="hidden" name="wiki_page_id" id="wiki-page-id">
                         <input type="hidden" name="wiki_page_id" id="wiki-content-id">
                     </form>
-                    <?php if (auth()->user()->inGroup('admin')): ?>
+                    <div class="col-md-12">
-
+                        <div id="editorjs"></div>
-                        <div class="col-md-12 d-flex flex-row justify-content-between align-items-center pb-2">
+                    </div>
-                            <div class="d-flex flex-row gap-2 justify-content-start align-items-center">
-                                <?php if ($section->content()?->published_data): ?>
-                                    <span class="badge badge-center rounded-pill text-bg-success"><i class="ti ti-check"></i></span>
-                                    <strong><?= lang('Wiki.published') ?></strong>
-                                <?php else: ?>
-                                    <span class="badge badge-center rounded-pill text-bg-danger"><i class="ti ti-alert-circle"></i></span>
-                                    <strong><?= lang('Wiki.not_published') ?></strong>
-                                <?php endif; ?>
-
-                            </div>
-                            <div class="btn-group btn-group-sm" role="group">
-                                <button type="button" class="btn btn-primary" id="save-editor"><i class="icon-base ti ti-device-floppy icon-xs me-2"></i><?= lang('App.global_save') ?></button>
-                                <button type="button" class="btn btn-danger" id="release-editor"><i class="icon-base ti ti-upload icon-xs me-2"></i>Publicar</button>
-                                <button type="button" class="btn btn-secondary d-none" id="preview-editor"><i class="icon-base ti ti-eye icon-xs me-2"></i>Vista previa</button>
-                                <button type="button" class="btn btn-warning" id="edit-editor"><i class="icon-base ti ti-pencil icon-xs me-2"></i>Editar</button>
-                            </div>
-                        </div>
-                        <div class="col-md-12">
-                            <div id="editorjs"></div>
-                        </div>
-
-                    <?php else : ?>
-
-                        <div class="col-md-12">
-                            <div id="editorjs"></div>
-                        </div>
-                    <?php endif; ?>
-
                 </div>
             </div><!--//.card-body -->
             <div class="card-footer">
@@ -59,6 +60,8 @@
         </div><!--//.card -->
     </div><!--//.col -->
 </div><!--//.row -->
+<?= view("themes/vuexy/components/modals/modalSection") ?>
+
 <?= $this->endSection() ?>
 
 <?= $this->section('css') ?>
@@ -68,6 +71,10 @@
 <?= $this->section("additionalExternalJs") ?>
 
 <script src="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.js') ?>"></script>
-<script type="module" src="<?= site_url('assets/js/safekat/pages/wiki/home.js') ?>"></script>
+<?php if (auth()->user()->inGroup('admin')) : ?>
+    <script type="module" src="<?= site_url('assets/js/safekat/pages/wiki/home.js') ?>"></script>
+<?php else : ?>
+    <script type="module" src="<?= site_url('assets/js/safekat/pages/wiki/viewOnly.js') ?>"></script>
+<?php endif; ?>
 
 <?= $this->endSection() ?>

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: `
+    html: `<span class="text-sm-left text-wrap">${value}</span>`,
-    <span class="badge badge-label-primary fs-big">${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: `
+    html: `<span class="text-sm-left text-wrap">${value}</span>`,
-       <span class="badge badge-label-warning fs-big">${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 ...',
+                        placeholder: "",
                         levels: [1, 2, 3, 4],
-                        defaultLevel: 3
+                        defaultLevel: 1
                     },
                 },
                 nestedchecklist: {
-                    class: editorjsNestedChecklist ,
+                    class: editorjsNestedChecklist,
-                    config : {
+                    config: {
-                        maxLevel : 1,
+                        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,
+                    class: AlignmentBlockTune,
-                    config:{
+                    config: {
-                      default: "left",
+                        default: "left",
-                      blocks: {
+                        blocks: {
-                        header: 'left',
+                            header: 'left',
-                        list: '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 => {
+                        alertConfirmAction('Guardar contenido').then(result => {
+                            if (result.isConfirmed) {
+                                this.handleSaveContent(outputData)
+                            }
+                        });
+                    })
           
-                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)
-                        }
-                    });
-                })
             })
             $('#release-editor').on('click', () => {
 
-                this.editor.save().then(outputData => {
+                    this.editor.save().then(outputData => {
-                    this.editor.readOnly.toggle()
+                        alertConfirmAction('Publicar contenido').then(result => {
-                    console.log("Data published", outputData)
+                            if (result.isConfirmed) {
-                    alertConfirmAction('Publicar contenido').then(result => {
+                                this.handlePublishContent(outputData)
-                        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)
+                $('#release-editor').attr('disabled', 'disabled')
-                $('#save-editor').attr('disabled',null)
+                $('#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)
         }
@@ -217,6 +252,14 @@ class WikiEditor {
         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,9 +1,8 @@
 import WikiEditor from "../../components/editorjs/WikiEditor.js"
+import Ajax from "../../components/ajax.js"
 
 
-
+$(async () => {
-$(async() => {
-
   try {
     const editor = new WikiEditor()
     await editor.init()

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) {
+    
+  }
+})