Git Product home page Git Product logo

plex's Introduction

ANDES

Plex: UI/UX para ANDES

Plex es un conjunto de componentes de UI/UX para el proyecto ANDES.

Instalación

  1. Crear una nueva aplicación con angular-cli

    ng new my-app
    cd my-app
    
  2. Descargar desde npm

    npm install @andes/plex --save
    
  3. Crear un nuevo archivo src/styles.sass y editarlo para vincular al archivo .sass de Plex

    @import '~andes-plex/src/lib/styles.sass';
  4. Registrar en angular-cli.json los siguiente archivos:

    ...
    "styles": [
       "styles.sass",
    ],
    "scripts": [
        "../node_modules/intro.js/intro.js"
    ],
    ...
  5. Modificar app.component.html con el siguiente contenido:

    <plex-app>  
    </plex-app>
  6. Crear un componente home.component.ts con el siguiente contenido:

    import { Component } from '@angular/core';
    
    @Component({
      template: 'Hello World',
    })
    export class HomeComponent {
    }
  7. Crear el archivo app.routing.ts y registrar el componente:

    import { Routes, RouterModule } from '@angular/router';
    import { ModuleWithProviders } from '@angular/core';
    import { HomeComponent } from './home.component';
    
    const appRoutes: Routes = [
     { path: '**', component: HomeComponent } 
    ];
    
    export const appRoutingProviders: any[] = [];
    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  8. En app.module.ts importar PlexModule y registrar los routings y el servicio Plex:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { Plex, PlexModule } from '@andes/plex';
    import { routing, appRoutingProviders } from './app.routing';
    
    // Components
    import { AppComponent } from './app.component';
    import { HomeComponent } from './home.component';
    
    @NgModule({
     declarations: [
       AppComponent,
       HomeComponent
     ],
     imports: [
       BrowserModule,
       FormsModule,
       HttpModule,
       PlexModule,
       routing
     ],
     providers: [
       Plex,  
       appRoutingProviders  
     ],
     bootstrap: [AppComponent]
    })
    export class AppModule { }
  9. Correr la aplicacion ng serve

    ng serve
    
  10. Navegar hasta http://localhost:4200

Publicación

La siguiente secuencia de pasos permite publicar la librería en NPM:

  1. Incrementar la versión package.json y package-lock.json. Por ejemplo "version": "1.1.17"
  2. Realizar commit con la nueva versión
  3. Crear un tag con la versión, tiene que ser la misma que en package.json. Por ejemplo git tag 1.1.17
  4. Realizar push de los cambios
  5. Realizar el PR con la versión y luego mergear a Master
  6. Volver a Master y obtener últimos cambios
  7. Ejecutar npm login (usando las credenciales de Andes)
  8. Ejecutar npm publish

plex's People

Contributors

andrrrl avatar condorpiedra avatar gabocancellieri avatar jfgabriel avatar jsantarelli avatar juuliotero avatar liquid36 avatar ma7payne avatar manouman avatar martinebucarey avatar matiurrutia avatar nahirsaddirto avatar negro89 avatar nicodino avatar palita1991 avatar semantic-release-bot avatar silviroa avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

liquid36 gpalli

plex's Issues

Textarea en plex-text

Agregar parámetro que me permita indicarle a un plex-text que se trata de un textarea o bien agregar un plex-textarea.

Header

Comportamiento actual: Al ejecutar un componente en cuyo template el no se haya declarado header, se dibuja la linea separadora.

Comportamiento esperado: Si no se declara header, la linea no debería dibujarse.

pantallazo-2018-11-06 11-56-46

Validaciones min - max con plex-int

Buen día dado el siguiente ejemplo:

<plex-int [(ngModel)]="data[tipoPrestacion.key].horas" placeholder="Ingrese cantidad de horas" name="CantidadHoras" suffix=" Hs/Día "
min="0" max="24" (change)="devolverValores()" *ngIf="data[tipoPrestacion.key].trabaja" >

El componente de plex-int no esta realizando las validaciones determinadas por min-max.

Saludos.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.


Good luck with your project ✨

Your semantic-release bot 📦🚀

Select - Error en consola al seleccionar con enter

