feat wiki/ayuda section

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

@@ -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')
 
     }
 }