File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
Public
activitySave
|
activitySave(clearActivityFields)
|
|
|
Parameters :
| Name |
Optional |
| clearActivityFields |
No
|
|
|
Public
getWhat
|
getWhat(id)
|
|
|
|
|
|
Public
loadQuickComment
|
loadQuickComment(value)
|
|
|
|
|
|
Public
onCallNotesChange
|
onCallNotesChange(event)
|
|
|
|
|
|
Public
onNameSelectChange
|
onNameSelectChange(event)
|
|
|
|
|
|
Public
onRelatedToChange
|
onRelatedToChange(event)
|
|
|
|
|
|
Public
onSubjectChange
|
onSubjectChange(event)
|
|
|
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { IActivity, IActivityDetails } from '../../models/uilibrary.model';
@Component({
selector: 'app-activity',
templateUrl: './activity.component.html',
styleUrls: ['./activity.component.css']
})
export class ActivityComponent implements OnInit {
isActivityMaximized: boolean;
@Input() activity: IActivity;
@Output() ActivitySave: EventEmitter<IActivity> = new EventEmitter<IActivity>();
@Output() OnNameSelectChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();
@Output() OnRelatedToChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();
@Output() OnSubjectChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();
@Output() OnCallNotesChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();
constructor() {
this.isActivityMaximized = true;
}
ngOnInit() {
}
public onNameSelectChange(event) {
this.activity.WhoObject = this.getWho(event.currentTarget.value);
this.OnNameSelectChange.emit(this.activity);
}
public parseWhoObject(whoObject: IActivityDetails): string {
return whoObject.objectType + ': ' + whoObject.objectName;
}
public parseWhatObject(whatObject: IActivityDetails): string {
return whatObject.objectType + ': ' + whatObject.objectName;
}
public onRelatedToChange(event) {
this.activity.WhatObject = this.getWhat(event.currentTarget.value);
this.OnRelatedToChange.emit(this.activity);
}
public onSubjectChange(event) {
this.activity.Subject = event.srcElement.value;
this.OnSubjectChange.emit(this.activity);
}
public onCallNotesChange(event) {
this.activity.Subject = event.srcElement.value.trim();
this.OnCallNotesChange.emit(this.activity);
}
public getWho(id): IActivityDetails {
for (let i = 0; i < this.activity.whoList.length; i++) {
if (this.activity.whoList[i].objectId === id) {
return this.activity.whoList[i];
}
}
}
public getWhat(id): IActivityDetails {
for (let i = 0; i < this.activity.whatList.length; i++) {
if (this.activity.whatList[i].objectId === id) {
return this.activity.whatList[i];
}
}
}
public loadQuickComment(value) {
this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
}
public activitySave(clearActivityFields) {
this.ActivitySave.emit(this.activity);
}
}
<div *ngIf="isActivityMaximized" class="callDisplay">
<div class="editor callHeader">
<label class="headerLabel">
<b>Activity Information</b>
</label>
<img class="ViewResizeImage" src="/assets/images/section_collapse.png" (click)="isActivityMaximized = false" title="Collapse">
</div>
<div class="callBody">
<div class="activityFields">
<form>
<div class="editor displayDiv">
<label class="displayLabels" title="Call From">{{activity.NameFieldName}}</label>
<select class="dropDownListStyle displayData" data-resetperactivity="false" (change)="onNameSelectChange($event)">
<option *ngFor="let who of activity.whoList" value="{{who.objectId}}">{{parseWhoObject(who)}}</option>
</select>
</div>
<div class="editor displayDiv">
<label class="displayLabels" title="Related To">{{activity.RelatedToFieldName}}</label>
<select class="dropDownListStyle displayData" (change)="onRelatedToChange($event)" data-resetperactivity="false">
<option *ngFor="let what of activity.whatList" value="{{what.objectId}}">{{parseWhatObject(what)}}</option>
</select>
</div>
<div class="editor displayDiv">
<label class="displayLabels" title="Subject">{{activity.SubjectFieldName}}</label>
<input class="activitySubjectTextBoxStyle displayData" (change)="onSubjectChange($event)" title="{{activity.Subject}}"
type="text" value="{{activity.Subject}}">
</div>
<div class="editor displayDiv">
<div class="callNotesContainer">
<div class="textAreaDiv">
<textarea value="{{activity.Description}}" placeholder="Click to add a comment" class="activityCommentsTextBoxStyle"
(change)="onCallNotesChange($event)" cols="20" rows="2" title=""></textarea>
</div>
<div class="notesButtonBorder">
<div class="commentsButtonDiv">
<div class="quickCommentsDiv">
<input *ngFor="let quickComment of activity.quickCommentList ; let i = index;" class="quickNotesBotton" type="button"
value="{{i+1}}" (click)="loadQuickComment(i)" title="{{quickComment}}">
</div>
<div class="submitDiv">
<input class="submitButton" type="button" value="Submit" (click)="activitySave(false)">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div *ngIf="!isActivityMaximized" class="callDisplay">
<div class="editor callHeader">
<label class="headerLabel">
<b>Activity Information</b>
</label>
<img class="ViewResizeImage" src="assets/images/section_expand.png" (click)="isActivityMaximized = true" title="Expand">
</div>
.callDisplay {
display: grid;
margin-bottom: 8px;
background-color: #ffffff;
}
.editor {
font-size: 0.9em;
width: 70%;
text-align: left;
margin: 4px 5% 0 0px;
font-family: Arial;
white-space: nowrap;
text-overflow: ellipsis;
border: 0;
padding-top: 2px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.callHeader {
/* border: 1px solid #939598 !important; */
background-color: #F4F5FB !important;
width: 100% !important;
margin-top: 0px !important;
}
.headerLabel {
margin-left: 10px
}
.ViewResizeImage {
width: 20px;
height: 20px;
float: right;
cursor: pointer;
}
.callBody {
border-top: 0;
position: relative;
}
.displayDiv {
width: 100%;
display: flex;
}
.displayLabels {
margin-left: 5px;
width: 25%;
margin-right: 2px;
}
.displayData {
width: 70%;
}
.dropDownListStyle {
border: 1px solid #939598 !IMPORTANT;
border-radius: 3px !IMPORTANT;
width: 71% !IMPORTANT;
height: 20px !IMPORTANT;
text-align: left !IMPORTANT;
white-space: nowrap !IMPORTANT;
text-overflow: ellipsis !IMPORTANT;
margin: 0 5px 0 0;
cursor: pointer;
}
.activitySubjectTextBoxStyle {
border: 1px solid #939598 !IMPORTANT;
border-radius: 3px !IMPORTANT;
width: 71% !IMPORTANT;
height: 20px !IMPORTANT;
text-align: left !IMPORTANT;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0 5px 0 0;
padding-left: 2px;
}
.activityCommentsTextBoxStyle {
border: none;
color: #333333 !IMPORTANT;
text-align: left !IMPORTANT;
margin: 0px 0% 0px 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
resize: none;
width: 100%;
height: 95px;
}
.notesButtonBorder {
background-color: #ffffff;
border-left: 1px solid #939598;
border-bottom: 1px solid #939598;
border-right: 1px solid #939598;
border-bottom-left-radius: 3px !IMPORTANT;
border-bottom-right-radius: 3px !IMPORTANT;
height: auto;
}
.commentsButtonDiv {
width: 100%;
display: flex;
align-items: center;
}
.quickNotesBotton {
background-color: #1e72ba;
border: 0;
color: white;
height: 70%;
width: 20px;
margin: 2px;
outline: none;
font-size: 70%;
}
.quickCommentsDiv {
text-align: left;
flex: 1 0 0;
flex-wrap: wrap;
display: flex;
margin: 2px;
}
.submitDiv {
text-align: right;
padding-right: 4px;
}
.submitButton {
border: 0;
float: right;
margin-top: 2px;
outline: none;
cursor: pointer;
background-color: #6cb047;
color: #ffffff;
border-radius: 4px;
font-size: 98%;
margin-bottom: 2px
}
Legend
Html element with directive