#837 - Performance for brew graph cards, aswell as fixing associated …

…brews performance back to 100vh - the calculation doesn't work here somehow

android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         applicationId "com.beanconqueror.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 80000
+        versionCode 80001
         versionName "8.0.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

src/app/brew/associated-brews/associated-brews.component.html

@@ -8,7 +8,7 @@
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
-<ion-content #brewContent>
+<ion-content #associatedBrewsComponent>
   <div *ngIf="associatedBrews?.length == 0" class="ion-padding ion-text-center">
     <div>
       <ion-icon color="inactive" name="beanconqueror-cup" size="large"></ion-icon>
@@ -18,10 +18,18 @@
     </div>
   </div>
 
-  <ag-virtual-scroll #openScroll [items]="associatedBrews" [height]="segmentScrollHeight" min-row-height="180">
-    <brew-information (brewAction)="brewAction()" *ngFor="let brew of openScroll.items"
-                      [brew]="brew"></brew-information>
 
-  </ag-virtual-scroll>
+        @if(associatedBrews?.length > 0) {
+          <!--We stay at 100vh, because else ALL brew instances are rendered with 100vh just the needed once are rendered - very strange -->
+          <ag-virtual-scroll #openScrollAssociatedBrews [items]="associatedBrews" [height]="'100vh'" min-row-height="180">
+            <brew-information [collapsed]="isCollapsed" (brewAction)="brewAction()" *ngFor="let brew of openScrollAssociatedBrews.items"
+                              [brew]="brew"></brew-information>
+
+          </ag-virtual-scroll>
+        }
+
+
+
 
 </ion-content>
+

src/app/brew/associated-brews/associated-brews.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/brew/associated-brews/associated-brews.component.ts

@@ -15,6 +15,7 @@ import { UIBrewHelper } from '../../../services/uiBrewHelper';
 import { UIPreparationHelper } from '../../../services/uiPreparationHelper';
 import { UIMillHelper } from '../../../services/uiMillHelper';
 import { AgVirtualSrollComponent } from 'ag-virtual-scroll';
+import { UIAlert } from '../../../services/uiAlert';
 
 @Component({
   selector: 'app-bean-associated-brews',
@@ -30,18 +31,24 @@ export class AssociatedBrewsComponent {
 
   public associatedBrews: Array<Brew> = [];
 
-  @ViewChild('openScroll', { read: AgVirtualSrollComponent, static: false })
-  public openScroll: AgVirtualSrollComponent;
+  @ViewChild('openScrollAssociatedBrews', {
+    read: AgVirtualSrollComponent,
+    static: false,
+  })
+  public openScrollAssociatedBrews: AgVirtualSrollComponent;
 
-  @ViewChild('brewContent', { read: ElementRef })
-  public brewContent: ElementRef;
+  @ViewChild('associatedBrewsComponent', { read: ElementRef })
+  public associatedBrewsComponent: ElementRef;
   public segmentScrollHeight: string = undefined;
+
+  public isCollapsed: boolean = false;
   constructor(
     private readonly modalController: ModalController,
     private readonly uiBeanHelper: UIBeanHelper,
     private readonly uiAnalytics: UIAnalytics,
     private readonly uiPreparationHelper: UIPreparationHelper,
-    private readonly uiMillHelper: UIMillHelper
+    private readonly uiMillHelper: UIMillHelper,
+    private readonly uiAlert: UIAlert
   ) {}
 
   public async ionViewWillEnter() {
@@ -61,18 +68,25 @@ export class AssociatedBrewsComponent {
 
   private retriggerScroll() {
     setTimeout(async () => {
-      const el = this.brewContent.nativeElement;
-      let scrollComponent: AgVirtualSrollComponent;
-      scrollComponent = this.openScroll;
+      const el = this.associatedBrewsComponent.nativeElement;
+      const scrollComponent: AgVirtualSrollComponent =
+        this.openScrollAssociatedBrews;
       scrollComponent.el.style.height =
-        el.offsetHeight - scrollComponent.el.offsetTop + 'px';
+        el.offsetHeight - scrollComponent.el.offsetTop - 20 + 'px';
+
       this.segmentScrollHeight = scrollComponent.el.style.height;
+      setTimeout(() => {
+        /** If we wouldn't do it, and the tiles are collapsed, the next once just exist when the user starts scrolling**/
+        const elScroll = scrollComponent.el;
+        elScroll.dispatchEvent(new Event('scroll'));
+      }, 15);
     }, 150);
   }
 
-  public loadBrews() {
+  public async loadBrews() {
     let relatedBrews: Array<Brew>;
 
+    await this.uiAlert.showLoadingSpinner();
     if (this.type === 'preparation') {
       relatedBrews = this.uiPreparationHelper.getAllBrewsForThisPreparation(
         this.uuid
@@ -84,6 +98,7 @@ export class AssociatedBrewsComponent {
     }
 
     this.associatedBrews = UIBrewHelper.sortBrews(relatedBrews);
+    await this.uiAlert.hideLoadingSpinner();
     this.retriggerScroll();
   }
 

src/app/brew/brew.page.html

@@ -78,7 +78,7 @@
       </div>
 
       <ag-virtual-scroll #openScroll [items]="openBrewsView"  [height]="segmentScrollHeight"  [min-row-height]="isCollapseActive()?86:180">
-        <brew-information [collapsed]='isCollapseActive()' (brewAction)="brewAction($event[0],$event[1])" *ngFor="let brew of openScroll.items"
+        <brew-information [collapsed]='isCollapseActive()' (brewAction)="brewAction()" *ngFor="let brew of openScroll.items"
                           [brew]="brew"></brew-information>
 
       </ag-virtual-scroll>

src/app/brew/brew.page.ts

@@ -135,7 +135,7 @@ export class BrewPage implements OnInit {
     this.loadBrews();
   }
 
-  public async brewAction(action: BREW_ACTION, brew: Brew): Promise<void> {
+  public async brewAction(): Promise<void> {
     this.loadBrews();
   }