Skip to content

Commit

Permalink
Merge pull request #60 from paulnagle/virtual_accordians
Browse files Browse the repository at this point in the history 
Accordians for virtualna
  • Loading branch information
@paulnagle
paulnagle authored Jan 27, 2024
2 parents a30a878 + 2ba4700 commit a2191c0
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 172 deletions.
194 changes: 80 additions & 114 deletions src/app/pages/virt-meetings/virt-meetings.page.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@

<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>

<div *ngIf="areaName != '' ; else BMLT_List">
<ion-title>{{ areaName }}</ion-title>
<ion-button color="primary" slot="end" size="small" (click)="showServiceStructure()">Back</ion-button>
<ion-buttons slot="primary">
<ion-button fill="solid" color='primary' (click)="showServiceStructure()">
<ion-icon slot="start" name="arrow-back-circle-outline"></ion-icon>
Back
</ion-button>
</ion-buttons>
</div>

<ng-template #BMLT_List>
Expand All @@ -22,131 +25,94 @@
<ion-content no-padding>

<div *ngIf="HTMLGrouping == 'areas'">

<div *ngFor="let L1 of serviceGroupHierarchy; let i = index">
<ion-accordion-group value="first">
<div *ngFor="let L1 of serviceGroupHierarchy">
<div *ngIf="L1.childServiceGroup;else L1_no_children">
<ion-item-divider sticky="true" (click)="toggleL1Group(i)" [ngClass]="{active: isL1GroupShown(i)}" [color]="isL1GroupShown(i) ? 'secondary' : 'primary'" >
<h3>{{ L1.name }}</h3>
<ion-icon size="large" [color]="isL1GroupShown(i) ? 'primary' : 'secondary'" slot="end" [name]="isL1GroupShown(i) ? 'close-circle' : 'add-circle'"></ion-icon>
</ion-item-divider>
</div>
<ng-template #L1_no_children>
<ion-item-divider sticky="true" (click)="getMeetingsByVirtArea(L1.id, L1.name)" color="primary">
<h3>{{ L1.name }} </h3>
<ion-icon size="large" color="secondary" slot="end" name="play"></ion-icon>
</ion-item-divider>
</ng-template>

<div *ngIf="isL1GroupShown(i)">
<div *ngFor="let L2 of L1.childServiceGroup; let j = index">
<div *ngIf="L2.childServiceGroup;else L2_no_children">
<ion-item-divider sticky="true" (click)="toggleL2Group(j)" [ngClass]="{active: isL2GroupShown(j)}" [color]="isL2GroupShown(j) ? 'tertiary' : 'secondary'">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L2.name }}</h3>
<ion-icon size="large" [color]="isL2GroupShown(j) ? 'secondary' : 'tertiary'" slot="end" [name]="isL2GroupShown(j) ? 'close-circle' : 'add-circle'"></ion-icon>
</ion-item-divider>
</div>
<ng-template #L2_no_children>
<ion-item-divider sticky="true" (click)="getMeetingsByVirtArea(L2.id, L2.name)" [color]="isL2GroupShown(j) ? 'tertiary' : 'secondary'">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L2.name }}</h3>
<ion-icon size="large" [color]="isL2GroupShown(j) ? 'secondary' : 'tertiary'" slot="end" name="play"></ion-icon>
</ion-item-divider>
</ng-template>


<div *ngIf="isL2GroupShown(j)">
<div *ngFor="let L3 of L2.childServiceGroup; let k = index" [ngClass]="{active: isL3GroupShown(k)}">
<div *ngIf="L3.childServiceGroup;else L3_no_children">
<ion-item-divider sticky="true" (click)="toggleL3Group(k)" [ngClass]="{active: isL3GroupShown(k)}" [color]="isL3GroupShown(k) ? 'four' : 'tertiary'">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L3.name }}</h3>
<ion-icon size="large" [color]="isL3GroupShown(k) ? 'tertiary' : 'warning'" slot="end" [name]="isL3GroupShown(k) ? 'close-circle' : 'add-circle'"></ion-icon>
</ion-item-divider>
</div>
<ng-template #L3_no_children>
<ion-item-divider sticky="true" (click)="getMeetingsByVirtArea(L3.id, L3.name)" [color]="isL3GroupShown(k) ? 'four' : 'tertiary'">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L3.name }}</h3>
<ion-icon size="large" [color]="isL3GroupShown(k) ? 'tertiary' : 'warning'" slot="end" name="play"></ion-icon>
</ion-item-divider>
</ng-template>
<ion-accordion class="no-padding" value="first">
<ion-item slot="header">{{ L1.name }}</ion-item>
<div class="ion-padding" slot="content">

