Medisoft.Core es un paquete que permite utilizar la interfaz de usuario utilizada en los productos de Medisoft. Esta libreria contiene una serie de componentes y herramientas para instanciar dialogos, paneles, menus laterales, iteracciones, navegacion y todo esto con un diseño completamente basado en ElementUI (para los elementos y controles de interfaz de usuario) y Bootstrap (para manejar el diseño, incluidos contenedores de envoltura, y grilla o cuadricula).

Instalacion

Con NPM:

npm install medisoft.core

Con yarn:

yarn add medisoft.core

Inicio rapido

En el archivo main de su proyecto:

import Vue from 'vue'
import MedisoftCore from 'medisoft.core'

MedisoftCore.install(Vue, { lang: 'es' })

En su archivo App:

<template>
    <div id="app">
        <medisoft-layout>
            <div></div>
        </medisoft-layout>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

Medisoft.UI.Core

Este proyecto permite utilizar el diseño, la disposicion o layout de los productos de la familia Medisoft. Es importante tener en cuenta que es necesario que el proyecto este diseñado bajo tecnologia Vue.js de lo contrario es imposible utilizar este paquete.

Nota: Es mas que importante resaltar que requiere un token de Medisoft OAuth para que este paquete funcione de forma correcta y asi eliminar los mensajes de advertencia de ausencia de autenticacion.

Disposicion de los elementos (layout) [medisoft-layout]

Consta de varias secciones las cuales son las siguientes:

• app-logo: esta seccion se invoca en el control con el atributo logo-mini y logo-max
  • logo-mini (Object { encode, data }): Este atributo recibe la imagen que se vera en la parte superior del layout cuando el menu lateral (left-menu) esta minimizado. La propiedad encode recibe el formato en que se esta enviando la imagen que se mostrara, en la propiedad data se envia en base64 la imagen a mostrar.
  • logo-max (Object { encode, data }): Este atributo recibe la imagen que se vera en la parte superior del layout cuando el menu lateral (left-menu) esta expandido. La propiedad encode recibe el formato en que se esta enviando la imagen que se mostrara, en la propiedad data se envia en base64 la imagen a mostrar.
• title: Seccion en donde se muestra el titulo de la vista que se esta mostrando, este valor es asignado mediante el metodo en el control llamado setTitleApp.
• top-menu: En esta area se agregan los botones o controles personalizados que se mostraran en la parte superior derecha.

Procedimientos

setPanelVisibility(panel, show)

Cambia la visibilidad de un panel, en caso que no se desee mostrar o no se vaya a utilizar en el momento.

• panel {String} - Nombre del panel del que se desea cambiar su visibilidad, los valores permitidos son: top, left, right
• show {Boolean} - Define si lo quires mostrar u ocultar el panel que definio en el campo anterior.

setDrawerVisibility(drawer)

Muestra un Drawer en especifico de los tres disponibles dentro del layout 'left' y 'right' dentro de los cuales se pueden insertar componentes personalizados usando los slots definidos para ello.

• drawer {String} - Nombre del drawer el cual se desea mostrar o iniciar.

setTitleApp(title)

Cambia el titulo de la interfaz, es util siempre que se cambia de vista para mostrarle al usuario dentro de que vista o en que lugar dentro de la aplicacion se encuentra.

• title {String} - Titulo de la vista a mostrar.

setDialogDrawer(codeDialog, titleDialog, sizeDialog, options, useHistory, target)

Define el contenido a mostrar del dialogo del layout, automaticamente ejecuta dicho dialogo y lo muestra al usuario.

• codeDialog {String} - Nombre personalizado del dialogo, con lo cual se puede hacer la personalizacion de condicion para mostrarlo dentro del dialogo
• titleDialog {String} - Titulo del dialogo a iniciar
• sizeDialog {String} Opcional - Tamaño del dialogo a iniciar el cual recibe valores de la siguiente manera:
  • l (ancho 50%): Tamaño tradicional de dialogos de editores.
  • m (ancho 70%): Tamaño extendido de dialogos
  • x (ancho 98%): Tamaño maximo de dialogos principales
• options {Object} Opcional - Opciones adicionales para mostrar el dialogo
  • options.confirmCallback {Function} - Callback que se debe ejecutar al momento de terminar una accion o procedimiento de confirmacion en el dialogo.
  • options.cancelCallback {Function} - Callback que se debe ejecutar al momento de terminar una accion o procedimiento de cancelacion en el dialogo.
  • options.arguments {Object} - Objeto personalizado con el que expone algunos argumentos opcionales que pueda necesitar su dialogo.
• useHistory {Boolean} Opcional - Define si es necesario enviar al historial el ultimo dialogo antes de actualizar con el nuevo en caso que se desee cambiar de dialogo sin haber cerrado el anterior, esto envia a memoria el estado actual del dialogo de tal forma que habilita un boton dentro del dialogo al lado del titulo del mismo para regresar al anterior en el punto en que se encontraba. cacion de la version inicial del core