Novel Personal Mantras

    @inovative/mall
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.0 • Public • Published

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

    Install

    npm i @inovative/mall

    DownloadsWeekly Downloads

    0

    Version

    1.0.0-beta.0

    License

    none

    Unpacked Size

    281 kB

    Total Files

    32

    Last publish

    Collaborators

    • inovative