Merge pull request #3 from raniel90/dev

Dev Merge
raniel90 · Feb 12, 2019 · c71226f · c71226f
2 parents 1ebb3e5 + 9d504e5
commit c71226f
Show file tree

Hide file tree

Showing 20 changed files with 529 additions and 104 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules/
 public/
 www/
 resources/
-plugins/
+plugins/
+*_hosting*
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "cordova-sqlite-storage": "2.6.0",
     "core-js": "^2.5.4",
     "firebase": "^5.8.0",
+    "moment": "^2.24.0",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"
   },

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ const routes: Routes = [
   { path: 'music', loadChildren: './music/music.module#MusicModule' },
   { path: 'worship', loadChildren: './worship/worship.module#WorshipPageModule' },
   { path: 'select-music', loadChildren: './select-music/select-music.module#SelectMusicPageModule' },
+  { path: 'worship-filter', loadChildren: './worship-filter/worship-filter.module#WorshipFilterPageModule' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

diff --git a/src/app/music/music.component.html b/src/app/music/music.component.html
@@ -2,12 +2,12 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-button (click)="goBack()">
-        <ion-icon color="light" slot="icon-only" name="arrow-back"></ion-icon>
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Música</ion-title>
     <ion-buttons slot="primary" *ngIf="musicForm.value.id">
-      <ion-button color="light" (click)="presentAlertRemoveMusic()">
+      <ion-button (click)="presentAlertRemoveMusic()">
         <ion-icon name="trash"></ion-icon>
       </ion-button>
     </ion-buttons>
@@ -16,32 +16,44 @@
 
 <ion-content>
   <form [formGroup]="musicForm">
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>Nome da música</ion-card-title>
-        <ion-item no-padding style="margin-top:1vh">
-          <ion-input formControlName="name" required type="text" placeholder="Digite o nome da música"></ion-input>
+    <ion-row padding>
+      <ion-col style="margin-left:-1vh">
+        <ion-item>
+          <ion-label position="stacked" color="primary">
+            Artista/Banda
+          </ion-label>
+          <ion-input formControlName="artist" required placeholder="Digite o nome do artista/banda"></ion-input>
         </ion-item>
-        <ion-card-title style="margin-top:1vh">Artista</ion-card-title>
-        <ion-item no-padding style="margin-top:1vh">
-          <ion-input formControlName="artist" required type="text" placeholder="Digite o nome do artista/banda"></ion-input>
+      </ion-col>
+    </ion-row>
+    <ion-row padding>
+      <ion-col style="margin-left:-1vh">
+        <ion-item>
+          <ion-label position="stacked" color="primary">
+            Nome da música
+          </ion-label>
+          <ion-input formControlName="name" required placeholder="Digite o nome da música"></ion-input>
         </ion-item>
-        <ion-card-title style="margin-top:1vh">Hino</ion-card-title>
-        <ion-item no-padding style="margin-top:1vh">
+      </ion-col>
+    </ion-row>
+    <ion-row padding>
+      <ion-col style="margin-left:-1vh">
+        <ion-item>
+          <ion-label position="stacked" color="primary">
+            Hino
+          </ion-label>
           <ion-select placeholder="Selecione" formControlName="anthem" required>
             <ion-select-option value="Sim">Sim</ion-select-option>
             <ion-select-option value="Não">Não</ion-select-option>
           </ion-select>
         </ion-item>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-row style="text-align: right">
-          <ion-col>
-            <ion-button shape="round" color="primary" [disabled]="musicForm.invalid" (click)="saveMusic()" fill="outline">Salvar</ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-card-content>
-    </ion-card>
+      </ion-col>
+    </ion-row>
+    <ion-row padding>
+      <ion-col>
+        <ion-button [disabled]="musicForm.invalid" (click)="saveMusic()" expand="full">Salvar</ion-button>
+      </ion-col>
+    </ion-row>
   </form>
 
 </ion-content>
diff --git a/src/app/music/music.component.ts b/src/app/music/music.component.ts
@@ -4,6 +4,7 @@ import { AngularFirestore } from '@angular/fire/firestore';
 import { FormBuilder, FormGroup } from "@angular/forms";
 import { AlertController, NavController } from '@ionic/angular';
 import { LoadingController } from '@ionic/angular';
+import { Storage } from '@ionic/storage';
 
 @Component({
   selector: 'app-music',
@@ -20,7 +21,8 @@ export class MusicComponent implements OnInit {
     private formBuilder: FormBuilder,
     private alertController: AlertController,
     private nav: NavController,
-    private loadingController: LoadingController
+    private loadingController: LoadingController,
+    private storage: Storage
   ) {
   }
 
@@ -34,7 +36,7 @@ export class MusicComponent implements OnInit {
   }
 
   goBack() {
-    this.nav.navigateBack(['/tabs/tab1']);
+    this.nav.navigateRoot(['/tabs']);
   }
 
   async ngOnInit() {
@@ -88,15 +90,21 @@ export class MusicComponent implements OnInit {
   }
 
   async removeMusic() {
-    const music = {
-      id: this.musicForm.value.id || new Date().getTime().toString(),
-    };
+    let hasMusicInPlaylist: any;
 
     await this.presentLoading();
 
+    hasMusicInPlaylist = await this.hasMusicInPlaylist();
+
+    if (hasMusicInPlaylist) {
+      await this.dismissLoading();
+      await this.presentAlert('Não é possível remover esta música, pois ela já está cadastrada em um culto!');
+      return;
+    }
+
     let musicObservable = this.af
       .collection("musics")
-      .doc(music.id);
+      .doc(this.musicForm.value.id);
 
     await musicObservable.delete();
     await this.dismissLoading();
@@ -120,6 +128,22 @@ export class MusicComponent implements OnInit {
     await alert.present();
   }
 
+  async presentAlert(message) {
+    const alert = await this.alertController.create({
+      header: 'Atenção',
+      message: message,
+      buttons: [
+        {
+          text: 'OK',
+          handler: () => {
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
   async presentAlertRemoveMusic() {
     const alert = await this.alertController.create({
       header: 'Atenção',
@@ -157,4 +181,29 @@ export class MusicComponent implements OnInit {
     }
   }
 
+  async hasMusicInPlaylist() {
+    let hasMusicInPlaylist = false;
+
+    const musicFromPlaylist: any = await this.getValueFromObservable(
+      this.af.collection('playlists', ref => ref
+        .where('music_id', '==', this.musicForm.value.id)
+        .limit(1))
+        .valueChanges()
+    );
+
+    if (musicFromPlaylist && musicFromPlaylist.length) {
+      hasMusicInPlaylist = true;
+    }
+
+    return hasMusicInPlaylist;
+  }
+
+  async getValueFromObservable(observable) {
+    return await new Promise(resolve => {
+      observable.subscribe(data => {
+        resolve(data);
+      });
+    });
+  }
+
 }
diff --git a/src/app/select-music/select-music.page.html b/src/app/select-music/select-music.page.html
@@ -2,15 +2,15 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-button (click)="goBack()">
-        <ion-icon color="light" slot="icon-only" name="arrow-back"></ion-icon>
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Repertório</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-searchbar placeholder="Filtrar músicas/artistas" debounce="500" showCancelButton cancelButtonText="Cancelar"
+  <ion-searchbar placeholder="Filtrar músicas/artistas" debounce="500" cancelButtonText="Cancelar"
     animated [(ngModel)]="filter.name"></ion-searchbar>
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Puxe para baixo para atualizar" refreshingSpinner="circles"
@@ -20,15 +20,19 @@
 
   <ion-row>
     <ion-col>
+
     </ion-col>
   </ion-row>
 
   <ion-row style="margin-left:1vh;margin-right:1vh">
     <ion-col>
-      <ion-segment (ionChange)="filterByCategory($event)">
+      <ion-segment (ionChange)="filterByCategory($event)" [(ngModel)]="selectedSegment">
         <ion-segment-button value="all">
           <ion-label>Todos</ion-label>
         </ion-segment-button>
+        <ion-segment-button *ngIf="isEdit" value="saved">
+            <ion-label>Salvos</ion-label>
+          </ion-segment-button>
         <ion-segment-button value="song">
           <ion-label>Louvores</ion-label>
         </ion-segment-button>
@@ -39,20 +43,18 @@
     </ion-col>
   </ion-row>
 
-  <ion-list style="margin-bottom:-2vh" no-padding *ngFor="let music of musics | filterName:filter; let i = index"
+  <ion-list style="margin-bottom:-0.5vh" no-padding *ngFor="let music of musics | filterName:filter; let i = index"
     [attr.data-index]="i">
     <ion-card no-padding style="background-color: #f4f5f8" (click)="selectMusic(music, i)" *ngIf="!music.hidden">
       <ion-card-header>
         <ion-card-subtitle>{{ music.artist }} </ion-card-subtitle>
         <ion-card-title style="text-transform: capitalize">{{ music.name }}</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
         <ion-item no-padding lines="none" color="light">
           <ion-badge *ngIf="(music.anthem === 'Sim')" slot="start" color="secondary">Hino</ion-badge>
           <ion-button class="button-over-card" *ngIf="!music.selected" color="primary" fill="outline" slot="end">Adicionar</ion-button>
           <ion-button class="button-over-card" *ngIf="music.selected" color="danger" fill="outline" slot="end">Remover</ion-button>
         </ion-item>
-      </ion-card-content>
+      </ion-card-header>
     </ion-card>
   </ion-list>
 </ion-content>
diff --git a/src/app/select-music/select-music.page.ts b/src/app/select-music/select-music.page.ts
@@ -14,6 +14,8 @@ export class SelectMusicPage implements OnInit {
   public filter = {
     name: ''
   };
+  public selectedSegment = 'all';
+  public isEdit = false;
 
   constructor(
     private navController: NavController,
@@ -29,13 +31,18 @@ export class SelectMusicPage implements OnInit {
     let musicsSavedById = {};
     let musicsSaved = await this.storage.get('musics');
 
-    
+
     if (musicsSaved) {
       musicsSaved = JSON.parse(musicsSaved);
-
-      musicsSaved.forEach((musicSaved) => {
-        musicsSavedById[musicSaved.id] = musicSaved;
-      });
+
+      if (musicsSaved.length) {
+        this.selectedSegment = 'saved';
+        this.isEdit = true;
+
+        musicsSaved.forEach((musicSaved) => {
+          musicsSavedById[musicSaved.id] = musicSaved;
+        });
+      }
     }
 
     this.musics = this.musics.map((music) => {
@@ -57,8 +64,24 @@ export class SelectMusicPage implements OnInit {
     this.musicsTemp = this.musics;
   }
 
+  async listByFilter() {
+    let filter = {
+      anthem: (this.selectedSegment === 'anthem' ? "Sim" : "Não")
+    };
+
+    this.musics = await this.getValueFromObservable(
+      this.af.collection('musics', ref => ref
+        .where('anthem', '==', filter.anthem)
+        .orderBy('name', 'asc')).valueChanges()
+    );
+  }
+
   selectMusic(music, index) {
     this.musics[index].selected = !music.selected;
+
+    if (this.selectedSegment === 'saved') {
+      this.filterMusicsBySegment();
+    }
   }
 
   goBack() {
@@ -68,7 +91,11 @@ export class SelectMusicPage implements OnInit {
   }
 
   async doRefresh(event) {
-    await this.list();
+    if (this.selectedSegment === 'all') {
+      await this.list();
+    } else {
+      this.listByFilter();
+    }
 
     setTimeout(() => {
       event.target.complete();
@@ -84,16 +111,25 @@ export class SelectMusicPage implements OnInit {
   }
 
   async filterByCategory($event) {
+    this.selectedSegment = $event.detail.value;
+    this.filterMusicsBySegment();
+  }
+
+  filterMusicsBySegment() {
     this.musics = this.musicsTemp.filter((music) => {
-      if ($event.detail.value === 'anthem' && music.anthem === "Sim") {
+      if (this.selectedSegment === 'anthem' && music.anthem === "Sim") {
+        return true;
+      }
+
+      if (this.selectedSegment === 'song' && music.anthem === "Não") {
         return true;
       }
 
-      if ($event.detail.value === 'song' && music.anthem === "Não") {
+      if (this.selectedSegment === 'all') {
         return true;
       }
 
-      if ($event.detail.value === 'all') {
+      if (this.selectedSegment === 'saved' && music.selected) {
         return true;
       }