https://github.com/tolemac/tolepickout
https://github.com/tolemac/tolepickout
angular angular-components chosen ng-select select typescript
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tolemac/tolepickout
- Owner: tolemac
- Created: 2017-05-11T12:09:22.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-12T12:01:07.000Z (about 9 years ago)
- Last Synced: 2025-10-30T04:45:04.157Z (8 months ago)
- Topics: angular, angular-components, chosen, ng-select, select, typescript
- Language: TypeScript
- Size: 43.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TolePickout
> Experimental project! Not ready to use.
> Proyecto experimental, no preparado para ser usado.
Componente visual Angular (TypeScript) que permite seleccionar un elemento de una lista al estilo de [select2](https://select2.github.io/examples.html), [chossen](https://harvesthq.github.io/chosen), [selectize](http://selectize.github.io/selectize.js/) o [ng-select](https://basvandenberg.github.io/ng-select).
Requisitos generales del componente:
* En principio debe tener la apariencia de un combobox.
* Cuando coge el foco debe mostrar una lista de opciones a seleccionar y ser capaz de seleccionar uno o más elementos.
* Debe aceptar un template para renderizar cada item de la lista.
* Debe aceptar un template para renderizar el elemento seleccionado.
* Debe aceptar un template para una zona de filtro.
* Debe ser capaz de filtrar los elementos de la lista por medio de un objeto de filtro.
* Debe cargar elementos gradualmente haciendo uso de paginación incremental, carga unos cuantos y cuando llegas al final de la lista vuelve a pedir más.
* En dispositivos con pantallas pequeñas la lista de selección debe ocupar toda la pantalla.
Para facilitar su uso:
* Deberá contar con plantillas y opciones por defecto para que no sea complicado de usar en primera instancia.
* Deberá ser capaz de funcionar con una simple lista de strings o una simple lista de objetos.
Requisitos técnicos del componente:
* Debe implementar ValueAccesor para poderlo usar con NgModel.
* De la opción seleccionada debe extraer un valor, un identificador, que será el valor guardado en ngModel.
* Debe usar virtual-scroll para poder albergar todos los elementos que queramos. Ver estas referencias:
https://medium.com/@rintoj/building-virtual-scroll-for-angular-2-7679ca95014e
http://rintoj.github.io/angular2-virtual-scroll
* Debe poder ser alimentado mediante un objeto adapter el cual debe cumplir con contrato como este:
````typescript
interface PickOutAdapter {
getItemId(item: Item): any;
getItemText(item: Item): any;
getItems(filter: any) : Promise>;
getItemByValue(value: any): Promise;
}
type AdapterResult = {
items: Item[];
hasMore: boolean;
}
````
Su uso debe ser algo parecido a esto:
````html
{{selected.name}}
{{item.name}} - {{item.surname}}
Name
````