-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PRC-779] Updated comment service to return documents for all comments + misc fixes
- Loading branch information
Showing
12 changed files
with
397 additions
and
473 deletions.
There are no files selected for viewing
167 changes: 38 additions & 129 deletions
167
src/app/commenting/review-comments/comment-detail/comment-detail.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,139 +1,48 @@ | ||
<div *ngIf="!comment"> | ||
<em>No comment selected.</em> | ||
<div class="comment-detail-container" *ngIf="!comment"> | ||
<em>No comment selected</em> | ||
</div> | ||
|
||
<div *ngIf="comment"> | ||
<div class="comment-detail"> | ||
<div class="row"> | ||
<div class="col-6 comment-detail__meta"> | ||
<ul> | ||
<li class="badge badge-warning" *ngIf="comment.commentAuthor.requestedAnonymous">Requested Anonymous</li> | ||
<li class="comment-detail__author"> | ||
<strong>{{comment.commentAuthor.contactName}} | ||
<span *ngIf="comment.commentAuthor.orgName">({{comment.commentAuthor.orgName}})</span> | ||
<span>, {{comment.commentAuthor.location}}</span> | ||
</strong> | ||
</li> | ||
<li class="comment-detail__email" *ngIf="comment.commentAuthor.internal.email"> | ||
<a [href]="'mailto:' + comment.commentAuthor.internal.email"> | ||
<i class="material-icons">email</i> {{comment.commentAuthor.internal.email}}</a> | ||
</li> | ||
<li class="comment-detail__phone" *ngIf="comment.commentAuthor.internal.phone"> | ||
<a [href]="'tel:' + comment.commentAuthor.internal.phone"> | ||
<i class="material-icons">phone</i> {{comment.commentAuthor.internal.phone}}</a> | ||
</li> | ||
<li class="comment-detail__date"> | ||
<i class="material-icons">event</i> {{comment.dateAdded | date:'medium'}} | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="col-6 comment-detail__status"> | ||
<!-- PRC-272: temporarily removed --> | ||
<!-- <span class="badge" [ngClass]="commentService.isAccepted(comment) ? 'badge-success' | ||
: commentService.isPending(comment) ? 'badge-secondary' | ||
: commentService.isRejected(comment) ? 'badge-danger' | ||
: 'badge-light'">{{comment.commentStatus}}</span> --> | ||
</div> | ||
<div class="comment-detail-container" *ngIf="comment"> | ||
<div class="title-container__title"> | ||
<h2>{{comment.commentAuthor.contactName}} <span *ngIf="comment.commentAuthor.orgName">({{comment.commentAuthor.orgName}})</span></h2> | ||
<div class="comment-detail__date"> | ||
{{comment.dateAdded | date:'medium'}} | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="col-12 comment-detail__comment"> | ||
<p [innerHTML]="comment.comment | newlines"></p> | ||
</div> | ||
</div> | ||
<div class="comment-detail__meta"> | ||
<div> | ||
<a href="mailto:{{comment.commentAuthor.internal.email}}">{{comment.commentAuthor.internal.email}}</a> | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="col-12 comment-detail__documents"> | ||
<div *ngIf="!documents || documents.length === 0"> | ||
<em>This comment has no documents.</em> | ||
<div> | ||
<a href="tel:{{comment.commentAuthor.internal.phone}}">{{comment.commentAuthor.internal.phone}}</a> | ||
</div> | ||
<div> | ||
{{comment.commentAuthor.location}} | ||
</div> | ||
</div> | ||
<hr> | ||
<div class="comment-detail__body" [innerHTML]="comment.comment | newlines"></div> | ||
<div class="comment-detail__attachments"> | ||
<ul class="doc-list"> | ||
<li *ngFor="let document of comment.documents"> | ||
<div class="cell icon"> | ||
<i class="material-icons link" | ||
(click)="api.openDocument(document)"> | ||
insert_drive_file | ||
</i> | ||
</div> | ||
<div class="cell name"> | ||
<span class="cell__txt-content"> | ||
<a (click)="api.openDocument(document)">{{document.documentFileName}}</a> | ||
</span> | ||
</div> | ||
<div *ngFor="let document of documents"> | ||
<button class="btn btn-light btn-sm" (click)="api.downloadDocument(document)" title="Download this document"> | ||
<div class="cell actions"> | ||
<button class="btn btn-icon" type="button" title="Download this document" | ||
(click)="api.downloadDocument(document)"> | ||
<i class="material-icons">file_download</i> | ||
</button> | ||
<button class="btn btn-light btn-sm" (click)="api.openDocument(document)" title="Open this document" [hidden]="api.isMS"> | ||
<i class="material-icons">open_in_new</i> | ||
</button> | ||
<span [title]="document.displayName || ''">{{document.documentFileName}}</span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="col-12 comment-detail__buttons"> | ||
<!-- ngbRadioGroup doesn't work in NGB 1.0.0-alpha.31 / Angular 4.4.6 --> | ||
<!-- <div class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="comment.commentStatus"> | ||
<label ngbButtonLabel class="comment-detail__accept-btn btn-success"> | ||
<input ngbButton type="radio" (click)="accept()" value="Accepted"> | ||
<i class="material-icons">check_circle</i> | ||
<span>Accepted</span> | ||
</label> | ||
<label ngbButtonLabel class="comment-detail__pending-btn btn-secondary"> | ||
<input ngbButton type="radio" (click)="pend()" value="Pending"> | ||
<i class="material-icons">error</i> | ||
<span>Pending</span> | ||
</label> | ||
<label ngbButtonLabel class="comment-detail__reject-btn btn-danger"> | ||
<input ngbButton type="radio" (click)="reject()" value="Rejected"> | ||
<i class="material-icons">cancel</i> | ||
<span>Rejected</span> | ||
</label> | ||
</div> --> | ||
<!-- PRC-272: temporarily removed --> | ||
<!-- <button class="btn btn-success" data-toggle="button" [class.active]="commentService.isAccepted(comment)" [attr.aria-pressed]="commentService.isAccepted(comment)" | ||
(click)="doAccept(comment)" title="Change this comment to Accepted"> | ||
<i class="material-icons">check_circle</i> | ||
<span>Accept</span> | ||
</button> | ||
<button class="btn btn-secondary" data-toggle="button" [class.active]="commentService.isPending(comment)" [attr.aria-pressed]="commentService.isPending(comment)" | ||
(click)="doPending(comment)" title="Change this comment to Pending"> | ||
<i class="material-icons">error</i> | ||
<span>Pending</span> | ||
</button> | ||
<button class="btn btn-danger" data-toggle="button" [class.active]="commentService.isRejected(comment)" [attr.aria-pressed]="commentService.isRejected(comment)" | ||
(click)="doReject(comment)" title="Change this comment to Rejected"> | ||
<i class="material-icons">cancel</i> | ||
<span>Reject</span> | ||
</button> --> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="comment-alert" *ngIf="networkMsg"> | ||
<ngb-alert type="danger" (close)="networkMsg = null">Error: {{networkMsg}}</ngb-alert> | ||
</div> | ||
|
||
<div class="comment-notes"> | ||
<h5>Internal Notes</h5> | ||
<div class="row"> | ||
<div class="col-12 comment-notes__notes"> | ||
<form #userForm="ngForm"> | ||
<textarea class="form-control" id="internalNotes" rows="5" [(ngModel)]="internalNotes" name="internalNotes" #name="ngModel"></textarea> | ||
</form> | ||
</div> | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="col-6 comment-notes__info"> | ||
<ul *ngIf="comment.review.reviewerDate"> | ||
<li class="value"> | ||
<small>Last updated: {{comment.review.reviewerDate | date:'medium'}}</small> | ||
</li> | ||
<li class="value"> | ||
<small>By: {{comment.review._reviewerId || 'unknown'}}</small> | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="col-6 comment-notes__buttons"> | ||
<button type="button" class="btn btn-primary" (click)="saveNotes()" title="Save internal notes"> | ||
<i class="material-icons">check_circle</i> | ||
<span>Save</span> | ||
</button> | ||
<button type="button" class="btn btn-secondary" (click)="resetNotes()" title="Reset internal notes" [disabled]="isNotesPristine()"> | ||
<i class="material-icons">cancel</i> | ||
<span>Reset</span> | ||
</button> | ||
</div> | ||
</div> | ||
</li> | ||
</ul> | ||
</div> | ||
</div> |
146 changes: 30 additions & 116 deletions
146
src/app/commenting/review-comments/comment-detail/comment-detail.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,127 +1,41 @@ | ||
@import "~assets/styles/base/base.scss"; | ||
|
||
.comment-detail { | ||
background-color: #f7f7f7; | ||
border: darkgray 1px solid; | ||
border-radius: 0.25rem; | ||
.row { | ||
margin: 1rem 0.5rem; | ||
} | ||
&__meta { | ||
ul { | ||
list-style-type: none; | ||
padding: 0; | ||
margin-bottom: 0; | ||
} | ||
} | ||
&__author { | ||
font-size: larger; | ||
} | ||
&__email>a, | ||
&__phone>a, | ||
&__date { | ||
display: flex; | ||
} | ||
&__status { | ||
.badge { | ||
position: absolute; | ||
top: 25%; | ||
left: 60%; | ||
margin-right: -40%; | ||
transform: translate(-25%, -60%); | ||
width: 10rem; | ||
line-height: 1.5; | ||
font-size: larger; | ||
text-align: center; | ||
} | ||
} | ||
&__comment { | ||
max-height: 17.5rem; // match this with review-comments height | ||
overflow-y: auto; | ||
p { | ||
margin-bottom: 0; | ||
} | ||
} | ||
&__documents { | ||
a { | ||
display: inline-flex; | ||
} | ||
} | ||
&__buttons { | ||
display: flex; | ||
justify-content: flex-end; | ||
align-items: center; | ||
>:not(:last-of-type) { | ||
margin-right: 0.25rem; | ||
} | ||
>:not(:first-of-type) { | ||
margin-left: 0.25rem; | ||
} | ||
button { | ||
cursor: pointer; | ||
} | ||
} | ||
.comment-detail-container { | ||
padding: 1.5rem 2rem; | ||
} | ||
|
||
.comment-alert { | ||
margin-top: 1em; | ||
} | ||
.title-container__title { | ||
@include flex-box(); | ||
align-items: baseline; | ||
|
||
.comment-notes { | ||
margin-top: 1em; | ||
background-color: #f7f7f7; | ||
border: darkgray 1px solid; | ||
border-radius: 0.25rem; | ||
h5 { | ||
margin: 1rem; | ||
padding-left: 15px; | ||
padding-right: 15px; | ||
} | ||
.row { | ||
margin: 1rem 0.5rem; | ||
} | ||
&__notes { | ||
label { | ||
width: 100%; | ||
font-size: larger; | ||
padding-top: 1.5rem; | ||
border-top: 1px darkgray solid; | ||
} | ||
textarea { | ||
width: 100%; | ||
resize: none; | ||
} | ||
} | ||
&__info { | ||
display: flex; | ||
justify-content: flex-start; | ||
align-items: center; | ||
ul { | ||
list-style-type: none; | ||
padding: 0; | ||
margin-bottom: 0; | ||
} | ||
} | ||
&__buttons { | ||
display: flex; | ||
justify-content: flex-end; | ||
align-items: center; | ||
>:not(:last-of-type) { | ||
margin-right: 0.25rem; | ||
} | ||
>:not(:first-of-type) { | ||
margin-left: 0.25rem; | ||
} | ||
button { | ||
cursor: pointer; | ||
} | ||
h2 { | ||
@include flex(1 1 auto); | ||
margin-bottom: 0; | ||
letter-spacing: -0.02rem; | ||
font-size: 1.5rem; | ||
font-weight: 400; | ||
} | ||
} | ||
|
||
@media (max-width: 567px) {} | ||
.comment-detail__meta { | ||
margin-top: 0.5rem; | ||
font-size: 90%; | ||
} | ||
|
||
@media (min-width: 760px) {} | ||
.comment-detail__body { | ||
margin-top: 1.25rem; | ||
} | ||
|
||
@media (min-width: 992px) {} | ||
.comment-detail__attachments { | ||
margin-top: 2rem; | ||
} | ||
|
||
.comment-detail__date { | ||
color: #999; | ||
white-space: nowrap; | ||
font-size: 90%; | ||
} | ||
|
||
@media (min-width: 1200px) {} | ||
.comment-alert { | ||
margin-top: 1em; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.