From 13acdfef90444195e16e999a5a1ba93a9a220e89 Mon Sep 17 00:00:00 2001
From: jessewashburn
 <jesse@inst-builder-debian-12-build-build-tm6hg.us-central1-a.c.gce-image-builder.internal>
Date: Sun, 24 Nov 2024 23:54:19 +0000
Subject: [PATCH 1/3] responsive toolbar added

---
 planet                                        |  1 +
 .../requests/requests.component.html          | 55 +++++++++++++++++--
 .../requests/requests.component.scss          | 21 +++++++
 .../requests/requests.component.ts            | 30 +++++++---
 4 files changed, 95 insertions(+), 12 deletions(-)
 create mode 160000 planet
 create mode 100644 src/app/manager-dashboard/requests/requests.component.scss

diff --git a/planet b/planet
new file mode 160000
index 0000000000..c57e52983e
--- /dev/null
+++ b/planet
@@ -0,0 +1 @@
+Subproject commit c57e52983ebed1022b0bac89f08d0981f9653a5c
diff --git a/src/app/manager-dashboard/requests/requests.component.html b/src/app/manager-dashboard/requests/requests.component.html
index eddb3eac61..16b6898628 100644
--- a/src/app/manager-dashboard/requests/requests.component.html
+++ b/src/app/manager-dashboard/requests/requests.component.html
@@ -1,11 +1,18 @@
-<!-- Request template -->
 <mat-toolbar>
+  <!-- Back Button -->
   <button class="btnBack" mat-icon-button routerLink="/manager">
     <mat-icon>arrow_back</mat-icon>
   </button>
+
+  <!-- Title -->
   <span i18n>{ planetType, select, nation {Communities} center {Nations} }</span>
+
+  <!-- Spacer -->
   <span class="toolbar-fill"></span>
+
+  <!-- Toggles for Desktop -->
   <mat-button-toggle-group
+    *ngIf="!isMobile"
     class="margin-lr-5 font-size-1"
     (change)="shownStatusChange($event.value)"
     #filterGroup="matButtonToggleGroup">
@@ -16,12 +23,52 @@
       Connected
     </mat-button-toggle>
   </mat-button-toggle-group>
-  <mat-icon>search</mat-icon>
-  <mat-form-field class="font-size-1">
-    <input matInput (keyup)="requestListFilter($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
+
+  <!-- Search Bar for Desktop -->
+  <mat-icon *ngIf="!isMobile">search</mat-icon>
+  <mat-form-field *ngIf="!isMobile" class="font-size-1">
+    <input
+      matInput
+      (keyup)="requestListFilter($event.target.value)"
+      [value]="searchValue"
+      i18n-placeholder
+      placeholder="Search">
   </mat-form-field>
+
+  <!-- Filter Icon for Mobile -->
+  <mat-icon *ngIf="isMobile" (click)="toggleMobileFilterList()">filter_list</mat-icon>
 </mat-toolbar>
 
+<!-- Secondary Toolbar for Filters and Search (Mobile View) -->
+<mat-toolbar *ngIf="isMobile && showMobileFilters" class="mobile-filter-toolbar">
+  <!-- Toggles and Search Bar -->
+  <div class="mobile-filter-row">
+    <mat-button-toggle-group
+      class="margin-lr-5 font-size-1"
+      (change)="shownStatusChange($event.value)"
+      #filterGroup="matButtonToggleGroup">
+      <mat-button-toggle value="pending" [checked]="shownStatus === 'pending'" i18n>
+        Pending
+      </mat-button-toggle>
+      <mat-button-toggle value="accepted" [checked]="shownStatus === 'accepted'" i18n>
+        Connected
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <mat-icon>search</mat-icon>
+    <mat-form-field class="font-size-1">
+      <input
+        matInput
+        (keyup)="requestListFilter($event.target.value)"
+        [value]="searchValue"
+        i18n-placeholder
+        placeholder="Search">
+    </mat-form-field>
+  </div>
+</mat-toolbar>
+
+
+
 <div class="space-container">
   <mat-toolbar>
     <mat-toolbar-row class="primary-color font-size-1">
