mall-app/src/app/malls/malls.page.ts

import { Component, OnInit } from '@angular/core';
import { MallService } from '../services/mall.service';
import { IMall } from '../models/mall';
import { Router } from '@angular/router';

@Component({
    selector: 'app-malls',
    templateUrl: './malls.page.html',
    styleUrls: ['./malls.page.scss'],
})
export class MallsPage implements OnInit {
    selected_tab: string = 'you';
    malls: Array<IMall>;
    show_sort_popup: boolean = false;
    selected_sort: string = null;

    constructor(
        private mallService: MallService,
        private router: Router
    ) { }

    ngOnInit() {
    }

    ionViewDidEnter() {
        this.mallService.getAllMalls().then((data: Array<IMall>) => {
            this.malls = data;
        });
    }

    showMallDetails(mall: IMall) {
        this.router.navigate(['/mall-details', { mall_id: mall.id }]);
    }

    sortBy(type: string) {
        this.selected_sort = type;
        switch(this.selected_sort) {
            case 'name': this.malls.sort(function(a, b){
                if(a.name < b.name) { return -1; }
                if(a.name > b.name) { return 1; }
                return 0;
            });
            break;
            case 'rating': this.malls.sort(function(a, b){
                if(a.rating < b.rating) { return -1; }
                if(a.rating > b.rating) { return 1; }
                return 0;
            }).reverse();
            break;
        }
    }

    togglePopup() {
        this.show_sort_popup = !this.show_sort_popup;
    }

}