Merge pull request #607 from bcgov/oleks

DSS-796: FE: Enhancement to send notice/takedown in aggregated listings

Author: ychung-mot

frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html

@@ -2,13 +2,24 @@ <h2>Send Notices of Non-Compliance</h2>
 <h4>Complete the following fields to send Notices of Non-Compliance to STR Hosts and Platform Representatives.</h4>
 <h4>All fields are required except where stated.</h4>
 
-<p-panel class="table-panel" header="Included Listings">
+<p-panel class="table-panel">
+    <ng-template pTemplate="header" *ngIf="containsDisabledItems">
+        <div class="header-panel">
+            <strong>Included Listings</strong>
+            <div *ngIf="containsDisabledItems" class="some-items-are-inactive-msg"> <i
+                    class="pi pi-info-circle"></i>Notices of Non-Compliance and
+                Takedown Requests cannot be sent
+                for inactive listings as they are no longer available on the platform.</div>
+        </div>
+    </ng-template>
+
     <p-table [value]="extendedListings" [scrollable]="true" scrollDirection="vertical" scrollHeight="425px"
         styleClass="p-datatable-sm" [(selection)]="selectedListings">
         <ng-template pTemplate="header">
             <tr>
                 <th style="width: 4rem">
-                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                    <p-checkbox [binary]="true" [disabled]="containsDisabledItems"
+                        (onChange)="onListingSelected($event)"></p-checkbox>
                 </th>
                 <th class="sortable-header" id="offeringOrganizationNm_header"
                     [class.sorted]="this.sort && this.sort.prop === 'offeringOrganizationNm'"
@@ -62,7 +73,7 @@ <h4>All fields are required except where stated.</h4>
         <ng-template pTemplate="body" let-listing>
             <tr class="small-text">
                 <td>
-                    <p-tableCheckbox [value]="listing"></p-tableCheckbox>
+                    <p-tableCheckbox [disabled]="listing.listingStatusType === 'I'" [value]="listing"></p-tableCheckbox>
                 </td>
                 <td>{{ listing.offeringOrganizationNm }}</td>
                 <td>

frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.scss