diff --git a/src/app/manager-dashboard/requests/requests.component.scss b/src/app/manager-dashboard/requests/requests.component.scss
new file mode 100644
index 0000000000..2d0f282504
--- /dev/null
+++ b/src/app/manager-dashboard/requests/requests.component.scss
@@ -0,0 +1,21 @@
+@import "../../variables";
+
+.mat-column-name {
+  max-width: 25vw;
+}
+.mat-column-stepNum {
+  max-width: 90px;
+}
+
+@media (max-width: $screen-sm) {
+  .responsive-table {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  mat-header-cell,
+  mat-cell {
+    min-width: 130px;
+  }
+}
diff --git a/src/app/manager-dashboard/requests/requests.component.ts b/src/app/manager-dashboard/requests/requests.component.ts
index 0ac6e8fdbb..70aa13f704 100644
--- a/src/app/manager-dashboard/requests/requests.component.ts
+++ b/src/app/manager-dashboard/requests/requests.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { CouchService } from '../../shared/couchdb.service';
 import { switchMap, takeUntil } from 'rxjs/operators';
@@ -12,14 +12,11 @@ import { CustomValidators } from '../../validators/custom-validators';
 import { ReportsService } from '../reports/reports.service';
 import { ManagerService } from '../manager.service';
 import { attachNamesToPlanets, arrangePlanetsIntoHubs } from '../reports/reports.utils';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
   templateUrl: './requests.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
-  ` ]
+  styleUrls: ['./requests.component.scss']
 })
 export class RequestsComponent implements OnInit, OnDestroy {
 
@@ -31,6 +28,9 @@ export class RequestsComponent implements OnInit, OnDestroy {
   shownStatus = 'pending';
   onDestroy$ = new Subject<void>();
   planetType = this.stateService.configuration.planetType;
+  deviceType: DeviceType;
+  isMobile: boolean;
+  showMobileFilters = false;
   get childType() {
     return this.planetType === 'nation' ? $localize`Network` : $localize`Region`;
   }
@@ -43,8 +43,12 @@ export class RequestsComponent implements OnInit, OnDestroy {
     private stateService: StateService,
     private planetMessageService: PlanetMessageService,
     private reportsService: ReportsService,
-    private managerService: ManagerService
-  ) {}
+    private managerService: ManagerService,
+    private deviceInfoService: DeviceInfoService
+  ) {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
 
   ngOnInit() {
     this.route.paramMap.pipe(
@@ -56,6 +60,12 @@ export class RequestsComponent implements OnInit, OnDestroy {
     });
   }
 
+  @HostListener('window:resize')
+  onResize() {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
+
   ngOnDestroy() {
     this.onDestroy$.next();
     this.onDestroy$.complete();
@@ -130,4 +140,8 @@ export class RequestsComponent implements OnInit, OnDestroy {
     this.reportsService.viewPlanetDetails(hubPlanet.doc);
   }
 
+  toggleMobileFilterList() {
+    this.showMobileFilters = !this.showMobileFilters;
+  }
+  
 }

From 5fddc475eaf62c636dae6a4c6bc91d34d136e171 Mon Sep 17 00:00:00 2001
From: jessewashburn
 <jesse@inst-builder-debian-12-build-build-tm6hg.us-central1-a.c.gce-image-builder.internal>
Date: Mon, 25 Nov 2024 13:25:02 +0000
Subject: [PATCH 2/3] removed comments. Made sure filter list showed as
 clickable

---
 .../requests/requests.component.html          | 24 ++++---------------
 .../requests/requests.component.ts            |  8 +++----
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/app/manager-dashboard/requests/requests.component.html b/src/app/manager-dashboard/requests/requests.component.html
index 16b6898628..1dae922cec 100644
--- a/src/app/manager-dashboard/requests/requests.component.html
+++ b/src/app/manager-dashboard/requests/requests.component.html
@@ -1,16 +1,9 @@
 <mat-toolbar>
-  <!-- Back Button -->
   <button class="btnBack" mat-icon-button routerLink="/manager">
     <mat-icon>arrow_back</mat-icon>
   </button>
-
-  <!-- Title -->
   <span i18n>{ planetType, select, nation {Communities} center {Nations} }</span>
-
-  <!-- Spacer -->
   <span class="toolbar-fill"></span>
-
-  <!-- Toggles for Desktop -->
   <mat-button-toggle-group
     *ngIf="!isMobile"
     class="margin-lr-5 font-size-1"
@@ -23,8 +16,6 @@
       Connected
     </mat-button-toggle>
   </mat-button-toggle-group>
-
-  <!-- Search Bar for Desktop -->
   <mat-icon *ngIf="!isMobile">search</mat-icon>
   <mat-form-field *ngIf="!isMobile" class="font-size-1">
     <input
@@ -34,14 +25,11 @@
       i18n-placeholder
       placeholder="Search">
   </mat-form-field>
-
-  <!-- Filter Icon for Mobile -->
-  <mat-icon *ngIf="isMobile" (click)="toggleMobileFilterList()">filter_list</mat-icon>
+  <button mat-icon-button *ngIf="isMobile" (click)="toggleMobileFilterList()">
+    <mat-icon>filter_list</mat-icon>
+  </button>
 </mat-toolbar>
-
-<!-- Secondary Toolbar for Filters and Search (Mobile View) -->
-<mat-toolbar *ngIf="isMobile && showMobileFilters" class="mobile-filter-toolbar">
-  <!-- Toggles and Search Bar -->
+<mat-toolbar *ngIf="isMobile && showFilterRow" class="mobile-filter-toolbar">
   <div class="mobile-filter-row">
     <mat-button-toggle-group
       class="margin-lr-5 font-size-1"
@@ -54,7 +42,6 @@
         Connected
       </mat-button-toggle>
     </mat-button-toggle-group>
-
     <mat-icon>search</mat-icon>
     <mat-form-field class="font-size-1">
       <input
@@ -66,9 +53,6 @@
     </mat-form-field>
   </div>
 </mat-toolbar>
-
-
-
 <div class="space-container">
   <mat-toolbar>
     <mat-toolbar-row class="primary-color font-size-1">
diff --git a/src/app/manager-dashboard/requests/requests.component.ts b/src/app/manager-dashboard/requests/requests.component.ts
index 70aa13f704..000fb6690b 100644
--- a/src/app/manager-dashboard/requests/requests.component.ts
+++ b/src/app/manager-dashboard/requests/requests.component.ts
@@ -16,7 +16,7 @@ import { DeviceInfoService, DeviceType } from '../../shared/device-info.service'
 
 @Component({
   templateUrl: './requests.component.html',
-  styleUrls: ['./requests.component.scss']
+  styleUrls: [ './requests.component.scss' ]
 })
 export class RequestsComponent implements OnInit, OnDestroy {
 
@@ -30,7 +30,7 @@ export class RequestsComponent implements OnInit, OnDestroy {
   planetType = this.stateService.configuration.planetType;
   deviceType: DeviceType;
   isMobile: boolean;
-  showMobileFilters = false;
+  showFilterRow = false;
   get childType() {
     return this.planetType === 'nation' ? $localize`Network` : $localize`Region`;
   }
@@ -141,7 +141,7 @@ export class RequestsComponent implements OnInit, OnDestroy {
   }
 
   toggleMobileFilterList() {
-    this.showMobileFilters = !this.showMobileFilters;
+    this.showFilterRow = !this.showFilterRow;
   }
-  
+
 }

From 63e978393517397cb23edd9163d7450687d91e20 Mon Sep 17 00:00:00 2001
From: mutugiii <mutugimutuma@gmail.com>
Date: Thu, 5 Dec 2024 00:06:39 +0300
Subject: [PATCH 3/3] template outlet for code reuse

---
 .../requests/requests.component.html          | 33 +++++--------------
 1 file changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/app/manager-dashboard/requests/requests.component.html b/src/app/manager-dashboard/requests/requests.component.html
index 1dae922cec..3d2ae68c72 100644
--- a/src/app/manager-dashboard/requests/requests.component.html
+++ b/src/app/manager-dashboard/requests/requests.component.html
@@ -4,34 +4,20 @@
   </button>
   <span i18n>{ planetType, select, nation {Communities} center {Nations} }</span>
   <span class="toolbar-fill"></span>
-  <mat-button-toggle-group
-    *ngIf="!isMobile"
-    class="margin-lr-5 font-size-1"
-    (change)="shownStatusChange($event.value)"
-    #filterGroup="matButtonToggleGroup">
-    <mat-button-toggle value="pending" [checked]="shownStatus === 'pending'" i18n>
-      Pending
-    </mat-button-toggle>
-    <mat-button-toggle value="accepted" [checked]="shownStatus === 'accepted'" i18n>
-      Connected
-    </mat-button-toggle>
-  </mat-button-toggle-group>
-  <mat-icon *ngIf="!isMobile">search</mat-icon>
-  <mat-form-field *ngIf="!isMobile" class="font-size-1">
-    <input
-      matInput
-      (keyup)="requestListFilter($event.target.value)"
-      [value]="searchValue"
-      i18n-placeholder
-      placeholder="Search">
-  </mat-form-field>
+  <ng-container *ngIf="!isMobile">
+    <ng-container *ngTemplateOutlet="filterItems"></ng-container>
+  </ng-container>
   <button mat-icon-button *ngIf="isMobile" (click)="toggleMobileFilterList()">
     <mat-icon>filter_list</mat-icon>
   </button>
 </mat-toolbar>
 <mat-toolbar *ngIf="isMobile && showFilterRow" class="mobile-filter-toolbar">
   <div class="mobile-filter-row">
-    <mat-button-toggle-group
+    <ng-container *ngTemplateOutlet="filterItems"></ng-container>
+  </div>
+</mat-toolbar>
+<ng-template #filterItems>
+  <mat-button-toggle-group
       class="margin-lr-5 font-size-1"
       (change)="shownStatusChange($event.value)"
       #filterGroup="matButtonToggleGroup">
@@ -51,8 +37,7 @@
         i18n-placeholder
         placeholder="Search">
     </mat-form-field>
-  </div>
-</mat-toolbar>
+  </ng-template>
 <div class="space-container">
   <mat-toolbar>
     <mat-toolbar-row class="primary-color font-size-1">