Merge pull request #20 from raniel90/dev

Dev
raniel90 · Feb 20, 2019 · d81c747 · d81c747
2 parents dcdfd7c + 75373a0
commit d81c747
Show file tree

Hide file tree

Showing 17 changed files with 287 additions and 176 deletions.
diff --git a/src/app/history-played/history-played.page.html b/src/app/history-played/history-played.page.html
@@ -21,7 +21,7 @@
     <ion-item no-padding lines="none" class="worship-date">
       <ion-row no-padding>
         <ion-col>
-          <ion-label style="margin-left: 2vh">{{ worship.date | date:'dd/MM/y' }}</ion-label>
+          <ion-label style="margin-left: 2vh">{{ worship.date | date:'dd/MM/y' }} - {{ worship.shift }}</ion-label>
         </ion-col>
       </ion-row>
     </ion-item>
@@ -31,9 +31,6 @@
           <ion-label style="margin-left: 2vh">{{ worship.band }}</ion-label>
         </ion-col>
       </ion-row>
-      <ion-note slot="end" style="margin-top:0.5vh">
-        <ion-badge color="tertiary">{{ worship.shift }}</ion-badge>
-      </ion-note>
     </ion-item>
   </ion-grid>
 </ion-content>
diff --git a/src/app/history-played/history-played.page.scss b/src/app/history-played/history-played.page.scss
@@ -8,7 +8,6 @@
     font-size: 2vh;
     font-weight: 700;
     letter-spacing: .4px;
-    text-transform: uppercase;
   }
 
 .worship-band {

diff --git a/src/app/select-music/select-music.page.html b/src/app/select-music/select-music.page.html
@@ -5,6 +5,11 @@
         <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
       </ion-button>
     </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-badge color="tertiary">{{ musicsSelectedArray.length || 0 }}</ion-badge>
+      </ion-button>
+    </ion-buttons>
     <ion-title>Repertório</ion-title>
   </ion-toolbar>
 </ion-header>
@@ -73,7 +78,7 @@
         <ion-item no-padding>
           <ion-row no-padding>
             <ion-col class="music-name">
-              <ion-label style="margin-left: 2vh">{{ music.name }}</ion-label>
+              <ion-label class="music-name-label" style="margin-left: 2vh">{{ music.name }}</ion-label>
             </ion-col>
           </ion-row>
           <ion-note slot="end">
@@ -85,33 +90,14 @@
   </div>
 
   <div style="margin-top:1vh" *ngIf="selectedSegment === 'saved'">
-    <ion-grid (click)="showOptions(musicsSelected[key])" no-padding
-      *ngFor="let key of objectKeys(musicsSelected);">
-      <ion-item no-padding lines="none" class="music-artist">
-        <ion-row no-padding>
-          <ion-col>
-            <ion-label style="margin-left: 2vh">{{ musicsSelected[key].artist }}</ion-label>
-          </ion-col>
-        </ion-row>
-      </ion-item>
-      <ion-item no-padding lines="none" class="music-name">
-        <ion-row no-padding>
-          <ion-col>
-            <ion-label style="margin-left: 2vh">{{ musicsSelected[key].name }}</ion-label>
-          </ion-col>
-        </ion-row>
-      </ion-item>
-      <ion-item no-padding>
-        <ion-row no-padding style="margin-left: 2vh">
-          <ion-col>
-            <ion-badge *ngIf="(musicsSelected[key] && musicsSelected[key].theme_name)" color="secondary">
-              {{ musicsSelected[key].theme_name }}</ion-badge>
-          </ion-col>
-        </ion-row>
-        <ion-col>
-          <ion-badge *ngIf="(musicsSelected[key].anthem === 'Sim')" color="tertiary">Hino</ion-badge>
-        </ion-col>
-      </ion-item>
-    </ion-grid>
+
+    <ion-list padding style="margin-left: -2vh">
+      <ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
+        <ion-item (click)="showOptions(music)" *ngFor="let music of musicsSelectedArray; let i = index">
+          <ion-label>{{ i + 1 }}. {{ music.name }}</ion-label>
+          <ion-reorder></ion-reorder>
+        </ion-item>
+      </ion-reorder-group>
+    </ion-list>
   </div>
 </ion-content>
diff --git a/src/app/select-music/select-music.page.scss b/src/app/select-music/select-music.page.scss
@@ -40,4 +40,11 @@
     margin-top: -1.8vh;
     font-weight: normal;
     letter-spacing: .4px;
+  }
+
+  .music-name-label {
+    white-space: nowrap; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width:94%;
   }