<ion-accordion-group>

<div *ngFor="let L2 of L1.childServiceGroup">
<div *ngIf="L2.childServiceGroup;else L2_no_children">
<ion-accordion>
<ion-item slot="header">{{ L2.name }}</ion-item>

<div class="ion-padding" slot="content">
<ion-accordion-group>
<div *ngFor="let L3 of L2.childServiceGroup">
<div *ngIf="L3.childServiceGroup;else L3_no_children">
<ion-accordion>
<ion-item slot="header">{{ L3.name }}</ion-item>

<div class="ion-padding" slot="content">

<div *ngFor="let L4 of L3.childServiceGroup">
<div *ngIf="L4.childServiceGroup;else L4_no_children">
<ion-accordion>
<ion-item slot="header">{{ L4.name }}</ion-item>

<div class="ion-padding" slot="content">



</div>

</ion-accordion>
</div>
<ng-template #L4_no_children>
<ion-item slot="content" (click)="getMeetingsByVirtArea(L4.id, L4.name)">{{ L4.name }} </ion-item>
</ng-template>
</div>


<div *ngIf="isL3GroupShown(k)">
<div *ngFor="let L4 of L3.childServiceGroup; let l = index" [ngClass]="{active: isL4GroupShown(k)}">
<div *ngIf="L4.childServiceGroup;else L4_no_children">
<ion-item-divider sticky="true">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L4.name }}</h3>
<ion-icon size="large" color="icon" slot="end" [name]="isL1GroupShown(i) ? 'close-circle' : 'add-circle'"></ion-icon>
</ion-item-divider>
</div>
<ng-template #L4_no_children>
<ion-item-divider sticky="true" (click)="getMeetingsByVirtArea(L4.id, L4.name)">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L4.name }}</h3>
<ion-icon size="large" color="icon" slot="end" name="play"></ion-icon>
</ion-item-divider>
</ng-template>


<div *ngFor="let L5 of L4.childServiceGroup; let m = index">
<div *ngIf="L5.childServiceGroup;else L5_no_children">
<ion-item-divider sticky="true">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L5.name }}</h3>
<ion-icon size="large" color="icon" slot="end" [name]="isL1GroupShown(i) ? 'close-circle' : 'add-circle'"></ion-icon>
</ion-item-divider>

</div>

</ion-accordion>
</div>
<ng-template #L3_no_children>
<ion-item slot="content" (click)="getMeetingsByVirtArea(L3.id, L3.name)">{{ L3.name }} </ion-item>
</ng-template>
</div>
<ng-template #L5_no_children>
<ion-item-divider sticky="true" (click)="getMeetingsByVirtArea(L5.id, L5.name)">
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<ion-icon name="chevron-forward-outline" slot="start" size="large"></ion-icon>
<h3>{{ L5.name }}</h3>
<ion-icon size="large" color="icon" slot="end" name="play"></ion-icon>
</ion-item-divider>
</ng-template>

</ion-accordion-group>
</div>
</div>

</ion-accordion>
</div>
<ng-template #L2_no_children>
<ion-item slot="content" (click)="getMeetingsByVirtArea(L2.id, L2.name)">{{ L2.name }} </ion-item>
</ng-template>
</div>

</ion-accordion-group>

</div>
</div>
</ion-accordion>
</div>
</div>
<ng-template #L1_no_children>
<ion-item slot="header" (click)="getMeetingsByVirtArea(L1.id, L1.name)">{{ L1.name }} </ion-item>
</ng-template>

<div>
<ion-card text-wrap>

<ion-card-header>{{'VIRTUAL_MEETINGS' | translate }}</ion-card-header>
<ion-card-content>
<p>{{ 'VIRTUAL_NA' | translate }} </p>
</ion-card-content>

</ion-card>
</div>

