Skip to content

Commit

Permalink
Merge pull request #295 from jeznorth/PRC-756
Browse files Browse the repository at this point in the history 
[PRC-756] Review Comment UI Update
  • Loading branch information
@marklise
marklise authored Oct 29, 2018
2 parents 805b8cb + 0384bae commit 301ec6a
Show file tree
Hide file tree
Showing 12 changed files with 397 additions and 473 deletions.
167 changes: 38 additions & 129 deletions src/app/commenting/review-comments/comment-detail/comment-detail.component.html
View file
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>&nbsp;{{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>&nbsp;{{comment.commentAuthor.internal.phone}}</a>
</li>
<li class="comment-detail__date">
<i class="material-icons">event</i>&nbsp;{{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 src/app/commenting/review-comments/comment-detail/comment-detail.component.scss
View file
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;
}
16 changes: 3 additions & 13 deletions src/app/commenting/review-comments/comment-detail/comment-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/toPromise';

import { Comment } from 'app/models/comment';
import { Document } from 'app/models/document';
import { ApiService } from 'app/services/api';
import { CommentService } from 'app/services/comment.service';
import { DocumentService } from 'app/services/document.service';
Expand All @@ -26,7 +25,6 @@ export class CommentDetailComponent implements OnChanges, OnDestroy {

public internalNotes: string; // working version
public networkMsg: string;
private documents: Array<Document>;
private ngUnsubscribe: Subject<boolean> = new Subject<boolean>();

constructor(
Expand All @@ -42,14 +40,6 @@ export class CommentDetailComponent implements OnChanges, OnDestroy {
if (changes.comment.currentValue) {
// save copy of notes for possible reset
this.internalNotes = this.comment.review.reviewerNotes;

// get the comment documents
this.documentService.getAllByCommentId(this.comment._id)
.takeUntil(this.ngUnsubscribe)
.subscribe(
documents => this.documents = documents,
error => console.log(error)
);
}
}

Expand Down Expand Up @@ -102,7 +92,7 @@ export class CommentDetailComponent implements OnChanges, OnDestroy {
.then(
() => {
// save succeeded
// don't bother reloading comment as then we'd need to reload documents too
// don't bother reloading comment
},
reason => this.networkMsg += reason
)
Expand All @@ -120,7 +110,7 @@ export class CommentDetailComponent implements OnChanges, OnDestroy {
error => console.log('publish error =', error)
);
// publish comment documents
this.documents.forEach(document =>
this.comment.documents.forEach(document =>
this.documentService.publish(document)
.takeUntil(this.ngUnsubscribe)
.subscribe(
Expand All @@ -144,7 +134,7 @@ export class CommentDetailComponent implements OnChanges, OnDestroy {
error => console.log('unpublish error =', error)
);
// unpublish comment documents
this.documents.forEach(document =>
this.comment.documents.forEach(document =>
this.documentService.unPublish(document)
.takeUntil(this.ngUnsubscribe)
.subscribe(
Expand Down
Loading

0 comments on commit 301ec6a

Please sign in to comment.