Merge pull request #59 from paulnagle/accordians

Accordians for individual meeting lists as well
bmlt-enabled · Jan 27, 2024 · a30a878 · a30a878
2 parents eb495ed + 3910084
commit a30a878
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 40 deletions.
diff --git a/src/app/components/meeting-list/meeting-list.component.html b/src/app/components/meeting-list/meeting-list.component.html
@@ -26,32 +26,48 @@
   </ion-list>
 </div>
 
-<div *ngFor="let dailyList of meetingListGroupedByDay; let i = index" (click)="toggleDay(i)" [ngClass]="{active: isDayShown(i)}">
-  <ion-item-divider sticky="true" [color]="isToday(dailyList[0].weekday_tinyint) ? 'secondary' : 'primary'">
-    <div ngSwitch="{{ dailyList[0].weekday_tinyint }}">
-      <div *ngSwitchCase="'1'">
-        <h3>{{'SUNDAY' | translate}} ({{dayCount[0]}})</h3></div>
-      <div *ngSwitchCase="'2'">
-        <h3>{{'MONDAY' | translate}} ({{dayCount[1]}})</h3></div>
-      <div *ngSwitchCase="'3'">
-        <h3>{{'TUESDAY' | translate}} ({{dayCount[2]}})</h3></div>
-      <div *ngSwitchCase="'4'">
-        <h3>{{'WEDNESDAY' | translate}} ({{dayCount[3]}})</h3></div>
-      <div *ngSwitchCase="'5'">
-        <h3>{{'THURSDAY' | translate}} ({{dayCount[4]}})</h3></div>
-      <div *ngSwitchCase="'6'">
-        <h3>{{'FRIDAY' | translate}} ({{dayCount[5]}})</h3></div>
-      <div *ngSwitchCase="'7'">
-        <h3>{{'SATURDAY' | translate}} ({{dayCount[6]}})</h3></div>
-      <div *ngSwitchDefault>Nothing Found.</div>
+
+
+
+<ion-accordion-group  #accordionGroup>
+<!-- <ng-template #elseBlock><ion-accordion-group [multiple]="true" [value]="['all']" [disabled]="true"></ng-template> -->
+
+
+
+    <div *ngFor="let dailyList of meetingListGroupedByDay">
+
+      <ion-accordion  value="{{ dailyList[0].weekday_tinyint }}">
+        <ion-item slot="header" [color]="isToday(dailyList[0].weekday_tinyint) ? 'secondary' : 'primary'">
+
+        <div ngSwitch="{{ dailyList[0].weekday_tinyint }}">
+          <div *ngSwitchCase="'1'">
+            <ion-label>{{'SUNDAY' | translate}} ({{dayCount[0]}})</ion-label></div>
+          <div *ngSwitchCase="'2'">
+            <ion-label>{{'MONDAY' | translate}} ({{dayCount[1]}})</ion-label></div>
+          <div *ngSwitchCase="'3'">
+            <ion-label>{{'TUESDAY' | translate}} ({{dayCount[2]}})</ion-label></div>
+          <div *ngSwitchCase="'4'">
+            <ion-label>{{'WEDNESDAY' | translate}} ({{dayCount[3]}})</ion-label></div>
+          <div *ngSwitchCase="'5'">
+            <ion-label>{{'THURSDAY' | translate}} ({{dayCount[4]}})</ion-label></div>
+          <div *ngSwitchCase="'6'">
+            <ion-label>{{'FRIDAY' | translate}} ({{dayCount[5]}})</ion-label></div>
+          <div *ngSwitchCase="'7'">
+            <ion-label>{{'SATURDAY' | translate}} ({{dayCount[6]}})</ion-label></div>
+          <div *ngSwitchDefault>Nothing Found.</div>
+        </div>
+
+      </ion-item>
+
+      <div class="ion-padding" slot="content">
+
+        <ion-list *ngFor="let meeting of dailyList; let j = index">
+          <app-meeting-card [data]="meeting" MeetingType="{{ localMeetingType }}"></app-meeting-card>
+        </ion-list>
+      </div>
+
+    </ion-accordion>
     </div>
-    <ion-icon *ngIf="isExpandAll() === false" size="large" slot="end" [name]="isDayShown(i) ? 'close-circle' : 'add-circle'"></ion-icon>
 
-  </ion-item-divider>
 
-  <div *ngIf="isDayShown(i)">
-    <ion-list *ngFor="let meeting of dailyList; let j = index">
-      <app-meeting-card [data]="meeting" MeetingType="{{ localMeetingType }}"></app-meeting-card>
-    </ion-list>
-  </div>
-</div>
+</ion-accordion-group>
diff --git a/src/app/components/meeting-list/meeting-list.component.ts b/src/app/components/meeting-list/meeting-list.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
 import { firstBy } from 'thenby';
 import { Storage } from '@ionic/storage';
 import { TranslateService } from '@ngx-translate/core';
@@ -17,6 +18,8 @@ import { RangeCustomEvent } from '@ionic/angular';
 })
 export class MeetingListComponent implements OnInit, OnChanges {
 
+  @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup;
+
   @Input() data: any;
   @Input() meetingType: any;
   @Input() expandAll: any;
@@ -72,6 +75,16 @@ export class MeetingListComponent implements OnInit, OnChanges {
     this.localMeetingType = this.meetingType;
     this.localExpandAll = this.expandAll;
 
+    if (this.localExpandAll === "false") {
+      console.log("expand All === false");
+      this.accordionGroup.value = undefined;
+      this.accordionGroup.multiple = undefined;
+    } else {
+      console.log("expand All === true");
+      this.accordionGroup.value = ['1', '2', '3', '4', '5', '6', '7'];
+      this.accordionGroup.multiple = true;
+    }
+
     if (this.localMeetingType === 'virt') {
       // Get the formats
       this.virtFormatsProvider.getAllVirtFormats().then((serviceGroupData) => {
@@ -146,19 +159,6 @@ export class MeetingListComponent implements OnInit, OnChanges {
   }
 
 
-  toggleDay(dayGrouping: any) {
-    if (this.isDayShown(dayGrouping)) {
-      this.shownDay = null;
-    } else {
-      this.shownDay = dayGrouping;
-    }
-  }
-
-
-  isDayShown(dayGrouping: any) {
-      return this.shownDay === dayGrouping || this.isExpandAll();
-  }
-
   isExpandAll() {
     if (this.localExpandAll == "true") {
       return true;