</div>
</ion-accordion-group>
</div>


<div *ngIf="HTMLGrouping == 'meetings'">
<div *ngIf="isLoaded">
<app-meeting-list [data]="meetingListArea" meetingType='virt' expandAll='false'></app-meeting-list>

<div *ngIf = "isLoaded">
<app-meeting-list [data]="meetingListArea" meetingType='regular' expandAll='false'></app-meeting-list>
</div>

</div>


</ion-content>

<ion-footer>
<ion-toolbar>
<div *ngIf="areaName != ''">
<ion-title>{{ areaName }}</ion-title>
</div>
</ion-toolbar>
</ion-footer>
41 changes: 41 additions & 0 deletions src/app/pages/virt-meetings/virt-meetings.page.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
ion-item[slot=header] {
// border: 1px;
// border-style: solid;
border-radius: 5px 5px 5px 5px;
border-color: var(--ion-color-primary);
}
ion-accordion {
margin: 0 auto;
}

ion-accordion.accordion-expanding,
ion-accordion.accordion-expanded {
// width: calc(100% - 8px);
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px;
border-style: solid;
border-radius: 5px 5px 5px 5px;
border-color: var(--ion-color-primary);
}

ion-accordion.accordion-collapsing ion-item[slot='header'],
ion-accordion.accordion-collapsed ion-item[slot='header'] {
--background: var(--ion-color-light);
--color: var(--ion-color-light-contrast);
}

ion-accordion.accordion-expanding ion-item[slot='header'],
ion-accordion.accordion-expanded ion-item[slot='header'] {
--background: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
}

.ion-padding {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
59 changes: 1 addition & 58 deletions src/app/pages/virt-meetings/virt-meetings.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ export class VirtMeetingsPage {

serviceGroups: any;
serviceGroupHierarchy: any = [];
shownDay = null;
shownGroupL1 = null;
shownGroupL2 = null;
shownGroupL3 = null;
shownGroupL4 = null;
HTMLGrouping = 'areas';
loader!: Promise<void> | Promise<boolean> | null;
meetingListArea: any = [];
Expand Down Expand Up @@ -63,57 +58,6 @@ export class VirtMeetingsPage {
return serviceGroupHierarchy;
}

toggleDay(day: any) {
if (this.isDayShown(day)) {
this.shownDay = null;
} else {
this.shownDay = day;
}
}

toggleL1Group(L1group: any) {
if (this.isL1GroupShown(L1group)) {
this.shownGroupL1 = null;
} else {
this.shownGroupL1 = L1group;
this.shownGroupL2 = null;
this.shownGroupL3 = null;
this.shownGroupL4 = null;
}
}

toggleL2Group(L2group: any) {
if (this.isL2GroupShown(L2group)) {
this.shownGroupL2 = null;
} else {
this.shownGroupL2 = L2group;
this.shownGroupL3 = null;
this.shownGroupL4 = null;
}
}

toggleL3Group(L3group: any) {
if (this.isL3GroupShown(L3group)) {
this.shownGroupL3 = null;
} else {
this.shownGroupL3 = L3group;
this.shownGroupL4 = null;
}
}

toggleL4Group(L4group: any) {
if (this.isL4GroupShown(L4group)) {
this.shownGroupL4 = null;
} else {
this.shownGroupL4 = L4group;
}
}

isDayShown(day: any) { return this.shownDay === day; }
isL1GroupShown(L1group: any) { return this.shownGroupL1 === L1group; }
isL2GroupShown(L2group: any) { return this.shownGroupL2 === L2group; }
isL3GroupShown(L3group: any) { return this.shownGroupL3 === L3group; }
isL4GroupShown(L4group: any) { return this.shownGroupL4 === L4group; }

getMeetingsByVirtArea(areaID: any, areaName: any) {
this.translate.get('FINDING_MTGS').subscribe(value => { this.presentLoader(value); });
Expand Down Expand Up @@ -148,12 +92,11 @@ export class VirtMeetingsPage {


showServiceStructure() {

this.HTMLGrouping = 'areas';
this.areaName = '';
this.shownDay = null;
}


public openLink(url: any) {
Browser.open({url: url});
}
Expand Down

0 comments on commit a2191c0

Please sign in to comment.