Responsive feedback toolbar

open-learning-exchange · May 8, 2024 · 65f744a · 65f744a
1 parent bd78edc
commit 65f744a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 23 deletions.
diff --git a/src/app/feedback/feedback.component.html b/src/app/feedback/feedback.component.html
@@ -1,25 +1,59 @@
 <!-- Feedback Template -->
 <mat-toolbar>
-  <button class="btnBack" mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
-  <span i18n>Feedback List</span>
-  <span class="toolbar-fill"></span>
-  <mat-form-field class="font-size-1 margin-lr-3">
-    <mat-select i18n-placeholder placeholder="Feedback Type" [value]="filter.type || 'All'" (selectionChange)="onFilterChange($event.value, 'type')">
-      <mat-option i18n value="All">All</mat-option>
-      <mat-option *ngFor="let option of typeOptions" value={{option}}>{{option}}</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field class="font-size-1 margin-lr-3">
-    <mat-select i18n-placeholder placeholder="Feedback Status" [value]="filter.status || 'All'" (selectionChange)="onFilterChange($event.value, 'status')">
-      <mat-option i18n value="All">All</mat-option>
-      <mat-option *ngFor="let option of statusOptions" [value]="option.value">{{option.text}}</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-icon class="input-icon">search</mat-icon>
-  <mat-form-field class="font-size-1">
-    <input matInput i18n-placeholder placeholder="Type title to search..." [(ngModel)]="titleSearch">
-  </mat-form-field>
-  <button mat-button (click)="resetSearch()"><span i18n>Reset</span></button>
+  <ng-container *ngIf="deviceType === deviceTypes.DESKTOP; else mobileorTabletView">
+    <mat-toolbar-row>
+      <button class="btnBack" mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
+      <span i18n>Feedback List</span>
+      <span class="toolbar-fill"></span>
+      <ng-container *ngTemplateOutlet="filterOptions"></ng-container>
+      <ng-container *ngTemplateOutlet="searchOptions"></ng-container>
+    </mat-toolbar-row>
+  </ng-container>
+
+  <ng-template #mobileorTabletView>
+    <mat-toolbar-row>
+      <button class="btnBack" mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
+      <span i18n>Feedback List</span>
+      <span class="toolbar-fill"></span>
+      <button mat-icon-button (click)="this.showFiltersRow = !this.showFiltersRow" ><mat-icon>filter_list</mat-icon></button>
+    </mat-toolbar-row>
+    <ng-container *ngIf="deviceType === deviceTypes.TABLET">
+      <mat-toolbar-row *ngIf="showFiltersRow">
+        <ng-container *ngTemplateOutlet="filterOptions"></ng-container>
+        <ng-container *ngTemplateOutlet="searchOptions"></ng-container>
+      </mat-toolbar-row>
+    </ng-container>
+    <ng-container *ngIf="deviceType === deviceTypes.MOBILE">
+      <mat-toolbar-row *ngIf="showFiltersRow">
+        <ng-container *ngTemplateOutlet="filterOptions"></ng-container>
+      </mat-toolbar-row>
+      <mat-toolbar-row *ngIf="showFiltersRow">
+        <ng-container *ngTemplateOutlet="searchOptions"></ng-container>
+      </mat-toolbar-row>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #filterOptions>
+    <mat-form-field class="font-size-1 margin-lr-3">
+      <mat-select i18n-placeholder placeholder="Feedback Type" [value]="filter.type || 'All'" (selectionChange)="onFilterChange($event.value, 'type')">
+        <mat-option i18n value="All">All</mat-option>
+        <mat-option *ngFor="let option of typeOptions" value={{option}}>{{option}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="font-size-1 margin-lr-3">
+      <mat-select i18n-placeholder placeholder="Feedback Status" [value]="filter.status || 'All'" (selectionChange)="onFilterChange($event.value, 'status')">
+        <mat-option i18n value="All">All</mat-option>
+        <mat-option *ngFor="let option of statusOptions" [value]="option.value">{{option.text}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </ng-template>
+  <ng-template #searchOptions>
+    <mat-icon class="input-icon">search</mat-icon>
+    <mat-form-field class="font-size-1">
+      <input matInput i18n-placeholder placeholder="Type title to search..." [(ngModel)]="titleSearch">
+    </mat-form-field>
+    <button mat-button (click)="resetSearch()"><span i18n>Reset</span></button>
+  </ng-template>
 </mat-toolbar>
 <div class="space-container">
   <mat-toolbar>

diff --git a/src/app/feedback/feedback.component.ts b/src/app/feedback/feedback.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, HostListener } from '@angular/core';
 import { CouchService } from '../shared/couchdb.service';
 import { combineLatest } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
@@ -18,6 +18,7 @@ import { Router } from '@angular/router';
 import { StateService } from '../shared/state.service';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
 import { UsersService } from '../users/users.service';
+import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
 
 
 @Component({
@@ -54,6 +55,9 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
   private onDestroy$ = new Subject<void>();
   emptyData = false;
   users = [];
+  deviceType: DeviceType;
+  deviceTypes: typeof DeviceType = DeviceType;
+  showFiltersRow = false;
 
   constructor(
     private couchService: CouchService,
@@ -64,8 +68,15 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
     private router: Router,
     private stateService: StateService,
     private dialogsLoadingService: DialogsLoadingService,
-    private usersService: UsersService
-  ) {}
+    private usersService: UsersService,
+    private deviceInfoService: DeviceInfoService
+  ) {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+  }
+
+  @HostListener('window:resize') OnResize() {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+  }
 
   ngOnInit() {
     if (this.stateService.configuration.planetType === 'community') {