En un plex-select, al seleccionar una opción con la tecla enter se muestra este mensaje de error en consola

image

Esto pasa en todos los plex-select, incluso en uno con pocas opciones como en el filtro de estado dentro de la página de gestor de agendas

Pasos para reproducir el problema

  1. Buscar un plex-select (Gestor de agendas)
  2. En el filtro de Prestación escribir 'medicina'
  3. Seleccionar la primera opción utilizando la tecla enter
  4. Mirar el error en la consola

Types para plex-float

Que se pueda asignar types (success, warning, danger) al componente plex-float, de manera que el color del valor contenido en el mismo varíe de color según corresponda.

plex-tab

Agregar una propiedad que indique el indice del tab activo

plex-wrapper: revisar uso de ellipsis en labels

Actualmente plex-wrapper está aplicando estas reglas:

label {
    white-space: nowrap; 
    width: 190px; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

Lo cual genera que no se puedan usar labels más descriptivos, aun cuando hay espacio de sobra.

ellipsis

Plex-Alert

Cuando muestra el alert espera un click para ocultarse, si el click lo damos en cualquier lugar de la pantalla que no sea sobre el alert da un error en consola.

labelField en plex-select

Cuando utilizo labelField="paciente.nombre" por ejemplo me muestra -undefined-.

Se debería poder visualizar propiedades del objeto utlizando una notacion de . (puntos) o bien corchetes [].

FormControlName

Si es posible agregar la directiva FormContolName para que funcionen los forms reactivos (se puede recibir en @input)

Items del dropdown desde función

Necesito generar las opciones que se van a ejecutar en un dropdown dentro de un loop, y que cada elemento tenga la misma acción definida pero con un parametro enviado distinto.
Al parecer por algún motivo pierdo el vínculo hacia la acción, puede ser un bug o bien un capa mil.

¿Que estoy haciendo?

<plex-dropdown label="..." [items]="asignarItems(problema)">

Componente:

asignarItems(problema) {
let _items ;

_items = [
    new MenuItem({ label: 'Evolucionar Problema', handler: () => { this.evolucionarProblema(problema) } }),
    new MenuItem({ label: 'Transformar Problema', handler: (() => { this.transformarProblema(problema) }) }),
    new MenuItem({ label: 'Enmendar Problema', handler: (() => { this.enmendarProblema(problema) }) }),
    new MenuItem({ label: 'Ver Detalles', handler: (() => { this.verDetalles(problema) }) }),
    new MenuItem({ label: 'Item con handler', icon: 'wrench', handler: (() => { alert('Funciona!'); return false; }) })
];

return _items;

}

Bug en select múltiple

Al seleccionar un item, hay que clickear fuera del select para que se cierre el desplegable.

plex-select: falta ícono indicando que está en "modo buscador"

plex-select se puede configurar para funcionar como un buscador o filtro (se empieza escribir y se muestran resultados que coincidan con lo escrito).
El problema es que visualmente es un campo de texto libre, y es confuso sobre si es un buscador o un campo de texto.
Se propone agregar un iconito de una lupa o similar, indicando que funciona de esa manera.
Dato extra: siempre dar una ayuda al usuario por medio de placeholders u otros recursos de ayuda.
En el adjunto corresponde al primer input, con foco.
image

'setContents' of undefined

Error en consola cuando usamos el Rich Text .

<plex-text label="Escriba el informe" [(ngModel)]="registro.valor" name="informes" [html]="true" [readonly]="false">

setcontent

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.


Good luck with your project ✨

Your semantic-release bot 📦🚀

Permitir class en plex-button

Necesito estilizar los botones de la ejecución de RUP con colores distintos según el tipo de concepto.

El fix creo que sería permitir un Input para pasarle una clase al botón.

Plex-richText

Crear el componente de texto enriquecido para que puedan elaborarse los informes asistenciales de ANDES.

Estilos en plex accordion

Estilizar y achicar espacios en blanco innecesarios.

Permitir armar a medida el header del accordion, no pasar un string, permitiendo agregar botones, badges, etc.

Extra: Agregar en el header border-left de algun color y algunos px de ancho para poder armarlos como adjunto en limagen.

captura de pantalla 2017-06-12 a las 2 38 42 p m

Comportamiento plex-bool

Ejemplo donde se detecto el error:
html:
Si en un átomo lo utilizo de la siguiente manera:
<plex-bool [(ngModel)]="data[tipoPrestacion.key]" label="Recibe asistencia económica ?" type="slide"
(click)="devolverValores()">

Component.ts:
ngOnInit() {
this.data[this.tipoPrestacion.key] = (this.datosIngreso) ? this.datosIngreso : false;
} //ngOnInit()

Al llamarlo desde una molécula no funciona, cuando en el átomo seleccionas el slide en true, a la molecula le pasa un false, lo mismo a la inversa.

Para que funcione correctamente se tiene que programar de la siguiente manera:
html:
<plex-bool [(ngModel)]="data[tipoPrestacion.key].activo" label="Recibe asistencia económica ?" type="slide"
(click)="devolverValores()">

Component.ts:
ngOnInit() {
this.data[this.tipoPrestacion.key] = (this.datosIngreso) ? this.datosIngreso :{activo:false} ;
} //ngOnInit()

Pero este comportamiento no es deseado ya que los datos quedarían guardados de una forma distinta que a la que se esta trabajando en forma estandar.

Otra bugs detectado es que si utilizamos el evento (change)="devolverValores()" en vez del (click), el evento change nunca es llamado. En el código de plex esta encapsulado en otro evento.

En conclusión necesitaríamos que en este componente se ejecute el evento change.

Saludos.

plex-select - $order

Buenas,

Estamos teniendo un comportamiento erróneo al cargar un arreglo en plex select, le agrega un elemento $order a cada elemento de la lista, lo cual al intentar realizar un update en la base de datos da el siguiente error:

Invalid atomic update value for $order...

El comportamiento esperado es que No se debería agregar ninguna propiedad extra al documento.

Gracias,

Saludos.

Limpiar text al apretar esc

Al apretar la tecla ESC limpiar el contenido del plex-text como si se usara la "x".
¿Puede ser posible? ¿Muy invasivo?

plex-accordion

Estaría bueno que se pueda setear si el accordion está desplegado o no x default.

PLEX-DATE: Fecha incompleta/invalida

Comportamiento actual

Al ingresar la fecha por teclado en el input, plex-date actualiza el valor del atributo bindeado con una fecha autocompletada como se ejemplifica a continuación:

  • Si ingreso 2 --> 02/MesCorriente/AñoCorriente
  • Si ingreso 22 --> 22/MesCorriente/AñoCorriente
  • Si ingreso 222 --> 22/02/AñoCorriente
    etc.

De similiar manera, si, por ejemplo, quiero cambiar de año manualmente, ocurre lo siguiente:

  • fecha actual por defecto: 28/05/2019
  • borro último digito del año: 28/05/201 --> 28/05/0201
  • agrego nuevo dígito del año: 28/05/2018 --> 28/05/2018

Este comportamiento afecta en los casos en que en la app dispara la búsqueda en el evento de cambio, sobretodo en el último caso descrito, cuando se busca por fecha de inicio, disparando primero la búsqueda con valor de fecha 28/05/0201 y después 28/05/2018. Siendo la primera búsqueda por un rango de fecha más grande (año de inicio 201) que la segunda, esta consulta es la última en resolverse, produciendo un resultado de búsqueda fuera de rango.

Resultado esperado

Plex-select debería:
a) Validar que la fecha está completa antes de actualizar el valor al atributo bindeado en el componente.
ó b) Poder ser configurable si autocompleta fechas o no.

Pasos para reproducir el problema

Watch the video

Tamaño del textarea del rich text

El tamaño del textarea del rich text es muy grande para la ejecución de RUP. Quizás podríamos pasar el tamaño por parámetro para los diferentes componentes!

issueplex

Change en plex-text

EL evento change se ejecuta cuando se agrega un carácter y también cuando se cambia el foco. Esto provoca que al momento de realizar la siguiente acción se deba esperar la ejecución del change. Ej: en la búsqueda del paciente, al seleccionar uno de la lista, la primera vez se debe hacer un doble click en el botón de selección o el botón de nuevo paciente.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.