@marxa/index v12.2210.2

MxIndex (beta)

Complemento para crear listas a partir de consultas de Firebase Firestore en Angular

Primerso pasos

Sigue estos pasos para empezar un proyecto Firebase - Angular

1. Ve a Firebase console y pícale en Crear proyecto o selecciona alguno que ya hayas creado.
2. Ve a la configuración y baja a la parte Fireabase SDK y pícale en la opción de Configuracion.
3. Copia las lineas de código que están entre los corchetes
4. Ve a tu proyecto de Angular y entra en el archivo src/environments/environment.ts y pega las lineas de código en una variable nueva. El código se debe ver así:

   export  const  environment  =  {
   	production:  false,
   	firebaseConfig:  {
   		apiKey:  "AIzaS++++++++++++++++++++++++++",
   		authDomain:  "++++++++.firebaseapp.com",
   		projectId:  "++++++++",
   		storageBucket:  "+++++++++.appspot.com",
   		messagingSenderId:  "0000000000",
   		appId:  "1:000000000000:web:++++++++++++++",
   		measurementId:  "G-++++++++++"
   	}
   }; 

 5. Corre los siguientes comandos y sigue sus respectivas instrucciones:
	 `ng add @angular/fire`
	 `ng add @angular/material`
  6. Inicializa tu proyecto de **Firebases** en `app.module.ts`:
```ts
import { AngularFireModule } from "@angular/fire";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

7. Ahora sí, ya puedes instalar esta librería:

Como dependencia Node

1. Inicia sesión en https://marxa.jfrog.io/. En el menú de navegación ve a Set me up. y sigue las instrucciones para ingresar tus contraseñas.
2. Si usas VSCode, en la terminal corre el comando code ~/.npmrc, si no, navega a ~/.npmrc en tu explorador de archivos y ábrelo.
3. Pega el código resultante de las instrucciones, asegurándote que la URL del artifact tenga el prefijo @marxa: en cada uno de los registros. Ejemplo:

_auth = <PASSWORD> (converted to base 64)
email = youremail@email.com
always-auth = true
@marxa:registry = https://marxa.jfrog.io/artifactory/api/npm/mx-library-npm/

3. Importa la dependencia

npm i -s @marxa/devkit

Como submódulo

1. Asegúrate de que tienes permisos para copiar el repositorio
2. Abre la terminal en la raíz de tu proyecto
3. Corre los comandos

git submodule init
git submodule add -b develop https://github.com/Marxa-Digital/mx-devkit libs/marxa/devkit

Modo de uso

En algún componente que necesites deberás cargar el serivicio.

Inicializa el index

import { MxIndex } from '@marxa/devkit';

export class AppComponent implements OnInit {

  products: Product[] = []
  products$: Observable<Product[]>
	constructor(
    private _index: MxIndex
  )  {}

  ngOnInit(){
    // Requiere una ruta de firestore, un selector y la cantidad por página
    this._index.initIndex( `productos`, 'id', 10 )
    // Para obtener la data puedes suscribirte a este método
    this._index.queryData.subscribe( data => {
      this.products = data
    } )
    // Podrías también acceder a la data en un observable
    this.producs$ = this._index.queryData

    // Puedes suscribirte al observable que indica cuando aún firestore apenas hace la consulta
    this._index.loadingQuery.subscribe( (loading: boolean) => {
      
    } )
    
  }

}

Controla las páginas

Puedes cargar el index-caller el cuál te permitirá controla el comportamiento del index y mandar a llamar más elementos de la colección

  <mx-index-caller
  prevBtn="Anterior"
  nextBtn="Siguiente" 
  colorBtn="primary" 
  centerMessage="{
    showing: 'Mostrando',
    from: 'del',
    to: 'al'
  }"
  merge="false"
  (pageEvent)="$event"
  ></mx-index-caller>

Filter component

El componente auxiliar para realizar filtrados y ordernamiento puedes trabajarlo de la siguiente manera.

<mx-sort-options [fields]="['id', 'referencia']" ></mx-sort-options>

Este componente muestra campos de input para filtrados dinámicos. **Las búsquedas en firestore dependen de la sensibilidad a las Mayúsculas y minúsculas

Servicio

Propiedades

Métodos

Init Index

Inicializa las propiedades para la indexación. Si la colección está vacía, el parámetro queryData no recibe evento.

Ejemplo

  this.initIndex('productos', 'referencia', 20, 'desc', true)

Change Page

Ejecuta consultas con la siguiente o la anterior cantidad configurada. Si la consulta resulta vacía, el parámetro queryData no recibe evento.

Ejemplo

this.changePage('next')

Set field to sort

Indica o cambia el campo con el que se harán las consultas

Ejemplo

this.setFieldtoSort('referencia')

Set order sort

Indica o cambia el ordenamiento de las consultas

Ejemplo

this.setOrderSort('asc')

Set criteria filter

Indica o cambia el criterio a comparar en las consultas.

Ejmeplo

this.setCriteriaFilter('productName', 'referencia', 'asc' )

Modelos

mxIndexAnchor

mxIndexEvent

mxIndexCenterMessage

This library was generated with Angular CLI version 11.0.9.