🔥🏬 Mall

helper for angular firestore (on top angularfire2) with pagination and simpler query syntax

todo for mall-1.0.0

• improve multi-collection pagination
• docs
• tests

example

import { Component, OnInit } from '@angular/core';
import { Mall } from '@inovative/mall';

@Component({
	template: `
		<ul>
			<li *ngFor="let store of stores | async">
				<button (click)="delete(store)">usuń: </button>
				<span>{{ store.doc.id }}</span>
			</li>
		</ul>
	`
})  
export class Component implements OnInit {
    constructor(private mall: Mall) { }
    stores: Observable<any>; // [{ ..., doc }, { ..., doc }]
    collection = 'store';

    ngOnInit() {
        this.stores = this.mall.collection(this.collection);
    }

    edit(store, value) {
        store.doc.ref.update(value)
            .then(() => {/* success */});
    }

    delete(store) {
        store.doc.ref.delete()
            .then(() => {/* success */});
    }

    add(store) {
        this.mall.add(this.collection, store)
            .then(() => {/* success */});
    }
}

query (firestore syntax or custom mall syntax)

firestore syntax

export class Component implements OnInit {
    constructor(private mall: Mall) { }
    @Input() owner: string;
    @Input() limit: number;
    stores: Observable<any>;

    ngOnInit() {
        this.stores = this.mall.collection('store', ref => {
            let query = ref;

            if (this.limit) {
                query = query.limit(this.limit);
            }

            if (this.owner) {
                query = query.where('owner', '==', this.owner);
            }

            return ref;
        });
    }
}

custom mall syntax

export class Component implements OnInit {
    constructor(private mall: Mall) { }
    @Input() owner: string;
    @Input() limit: number;
    stores: Observable<any>;

    ngOnInit() {
        const { owner, limit } = this;

        this.stores = this.mall.collection('store', {
            where: { owner },
            limit            
        });
    }
}

pagination (experimental mutli collection querying)

import { Component, OnInit } from '@angular/core';
import { Elevator } from '@inovative/mall';

export class Component implements OnInit {
    constructor(private elevator: Elevator) { }
    loading: Observable<boolean>;
    done: Observable<boolean>;
    stores: Observable<any>;

    ngOnInit() {
        const elevation = this.elevator.summon('store', { limit: 4, where: { city: 'NY' } });

        this.loading = elevation.loading;
        this.stores = elevation.items;
        this.done = elevation.done;
        this.elevation = elevation;
    }

    searchByCategory(category) {
        this.elevation.reevaluate({ where: { category } });
    }

    loadMore() {
        this.elevation.more();
    }
}

experimental

import { Component, OnInit } from '@angular/core';
import { Elevator } from '@inovative/mall';

export class Component implements OnInit {
    constructor(private elevator: Elevator) { }
    loading: Observable<boolean>;
    done: Observable<boolean>;
    stores: Observable<any>;

    ngOnInit() {
        const elevation = this.elevator.summonMany([
            { 
                collection: 'store', 
                limit: 4 
            }, 
            {
                collection: 'shop',
                limit: 3
            }
        ]);

        this.loading = elevation.loading;
        this.stores = elevation.items;
        this.done = elevation.done;
        this.elevation = elevation;
    }

    searchByCategory(category) {
        this.elevation.reevaluate([{ where: { category } }, { /* no changes for shop collection */ }]);
    }

    loadMore() {
        this.elevation.more();
    }
}