diff --git a/src/app/select-music/select-music.page.ts b/src/app/select-music/select-music.page.ts
@@ -14,6 +14,7 @@ import { UtilsService } from '../utils.service';
 export class SelectMusicPage implements OnInit {
   public themes: any;
   public musicsSelected = {};
+  public musicsSelectedArray = [];
   public themesTemp: any;
   public filter = {
     name: '',
@@ -68,6 +69,7 @@ export class SelectMusicPage implements OnInit {
     let themesObj = {}
     let themesArray = [];
     let musicsSavedObj = {};
+    let hasMusicSaved = false;
     let musicsSaved = await this.storage.get('musics');
     let musicsArray: any = await this.utils.getValueFromObservable(
       this.af.collection('musics', ref =>
@@ -91,7 +93,19 @@ export class SelectMusicPage implements OnInit {
           if (musicsSavedObj[music.id] && item === musicsSavedObj[music.id].theme_name) {
             music.selected = true;
             music.theme_name = item;
-            this.musicsSelected[music.id] = music;
+            hasMusicSaved = true;
+
+            if (!this.musicsSelected[music.id]) {
+              this.musicsSelectedArray.push({
+                order: musicsSavedObj[music.id].order,
+                ...music
+              });
+            }
+
+            this.musicsSelected[music.id] = {
+              order: musicsSavedObj[music.id].order,
+              ...music
+            };
           }
 
           themesObj[item].musics[music.id] = music;
@@ -116,7 +130,9 @@ export class SelectMusicPage implements OnInit {
     this.themes = _.orderBy(themesArray, ['name'], ['asc']);
     this.themesTemp = this.themes;
 
-    if (Object.keys(this.musicsSelected).length) {
+    this.musicsSelectedArray = _.orderBy(this.musicsSelectedArray, ['order'], ['asc']);
+
+    if (hasMusicSaved) {
       this.selectedSegment = 'saved';
     }
   }
@@ -172,6 +188,7 @@ export class SelectMusicPage implements OnInit {
 
   selectMusic(musicSelected, indexTheme, indexMusic) {
     let music;
+    const order = this.musicsSelectedArray.length + 1;
 
     if (musicSelected.selected) {
       this.removeMusic(musicSelected);
@@ -182,15 +199,24 @@ export class SelectMusicPage implements OnInit {
 
     music.theme_name = this.themes[indexTheme].name;
     this.themes[indexTheme].musics[indexMusic].selected = true;
-    this.musicsSelected[music.id] = music;
+    this.musicsSelected[music.id] = {
+      order,
+      ...music
+    };
+    this.musicsSelectedArray.push({
+      order,
+      ...music
+    });
   }
 
   removeMusic(music) {
     const indexTheme = this.themes.map((theme) => theme.name).indexOf(music.theme_name);
     const indexMusic = this.themes[indexTheme].musics.map((music) => music.id).indexOf(music.id);
+    const indexSelected = this.musicsSelectedArray.map((music) => music.id).indexOf(music.id);
 
     this.themes[indexTheme].musics[indexMusic].selected = false;
     delete this.musicsSelected[music.id];
+    this.musicsSelectedArray.splice(indexSelected, 1);
   }
 
   viewMusic(music) {
@@ -245,6 +271,7 @@ export class SelectMusicPage implements OnInit {
     });
 
     buttons.push({
+      cssClass: music.selected ? 'color-danger' : 'color-primary',
       text: music.selected ? 'Remover do repertório' : 'Adicionar ao repertório',
       handler: () => {
         this.selectMusic(music, indexTheme, indexMusic);
@@ -259,7 +286,18 @@ export class SelectMusicPage implements OnInit {
   }
 
   goBack() {
-    this.storage.set('musics', JSON.stringify(this.musicsSelected));
+    this.storage.set('musics', JSON.stringify(this.musicsSelectedArray));
     this.navController.navigateBack(['/worship']);
   }
+
+  reorderItems(ev) {
+    let musicSelectedTemp: any[] = this.musicsSelectedArray;
+    let itemToMove = musicSelectedTemp.splice(ev.detail.from, 1)[0];
+
+    musicSelectedTemp.splice(ev.detail.to, 0, itemToMove);
+    musicSelectedTemp.forEach((item, index) => musicSelectedTemp[index].order = index);
+    this.musicsSelectedArray = musicSelectedTemp;
+
+    ev.detail.complete();
+  }
 }
diff --git a/src/app/tab1/tab1.page.html b/src/app/tab1/tab1.page.html
@@ -43,7 +43,7 @@
   <ion-row style="margin-left:-1vh;margin-right:0.5vh">
     <ion-col>
       <ion-select placeholder="Filtrar por temas" [(ngModel)]="selectedTheme" (ionChange)="filterData()">
-          <ion-select-option value="all">Todos os temas</ion-select-option>
+        <ion-select-option value="all">Todos os temas</ion-select-option>
         <ion-select-option *ngFor="let theme of filter.themes" value="{{ theme }}">{{ theme }}</ion-select-option>
       </ion-select>
     </ion-col>
@@ -66,7 +66,7 @@
         <ion-item no-padding class="music-name">
           <ion-row no-padding>
             <ion-col>
-              <ion-label style="margin-left: 2vh">{{ music.name }}</ion-label>
+              <ion-label class="music-name-label" style="margin-left: 2vh;">{{ music.name }}</ion-label>
             </ion-col>
           </ion-row>
           <ion-note slot="end" style="margin-top:0.5vh">

diff --git a/src/app/tab1/tab1.page.scss b/src/app/tab1/tab1.page.scss
@@ -34,4 +34,11 @@
   margin-top: -1.8vh;
   font-weight: normal;
   letter-spacing: .4px;
+}
+
+.music-name-label {
+  white-space: nowrap; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width:94%;
 }
diff --git a/src/app/tab2/tab2.page.html b/src/app/tab2/tab2.page.html
@@ -19,22 +19,25 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <ion-grid (click)="showOptions(worship)" no-padding *ngFor="let worship of worships">
-    <ion-item no-padding lines="none" class="worship-date">
+  <ion-grid no-padding *ngFor="let worship of worships; let i = index">
+    <ion-item (click)="editWorship(worship)" no-padding lines="none" class="worship-date">
       <ion-row no-padding>
         <ion-col>
-          <ion-label style="margin-left: 2vh">{{ worship.date | date:'dd/MM/y' }}</ion-label>
+          <ion-label style="margin-left: 2vh">{{ worship.date | date:'dd/MM/y' }} - {{ worship.shift }}</ion-label>
         </ion-col>
       </ion-row>
+      <ion-note (click)="editWorship(worship)" slot="end" style="margin-top:1.5vh">
+        <ion-badge color="tertiary">{{ worship.musics ? worship.musics.length : 0 }}</ion-badge>
+      </ion-note>
     </ion-item>
     <ion-item no-padding class="worship-band">
-      <ion-row no-padding>
+      <ion-row (click)="editWorship(worship)" no-padding>
         <ion-col>
           <ion-label style="margin-left: 2vh">{{ worship.band }}</ion-label>
         </ion-col>
       </ion-row>
-      <ion-note slot="end" style="margin-top:0.5vh">
-        <ion-badge color="tertiary">{{ worship.shift }}</ion-badge>
+      <ion-note slot="end" (click)="showOptions(worship, i)" style="margin-top:1.7vh">
+        <ion-icon name="more"></ion-icon>
       </ion-note>
     </ion-item>
   </ion-grid>

diff --git a/src/app/tab2/tab2.page.scss b/src/app/tab2/tab2.page.scss
@@ -3,13 +3,12 @@
     font-size: 2vh;
     font-weight: 700;
     letter-spacing: .4px;
-    text-transform: uppercase;
   }
 
 .worship-band {
     color: #000;
     font-size: 3vh;
-    margin-top: -1.8vh;
+    margin-top: -1vh;
     font-weight: normal;
     letter-spacing: .4px;
   }
diff --git a/src/app/tab2/tab2.page.ts b/src/app/tab2/tab2.page.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AngularFirestore } from '@angular/fire/firestore';
-import { NavController, ActionSheetController } from '@ionic/angular';
+import { NavController, ActionSheetController, AlertController, LoadingController } from '@ionic/angular';
 import { Storage } from '@ionic/storage';
 import * as moment from 'moment';
 import { UtilsService } from '../utils.service';
@@ -11,6 +11,7 @@ import { UtilsService } from '../utils.service';
   styleUrls: ['tab2.page.scss']
 })
 export class Tab2Page implements OnInit {
+  public loading = null;
   public worships: any;
   public worshipFilter;
   public worshipsTemp;
@@ -23,7 +24,9 @@ export class Tab2Page implements OnInit {
     private nav: NavController,
     private storage: Storage,
     private actionSheet: ActionSheetController,
-    private utils: UtilsService, ) {
+    private loadingController: LoadingController,
+    private utils: UtilsService,
+    private alertController: AlertController) {
   }
 
   async ngOnInit() {
@@ -106,7 +109,7 @@ export class Tab2Page implements OnInit {
     this.nav.navigateForward(['/worship-filter']);
   }
 
-  async showOptions(worship) {
+  async showOptions(worship, index) {
     let buttons = [];
 
     buttons.push({
@@ -128,10 +131,18 @@ export class Tab2Page implements OnInit {
       }
     });
 
+    // buttons.push({
+    //   text: `Detalhar/Alterar Culto`,
+    //   handler: () => {
+    //     this.editWorship(worship);
+    //   }
+    // });
+
     buttons.push({
-      text: `Detalhar/Alterar Culto`,
+      cssClass: 'color-danger',
+      text: `Remover Culto`,
       handler: () => {
-        this.editWorship(worship);
+        this.presentAlertRemoveWorship(worship.id, index);
       }
     });
 
@@ -141,4 +152,44 @@ export class Tab2Page implements OnInit {
     });
     await actionSheet.present();
   }
+
+  async presentAlertRemoveWorship(id, index) {
+    const alert = await this.alertController.create({
+      header: 'Atenção',
+      message: 'Você deseja excluir este Culto?',
+      buttons: [
+        {
+          text: 'Sim',
+          cssClass: 'color-danger',
+          handler: () => {
+            this.removeWorship(id, index);
+          }
+        },
+        {
+          text: 'Não',
+          handler: () => {
+
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async removeWorship(id, index) {
+    this.loading = await this.utils.presentLoading(this.loadingController);
+    this.loading.present();
+
+    let worshipObservable = this.af
+      .collection("worships")
+      .doc(id);
+
+    await worshipObservable.delete();
+    await this.utils.removePlaylist(id);
+    await this.storage.remove('musics');
+    this.worships.splice(index, 1);
+    await this.utils.dismissLoading(this.loading);
+    await this.utils.presentAlertConfirm(this.alertController, 'Culto removido com sucesso!');
+  }
 }