Merge pull request #514 from bcgov/oleks

DSS-658: FE: Filter Listings by Location - Group communities

Author: ychung-mot

frontend/src/app/common/models/dropdown-option.ts

@@ -1,7 +1,14 @@
 export interface DropdownOption {
-    label: string,
-    value: any,
+    label: string;
+    value: any;
 }
+
+export interface DropdownOptionOrganization {
+    label: string;
+    value: any;
+    localGovernmentType?: string;
+}
+
 export interface DropdownOptionSelectable extends DropdownOption {
     selected: boolean;
 }

frontend/src/app/features/components/listings-table/listings-table.component.html

@@ -301,9 +301,13 @@ <h2 class="title">Listings</h2>
                 </div>
             </p-accordionTab>
             <p-accordionTab *ngIf="isCEU" iconPos="end" header="By Community ">
-                <p-dropdown placeholder="Select a Community" [appendTo]="'body'" [inputId]="'community-filter-dropdown'"
-                    [filter]="true" class="auto-width" [options]="communities"
-                    [(ngModel)]="cancelableFilter.community"></p-dropdown>
+                <p-dropdown placeholder="Select a Community" appendTo="body" panelStyleClass="select-community"
+                    [inputId]="'community-filter-dropdown'" [filter]="true" [filterBy]="'label'" class="auto-width"
+                    [options]="groupedCommunities" [group]="true" [(ngModel)]="cancelableFilter.community">
+                    <ng-template let-group pTemplate="group">
+                        <strong>{{group.label}}</strong>
+                    </ng-template>
+                </p-dropdown>
 
             </p-accordionTab>
             <p-accordionTab iconPos="end" header="By Status">

frontend/src/app/features/components/listings-table/listings-table.component.ts

@@ -11,7 +11,7 @@ import { PaginatorModule } from 'primeng/paginator';
 import { DialogModule } from 'primeng/dialog';
 import { InputTextModule } from 'primeng/inputtext';
 import { PanelModule } from 'primeng/panel';
-import { DropdownOption } from '../../../common/models/dropdown-option';
+import { DropdownOption, DropdownOptionOrganization } from '../../../common/models/dropdown-option';
 import { UserDataService } from '../../../common/services/user-data.service';
 import { User } from '../../../common/models/user';
 import { ListingDetailsComponent } from './listing-details/listing-details.component';
@@ -63,7 +63,8 @@ export class ListingsTableComponent implements OnInit {
   searchTerm!: string;
   searchColumn: 'all' | 'address' | 'url' | 'listingId' | 'hostName' | 'businessLicense' = 'all';
   searchColumns = new Array<DropdownOption>();
-  communities = new Array<DropdownOption>();
+  communities = new Array<DropdownOptionOrganization>();
+  groupedCommunities = new Array();
 
   isCEU = false;
   isLegendShown = false;
@@ -320,8 +321,37 @@ export class ListingsTableComponent implements OnInit {
   private getOrganizations(): void {
     this.requestAccessService.getOrganizations('LG').subscribe({
       next: (orgs) => {
-        this.communities = orgs;
+        this.communities = orgs.map((org: DropdownOptionOrganization) => ({ label: org.label, value: org.value, localGovernmentType: org.localGovernmentType || 'Uncategorized' }));
+
+        const groupedData: Array<any> = this.communities.reduce((acc: any, curr: any) => {
+          const existingGroup = acc.find((group: any) => group.value === curr.localGovernmentType);
+          if (existingGroup) {
+            existingGroup.items.push({ label: curr.label, value: curr.value });
+          } else {
+            acc.push({
+              label: curr.localGovernmentType,
+              value: curr.localGovernmentType,
+              items: [{ label: curr.label, value: curr.value }]
+            });
+          }
+
+          return acc;
+        }, []);
+
+        groupedData.sort((a: any, b: any) => this.sortOrg(a.label, b.label));
+
+        this.groupedCommunities = groupedData;
       }
     });
   }
+
+  private sortOrg(a: string, b: string): number {
+    if (a > b) {
+      return 1;
+    }
+    if (a < b) {
+      return -1;
+    }
+    return 0;
+  }
 }

frontend/src/styles.scss

@@ -126,6 +126,14 @@ body {
         }
     }
 
+    .select-community {
+        p-dropdownitem {
+            .p-dropdown-item {
+                padding-left: 42px;
+            }
+        }
+    }
+
     p-dropdown {
         &.search-by-select {
             .p-dropdown {