Skip to content

Commit 14e403a

Browse files
ychung-motychung-mot
authored
Merge pull request #569 from bcgov/oleks
DSS-746: Updates to Detailed Listing page
2 parents ee07b11 + ead9dce commit 14e403a

File tree

6 files changed

+186
-78
lines changed

6 files changed

+186
-78
lines changed

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

Lines changed: 89 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -15,63 +15,78 @@ <h2>Detailed Listing Information for</h2>
1515
<div class="subtitle" *ngIf="listing">
1616
<div class="column">
1717
<div class="row">
18-
<div class="last-updated-container">
19-
<strong>Platform Report Month: </strong>{{listing.latestReportPeriodYm || '-'}}
20-
</div>
21-
<div class="platform-container">
22-
<strong>Platform: </strong>{{listing.offeringOrganizationNm || '-'}}
23-
</div>
24-
</div>
25-
<div class="row">
26-
<div class="organization-container">
18+
<div>
2719
<strong>Assigned to: </strong>{{listing.managingOrganizationNm || '-'}}
2820
</div>
29-
<div class="status-container" [ngSwitch]="listing.listingStatusType">
30-
<strong>Listing Status: </strong>
31-
<span class="status-item" *ngSwitchCase="'N'">New
32-
<span class="status-circle status-new">
33-
N
34-
</span>
35-
</span>
36-
<span class="status-item" *ngSwitchCase="'A'">
37-
<span>
38-
Active
39-
</span>
40-
<span class="status-circle status-active">
41-
A
42-
</span>
43-
</span>
44-
<span class="status-item" *ngSwitchCase="'I'">
45-
<span>
46-
Inactive
47-
</span>
48-
<span class="status-circle status-inactive">
49-
I
50-
</span>
51-
</span>
52-
<span class="status-item" *ngIf="listing.isLgTransferred">
53-
<span>
54-
Reassigned
55-
</span>
56-
<span class="status-flag status-reassigned">
57-
</span>
58-
</span>
59-
<span class="status-item" *ngIf="listing.isTakenDown">
60-
<span>
61-
Takedown Complete
62-
</span>
63-
<span class="status-flag status-takedown-complete">
64-
</span>
65-
</span>
66-
</div>
6721
</div>
6822
</div>
6923
<div class="column">
24+
<button pButton (click)="sendNoticeOfNonCompliance()" class="p-button-outlined ">
25+
<span class="nonc-icon"></span> Send Notice Of
26+
Non-Compliance </button>
27+
<button pButton (click)="sendTakedownRequest()" class="p-button-outlined"><span class="tdr-icon"></span> Send
28+
Takedown
29+
Request</button>
7030
</div>
7131
</div>
7232
<div class="content" *ngIf="listing">
7333
<div class="main-block">
74-
<p-panel class="details-block" header="Property Information">
34+
<p-panel class="details-block prop-info">
35+
<ng-template pTemplate="header">
36+
<div class="property-info-container">
37+
<strong class="panel-header-text">Property Information</strong>
38+
<p-tag class="platform-report-month">
39+
<strong class="tag-text">Platform Report Month:</strong>{{listing.latestReportPeriodYm || '-'}}
40+
</p-tag>
41+
</div>
42+
</ng-template>
43+
<div class="row">
44+
<span class="label">Platform:</span>
45+
<span class="value">{{listing.offeringOrganizationNm || '-'}}</span>
46+
</div>
47+
<div class="row">
48+
<div class="status-container" [ngSwitch]="listing.listingStatusType">
49+
<strong>Listing Status: </strong>
50+
<span class="status-item" *ngSwitchCase="'N'">New
51+
<span class="status-circle status-new">
52+
N
53+
</span>
54+
</span>
55+
<span class="status-item" *ngSwitchCase="'A'">
56+
<span>
57+
Active
58+
</span>
59+
<span class="status-circle status-active">
60+
A
61+
</span>
62+
</span>
63+
<span class="status-item" *ngSwitchCase="'I'">
64+
<span>
65+
Inactive
66+
</span>
67+
<span class="status-circle status-inactive">
68+
I
69+
</span>
70+
</span>
71+
<span class="status-item" *ngIf="listing.isLgTransferred">
72+
<span>
73+
Reassigned
74+
</span>
75+
<span class="status-flag status-reassigned">
76+
</span>
77+
</span>
78+
<span class="status-item" *ngIf="listing.isTakenDown">
79+
<span>
80+
Takedown Complete
81+
</span>
82+
<span class="status-flag status-takedown-complete">
83+
</span>
84+
</span>
85+
</div>
86+
</div>
87+
88+
<div class="spacer-hr"> </div>
89+
7590
<div class="row address">
7691
<span class="label">Address (Best Match):</span>
7792
<span class="value"
@@ -100,15 +115,16 @@ <h2>Detailed Listing Information for</h2>
100115
<span class="label">Number of Bedrooms (Platform Listing):</span>
101116
<span class="value">{{listing.availableBedroomsQty}}</span>
102117
</div>
103-
</p-panel>
104-
<p-panel class="details-block" header="Business Licence Information">
118+
119+
<div class="spacer-hr"> </div>
120+
105121
<div class="row">
106-
<span class="label">BL (Platform Listing):</span>
122+
<span class="label">Business Licence on Listing:</span>
107123
<span class="value">{{listing.businessLicenceNo}}</span>
108124
</div>
109-
</p-panel>
110125

