Merge pull request #741 from bcgov/oleks

DSS-941, DSS-894

frontend/src/app/common/services/dashboard.service.ts

@@ -49,7 +49,7 @@ export class DashboardService {
       {
         title: 'Aggregated Listing Data',
         accessPermission: listing_read,
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Aggregated Listing Data',
         description: 'View aggregated platform listing data for your community',
         route: 'aggregated-listings',
@@ -60,7 +60,7 @@ export class DashboardService {
       {
         title: 'Listing Data',
         accessPermission: listing_read,
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Listing Data',
         description: 'View platform listing data for your community',
         route: 'listings',
@@ -71,7 +71,7 @@ export class DashboardService {
       {
         title: 'Download Listing Data',
         accessPermission: listing_read,
-        buttonIcon: '',
+        buttonIcon: 'export',
         buttonText: 'Download Listing Data',
         description: 'Download listing data for your community',
         route: 'export-listings',
@@ -82,7 +82,7 @@ export class DashboardService {
       {
         title: 'Upload Platform Data',
         accessPermission: listing_file_upload,
-        buttonIcon: '',
+        buttonIcon: 'upload',
         buttonText: 'Upload data',
         description: 'Upload platform data to the system ',
         route: 'upload-listing-data',
@@ -94,7 +94,7 @@ export class DashboardService {
         title: 'Platform Upload History',
         accessPermission: upload_history_read,
         description: 'View all platform upload history here',
-        buttonIcon: '',
+        buttonIcon: 'history',
         buttonText: 'Platform Upload History',
         route: '/upload-listing-history',
         boxId: 'platformUploadHistory_box',
@@ -104,7 +104,7 @@ export class DashboardService {
       {
         title: 'Upload Business Licence Data',
         accessPermission: licence_file_upload,
-        buttonIcon: '',
+        buttonIcon: 'history',
         buttonText: 'Upload Business Licence Data',
         description: 'Upload your local government’s business licence data',
         route: '/upload-business-licence-data',
@@ -115,7 +115,7 @@ export class DashboardService {
       {
         title: 'User Management',
         accessPermission: user_write,
-        buttonIcon: '',
+        buttonIcon: 'user-cog',
         buttonText: 'User Management',
         description: 'Process new requests for system access',
         route: '/user-management',
@@ -126,7 +126,7 @@ export class DashboardService {
       {
         title: 'Manage Roles and Permissions',
         accessPermission: role_read,
-        buttonIcon: '',
+        buttonIcon: 'user-cog',
         buttonText: 'Manage Roles And Permissions',
         description: 'Add or edit roles and permissions',
         route: '/roles',
@@ -137,7 +137,7 @@ export class DashboardService {
       {
         title: 'Manage Platforms',
         accessPermission: platform_write,
-        buttonIcon: '',
+        buttonIcon: 'cog',
         buttonText: 'Manage Platforms',
         description: 'Manage platform information',
         route: '/platform-management',
@@ -148,7 +148,7 @@ export class DashboardService {
       {
         title: 'Guidance for Local Government',
         accessPermission: '',
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Local Government Guide',
         description: 'View the policy guidance for sending Notices, Takedown Requests and Escalations',
         route: 'https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/data-guidelines-localgovernment',
@@ -161,7 +161,7 @@ export class DashboardService {
       {
         title: 'Guideline for Platforms',
         accessPermission: '',
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Platform Guide',
         description: 'Understand requirements for STR platforms under the STRAA',
         route: 'https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/data-guidelines-platforms',
@@ -174,7 +174,7 @@ export class DashboardService {
       {
         title: 'User Guide',
         accessPermission: '',
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View User Guide',
         description: 'See detailed information about how the STR Data Portal works',
         route: 'https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/strdataportal-support',
@@ -186,7 +186,7 @@ export class DashboardService {
       },
       {
         accessPermission: takedown_action,
-        buttonIcon: '',
+        buttonIcon: 'exclamation-circle',
         buttonText: 'Send Notice',
         description: 'Notify an STR host and platform that a listing is not compliant with a business licence requirement. A notice must be sent prior to sending a Takedown Request',
         route: '/compliance-notice',
@@ -197,7 +197,7 @@ export class DashboardService {
       },
       {
         accessPermission: takedown_action,
-        buttonIcon: '',
+        buttonIcon: 'file-x',
         buttonText: 'Send Takedown Letter',
         description: 'Send a request to an STR platform to remove a non-compliant listing. A Takedown Request can be sent within a period of 5 to 90 days after a Notice of Non-Compliance is delivered.',
         route: '/takedown-request',

frontend/src/app/features/components/dashboard/dashboard.component.html

@@ -6,8 +6,10 @@ <h2>Home</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}
+            </button>
         </div>
     </div>
 </div>
@@ -19,8 +21,9 @@ <h2 *ngIf="cardSectionsToDisplay.admin.length">Administration Tools</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}</button>
         </div>
     </div>
 </div>
@@ -32,8 +35,10 @@ <h2 *ngIf="cardSectionsToDisplay.forms.length">Forms</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}
+            </button>
         </div>
     </div>
 </div>
@@ -45,8 +50,10 @@ <h2 *ngIf="cardSectionsToDisplay.info.length">Information and Support</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}
+            </button>
         </div>
     </div>
 </div>

frontend/src/app/features/components/dashboard/dashboard.component.scss

@@ -58,6 +58,50 @@
 
             .card-actions {
                 height: 48px;
+
+                span {
+
+                    &.icon {
+                        margin-right: 8px;
+                        width: 20px;
+                        height: 20px;
+                        background-position: center center;
+                        background-repeat: no-repeat;
+                        background-size: contain;
+
+                        &.cog {
+                            background-image: url(../../../../assets/images/dashboard/cog.svg);
+                        }
+
+                        &.exclamation-circle {
+                            background-image: url(../../../../assets/images/dashboard/exclamation-circle.svg);
+                        }
+
+                        &.export {
+                            background-image: url(../../../../assets/images/dashboard/cog.svg);
+                        }
+
+                        &.eye {
+                            background-image: url(../../../../assets/images/dashboard/eye.svg);
+                        }
+
+                        &.file-x {
+                            background-image: url(../../../../assets/images/dashboard/file-x.svg);
+                        }
+
+                        &.history {
+                            background-image: url(../../../../assets/images/dashboard/history.svg);
+                        }
+
+                        &.upload {
+                            background-image: url(../../../../assets/images/dashboard/upload.svg);
+                        }
+
+                        &.user-cog {
+                            background-image: url(../../../../assets/images/dashboard/user-cog.svg);
+                        }
+                    }
+                }
             }
         }
     }

frontend/src/app/features/components/dashboard/dashboard.component.ts

@@ -26,7 +26,7 @@ import { GlobalLoaderService } from '../../../common/services/global-loader.serv
   styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent implements OnInit {
-  userType = '' || 'BCGov' || 'Platform' || 'LG' || 'Admin';
+  userType!: '' | 'BCGov' | 'Platform' | 'LG' | 'Admin';
   currentUser!: User;
   showListingHistory = false;
 

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

@@ -165,7 +165,7 @@ <h2 class="title">Aggregated Listings</h2>
                                 pTooltip="Reassigned">
                             </div>
                             <div *ngIf="listing.isTakenDown" class="status-flag status-takedown-complete"
-                                pTooltip="Takedown Complete">
+                                pTooltip="Takedown Reported">
                             </div>
                         </div>
                     </td>
@@ -240,8 +240,8 @@ <h2 class="title">Aggregated Listings</h2>
                 current monthly data</li>
             <li><span class="status-circle status-inactive">I</span>&nbsp;Inactive: Listing appeared in previous
                 but not current monthly data </li>
-            <li><span class="status-flag status-takedown-complete"></span>&nbsp;Takedown Complete: Platform
-                confirmed takedown of the listing</li>
+            <li><span class="status-flag status-takedown-complete"></span>&nbsp;Takedown Reported: Platform reported
+                takedown of the listing</li>
             <li><span class="status-flag status-reassigned"></span>&nbsp;Reassigned: Address (best
                 match) was updated to a new jurisdiction</li>
         </ul>

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

@@ -22,12 +22,9 @@ <h2>Detailed Listing Information for</h2>
     </div>
     <div class="column">
         <button *ngIf="!isCEU" pButton (click)="sendNoticeOfNonCompliance()" class="p-button-outlined do-not-print-it">
-            <span class="nonc-icon"></span> Send Notice Of
-            Non-Compliance </button>
+            <span class="nonc-icon"></span> Send Notice Of Non-Compliance </button>
         <button *ngIf="!isCEU" pButton (click)="sendTakedownRequest()" class="p-button-outlined do-not-print-it"><span
-                class="tdr-icon"></span> Send
-            Takedown
-            Request</button>
+                class="tdr-icon"></span> Send Takedown Request</button>
     </div>
 </div>
 <div class="content" *ngIf="listing">
@@ -79,7 +76,7 @@ <h2>Detailed Listing Information for</h2>
                     </span>
                     <span class="status-item" *ngIf="listing.isTakenDown">
                         <span>
-                            Takedown Complete
+                            Takedown Reported
                         </span>
                         <span class="status-flag status-takedown-complete">
                         </span>
@@ -497,7 +494,7 @@ <h2>Detailed Listing Information for</h2>
                 current monthly data</li>
             <li><span class="status-circle status-inactive">I</span>&nbsp;Inactive: Listing appeared in previous
                 but not current monthly data </li>
-            <li><span class="status-flag status-takedown-complete"></span>&nbsp;Takedown Complete: Platform confirmed
+            <li><span class="status-flag status-takedown-complete"></span>&nbsp;Takedown Reported: Platform reported
                 takedown of the listing</li>
             <li><span class="status-flag status-reassigned"></span>&nbsp;Reassigned: Address (best
                 match) was updated to a new jurisdiction</li>

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

@@ -239,8 +239,8 @@ <h2 class="title">Listings</h2>
                     current monthly data</li>
                 <li><span class="status-circle status-inactive">I</span>&nbsp;Inactive: Listing appeared in previous
                     but not current monthly data </li>
-                <li><span class="status-flag status-takedown-complete"></span>&nbsp;Takedown Complete: Platform
-                    confirmed takedown of the listing</li>
+                <li><span class="status-flag status-takedown-complete"></span>&nbsp;Takedown Reported: Platform reported
+                    takedown of the listing</li>
                 <li><span class="status-flag status-reassigned"></span>&nbsp;Reassigned: Address (best
                     match) was updated to a new jurisdiction</li>
             </ul>