vue-all-tools v1.1.8

Vue-all-tools Version 1.0.1 (02/07/19)

Introducción

Para utilizar se debe incluir la libreria a main.js y configurar el HostUrl.

Los componentes datatable y paginator solo funcionan con Fraravel y compatibildad con laravel no segura.

require("./components/vue-all-tools");
let hostUrl = "https://deb.boutiquemanagement.com/api";
Request.setUrl(hostUrl, hostUrl);

Prop vue para DataTable -

name = requerido para identificar las tablas.
history = indica si la tabla genera un historial en la URL.

Configuración.

Se debe añadir el componente display-dialog y context-menu al inicio de la aplicación vue.

<template>
    <div id="app">
        <router-view />
        <context-menu></context-menu>
        <display-dialog />
    </div>
</template>

Usar Display Dialog.

Para crear un instancia de un dialogo utilizar Dialog.open, esto retorna una promesa.

Dialog.open("Title", "Content", ["Button 1", "Button 2"]);

Configuraciónes

Dialog.open("Title", "Content", ["Cancel", "Button 2"])
.then(e => {
    e.state.code // Cancel == 1
    e.state.code // Button 2 == 2
    e.state.text // Text of button

    e.preventDefault() // Prevent close dialog
});

Usar un componente de manera dinamica dentro de un dialogo.

Dialog.open("Title", import("component/path/index.vue"), ["Accept"])
.onLoadComponent(component => {
    component.getValueCustomMethod();
})

Desactivar un boton.

Dialog.open("Title", import("component/path/index.vue"), ["Accept"])
    .setActiveButton(1, false);

Utilizar un estilo personalizado para todos los dialogos.

//Name of style
Dialog.setTheme("black/default");
//or Custom
//Class of stylesheet and path of stylesheet
Dialog.setTheme("class-stylesheet", "@/styles/dialog_theme.scss");

Cambiar el estilo de una instancia de dialogo.

Dialog.open("Title", "content", ["btn1"]).setTheme("black");
Dialog.open("Title", "content", ["btn1"]).setTheme("class-stylesheet", "@/styles/dialog_theme.scss");

#default
{
    > section
    {
        border: 2px solid var(--color-1);

        > .title
        {
            text-align: left;
            background-color: var(--color-1);
            color: var(--color-white);
            padding-left: 5px;
        }

        > .content
        {
            margin: 10px 5px;
            text-align: center;
            padding: 2px;
        }

        > .actions
        {
            justify-content: flex-end;
        }
    }
}

Extras

Se puede manejar multiples mensajes a la vez, manejando la profundidad con sendFront();

Se puede cerrar un mensaje desde una referencia con la funcion close();

Se puede obtener el componente de un dialogo mediante getComponent();

Datatable

Para utilizar la tabla se debe usar la etiqueta datatable. Para hacer referencia a la tabla utilizar el atributo ref de vue.js.

Archivo de configuración.

export default {
    config: {
        path: "product_color",
        path_update: "product_color_select" // si no se especifica, la funcion actualizar toma como URL la variable PATH.
    },
    header: [
        {
            text: "Id",
            key: "id",
            useFilter: true,
            style: {
                width: "50px",
                "justify-content": "center"
            }
        },

        {
            text: "Name",
            key: "name",
            useFilter: true,
            style: {
                width: "100%",
            }
        }
    ]
}

Eventos.

//Se llama cuando se carga información.
dataloaded (lista de elementos)

//Se llama cuando se presiona boton derecho sobre una fila.
contextmenu (row_data, header_cell)

//Se llama cuando se hace click sobre una celda de la fila.
cellclick (row_data, header_cell, row_index, cell_index)

//Se llama cuando se hace doble click sobre una celda de la fila.
celldblclick (row_data, header_cell)

//Se llama cuando se selecciona una nueva fila.
select (row_data, row_index)

//Se llama cuando se hace doble click sobre una fila.
rowdblclick (row_data, row_index)

// Se utiliza para actualizar una fila desde la base de datos.
async updateRow(index)

ContextMenu

Para utilizar context menu se debe llamar ContextMenu.show(optiones) y retornara una promesa, si se cumple recibe el indice de la opción seleccionada.

ContextMenu.show(["Ver", "Editar", "Eliminar"]).then(option => {
    console.log(option);
})

Paginator

Para utilizar paginator se debe crear una instancia utilzar __class

let paginator = new __class.Paginator("http://miweb.com/api");
paginator.confi.perPage = 10; //Resultados por pág.
console.log(paginator.info); //Información del paginado de Fraravel.
console.log(paginator.getCurrentPage()) //Obtener pagina actual.
paginator.request(); //Obtener datos.
paginator.requestNext(); //Obtener datos de la siguiente pag.
paginator.requestBack(); //Obtener datos de la anterior pag.
paginator.requestMore(); //Obtener datos de la siguiente pag. y agregarlo a los datos actuales.
paginator.requestPage(); //Obtener datos de la pag. indicada.
paginator.availableData(); //Comprobar que existen datos.
paginator.isLoading(); //Comprobar si esta trabajando.
paginator.onReceiverData(r => console.log(r)); //Callback al recibir información.
console.log(paginator.data); //Obtener todos los datos del paginador.

readParametersOfUrl(id) // Leer la url.
moveParametersToUrl(id) // Escribir la url.