@@ -13,6 +13,28 @@
     p-panel {
         margin-bottom: 24px;
         display: block;
+
+        .header-panel {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+
+            strong {
+                font-size: larger;
+            }
+
+            .some-items-are-inactive-msg {
+                i {
+                    margin-right: 8px;
+                    font-weight: 600;
+                }
+
+                font-size: medium;
+                color: #D32F2F;
+            }
+        }
     }
 
     tr {

frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.ts

@@ -19,6 +19,7 @@ import { ErrorHandlingService } from '../../../common/services/error-handling.se
 import { ComplianceNoticeBulk } from '../../../common/models/compliance-notice';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
+import { ListingTableRow } from '../../../common/models/listing-table-row';
 
 @Component({
   selector: 'app-bulk-compliance-notice',
@@ -41,17 +42,19 @@ import { GlobalLoaderService } from '../../../common/services/global-loader.serv
   styleUrl: './bulk-compliance-notice.component.scss'
 })
 export class BulkComplianceNoticeComponent implements OnInit {
-  listings!: Array<ListingDetails>;
+  listings!: Array<ListingDetails | ListingTableRow>;
   returnUrl!: string;
   myForm!: FormGroup;
-  extendedListings = new Array<ListingDetailsWithHostCheckboxExtension>();
+  containsDisabledItems = false;
+
+  extendedListings = new Array<ListingDetailsWithHostCheckboxExtension | any>();
 
   previewText = '';
   showPreviewDialog = false;
 
   submissionArray!: Array<ComplianceNoticeBulk>;
 
-  selectedListings!: Array<ListingDetailsWithHostCheckboxExtension>;
+  selectedListings!: Array<ListingDetails | ListingTableRow>;
   addressWarningScoreLimit = Number.parseInt(environment.ADDRESS_SCORE);
   sort!: { prop: string, dir: 'asc' | 'desc' }
 
@@ -81,9 +84,12 @@ export class BulkComplianceNoticeComponent implements OnInit {
         else {
           this.returnUrl = param['returnUrl'];
           this.listings = [...this.searchStateService.selectedListings];
-          this.extendedListings = this.listings.map((listing) => ({ ...listing, sendNoticeToHosts: listing.hasAtLeastOneValidHostEmail }));
+          this.containsDisabledItems = this.listings.some(l => l.listingStatusType !== 'I')
+
+          this.extendedListings = this.listings.map((listing) => ({ ...listing, sendNoticeToHosts: (listing as any).hasAtLeastOneValidHostEmail }));
           this.searchStateService.selectedListings = new Array<ListingDetailsWithHostCheckboxExtension>();
-          this.selectedListings = this.extendedListings;
+          this.selectedListings = this.extendedListings.filter(l => l.listingStatusType !== 'I')
+            ;
 
           this.initForm();
           this.cloakParams();
@@ -145,9 +151,18 @@ export class BulkComplianceNoticeComponent implements OnInit {
     this.showPreviewDialog = false;
   }
 
+  onListingSelected(e: any): void {
+    console.log(e);
+    if (e.checked) {
+      this.selectedListings = this.listings.filter(l => l.listingStatusType !== 'I');
+    } else {
+      this.selectedListings = [];
+    }
+  }
+
   private sendPreview(): void {
     const formValues = this.myForm.value;
-    this.submissionArray = this.selectedListings.map((x: ListingDetailsWithHostCheckboxExtension) => ({
+    this.submissionArray = this.selectedListings.map((x: ListingDetailsWithHostCheckboxExtension | any) => ({
       rentalListingId: x.rentalListingId,
       ccList: formValues.ccList.prototype === Array
         ? formValues

frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html

@@ -5,13 +5,24 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
     where stated.</h4>
 <form *ngIf="myForm" [formGroup]="myForm">
 
-    <p-panel class="table-panel" header="Included Listings">
+    <p-panel class="table-panel">
+        <ng-template pTemplate="header" *ngIf="containsDisabledItems">
+            <div class="header-panel">
+                <strong>Included Listings</strong>
+                <div *ngIf="containsDisabledItems" class="some-items-are-inactive-msg"> <i
+                        class="pi pi-info-circle"></i>Notices of Non-Compliance and
+                    Takedown Requests cannot be sent
+                    for inactive listings as they are no longer available on the platform.</div>
+            </div>
+        </ng-template>
+
         <p-table [value]="listings" [scrollable]="true" scrollDirection="vertical" scrollHeight="425px"
             styleClass="p-datatable-sm" [(selection)]="selectedListings">
             <ng-template pTemplate="header">
                 <tr>
                     <th style="width: 4rem">
-                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                        <p-checkbox [binary]="true" [disabled]="containsDisabledItems"
+                            (onChange)="onListingSelected($event)"></p-checkbox>
                     </th>
                     <th class="sortable-header" id="status_header"
                         [class.sorted]="this.sort && this.sort.prop === 'offeringOrganizationNm'"
@@ -54,7 +65,8 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
             <ng-template pTemplate="body" let-listing>
                 <tr class="small-text">
                     <td>
-                        <p-tableCheckbox [value]="listing"></p-tableCheckbox>
+                        <p-tableCheckbox [disabled]="listing.listingStatusType === 'I'"
+                            [value]="listing"></p-tableCheckbox>
                     </td>
                     <td>{{ listing.offeringOrganizationNm }}</td>
                     <td>

frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.scss

@@ -13,6 +13,28 @@
     p-panel {
         margin-bottom: 24px;
         display: block;
+
+        .header-panel {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+
+            strong {
+                font-size: larger;
+            }
+
+            .some-items-are-inactive-msg {
+                i {
+                    margin-right: 8px;
+                    font-weight: 600;
+                }
+
+                font-size: medium;
+                color: #D32F2F;
+            }
+        }
     }
 
     tr {

frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts

@@ -17,6 +17,7 @@ import { DelistingService } from '../../../common/services/delisting.service';
 import { validateEmailListString } from '../../../common/consts/validators.const';
 import { ErrorHandlingService } from '../../../common/services/error-handling.service';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
+import { ListingTableRow } from '../../../common/models/listing-table-row';
 
 @Component({
   selector: 'app-bulk-takedown-request',
@@ -37,9 +38,10 @@ import { GlobalLoaderService } from '../../../common/services/global-loader.serv
   styleUrl: './bulk-takedown-request.component.scss'
 })
 export class BulkTakedownRequestComponent implements OnInit {
-  listings!: Array<ListingDetails>;
+  listings!: Array<ListingDetails | ListingTableRow>;
   returnUrl!: string;
   myForm!: FormGroup;
+  containsDisabledItems = false;
 
   previewText = '';
   showPreviewDialog = false;
@@ -51,7 +53,7 @@ export class BulkTakedownRequestComponent implements OnInit {
     customDetailTxt: any;
   }[]
 
-  selectedListings!: Array<ListingDetails>;
+  selectedListings!: Array<ListingDetails | ListingTableRow>;
   addressWarningScoreLimit = Number.parseInt(environment.ADDRESS_SCORE);
   sort!: { prop: string, dir: 'asc' | 'desc' }
 
@@ -85,13 +87,23 @@ export class BulkTakedownRequestComponent implements OnInit {
           this.returnUrl = param['returnUrl'];
           this.listings = [...this.searchStateService.selectedListings];
           this.searchStateService.selectedListings = new Array<ListingDetails>();
-          this.selectedListings = this.listings;
+          this.selectedListings = this.listings.filter(l => l.listingStatusType !== 'I');
+          this.containsDisabledItems = this.listings.some(l => l.listingStatusType !== 'I')
           this.initForm();
           this.cloakParams();
         }
       });
   }
 
+  onListingSelected(e: any): void {
+    console.log(e);
+    if (e.checked) {
+      this.selectedListings = this.listings.filter(l => l.listingStatusType !== 'I');
+    } else {
+      this.selectedListings = [];
+    }
+  }
+
   onSort(property: keyof ListingDetails): void {
     if (this.sort) {
       if (this.sort.prop === property) {
@@ -158,7 +170,7 @@ export class BulkTakedownRequestComponent implements OnInit {
 
   private sendPreview(): void {
     const formValues = this.myForm.value;
-    this.submissionArray = this.selectedListings.map((x: ListingDetails) => ({
+    this.submissionArray = this.selectedListings.map((x: ListingDetails | ListingTableRow) => ({
       rentalListingId: x.rentalListingId,
       ccList: formValues.ccList.prototype === Array
         ? formValues