@inovative/mall

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

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Aug 13, 2018Jun 8, 2018Minified + gzip package size for @inovative/mall in KB

Readme

🔥🏬 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();
    }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.