Merge pull request #640 from bcgov/oleks-release

DSS-849: Aggregate listing view displays too large, DSS-457: Menu header does not return to form
bcgov · Sep 16, 2024 · 23667a6 · 23667a6
2 parents b735aaf + 14d51d7
commit 23667a6
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 35 deletions.
diff --git a/frontend/src/app/common/layout/layout.component.scss b/frontend/src/app/common/layout/layout.component.scss
@@ -91,4 +91,56 @@
     position: sticky;
     bottom: 0;
     z-index: 10;
+}
+
+@media only screen and (max-width: 1500px) {
+    .content {
+        width: calc(100% - 148px);
+    }
+
+    .header {
+        .header-menu {
+            padding: 0 100px;
+        }
+    }
+
+    .footer {
+        font-size: 12px;
+    }
+}
+
+@media only screen and (max-width: 1550px) {
+    .content {
+        width: calc(100% - 200px);
+    }
+
+    .footer {
+        font-size: 14px;
+    }
+}
+
+@media only screen and (max-width: 1100px) {
+    .header {
+        .header-top {
+            padding: 0 84px;
+
+            .tile-container {
+                .main-title {
+                    font-size: 18px;
+                }
+            }
+        }
+
+        .header-menu {
+            padding: 0 16px;
+        }
+    }
+
+    .content {
+        width: calc(100% - 0px);
+    }
+
+    .footer {
+        font-size: 10px;
+    }
 }
diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.html b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.html
@@ -1,10 +1,10 @@
 <div class="title">Send Notice of Non-Compliance</div>
 <p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>
-<div *ngIf="!hideForm" class="sub-title">Complete the following fields to send a Notice of Non-Compliance with a local
+<div class="sub-title">Complete the following fields to send a Notice of Non-Compliance with a local
     government short-term rental (STR) business licence requirement to an STR Host and Platform Representative. All
     fields are required except where stated.</div>
 
-<form *ngIf="!hideForm" [formGroup]="myForm" (ngSubmit)="onPreview()">
+<form [formGroup]="myForm" (ngSubmit)="onPreview()">
     <div class="form-group-row">
         <div class="form-group-row-col">
             <label for="platformId">Select a Platform Representative for</label>
@@ -140,6 +140,4 @@
         <button pButton id="submit-dialog-btn" (click)="onSubmit(textarea.value,textarea)">Submit</button>
         <button pButton id="cancel-dialog-btn" class="outline-btn" (click)="onPreviewClose()">Cancel</button>
     </div>
-</p-dialog>
-<button *ngIf="hideForm" pButton id="return-home-btn" name="return-home-btn" (click)="onReturnHome()">Return
-    Home</button>
+</p-dialog>
diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.ts b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.ts
@@ -20,6 +20,7 @@ import { MessagesModule } from 'primeng/messages';
 import { Router } from '@angular/router';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