111-
<p-panel class="details-block" header="Hosts" *ngIf="listing.hosts">
126+
<div class="spacer-hr"> </div>
127+
112128
<ng-template ngFor let-host [ngForOf]="listing.hosts" let-i="index">
113129
<div class="row">
114130
<span class="label">{{host.isPropertyOwner?'Property':'STR'}} Host (Platform Listing):</span>
@@ -123,17 +139,20 @@ <h2>Detailed Listing Information for</h2>
123139
<span class="value">{{host.emailAddressDsc}}</span>
124140
</div>
125141
<div class="row">
126-
<span class="label">Phone</span>
142+
<span class="label">Phone:</span>
127143
<span class="value">{{host.phoneNo}}</span>
128144
</div>
129145
<ng-template [ngIf]="i !== (listing.hosts.length-1)">
130-
<br>
146+
<div class="spacer-hr"> </div>
131147
</ng-template>
132148
</ng-template>
133-
</p-panel>
134149

135-
<p-panel class="details-block" header="Listing History (for This Listing ID)">
136-
<div class="row">
150+
<div class="spacer-hr"> </div>
151+
152+
<div class="row header-row">
153+
Listing History (for This Listing ID)
154+
</div>
155+
<div class="row night-stayed-row">
137156
<span class="label">Night Stayed YTD:</span>
138157
<span class="value">{{listing.nightsBookedYtdQty}}</span>
139158
</div>
@@ -169,9 +188,10 @@ <h2>Detailed Listing Information for</h2>
169188
</ng-template>
170189
</p-table>
171190
</div>
191+
172192
</p-panel>
173193

174-
<p-panel class="details-block" header="Address History">
194+
<p-panel class="details-block address-history" header="Address History">
175195
<div class="row">
176196
<p-table [value]="listing.addressChangeHistory" [paginator]="listing.addressChangeHistory.length>12"
177197
[showPageLinks]="false" currentPageReportTemplate="{first}-{last} of {totalRecords}"
@@ -209,17 +229,7 @@ <h2>Detailed Listing Information for</h2>
209229
</p-panel>
210230
</div>
211231
<div class="sidebar">
212-
<p-panel class="details-block" header="Actions" *ngIf="!isCEU">
213-
<div class="row">
214-
<button pButton (click)="sendNoticeOfNonCompliance()" class="p-button-link"> Send Notice Of
215-
Non-Compliance </button>
216-
</div>
217-
<div class="row">
218-
<button pButton (click)="sendTakedownRequest()" class="p-button-link"> Send Takedown
219-
Request</button>
220-
</div>
221-
</p-panel>
222-
<p-panel class="details-block" header="Action History">
232+
<p-panel class="details-block action-history" header="Action History">
223233
<p-table [value]="listing.actionHistory" styleClass="p-datatable-sm">
224234
<ng-template pTemplate="header">
225235
<tr>
@@ -244,15 +254,19 @@ <h2>Detailed Listing Information for</h2>
244254
</ng-template>
245255
</p-table>
246256
</p-panel>
247-
<p-panel class="details-block bl-info" header="Business Licence Information">
257+
<p-panel class="details-block bl-info">
258+
<ng-template pTemplate="header">
259+
<div class="property-info-container">
260+
<strong class="panel-header-text">Business Licence Information</strong>
261+
<p-tag class="last-bl-update-date" *ngIf="blInfo?.updDtm">
262+
<strong class="tag-text">Last Update Date:</strong>{{blInfo.updDtm |date:'YYYY-MM-dd' }}
263+
</p-tag>
264+
</div>
265+
</ng-template>
248266
<div *ngIf="!blInfo; else else_block" class="row no-bl-data">
249267
<strong>We were unable to find a business licence that matched this listing in our system.</strong>
250268
</div>
251269
<ng-template #else_block>
252-
<div *ngIf="blInfo?.updDtm" class="row">
253-
<strong>Last Update Date:</strong> <span>{{blInfo.updDtm |date:'YYYY-MM-dd' }}</span>
254-
</div>
255-
256270
<div *ngIf="blInfo?.businessNm ||
257271
blInfo?.physicalRentalAddressTxt" class="spacer-hr"></div>
258272

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

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,22 @@
4040
}
4141
}
4242

