From 65f744aca07b2170d51ccb7150c3f4a7b1a83d76 Mon Sep 17 00:00:00 2001
From: mutugiii <mutugimutuma@gmail.com>
Date: Wed, 8 May 2024 21:49:07 +0300
Subject: [PATCH 1/2] Responsive feedback toolbar

---
 src/app/feedback/feedback.component.html | 74 +++++++++++++++++-------
 src/app/feedback/feedback.component.ts   | 17 +++++-
 2 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/src/app/feedback/feedback.component.html b/src/app/feedback/feedback.component.html
index c83d860df0..742a0352ea 100644
--- 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
index d9c7aaa8d5..6500561806 100644
--- 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') {

From 868923ae2ad78a3ba85a951b442ecbd1c80841d0 Mon Sep 17 00:00:00 2001
From: dogi <dogi@users.noreply.github.com>
Date: Wed, 8 May 2024 16:00:46 -0400
Subject: [PATCH 2/2] Update package.json

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index c945250c11..052078e3ed 100755
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.14.29",
+  "version": "0.14.30",
   "myplanet": {
-    "latest": "v0.15.10",
-    "min": "v0.14.10"
+    "latest": "v0.15.15",
+    "min": "v0.14.15"
   },
   "scripts": {
     "ng": "ng",