+import { ErrorHandlingService } from '../../../common/services/error-handling.service';
 
 @Component({
   selector: 'app-compliance-notice',
@@ -48,7 +49,6 @@ export class ComplianceNoticeComponent implements OnInit {
   platformOptions = new Array<DropdownOption>();
 
   isPreviewVisible = false;
-  hideForm = false;
   previewText = 'No preview'
 
   messages = new Array<Message>();
@@ -84,6 +84,7 @@ export class ComplianceNoticeComponent implements OnInit {
     private router: Router,
     private loaderService: GlobalLoaderService,
     private cd: ChangeDetectorRef,
+    private messageService: ErrorHandlingService,
   ) { }
 
   ngOnInit(): void {
@@ -137,7 +138,7 @@ export class ComplianceNoticeComponent implements OnInit {
       this.delistingService.createComplianceNotice(model)
         .subscribe({
           next: (_) => {
-            this.showSuccessMessage();
+            this.messageService.showSuccess('Your Notice of Non-Compliance was Successfully Submitted!');
           },
           error: (error) => {
             this.showErrors(error);
@@ -175,15 +176,6 @@ export class ComplianceNoticeComponent implements OnInit {
     commentTextArea.value = '';
   }
 
-  onReturnHome(): void {
-    this.router.navigateByUrl('/');
-  }
-
-  showSuccessMessage(): void {
-    this.hideForm = true;
-    this.messages = [{ severity: 'success', summary: '', detail: 'Your Notice of Non-Compliance was Successfully Submitted!' }];
-  }
-
   private prepareFormModel(form: FormGroup): ComplianceNotice {
     const model: ComplianceNotice = Object.assign({}, form.value);
 

diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.html b/frontend/src/app/features/components/delisting-request/delisting-request.component.html
@@ -1,6 +1,6 @@
 <div class="title">Send Takedown Request</div>
 <p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>
-<div *ngIf="!hideForm" class="sub-title">Complete the following fields to send a Takedown Request to an STR Platform
+<div class="sub-title">Complete the following fields to send a Takedown Request to an STR Platform
     representative.
     <br>
     <br>
@@ -9,7 +9,7 @@
     where stated.
 </div>
 
-<form *ngIf="!hideForm" [formGroup]="myForm" (ngSubmit)="onPreview()">
+<form [formGroup]="myForm" (ngSubmit)="onPreview()">
     <div class="form-group-row">
         <div class="form-group-row-col">
             <label for="platformId">Select a Platform Representative for</label>
@@ -114,6 +114,4 @@ <h4>Add Details of your request</h4>
         <button pButton name="cancel-dialog-btn" id="cancel-dialog-btn" class="outline-btn"
             (click)="onPreviewClose()">Cancel</button>
     </div>
-</p-dialog>
-<button *ngIf="hideForm" pButton id="return-home-btn" name="return-home-btn" (click)="onReturnHome()">Return
-    Home</button>
+</p-dialog>
diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.ts b/frontend/src/app/features/components/delisting-request/delisting-request.component.ts
@@ -21,6 +21,7 @@ import { Router } from '@angular/router';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
 import { forkJoin } from 'rxjs';
+import { ErrorHandlingService } from '../../../common/services/error-handling.service';
 
 @Component({
   selector: 'app-delisting-request',
@@ -50,7 +51,6 @@ export class DelistingRequestComponent implements OnInit {
   initiatorsOptions = new Array<DropdownOption>();
 
   isPreviewVisible = false;
-  hideForm = false;
   previewText = 'No preview'
 
   messages = new Array<Message>();
@@ -80,6 +80,7 @@ export class DelistingRequestComponent implements OnInit {
     private router: Router,
     private loaderService: GlobalLoaderService,
     private cd: ChangeDetectorRef,
+    private messageService: ErrorHandlingService,
   ) { }
 
   ngOnInit(): void {
@@ -134,7 +135,8 @@ export class DelistingRequestComponent implements OnInit {
       this.delistingService.createDelistingRequest(this.prepareFormModel(this.myForm))
         .subscribe({
           next: (_) => {
-            this.showSuccessMessage();
+            this.messageService.showSuccess('Your Takedown Request was Successfully Submitted!');
+            this.myForm.reset();
           },
           error: (error) => {
             this.showErrors(error);
@@ -153,15 +155,6 @@ export class DelistingRequestComponent implements OnInit {
     this.isPreviewVisible = false;
   }
 
-  onReturnHome(): void {
-    this.router.navigateByUrl('/');
-  }
-
-  showSuccessMessage(): void {
-    this.hideForm = true;
-    this.messages = [{ severity: 'success', summary: '', detail: 'Your Takedown Request was Successfully Submitted!' }];
-  }
-
   onWithStandardDetailChanged(value: CheckboxChangeEvent): void {
     if (value.checked)
       this.customDetailTxtControl.removeValidators([Validators.required]);

diff --git a/...ponents/listings-table/aggregated-listings-table/aggregated-listings-table.component.html b/...ponents/listings-table/aggregated-listings-table/aggregated-listings-table.component.html
@@ -17,13 +17,13 @@ <h2 class="title">Aggregated Listings</h2>
             Filter Listings
         </button>
 
-        <button *ngIf="isFilterSet" pButton id="filter-clear-btn" icon="pi pi-filter-slash" class="p-button-link red"
-            (click)="onClearFilters()">
+        <button *ngIf="isFilterSet" pButton id="filter-clear-btn" icon="pi pi-filter-slash"
+            class="filter-clear-btn p-button-link red" (click)="onClearFilters()">
             Clear Filters
         </button>
     </div>
     <div class="legend-container">
-        <button pButton id="view-more-history-btn" class="p-button-link" (click)="showLegend()">
+        <button pButton id="view-more-history-btn" class="p-button-link legend-open-btn" (click)="showLegend()">
             <i class="pi pi-question-circle"></i>&nbsp;Legend
         </button>
     </div>

diff --git a/...ponents/listings-table/aggregated-listings-table/aggregated-listings-table.component.scss b/...ponents/listings-table/aggregated-listings-table/aggregated-listings-table.component.scss
@@ -315,4 +315,70 @@
         display: flex;
         gap: 8px;
     }
+}
+
+@media only screen and (max-width: 1500px) {
+    :host {
+        padding: 0 10px 10px 10px;
+
+        h2 {
+            margin-left: 10px;
+            font-size: 1.125em;
+        }
+
+        input.search-input {
+            width: 250px;
+        }
+
+        .filter-open-btn,
+        .filter-clear-btn,
+        .legend-open-btn {
+            padding: 0.5rem .75rem;
+            font-size: .75rem !important;
+        }
+
+        th {
+            font-size: 12px !important;
+            padding: 0.25rem 0.125rem;
+
+            td,
+            tr {
+                font-size: 9px !important;
+                padding: 0.25rem 0.125rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1100px) {
+    :host {
+        padding: 0 10px 10px 10px;
+
+        h2 {
+            margin-left: 10px;
+            font-size: 1.125em;
+        }
+
+        input.search-input {
+            width: 250px;
+        }
+
+        .filter-open-btn,
+        .filter-clear-btn,
+        .legend-open-btn {
+            padding: 0.5rem .75rem;
+            font-size: .75rem !important;
+        }
+
+        th {
+            font-size: 12px !important;
+            padding: 0.25rem 0.125rem;
+
+            td,
+            tr {
+                font-size: 9px !important;
+                padding: 0.25rem 0.125rem;
+            }
+        }
+    }
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -579,4 +579,16 @@ body {
             }
         }
     }
+}
+
+@media only screen and (max-width: 1100px) {
+    body {
+        p-dropdown {
+            &.search-by-select {
+                .p-dropdown {
+                    width: 150px;
+                }
+            }
+        }
+    }
 }