Ionic 2. Checking permissions

Following with what was discussed in the last entry in Android since Marshmallow is necessary to check at run time the permissions cataloged how to dangerous and read or write in the external storage is one of them. In the case at hand, for restore the backup, as the app writes in the sandbox it isn't necessary to check the permissions. 

For check the permissions, we use the diagnostic plugin and we will use the same plugin for check permissions for access to location, sensors, phone, contacts, etc... but in this entry I only will write over the access to the external storage.

Well, first we install the plugin

   ionic plugin add cordova.plugins.diagnostic

And

   npm install --save @ionic-native/diagnostic

And we create a service to manage all the permissions

   ionic g provider PermissionsService

And we edit ../providers/permissions-service.ts and write

import { Injectable } from '@angular/core'; import { Platform } from 'ionic-angular'; import 'rxjs/add/operator/map'; import { Diagnostic } from '@ionic-native/diagnostic'; /* Generated class for the PermissionsService provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular 2 DI. */ @Injectable() export class PermissionsService { constructor(public platform: Platform, public diagnostic: Diagnostic) { }
isAndroid() { return this.platform.is('android'); }
checkWritePermission(): Promise<boolean> return new Promise (resolve => if (this.isAndroid) { this.diagnostic.isExternalStorageAuthorized() .then(authorized => { if(authorized) { resolve(true); } else { this.diagnostic.requestExternalStorageAuthorization() .then(authorization => { resolve (authorization == this.diagnostic.permissionStatus.GRANTED); }); } }); } }); } }

And we use it

createBackup () { if (this.permissions.isAndroid()) {< this.permissions.checkWritePermission().then(permission => { this.backup(); }, error => { console.log(error); }); } }

And the result looks like this

Ionic 2. Nested lists

One of the things that surprised me about Ionic 2 it is the ease with which it creates lists, an array in the controller and a *ngFor directive in the template is sufficient to create a list. A little example can be

In the controller

months: string[] = ['January', 'February', 'March', 'April',
                    'May','June', 'July', 'August',
                    'September', 'October', 'November',
                    'December'];

An in the template

<ion-list inset> <button ion-item *ngFor="let month of months" (tap)="monthSelected(month)"> {{ month }} </button> </ion-list>

An the result looks like

Easy and quick. But if you need put a list inside another, the things change.  It's not that it's more difficult, but the things change, starting in the data model and finishing in the template.

This is the way in that I solve this problem, I don't know if it is the best way, but it is the one I used and it works.

First the problem, I need put inside of each month in the list another list with his correspondant expense. So the data that I need are the month name, the total expense of the month, the correspondent expense and his amount.

The result has to be something like this

For that in the controller I have an array with the expenses

expenses: string[] = ['Shopping basket', 'Clothes', 'Electronics', 'Phone', 'Electricity','Fuel', 'Maintenance', 'Transport', 'Hairdressing, ...', 'Health', 'Entertainment','Taxes', 'Rentals'];

And an interface like that

interface Result { month: string; totalMonth: number; amount: number[]; }

An array of Result to which I call result will be the one that will contain the data that we pass to the template. For loop in the result I use the template form of the *ngFor as follows

<template ngFor let-entry [ngForOf]="result"> <ion-list inset> <ion-item> <ion-label class="month">{{ entry.month }}</ion-label>
<ion-label class="expense">{{entry.totalMonth }}$</ion-label> </ion-item> <ion-list inset> <ion-item *ngFor="let expense of entry.amount; let i = index"> <ion-label class="entry">{{ expenses[i] }}</ion-label> <ion-label class="expenseentry">{{ expense }}$</ion-label> </ion-item> </ion-list> </ion-list> </template>

How say here ngForOf is a directive that instantiate a template once per item for an iterable.  For each iteration the entry variable contains an Result, in the first list, the month list, we take the name of the month and the total expense.
Next, we create another list, the expenses list. For that the Result contains an array with the amount of the expense but not the name. The name is in another array (the cause that it is in another array and not in the Result that's not the point) so we will use another value of ngForOf. It is the value index, this value corresponds to index of the current item in the iterable. For obtain the values of the amount array we use an *ngFor, the difference is the introduction of the value index that we use for obtain the name of the expense.

And that's all, our nested list is ready.

Ionic 2, using ActionSheetController

Recently I have found myself in a situation that has led me to choose between different options. I wanted edit an entry in the database, first I just wanted to modify two fields and use an AlertController for that. Then I thought that I could modify a third field and here appears the problem, this field only can be modified using a checkbox input and a checkbox input can't be mixed with a text input.

For solve this, my first idea was make a new page and use components <ion-select> and <ion-input> but I think it's more natural realize the operation in the same page so that I need  to use an AlertController. For that I have divided the task in two AlertController, one with two text inputs and one with the checkbox input. And for show the two options to user an ActionSheetController. Here you can find more info.

The first step is import the ActionSheetController  from ionic-angular in our controller

   
   import { NavController, AlertSheetController } from 'ionic-angular'

Next we add the ActionSheetController how a parameter in the constructor

   
   constructor(public navCtrl: NavController, 
               public alertCtrl: AlertSheetController) {

   }   

And now we create a function to present the alert to the user

  showMenu(entry, expense) {
  
    let optionsMenu = this.actionSheetCtrl.create({
      title: '',
      buttons: [
        {
          text: 'Edit entry',
          role: 'edit',
          handler: () => {
            
             this.editEntry(entry, expense);

          }
        },
        {
          text: 'Move to',
          role: 'move',
          handler: () => {
            
             this.moveEntry(entry, expense);
            
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            optionsMenu.dismiss();
          }
        }
      ]
    });

    optionsMenu.present();
  }

And two functions editEntry(entry, expense) and moveEntry(entry, expense) with his correspondant AlertController to realize the task. 

The result looks like