:triangular_flag_on_post: ¡Desde la versión 1.0.24^ ya no esta disponible paginator.query!

Parameters es el nuevo sistema de Querys para el Paginador.

paginator.getParameter(key); //Obtener objecto parametro.
paginator.setParameter(key, val); //crear o actualizar parametro.
paginator.setParameterRange(array); //crear o actualizar multiples parametros.
paginator.removeParameter(key); // eliminar parametro
paginator.clearParameter(); // eliminar todos los parametros
paginator.getParameterQuery(); // obtener query de los parametros.

Request

Require AXIOS

Request.setUrl("productionUrl", "debUrl");

Request.getMetric() //Retorna el estado de consultas.

Request.onStart(callback); //Se llama cuando se inicia un conjunto de consultas.

Request.onEnd(callback); //Se llama cuando se finaliza un conjunto de consultas.

Request.isWorking(); //Retorna estado.

Request.appendHeader(key, value); //Añadir header para las consultas.

Request.send(query, method, data); //Envia la consulta mediante XHR usando AXIOS y retorna una promesa.
Data puede ser FormData o un objeto comun, que sera convertido automaticamente a FormData. Solo se admiten metodos GET y POST para Fraravel.

Request.toFormData(obj); // Convertir objeto a FormData.

Request.getBaseUrl(optionalAppend); //Obtiene la ruta según el contexto.

Request.isLocal(); //Verificar si se esta trabajando en ambito de desarrollo.

Request.currentHost(); //Retorna el host actual.

Router (Opcional)

Router sirve para VUE router. para utilizar se debe agregar lo siguiente en el inicio de la aplicación. main.js.

Router.init(router);

Configuración de handlers para la validación y seguridad de las rutas.

Router.handlerAvailablePath((to) => {
    return new Promise(r => {
        setTimeout(() => r(false), 4500);
    });
});

Router.handlerAvailablePath((to) => { return false; });
//Se puede retornar un valor booleano o una promesa con  resultado booleano.

Si se necesita cargar información antes de que se haga la validación de la ruta utilizar

Router.handlerBeforeEnterPath(callback)

Router.handlerBeforeEnterPath(() => {
    return new Promise(r => {
        setTimeout(() => {
        r(true);
        }, 1000);
    });
});

Utilizar validaciones en las rutas con redirección.

 path: '/control',
meta: {
    validate: new Promise(r => setTimeout(() => r(false), 5000)),
    redirect: "login"
},
component: () => import('@/views/control')



path: '/control',
meta: {
    validate: () => DataStore.get("api_token") != undefined,
    redirect: "login"
},
component: () => import('@/views/control')

Bloquear una ruta por permisos.

Si el usuarios no contiene los permisos la navegación no continua.

path: '/control',
meta: { permissions: [100, 105, 700]  },
component: () => import('@/views/control')

Extras

Automaticamente se agregaran todas las rutas que esten especificadas en archivos .js dentro de src/rutes.

Las rutas tienen una barra de carga en la parte superior de la pagina.

Utilizar Querys

Las querys sirven para mantener estados de la aplicación en la URL.

Router.getQuery() //Obtiene objeto de la query
Router.setGroupQuery(name, querys) //Setear un grupo de querys
Router.getGroupQuery(querys) //Obtiene el grupo completo de querys.
Router.deleteGroupQuery(name, ?query_key) // Eliminar grupo de querys, si no se especifica el query_key se elimina el grupo completo, de lo contrario solo la llave indicada.
Router.setQuery(querys); // Setear objeto de query.
Router.deleteQuery(name); // Elimina Query

DataStore (VUEX)

Para utilizar DataStore se require instalar VUEX, se cargaran todos los modulos que se encuentren dentro de @/datastore/modules. El nombre de los modulos se define con el nombre del archivos .js Para configurar en el inicio de Vue utilizar DataStore.store.

new Vue({
    router,
    store: DataStore.store,
    render: function (h) { return h(App); },
}).$mount('#app')

DataStore tambien sirve para manejar los localStorage.

Soporta todo tipo de formato que pueda ser serializado a JSON.stringfy -

 DataStore.delete(key)
 DataStore.save(key, data)
 DataStore.get(key)
 DataStore.clearAll()

Task y TaskController

Task es una promesa, cuenta con un controlador para manejar multiples tareas a la vez.

var pc = new TaskController();
for (var i = 0; i < files.length; i++) pc.add(this.addFile(files[i]));
pc.then(() => this.eventAdd(files));

La tarea no inicia si no se utiliza then()

var t = new Task((success) => {success("resultado")});
//La tarea esta creada pero no inicia.
t.then() // INICIA la tarea.

Tambien se puede forzar un inicio mediante.
new Task((success) => {success("resultado")}).start();

Inputs

Aqui se var a ir agregando todos los componentes de tipo entrada.

Input-File

Input file sirve para trabajar con la carga de archivos, tiene vista preview en imagenes y otros archivos.

<input-file></input-file>

Configuraciónes

config: {
    max_files: 3,
    accept: ['.jpg', '.png', '.docx'],
}

Eventos

onadd(files[]) // Se llama cuando se agregan archivos.

ondelete(files[]); // Se llama cuando se eliminan archvios

input-textarea

Crear un componente de edición de texto (richt)

usar <input-textarea>

El v-model funciona solo en una dirección, para modificar el contenido del textarea utilizar .setContent("TEXT")