generic-skin 2.5.3 → 2.9.56

package/apps/vueDefault.js

@@ -1,6 +1,6 @@
 Vue.component('panel-control', {
-    props: ['dataElements'],
-    data: function () {
+    props: ['elements'],
+    data() {
         return {
             userId: _userdata.user_id,
             state: {
@@ -13,10 +13,10 @@ Vue.component('panel-control', {
         }
     },
     computed: {
-        validationPanel: function () {
+        validationPanel() {
             return FNR.utility.genValidation(this.content.current)
         },
-        toSave: function () {
+        toSave() {
             let final = [];
 
             [].forEach.call(this.content.current, (item, index) => {
@@ -33,7 +33,11 @@ Vue.component('panel-control', {
         }
     },
     methods: {
-        updateProfile: function () {
+        updateProfile() {
+            if (!this.toSave.length || this.validationPanel !== '') {
+                return;
+            }
+
             this.state.page = 2;
 
             FNR.user.profile.setData(this.toSave).then((r) => {
@@ -62,7 +66,7 @@ Vue.component('panel-control', {
         }
     },
     created() {
-        FNR.user.profile.getData(JSON.parse(this.dataElements.replace(/'/g, '"'))).then((r) => {
+        FNR.user.profile.getData(JSON.parse(this.elements.replace(/'/g, '"'))).then((r) => {
             this.content.original = JSON.parse(JSON.stringify(r));
             this.content.current = r;
             this.state.page = 1;
@@ -74,11 +78,11 @@ Vue.component('panel-control', {
             <h2>Editar perfil</h2>
             <hr />
             <p>En esta página podrás editar tu perfil de usuario. En caso de que quieras editar tu contraseña, por favor dirígete a <a target="_blank" title="Ir a «Cambiar contraseña»" :href="'/profile?change_password=Cambiar+tu+contraseña&mode=editprofile&page_profil=informations&user_id=' + userId">este enlace</a>.</p>
-            <p>Si estás experimentando problemas con el foro, pulsa <a title="Reiniciar cache" onclick="localStorage.clear(); window.location.replace('/')">este otro</a>. Puede que los solucione.</p>
+            <p>Ante cualquier duda o problema, contacta con la administración.</p>
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
             <aviso-foro v-show="validationPanel !== ''">
@@ -86,7 +90,7 @@ Vue.component('panel-control', {
             </aviso-foro>
             <ul class="forum-fieldlist no-style">
                 <li v-for="item in content.current">
-                    <campo-foro :data-name="item.name">
+                    <campo-foro :name="item.name">
                         <input v-model="item.value" v-if="item.type === 'input' || item.type === 'avatar'" type="text"/>
                         <textarea v-model="item.value" v-else-if="item.type === 'textarea'"></textarea>
                         <div v-else-if="item.type === 'select'" class="select-container">
@@ -97,75 +101,384 @@ Vue.component('panel-control', {
                     </campo-foro>
                 </li>
             </ul>
-            <div id="usereply-comand" v-if="toSave.length && validationPanel === ''">
-                <button class="button1 btn-main" v-on:click="updateProfile()" title="Actualizar perfil">Actualizar</button>
+            <div id="usereply-comand">
+                <button class="button1 btn-main" @click="updateProfile()" title="Actualizar perfil">Actualizar</button>
             </div>
         </template>
         <template v-if="state.page === 2">
-            <cargando-foro data-text="Actualizando información…"></cargando-foro>
+            <cargando-foro text="Actualizando información…"></cargando-foro>
         </template>
     </section>
     `
 });
 
 Vue.component('lista-bosquejos', {
-    data: function () {
+    data() {
         return {
             state: {
-                page: 0
+                page: 0,
             },
-            content: {
-                drafts: []
+            drafts: {
+                messages: {
+                    page: 0,
+                    loading: 0,
+                    pages: [],
+                    content: []
+                },
+                topics: {
+                    page: 0,
+                    loading: 0,
+                    pages: [],
+                    content: []
+                }
             }
         }
     },
+    computed: {
+        sortedMessagesPages() {
+            return FNR.behaviour.genPagelist(this.drafts.messages.pages, this.drafts.messages.page);
+        },
+        sortedTopicsPages() {
+            return FNR.behaviour.genPagelist(this.drafts.topics.pages, this.drafts.topics.page);
+        }
+    },
+    methods: {
+        getPageMessages(id) {
+            this.drafts.messages.loading = 0;
+
+            FNR.user.drafts.messages.getDrafts(id).then((r) => {
+                this.drafts.messages.content = r;
+                this.drafts.messages.loading = 1;
+                this.state.page = 1;
+            });
+        },
+        getPageTopics(id) {
+            this.drafts.topics.loading = 0;
+
+            FNR.user.drafts.topics.getDrafts(id).then((r) => {
+                this.drafts.topics.content = r;
+                this.drafts.topics.loading = 1;
+                this.state.page = 1;
+            });
+        },
+        setPageMessages(id) {
+            this.drafts.messages.page = id;
+            this.getPageMessages(this.drafts.messages.pages[this.drafts.messages.page]);
+        },
+        setPageTopics(id) {
+            this.drafts.topics.page = id;
+            this.getPageMessages(this.drafts.topics.pages[this.drafts.topics.page]);
+        },
+    },
     created() {
-        FNR.user.profile.getDrafts().then((r) => {
-            this.state.page = 1;
-            this.content.drafts = r;
+        Promise.all([FNR.user.drafts.messages.getPages(), FNR.user.drafts.topics.getPages()]).then((r) => {
+            if (r[0].items !== 0) {
+                this.drafts.messages.pages = r[0].pages;
+                this.getPageMessages(this.drafts.messages.pages[this.drafts.messages.page]);
+            }
+
+            if (r[1].items !== 0) {
+                this.drafts.topics.pages = r[1].pages;
+                this.getPageTopics(this.drafts.topics.pages[this.drafts.topics.page]);
+            }
+
+            if (r[0].items + r[1].items === 0) {
+                this.state.page = 1;
+            }
+        });
+    },
+    updated() {
+        FNR.behaviour.genControls();
+    },
+    template: `
+    <section class="wiki-content is-dramatic">
+        <div class="is-content">
+            <h2>Lista de Bosquejos</h2>
+            <hr />
+            <p>En esta página tienes tu lista de Bosquejos dividida entre mensajes y temas.</p>
+            <p>Ante cualquier duda o problema, contacta con la administración.</p>
+        </div>
+        <separador-foro />
+        <template v-if="state.page === 0">
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
+        </template>
+        <template v-else-if="state.page === 1">
+            <div class="is-content mb-4">
+                <h4>Mensajes</h4>
+            </div>
+            <mando-foro id="upper-controls" app="true">
+                <template slot="pagination" v-if="drafts.messages.pages.length > 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="drafts.messages.page > 0" @click="setPageMessages(drafts.messages.page -= 1)">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <template v-for="page in sortedMessagesPages">
+                        <strong v-if="drafts.messages.pages.indexOf(page) === drafts.messages.page">{{ drafts.messages.pages.indexOf(page) + 1 }}</strong>
+                        <a class="page-link" :title="'Ir a la página «' + (drafts.messages.pages.indexOf(page) + 1) + '»'" v-else @click="setPageMessages(drafts.messages.pages.indexOf(page))">{{ drafts.messages.pages.indexOf(page) + 1 }}</a>
+                    </template>
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(drafts.messages.page + 1) < drafts.messages.pages.length" @click="setPageMessages(drafts.messages.page += 1)">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </template>
+            </mando-foro>
+            <section id="forum-drafts-messages" class="forum-topiclist">
+                <lista-temas-cabecera elements="['Tema', 'Información']"></lista-temas-cabecera>
+                <ul :class="'topiclist-topics no-style' + (!drafts.messages.content.length || drafts.messages.loading === 0 ? ' no-results': '')">
+                    <template v-if="!drafts.messages.content.length">
+                        <li class="is-not-topic is-not-lastpost">
+                            <h6>No tienes bosquejos</h6>
+                        </li>
+                    </template>
+                    <template v-else-if="drafts.messages.loading === 0">
+                        <li class="is-not-topic is-not-lastpost">
+                            <cargando-foro text="Cargando temas…"></cargando-foro>
+                        </li>
+                    </template>
+                    <template v-else>
+                        <li class="row is-not-topic is-not-lastpost" v-for="draft in drafts.messages.content">
+                            <temas-foro type="draft" mode="" :url="draft.topic.url" :replies="draft.info.location" :views="draft.info.date" :quick="draft.modify">
+                                <template slot="title">{{ draft.topic.name }}</template>
+                            </temas-foro>
+                        </li>
+                    </template>
+                </ul>
+            </section>
+            <mando-foro id="lower-controls" app="true">
+                <template slot="pagination" v-if="drafts.messages.pages.length > 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="drafts.messages.page > 0" @click="setPageMessages(drafts.messages.page -= 1)">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <template v-for="page in sortedMessagesPages">
+                        <strong v-if="drafts.messages.pages.indexOf(page) === drafts.messages.page">{{ drafts.messages.pages.indexOf(page) + 1 }}</strong>
+                        <a class="page-link" :title="'Ir a la página «' + (drafts.messages.pages.indexOf(page) + 1) + '»'" v-else @click="setPageMessages(drafts.messages.pages.indexOf(page))">{{ drafts.messages.pages.indexOf(page) + 1 }}</a>
+                    </template>
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(drafts.messages.page + 1) < drafts.messages.pages.length" @click="setPageMessages(drafts.messages.page += 1)">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </template>
+            </mando-foro>
+  	        <separador-foro></separador-foro>
+            <div class="is-content mb-4">
+                <h4>Temas</h4>
+            </div>
+            <mando-foro id="upper-controls" app="true">
+                <template slot="pagination" v-if="drafts.topics.pages.length > 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="drafts.topics.page > 0" @click="setPageTopics(drafts.topics.page -= 1)">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <template v-for="page in sortedTopicsPages">
+                        <strong v-if="drafts.topics.pages.indexOf(page) === drafts.topics.page">{{ drafts.topics.pages.indexOf(page) + 1 }}</strong>
+                        <a class="page-link" :title="'Ir a la página «' + (drafts.topics.pages.indexOf(page) + 1) + '»'" v-else @click="setPageTopics(drafts.topics.pages.indexOf(page))">{{ drafts.topics.pages.indexOf(page) + 1 }}</a>
+                    </template>
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(drafts.topics.page + 1) < drafts.topics.pages.length" @click="setPageTopics(drafts.topics.page += 1)">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </template>
+            </mando-foro>
+            <section id="forum-drafts-messages" class="forum-topiclist">
+                <lista-temas-cabecera elements="['Tema', 'Información']"></lista-temas-cabecera>
+                <ul :class="'topiclist-topics no-style' + (!drafts.topics.content.length || drafts.topics.loading === 0 ? ' no-results': '')">
+                    <template v-if="!drafts.topics.content.length">
+                        <li class="is-not-topic is-not-lastpost">
+                            <h6>No tienes bosquejos</h6>
+                        </li>
+                    </template>
+                    <template v-else-if="drafts.topics.loading === 0">
+                        <li class="is-not-topic is-not-lastpost">
+                            <cargando-foro text="Cargando temas…"></cargando-foro>
+                        </li>
+                    </template>
+                    <template v-else>
+                        <li class="row is-not-topic is-not-lastpost" v-for="draft in drafts.topics.content">
+                            <temas-foro type="draft" mode="" :url="draft.topic.url" :replies="draft.info.location" :views="draft.info.date" :quick="draft.modify">
+                                <template slot="title">{{ draft.topic.name }}</template>
+                            </temas-foro>
+                        </li>
+                    </template>
+                </ul>
+            </section>
+            <mando-foro id="lower-controls" app="true">
+                <template slot="pagination" v-if="drafts.topics.pages.length > 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="drafts.topics.page > 0" @click="setPageTopics(drafts.topics.page -= 1)">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <template v-for="page in sortedTopicsPages">
+                        <strong v-if="drafts.topics.pages.indexOf(page) === drafts.topics.page">{{ drafts.topics.pages.indexOf(page) + 1 }}</strong>
+                        <a class="page-link" :title="'Ir a la página «' + (drafts.topics.pages.indexOf(page) + 1) + '»'" v-else @click="setPageTopics(drafts.topics.pages.indexOf(page))">{{ drafts.topics.pages.indexOf(page) + 1 }}</a>
+                    </template>
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(drafts.topics.page + 1) < drafts.topics.pages.length" @click="setPageTopics(drafts.topics.page += 1)">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </template>
+            </mando-foro>
+        </template>
+    </section>
+    `
+});
+
+Vue.component('lista-seguidos', {
+    data() {
+        return {
+            state: {
+                page: 0,
+                selected: [],
+            },
+            followed: {
+                page: 0,
+                loading: 0,
+                pages: [],
+                content: []
+            }
+        }
+    },
+    computed: {
+        sortedPages() {
+            return FNR.behaviour.genPagelist(this.followed.pages, this.followed.page);
+        }
+    },
+    methods: {
+        getPage(id) {
+            this.followed.loading = 0;
+
+            FNR.user.followed.getFollowed(id).then((r) => {
+                this.followed.content = r;
+                this.followed.loading = 1;
+                this.state.page = 1;
+            });
+        },
+        setPage(id) {
+            this.followed.page = id;
+            this.getPage(this.followed.pages[this.followed.page]);
+        },
+        setTopic(id) {
+            const positionId = this.state.selected.indexOf(id);
+    
+            if (positionId === -1) {
+                this.state.selected.push(id);
+            } else {
+                this.state.selected.splice(positionId, 1);
+            }
+        },
+        delTopics() {
+            FNR.user.followed.delFollowed(this.state.selected).then((r) => {
+                if (r) {
+                    window.location.reload();
+                } else {                    
+                    FNR.html.genNotification('Atención', 'Hubo un problema al retirar. Inténtalo de nuevo.', 'fas fa-exclamation');
+                }
+            });
+        }
+    },
+    created() {
+        FNR.user.followed.getPages().then((r) => {
+            if (r.items === 0) {
+                this.state.page = 1;
+                return;
+            }
+
+            this.followed.pages = r.pages;
+            this.getPage(this.followed.pages[this.followed.page]);
         });
     },
+    updated() {
+        FNR.behaviour.genControls();
+    },
     template: `
     <section class="wiki-content is-dramatic">
         <div class="is-content">
-            <h2>Lista de bosquejos</h2>
+            <h2>Lista de Temas Supervisados</h2>
             <hr />
-            <p>En esta página tienes tu lista de tus bosquejos. No es una lista completa, tan solo muestra la primera página. Si deseas ver más bosquejos, aligera la lista publicándolos.</p>
+            <p>En esta página tienes tu lista de Temas Supervisados.</p>
+            <p>Ante cualquier duda o problema, contacta con la administración.</p>
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
-            <section id="forum-drafts" class="forum-topiclist">
-                <lista-temas-cabecera data-elements="['Tema', 'Información']"></lista-temas-cabecera>
-                <ul class="topiclist-topics no-style">
-                    <template v-if="content.drafts === false">
-                        <li class="is-not-lastpost not-status">
-                            <h6>No tienes bosquejos guardados</h6>
+            <mando-foro id="upper-controls" app="true">
+                <template slot="pagination" v-if="followed.pages.length > 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="followed.page > 0" @click="setPage(followed.page -= 1)">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <template v-for="page in sortedPages">
+                        <strong v-if="followed.pages.indexOf(page) === followed.page">{{ followed.pages.indexOf(page) + 1 }}</strong>
+                        <a class="page-link" :title="'Ir a la página «' + (followed.pages.indexOf(page) + 1) + '»'" v-else @click="setPage(followed.pages.indexOf(page))">{{ followed.pages.indexOf(page) + 1 }}</a>
+                    </template>
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(followed.page + 1) < followed.pages.length" @click="setPage(followed.page += 1)">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </template>
+                <template slot="controls">
+                    <li v-if="followed.content.length" @click="delTopics()">
+                        <boton-foro url="javascript:{}" name="Retirar" icon="fas fa-minus"></boton-foro>
+                    </li>
+                </template>
+            </mando-foro>
+            <section id="forum-followed" class="forum-topiclist">
+                <lista-temas-cabecera elements="['Tema', 'Información']"></lista-temas-cabecera>
+                <ul :class="'topiclist-topics no-style' + (!followed.content.length || followed.loading === 0 ? ' no-results': '')">
+                    <template v-if="!followed.content.length">
+                        <li class="is-not-topic is-not-lastpost">
+                            <h6>No tienes temas supervisados</h6>
+                        </li>
+                    </template>
+                    <template v-else-if="followed.loading === 0">
+                        <li class="is-not-topic is-not-lastpost">
+                            <cargando-foro text="Cargando temas…"></cargando-foro>
                         </li>
                     </template>
                     <template v-else>
-                        <li class="row is-not-lastpost not-status" v-for="draft in content.drafts">
-                            <temas-foro data-type="draft" data-mode="" :data-url="draft.topic.url" :data-title="draft.topic.name" :data-replies="draft.info.location" :data-views="draft.info.date" :data-quick="draft.modify" />
+                        <li :class="'row is-not-topic is-not-lastpost ' + topic.type" v-for="topic in followed.content" :key="topic.id">
+                            <temas-foro type="followed" mode="" :url="topic.url" :replies="topic.replies + ' respuestas'" :views="topic.views + ' visitas'">
+                                <template slot="title">{{ topic.name }}</template>
+                                <template slot="radio">
+                                    <div :class="'forum-checkbox' + (state.selected.indexOf(topic.id) === -1 ? '' : ' is-active')">
+                                        <div class="checkbox-content" @click="setTopic(topic.id)">
+                                            <div class="checkbox-click">
+                                                <i class="fas fa-check"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </temas-foro>
                         </li>
                     </template>
                 </ul>
             </section>
+            <mando-foro id="lower-controls" app="true">
+                <template slot="pagination" v-if="followed.pages.length > 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="followed.page > 0" @click="setPage(followed.page -= 1)">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <template v-for="page in sortedPages">
+                        <strong v-if="followed.pages.indexOf(page) === followed.page">{{ followed.pages.indexOf(page) + 1 }}</strong>
+                        <a class="page-link" :title="'Ir a la página «' + (followed.pages.indexOf(page) + 1) + '»'" v-else @click="setPage(followed.pages.indexOf(page))">{{ followed.pages.indexOf(page) + 1 }}</a>
+                    </template>
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(followed.page + 1) < followed.pages.length" @click="setPage(followed.page += 1)">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </template>
+                <template slot="controls">
+                    <li v-if="followed.content.length" @click="delTopics()">
+                        <boton-foro url="javascript:{}" name="Retirar" icon="fas fa-minus"></boton-foro>
+                    </li>
+                </template>
+            </mando-foro>
         </template>
     </section>
     `
 });
 
 Vue.component('editor-foro', {
-    data: function () {
+    data() {
         return {
             state: {
                 page: 0,
                 editor: 'none',
                 admin: (_userdata.user_level === 1),
                 guest: (_userdata.session_logged_in === 0),
-                dice: document.querySelectorAll('#list_dice').length
+                dice: document.querySelectorAll('#list_dice').length,
+                draft: document.querySelectorAll('input[name="draft"]').length
             },
             colors: FNR.forum.getColors(),
             content: {
@@ -192,11 +505,11 @@ Vue.component('editor-foro', {
         }
     },
     computed: {
-        msgCheck: function () {
+        msgCheck() {
             let final = '';
 
             if (this.state.guest) {
-                if (this.content.username.trim().length < 4 || this.content.username.trim().length > 60) {
+                if (this.content.username.trim().length < 1 || this.content.username.trim().length > 60) {
                     final += '<li>Escribe un nombre de usuario de tamaño adecuado.</li>';
                 }
             }
@@ -215,9 +528,9 @@ Vue.component('editor-foro', {
                 }
             }
 
-            if (this.state.editor === 'newtopic' || this.state.editor === 'post') {
-                if (this.content.subject.trim().length < 4 || this.content.subject.trim().length > 60) {
-                    final += '<li>Escribe un titulo de tamaño adecuado.</li>';
+            if (this.state.editor === 'newtopic' || this.state.editor === 'post' || this.state.editor === 'edittopicdraft') {
+                if (this.content.subject.trim().length < 4 || this.content.subject.trim().length > 100) {
+                    final += '<li>Escribe un titulo de tamaño adecuado (4 a 100 carácteres).</li>';
                 }
             }
 
@@ -227,7 +540,7 @@ Vue.component('editor-foro', {
 
             return final;
         },
-        sortedCharacters: function () {
+        sortedCharacters() {
             if (!Object.keys(this.users.options).length) return [];
             else return this.users.options.map((item) => {
                 return item.user;
@@ -241,7 +554,7 @@ Vue.component('editor-foro', {
                 return 0;
             });
         },
-        sortedEditCharacters: function () {
+        sortedEditCharacters() {
             return this.users.selected.sort((a, b) => {
                 if (a < b) return -1;
                 else if (a > b) return 1;
@@ -250,7 +563,7 @@ Vue.component('editor-foro', {
         }
     },
     methods: {
-        insertSomething: function (insertBefore, insertAfter) {
+        insertSomething(insertBefore, insertAfter) {
             const myField = document.getElementById('usereply-editor');
             const pre = insertBefore.replace(/-jump-/g, '\n');
             const post = insertAfter.replace(/-jump-/g, '\n');
@@ -260,8 +573,8 @@ Vue.component('editor-foro', {
                 document.selection.createRange().text = pre + document.selection.createRange().text + post;
             } else if (myField.selectionStart || myField.selectionStart == '0') {
                 const startPos = myField.selectionStart;
-                const endPos = myField.selectionEnd;
-                const cursorPos = endPos + pre.length + post.length;
+                const endPos = myField.selectionEnd
+                const cursorPos = endPos + pre.length;
 
                 myField.value = myField.value.substring(0, startPos) + pre + myField.value.substring(startPos, endPos) + post + myField.value.substring(endPos, myField.value.length);
                 myField.setSelectionRange(cursorPos, cursorPos);
@@ -269,13 +582,13 @@ Vue.component('editor-foro', {
 
             this.content.msg = myField.value;
         },
-        newDice: function () {
+        newDice() {
             this.dice.current.push({
                 dice: -1,
                 number: 0
             });
         },
-        addCharacter: function (character) {
+        addCharacter(character) {
             this.users.selected.push(character);
             this.users.selector = false;
             this.users.current = '';
@@ -284,15 +597,15 @@ Vue.component('editor-foro', {
                 this.users.selector = true;
             }, 250);
         },
-        deleteCharacter: function (index) {
+        deleteCharacter(index) {
             this.users.current = '';
             this.users.selected.splice(index, 1);
         },
-        changeGroup: function () {
+        changeGroup() {
             this.users.selected = [];
             this.users.current = '';
         },
-        insertUrl: function () {
+        insertUrl() {
             const myField = document.getElementById('usereply-editor');
             const startPos = myField.selectionStart;
             const endPos = myField.selectionEnd;
@@ -305,7 +618,7 @@ Vue.component('editor-foro', {
                 }
             });
         },
-        insertImg: function () {
+        insertImg() {
             FNR.html.genPrompt('Insertar imagen', 'Introduce las medidas de la imagen en píxeles pero sin la medida (por ejemplo 100x100). <u>En caso de dejarlo en blanco, se insertará con la medida inicial</u>.', 'Medidas de la imagen', '').then((result) => {
                 if (result !== false) {
                     this.insertSomething('[img=' + result + ']', '[/img]');
@@ -314,7 +627,7 @@ Vue.component('editor-foro', {
                 }
             });
         },
-        insertSpoiler: function () {
+        insertSpoiler() {
             FNR.html.genPrompt('Insertar spoiler', 'Introduce el título del spoiler. <u>En caso de dejarlo en blanco, se insertará sin él.</u>.', 'Título del spoiler', '').then((result) => {
                 if (result !== false) {
                     this.insertSomething('[spoiler=' + result + ']', '[/spoiler]');
@@ -323,7 +636,7 @@ Vue.component('editor-foro', {
                 }
             });
         },
-        insertQuote: function () {
+        insertQuote() {
             FNR.html.genPrompt('Insertar cita', 'Introduce el destinatario de la cita. <u>En caso de dejarlo en blanco, se insertará sin él.</u>.', 'Destinatario de la cita', '').then((result) => {
                 if (result !== false) {
                     this.insertSomething('[quote=' + result + ']', '[/quote]');
@@ -332,7 +645,7 @@ Vue.component('editor-foro', {
                 }
             });
         },
-        parseMsg: function () {
+        parseMsg() {
             window.forumParsing = true;
 
             if (document.querySelector('#forum-realreply > form .sceditor-container > textarea')) {
@@ -341,32 +654,6 @@ Vue.component('editor-foro', {
                 document.querySelector('#forum-realreply > form textarea#text_editor_textarea').value = this.content.msg.replace(/#per/g, this.colors[this.colors.length - 1].hex);
             }
 
-            if (this.state.editor === 'reply') {
-                if (FNR.content.isAutosave()) {
-                    if (FNR.cache.getData('post' + document.post.t.value + '-' + _userdata.user_id) !== false && _userdata.user_id !== -1) {
-                        FNR.cache.delData('post' + document.post.t.value + '-' + _userdata.user_id);
-                    }
-                }
-
-                if (this.state.dice) {
-                    [].forEach.call(document.querySelectorAll('#forum-realreply > form #list_dice tr'), (item, index) => {
-                        if (index !== 0) {
-                            item.remove();
-                        }
-                    });
-
-                    document.querySelector('#forum-realreply > form #list_dice tr td').insertAdjacentHTML('beforeend', '<span id="dice_to_del"></span>');
-
-                    this.dice.current.filter((item) => {
-                        return item.dice !== -1;
-                    }).filter((item) => {
-                        return parseFloat(item.number) !== 0 && !isNaN(parseFloat(item.number));
-                    }).forEach((item) => {
-                        add_dice(document.querySelectorAll('#list_dice tr').length, item.dice, item.number);
-                    });
-                }
-            }
-
             if (this.state.guest) {
                 if (this.content.subject.trim().length > 4 || this.content.subject.trim().length < 60) {
                     document.querySelector('#forum-realreply > form input[name="username"]').value = this.content.username;
@@ -392,23 +679,80 @@ Vue.component('editor-foro', {
                 }
             }
 
-            if (this.state.editor === 'newtopic' || this.state.editor === 'post') {
-                if (this.content.subject.trim().length > 4 || this.content.subject.trim().length < 60) {
+            if (this.state.editor === 'newtopic' || this.state.editor === 'post' || this.state.editor === 'edittopicdraft') {
+                if (this.content.subject.trim().length > 4 || this.content.subject.trim().length < 100) {
                     document.querySelector('#forum-realreply > form input[name="subject"]').value = this.content.subject.trim();
                 }
             }
+
+            if (this.state.editor === 'reply') {
+                if (FNR.content.isAutosave()) {
+                    if (FNR.cache.getData('post' + document.post.t.value + '-' + _userdata.user_id) !== false && _userdata.user_id !== -1) {
+                        FNR.cache.delData('post' + document.post.t.value + '-' + _userdata.user_id);
+                    }
+                }
+            }
+
+            if (this.state.dice && (this.state.editor === 'reply' || this.state.editor === 'newtopic' || this.state.editor === 'editpostdraft' || this.state.editor === 'edittopicdraft')) {
+                [].forEach.call(document.querySelectorAll('#forum-realreply > form #list_dice tr'), (item, index) => {
+                    if (index !== 0) {
+                        item.remove();
+                    }
+                });
+
+                document.querySelector('#forum-realreply > form #list_dice tr td').insertAdjacentHTML('beforeend', '<span id="dice_to_del"></span>');
+
+                this.dice.current.filter((item) => {
+                    return item.dice !== -1;
+                }).filter((item) => {
+                    return parseFloat(item.number) !== 0 && !isNaN(parseFloat(item.number));
+                }).forEach((item) => {
+                    add_dice(document.querySelectorAll('#list_dice tr').length, item.dice, item.number);
+                });
+            }
         },
-        draftMsg: function () {
+        draftMsg() {
+            if (this.msgCheck.length) {
+                return;
+            }
+
             this.parseMsg();
 
-            document.querySelector('#forum-realreply > form input[value="Bosquejo"], #forum-realreply input[value="Modificar"]').click();
+            document.querySelector('#forum-realreply > form input[value="Bosquejo"], #forum-realreply input[value="Modificar"], #forum-realreply input[value="Registrar"]').click();
         },
-        sendMsg: function () {
+        delMsg() {
+            const urlParams = new URLSearchParams(window.location.search);
+
+            let type = 'topicdraft';
+            let param = 't';
+
+            if (urlParams.get('mode') === 'editpostdraft') {
+                type = 'draft';
+                param = 'p';
+            }
+
+            FNR.user.drafts.delDrafts(type, [urlParams.get(param)]).then((r) => {
+                if (r) {
+                    window.location.replace(`${window.location.protocol}//${window.location.host}${forumConfig.usableDirections.ucp}#/bosquejos`)
+                } else {                    
+                    FNR.html.genNotification('Atención', 'Hubo un problema al eliminar. Inténtalo de nuevo.', 'fas fa-exclamation');
+                }
+            });
+        },
+        sendMsg() {
+            if (this.msgCheck.length) {
+                return;
+            }
+            
             this.parseMsg();
 
             document.querySelector('#forum-realreply > form input[value="Enviar"], #forum-realreply input[value="Publicar"]').click();
         },
-        prevMsg: function () {
+        prevMsg() {
+            if (this.msgCheck.length) {
+                return;
+            }
+            
             this.parseMsg();
 
             document.querySelector('#forum-realreply > form input[value="Previsualización"], #forum-realreply input[value="Previsualizar"]').click();
@@ -802,7 +1146,7 @@ Vue.component('editor-foro', {
     template: `
     <div id="forum-usereply">
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
             <aviso-foro v-show="msgCheck.length">
@@ -811,22 +1155,22 @@ Vue.component('editor-foro', {
             <ul id="usereply-extra" class="forum-fieldlist no-style" v-if="state.editor !== 'reply'">
                 <template v-if="state.guest">
                     <li>
-                        <campo-foro data-name="Nombre de usuario">
+                        <campo-foro name="Nombre de usuario">
                             <input type="text" v-model="content.username" placeholder="Escribe tu nombre de usuario." />
                         </campo-foro>
                     </li>
                 </template>
                 <template v-if="state.editor === 'post'">
                     <li>
-                        <campo-foro data-name="Usuarios">
+                        <campo-foro name="Usuarios">
                             <div class="character-selector">
                                 <input type="text" v-model="users.current" placeholder="Escribe el nombre de un usuario." :disabled="groups.type !== -1" />
                                 <ul class="no-style selector-list" v-if="users.selector && sortedCharacters.length > 0">
-                                    <li v-for="(character, index) in sortedCharacters" v-on:click="addCharacter(character)" :title="'Seleccionar ' + character">{{ character }}<i class="fas fa-plus"></i></li>
+                                    <li v-for="(character, index) in sortedCharacters" @click="addCharacter(character)" :title="'Seleccionar ' + character">{{ character }}<i class="fas fa-plus"></i></li>
                                 </ul>
                             </div>
                             <ul v-if="sortedEditCharacters.length" class="no-style character-list">
-                                <li v-for="(character, index) in sortedEditCharacters" v-on:click="deleteCharacter(index)" :title="'Quitar ' + character"><i class="fas fa-times"></i> {{ character }}</li>
+                                <li v-for="(character, index) in sortedEditCharacters" @click="deleteCharacter(index)" :title="'Quitar ' + character"><i class="fas fa-times"></i> {{ character }}</li>
                             </ul>
                         </campo-foro>
                     </li>
@@ -834,9 +1178,9 @@ Vue.component('editor-foro', {
                 <template v-if="state.admin">
                     <template v-if="state.editor === 'post'">
                         <li>
-                            <campo-foro data-name="Grupo">
+                            <campo-foro name="Grupo">
                                 <div class="select-container">
-                                    <select v-model="groups.type" v-on:change="changeGroup()" :disabled="users.selected.length !== 0">
+                                    <select v-model="groups.type" @change="changeGroup()" :disabled="users.selected.length !== 0">
                                         <option value="-1" hidden>Selecciona un grupo.</option>
                                         <option v-for="option in groups.options" :value="option.value">{{ option.name }}</option>
                                     </select>
@@ -844,9 +1188,9 @@ Vue.component('editor-foro', {
                             </campo-foro>
                         </li>
                     </template>
-                    <template v-else-if="state.editor === 'newtopic' && content.type !== -1">
+                    <template v-else-if="content.type !== -1 && (state.editor === 'newtopic' || state.editor === 'edittopicdraft')">
                         <li>
-                            <campo-foro data-name="Tipo de tema">
+                            <campo-foro name="Tipo de tema">
                                 <div class="select-container">
                                     <select v-model="content.type">
                                         <option value="-1" hidden>Selecciona una opción.</option>
@@ -857,9 +1201,9 @@ Vue.component('editor-foro', {
                         </li>
                     </template>
                 </template>
-                <template v-if="state.editor === 'newtopic' || state.editor === 'post'">
+                <template v-if="state.editor === 'newtopic' || state.editor === 'post' || state.editor === 'edittopicdraft'">
                     <li>
-                        <campo-foro data-name="Título">
+                        <campo-foro name="Título">
                             <input type="text" v-model="content.subject" placeholder="Escribe el título." />
                         </campo-foro>
                     </li>
@@ -870,22 +1214,22 @@ Vue.component('editor-foro', {
                 <div id="usereply-buttons">
                     <ul class="is-hidden-mobile">
                         <li id="bold-button">
-                            <button class="usereply-button" v-on:click="insertSomething('[b]', '[/b]')" title="Negrita">
+                            <button class="usereply-button" @click="insertSomething('[b]', '[/b]')" title="Negrita">
                                 <i class="fas fa-bold"></i>
                             </button>
                         </li>
                         <li id="italic-button">
-                            <button class="usereply-button" v-on:click="insertSomething('[i]', '[/i]')" title="Cursiva">
+                            <button class="usereply-button" @click="insertSomething('[i]', '[/i]')" title="Cursiva">
                                 <i class="fas fa-italic"></i>
                             </button>
                         </li>
                         <li id="underline-button">
-                            <button class="usereply-button" v-on:click="insertSomething('[u]', '[/u]')" title="Subrayado">
+                            <button class="usereply-button" @click="insertSomething('[u]', '[/u]')" title="Subrayado">
                                 <i class="fas fa-underline"></i>
                             </button>
                         </li>
                         <li id="strike-button">
-                            <button class="usereply-button" v-on:click="insertSomething('[strike]', '[/strike]')" title="Tachado">
+                            <button class="usereply-button" @click="insertSomething('[strike]', '[/strike]')" title="Tachado">
                                 <i class="fas fa-strikethrough"></i>
                             </button>
                         </li>
@@ -900,7 +1244,7 @@ Vue.component('editor-foro', {
                                 </div>
                                 <div class="dropdown-menu" role="menu">
                                     <div id="colour-list" class="dropdown-content">
-                                        <div v-for="color in colors" class="usereply-option" :style="'color:' + color.hex" v-on:click="insertSomething('[color=' + color.hex + ']', '[/color]')">{{ color.name }}</div>
+                                        <div v-for="color in colors" class="usereply-option" :style="'color:' + color.hex" @click="insertSomething('[color=' + color.hex + ']', '[/color]')">{{ color.name }}</div>
                                     </div>
                                 </div>
                             </div>
@@ -928,9 +1272,9 @@ Vue.component('editor-foro', {
                                 </div>
                                 <div class="dropdown-menu" role="menu">
                                     <div id="align-list" class="dropdown-content">
-                                        <div class="usereply-option" v-on:click="insertSomething('[left]', '[/left]')">Izquierda</div>
-                                        <div class="usereply-option" v-on:click="insertSomething('[center]', '[/center]')">Centro</div>
-                                        <div class="usereply-option" v-on:click="insertSomething('[right]', '[/right]')">Derecha</div>
+                                        <div class="usereply-option" @click="insertSomething('[left]', '[/left]')">Izquierda</div>
+                                        <div class="usereply-option" @click="insertSomething('[center]', '[/center]')">Centro</div>
+                                        <div class="usereply-option" @click="insertSomething('[right]', '[/right]')">Derecha</div>
                                     </div>
                                 </div>
                             </div>
@@ -944,13 +1288,13 @@ Vue.component('editor-foro', {
                                 </div>
                                 <div class="dropdown-menu" role="menu">
                                     <div id="toolbox-list" class="dropdown-content">
-                                        <div class="usereply-option" v-on:click="insertUrl()">Enlace</div>
-                                        <div class="usereply-option" v-on:click="insertImg()">Imagen</div>
-                                        <div class="usereply-option" v-on:click="insertSpoiler()">Spoiler</div>
-                                        <div class="usereply-option" v-on:click="insertSomething('[code]', '[/code]')">Code</div>
-                                        <div class="usereply-option" v-on:click="insertQuote()">Cita</div>
-                                        <div class="usereply-option" v-on:click="insertSomething('[hide]', '[/hide]')">Ocultar</div>
-                                        <div class="usereply-option" v-on:click="insertSomething('[youtube]', '[/youtube]')">Youtube</div>
+                                        <div class="usereply-option" @click="insertUrl()">Enlace</div>
+                                        <div class="usereply-option" @click="insertImg()">Imagen</div>
+                                        <div class="usereply-option" @click="insertSpoiler()">Spoiler</div>
+                                        <div class="usereply-option" @click="insertSomething('[code]', '[/code]')">Code</div>
+                                        <div class="usereply-option" @click="insertQuote()">Cita</div>
+                                        <div class="usereply-option" @click="insertSomething('[hide]', '[/hide]')">Ocultar</div>
+                                        <div class="usereply-option" @click="insertSomething('[youtube]', '[/youtube]')">Youtube</div>
                                     </div>
                                 </div>
                             </div>
@@ -959,26 +1303,27 @@ Vue.component('editor-foro', {
                 </div>
             </div>
             <textarea id="usereply-editor" contenteditable="true" v-model="content.msg"></textarea>
-            <div id="usereply-comand" v-if="!msgCheck.length">
-                <button class="button1 btn-main" v-on:click="sendMsg()">Enviar</button>
-                <button class="button1" v-on:click="draftMsg()" v-if="state.editor === 'editpostdraft'">Modificar</button>
-                <button class="button1" v-on:click="draftMsg()" v-else-if="state.editor === 'reply' && state.dice">Bosquejo</button>
-                <button class="button1" v-on:click="prevMsg()">Previsualizar</button>
+            <div id="usereply-comand">
+                <button class="button1 btn-main" @click="sendMsg()">Enviar</button>
+                <button class="button1" @click="draftMsg()" v-if="state.editor === 'editpostdraft' || state.editor === 'edittopicdraft'">Modificar</button>
+                <button class="button1" @click="draftMsg()" v-else-if="state.draft && (state.editor === 'reply' || state.editor === 'newtopic')">Bosquejo</button>
+                <button class="button1" @click="prevMsg()">Previsualizar</button>
+                <button class="button1" @click="delMsg()" v-if="state.editor === 'editpostdraft' || state.editor === 'edittopicdraft'">Eliminar</button>
             </div>
-            <div v-if="state.editor === 'reply' && state.dice" id="usereply-dice">
+            <div v-if="state.dice && (state.editor === 'reply' || state.editor === 'newtopic' || state.editor === 'editpostdraft' || state.editor === 'edittopicdraft')" id="usereply-dice">
                 <div class="usereply-header">
                     <h3>Tirar dados</h3>
                 </div>
                 <ul>
                     <li v-for="(item, index) in dice.current">
                         <div class="select-container">
-                            <select v-model="item.dice">
+                            <select v-model="item.dice" @change="item.number = 1">
                                 <option value="-1" selected hidden>Selec. un dado</option>
                                 <option v-for="option in dice.options" :value="option.value">{{ option.content }}</option>
                             </select>
                         </div>
                         <input type="number" v-model="item.number" />
-                        <button v-on:click="newDice()" v-if="(index + 1) === dice.current.length" class="dice-more">
+                        <button @click="newDice()" v-if="(index + 1) === dice.current.length" class="dice-more">
                             <i class="fas fa-plus"></i>
                         </button>
                         <div v-else class="dice-more"></div>