43+
.property-info-container {
44+
display: flex;
45+
justify-content: space-between;
46+
width: 100%;
47+
48+
strong {
49+
&.panel-header-text {
50+
font-size: large;
51+
}
52+
53+
&.tag-text {
54+
padding-right: 4px;
55+
}
56+
}
57+
}
58+
4359
.header-container {
4460
display: flex;
4561
justify-content: space-between;
@@ -64,11 +80,36 @@
6480
width: 100%;
6581
display: flex;
6682
gap: 24px;
83+
height: 42px;
84+
align-items: center;
6785

6886
.column {
6987
width: calc(50% - 24px);
7088
display: flex;
71-
flex-direction: column;
89+
90+
&:last-child {
91+
justify-content: end;
92+
gap: 8px;
93+
94+
button {
95+
padding: 8px 12px;
96+
border-color: #353433;
97+
98+
.nonc-icon {
99+
width: 20px;
100+
height: 20px;
101+
margin-right: 6px;
102+
background-image: url(../../../../../assets/images/nonc-icon.svg);
103+
}
104+
105+
.tdr-icon {
106+
width: 20px;
107+
height: 20px;
108+
margin-right: 6px;
109+
background-image: url(../../../../../assets/images/tdr-icon.svg);
110+
}
111+
}
112+
}
72113

73114
.row {
74115
display: flex;
@@ -144,6 +185,16 @@
144185
}
145186

146187
.row {
188+
&.header-row {
189+
font-size: large;
190+
font-family: 'BcSans-bold';
191+
padding-bottom: 24px;
192+
}
193+
194+
&.night-stayed-row {
195+
padding-bottom: 24px;
196+
}
197+
147198
&:not(:last-of-type) {
148199
margin-bottom: 6px;
149200
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,13 @@ import { UserDataService } from '../../../../common/services/user-data.service';
1212
import { environment } from '../../../../../environments/environment';
1313
import { SelectedListingsStateService } from '../../../../common/services/selected-listings-state.service';
1414
import { GlobalLoaderService } from '../../../../common/services/global-loader.service';
15-
import { address_write, takedown_action } from '../../../../common/consts/permissions.const';
15+
import { address_write } from '../../../../common/consts/permissions.const';
1616
import { CheckboxModule } from 'primeng/checkbox';
1717
import { FormsModule } from '@angular/forms';
1818
import { InputTextModule } from 'primeng/inputtext';
1919
import { RadioButtonModule } from 'primeng/radiobutton';
2020
import { ErrorHandlingService } from '../../../../common/services/error-handling.service';
2121
import { TagModule } from 'primeng/tag';
22-
import { BusinessLicenceService } from '../../../../common/services/business-licence.service';
2322
import { BusinessLicence } from '../../../../common/models/business-licence';
2423

2524
@Component({

‎frontend/src/assets/images/nonc-icon.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎frontend/src/assets/images/tdr-icon.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎frontend/src/styles.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,17 @@ body {
144144
.p-panel-header {
145145
background-color: #F3F2F1;
146146
}
147+
}
147148

149+
&.address-history,
150+
&.action-history {
151+
.p-panel-header {
152+
background-color: #FFF8E9;
153+
}
154+
}
155+
156+
&.bl-info,
157+
&.prop-info {
148158
.p-panel-content {
149159
padding-left: 0;
150160
padding-right: 0;
@@ -199,6 +209,20 @@ body {
199209
color: #2D2D2D;
200210
}
201211
}
212+
213+
&.platform-report-month {
214+
.p-tag {
215+
background-color: #1E5189;
216+
border-radius: 3px;
217+
}
218+
}
219+
220+
&.last-bl-update-date {
221+
.p-tag {
222+
background-color: #353433;
223+
border-radius: 3px;
224+
}
225+
}
202226
}
203227

204228
.p-element.p-button.p-component {

0 commit comments

Comments
 (0)