How to do Mat table Grouping and show data day and date wise in angualr like (Today, Yesterday and Date)

1).Componet.ts File Code

import { Component, OnInit, ViewChild, Input } from '@angular/core';

import { FormGroup } from '@angular/forms';

import { MatPaginator } from '@angular/material/paginator';

import { MatSort } from '@angular/material/sort';

import { MatTableDataSource } from '@angular/material/table';

import { Router } from '@angular/router';

import { ApiService } from '../../services/api.service';

import { ListExcelService } from '../../services/export-file/list_excel.service';

import { SpinnerService } from '../../services/spinner.service';

import { UserService } from '../../services/user/user.service';

import { BrowserStorageService } from '../../utility/browser-storage.service';

import { UtilityProvider } from '../../utility/utility';

import * as lodash from 'lodash';

import * as moment from 'moment';

@Component({

selector: 'app-event-log',

templateUrl: './event-log.component.html',

styleUrls: ['./event-log.component.scss']

})

export class EventLogComponent implements OnInit {

@Input() public modalRef: any;

@Input() public UserEventData: any = [];

@Input() public EventLogForm: FormGroup;

@ViewChild(MatSort) sort: MatSort;

@ViewChild('MatPaginator') paginator: MatPaginator;

displayedColumns = ['Module', 'SubModule', 'Event', 'IPAddress', 'Device', 'Comments', 'CreatedDate'];

dataSource = new MatTableDataSource();

rowCount = 0;

userId: string;

ifcompareTwoDates: Boolean = false;

constructor(private listexcelService: ListExcelService,

private browserStorageService: BrowserStorageService,

private apiService: ApiService,

private spinner: SpinnerService, private route: Router,

public userService: UserService,

public utility: UtilityProvider,

) { }

ngOnInit(): void {

this.apiService.isSpinner = false;

this.spinner.displaySpinner(true);

this.userId = this.browserStorageService.getLocalStorageItem('userId');

this.getdata().then((resp) => {

this.apiService.isSpinner = true;

this.spinner.displaySpinner(false);

}, (err) => {

this.apiService.isSpinner = true;

});

}

ngAfterViewInit() {

this.dataSource.paginator = this.paginator;

this.dataSource.sort = this.sort;

}

getdata(): Promise<any> {

return new Promise((resolve, reject) => {

let date = lodash.uniq(this.UserEventData.map(x => this.utility.convertToFormatedDateWithoutYear(x.CreatedDate)));

let GroupLogData = [];

let todayDate = new Date();

const yesterday = this.utility.convertToFormattedDate(this.utility.convertToFormatedDateWithoutYear(this.utility.yesterday()));

const today = this.utility.convertToFormattedDate(this.utility.convertToFormatedDateWithoutYear(todayDate));

if (date && date.length > 0) {

for (let i = 0; i < date.length; i++) {

GroupLogData.push({

initial: (date[i] == today ? 'Today' : date[i] == yesterday ? 'Yesterday' : date[i]),

isGroupBy: true

});

this.UserEventData.filter(x => {

if (this.utility.convertToFormatedDateWithoutYear(x.CreatedDate) == date[i]) {

GroupLogData.push(x);

}

});

}

this.dataSource = new MatTableDataSource(GroupLogData);

this.dataSource.paginator = this.paginator;

this.dataSource.sort = this.sort;

this.rowCount = this.UserEventData ? this.UserEventData.length : 0;

return resolve(this.dataSource);

});

}

generateListExcel() {

this.apiService.isSpinner = false;

this.spinner.displaySpinner(true);

let data = [];

if (this.dataSource && this.dataSource.data && this.dataSource.data.length > 0) {

data = this.dataSource.data.filter(x => !x['isGroupBy']);

this.listexcelService.generateExcel(data, 'ActivityLog').then((res) => {

this.apiService.isSpinner = true;

this.spinner.displaySpinner(false);

}).catch((err) => {

this.apiService.isSpinner = true;

this.spinner.displaySpinner(false);

});

}

applyFilter(filterValue: string) {

this.dataSource.filter = filterValue.trim().toLowerCase();

}

compareTwoDates(date1, date2) {

const mydate1 = this.convertdate(this.EventLogForm.get(date1).value);

const mydate2 = this.convertdate(this.EventLogForm.get(date2).value);

this.ifcompareTwoDates = new Date(mydate1) > new Date(mydate2);

return this.ifcompareTwoDates;

}

convertdate(date: any) {

const dateArray = date.split('/');

return (dateArray[2] + '-' + dateArray[1] + '-' + dateArray[0]);

}

GetEventLog() {

this.userService.getUserActivityLog('UserActivityLog', this.EventLogForm.get('UserID').value, this.utility.convertdate(this.EventLogForm.get('StartDate').value),

this.utility.convertdate(this.EventLogForm.get('EndDate').value)

)

.then(res => {

this.UserEventData = res.result;

this.getdata();

}).catch(err => {

this.UserEventData = [];

this.getdata();

});

}

isGroup(index, item): boolean {

return item.isGroupBy;

}

2).Componet.css File Code

table{

width: 100%;

}

table,tr,th,td{

border:1px solid gray;

border-collapse: collapse;

align-items: center;

}

td,th{

min-width:128px;

height: 25px;

}

.dealstrip{

background-image: linear-gradient(to left, rgba(50, 212, 99, 0), rgb(107, 216, 165)) ;

// padding:2px;

// border-radius: 2px;

// border:1px solid rgb(49, 148, 49);

}

.headingbox{

border: 1px solid;

border-radius: 1px;

min-width: inherit;

float: left;

padding: 4px;

text-align: center;

width: 100%;

}

.white{

background-color: white;

}

.orangebg{

background-color: silver;

}

.ng-chat-participant-status {

display: inline-block;

border-radius: 25px;

width: 8px;

height: 8px;

margin-top : 0px;

margin-right: -8px;

}

.example-container {

display: flex;

flex-direction: column;

// max-height: 600px;

min-width: 300px;

}

.mat-column-Module{

flex: 0 0 10% !important;

}

.mat-column-SubModule{

flex: 0 0 10% !important;

}

.mat-column-Event{

flex: 0 0 17% !important;

}

.mat-column-IPAddress{

flex: 0 0 18% !important;

}

.mat-column-Device{

flex: 0 0 13% !important;

}

.mat-column-Comments{

flex: 0 0 21% !important;

}

.mat-column-CreatedDate{

flex: 0 0 11% !important;

}

.mat-column-groupHeader{

justify-content: left !important;

padding-left: 10px !important;

color: gray;

}

.element-row {

position: relative;

}

.element-row:not(.expanded) {

cursor: pointer;

}

margin-bottom: 1px;

}

.element-row.expanded {

border-bottom-color: transparent;

}

.arrowColorRight{

color: #027b7f;

}.arrowColorLeft{

color: #474879;

}

.checktrue{

color: green;

}.checkfalse{

color:red;

}

.rawRed{

color: #f86c6b;

}

.full-width{

width: 100%;

}

.row-highlight{

background-color: #d7e9e4;

font-weight: bold;

border-left: 4px solid #2a937b;

}

.table tr th{

border-color: rgba(0, 0, 0, 0.12) !important;

}

.table-bordered th, .table-bordered td{

word-break : keep-all;

text-align: center;

}

.mat-table {

overflow: auto;

}

.mat-header-cell{

font-weight: bold;

color: black;

display:inline-flex;

justify-content:center;

border-left: 1px solid Gray;

border-bottom: 1px solid Gray;

border-color: rgba(0, 0, 0, 0.12);

word-break: keep-all !important;

// word-wrap: break-word;

padding: 0 5px;

}

.mat-cell{

display:inline-flex;

justify-content:center;

border-left: 1px solid Gray;

border-bottom: 1px solid Gray;

border-color: rgba(0, 0, 0, 0.12);

// word-break: break-all;

// word-wrap: break-word;

font-size: 12px !important;

padding: 0 5px;

}

.mat-row{

width: 100%;

min-height: 28px;

min-height: 40px;

}

.mat-header-row {

width: 100%;

min-height: 46px;

border-bottom: none;

}

.mat-cell:first-of-type,.mat-header-cell:first-of-type{

padding-left: 0px;

}

.mat-cell:last-of-type,.mat-header-cell:last-of-type{

padding-right: 0px;

}

.mat-footer-cell{

word-break: break-all;

word-wrap: break-word;

}

.container-table {

height: 100%;

}

.container-table {

display: table;

}

.vertical-center-row {

display: table-cell;

vertical-align: middle;

}

.period-bg-ligt-blue {

background-color: #f7f8f9 !important;

}

.mat-column-expandedDetail {

overflow-x:auto;

padding: 0px;

margin-right: 10px;

flex: 0 0 100% !important;

}

@media (min-width: 84px) {

.mat-row, .mat-header-row {

width: 100%;

min-width: 600px;

border-bottom: none;

}

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

}

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

}

// Large devices (desktops, 992px and up)

@media (min-width: 992px) {

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

}

span.badge{

font-size: inherit !important;

font-weight: inherit !important;

}

.box-section{

.box-view{

.form-section{

margin:0px;

padding:0px;

.statusrow{

padding:10px;

}

.btn-layout{

display: inline-block;

margin-bottom: 10px;

margin-right: 20px;

.btn{

padding: 6px 12px;

margin-bottom: 0;

font-size: 14px;

font-weight: 400;

text-align: center;

vertical-align: middle;

cursor: pointer;

background-color: #f4f4f4;

color: #444;

border-color: #ddd;

white-space: nowrap;

line-height: normal;

width: 100%;

&.btn-ttl{

border-radius: 4px;

text-overflow: ellipsis;

position: relative;

min-width: 75px;

}

.badge{

position: absolute;

top: -8px;

right: -10px;

border-radius: 10px;

padding: 3px 7px;

}

label{

width: 100%;

display: block;

margin-bottom: 0;

}

.hide{

display: none;

}

::ng-deep .mat-footer-cell{

display:flex;

justify-content:center;

}

.box-section .box-view .box-header {

display: block;

}

.select-70px {

width: 70px;

}

.box-section .box-view .box-header{

padding: 0px;

padding-top: 5px;

}

.box-section .box-view .box-header.bottom-border.txt-drop{

display: flex;

align-items: center;

justify-content: space-between;

overflow: visible;

}

.box-section .box-view .box-header.bottom-border{

border-bottom: 1px solid #f4f4f4;

}

.box-section .box-view .box-header{

color: #444;

display: flex;

padding: 10px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.border-label {

border-bottom: 1px solid #a7a7a7 !important;

}

.box-header {

text-align: center !important;

}

.box-section .box-view .box-header.bottom-border.txt-drop .box-header-title {

width: 100%;

}

.border-label > .box-header-title {

color:#a9a9a9 !important;

}

.box-section .box-view .box-header-title {

font-size: 18px;

margin: 0;

font-weight: bold;

overflow: hidden;

text-overflow: ellipsis;

}

// .box-header.bottom-border.txt-drop.border-label{

// border-bottom: 1px solid #80808070;

// }

.border-label{

border-bottom: 1px solid #a7a7a7 !important;

}

1).Componet.html File Code

</div>

<h3 class="box-header-title">{{EventLogForm.get('UserName').value}}({{

EventLogForm.get('DomainName').value }}) - Activity Log

</h3>

</div>

</span>

</div>

<input type="text" class="form-control" (keyup)="applyFilter($event.target.value)"

placeholder="Search">

<button style="padding: 5px;

width: 27px" *ngIf="rowCount>0 && dataSource.data && dataSource.data.length>0" type="button"

class="close pull-right" title="Export Excel">

</button>

<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"

style="padding: 5px;

width: 27px">

</button>

</div>

<app-date-picker [formControlDateObj]="EventLogForm.get('StartDate')"

placeholder="Start Date *"

(actionChangeDate)="compareTwoDates('StartDate','EndDate');">

</app-date-picker>

</div>

<app-date-picker [formControlDateObj]="EventLogForm.get('EndDate')"

placeholder="End Date *"

(actionChangeDate)="compareTwoDates('StartDate','EndDate');">

</app-date-picker>

</div>

<button type="button" class="btn-gray pull-left" style="margin-top: 14px;"

(click)="GetEventLog()">

</button>

</div>

End Date must be greater than Start Date.</p>

</div>

</form>

<mat-table #table mat-table matSort [dataSource]="dataSource" multiTemplateDataRows

class="table-responsive">

<ng-container matColumnDef="Module">

<mat-header-cell *matHeaderCellDef mat-sort-header>

Module

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="SubModule">

<mat-header-cell *matHeaderCellDef mat-sort-header>

SubModule

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="Event">

<mat-header-cell *matHeaderCellDef mat-sort-header>

Event

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="IPAddress">

<mat-header-cell *matHeaderCellDef mat-sort-header>

IP Address

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="Device">

<mat-header-cell *matHeaderCellDef mat-sort-header>

Device

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="Comments">

<mat-header-cell *matHeaderCellDef mat-sort-header>

Comments

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="CreatedDate">

<mat-header-cell *matHeaderCellDef mat-sort-header>

Activity Date

</mat-header-cell>

<mat-cell *matCellDef="let element">

</mat-cell>

</ng-container>

<ng-container matColumnDef="noData">

<mat-footer-cell *matFooterCellDef colspan="5">

Whoa! No Data Found !

</mat-footer-cell>

</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns;sticky: true">

</mat-header-row>

<mat-footer-row *matFooterRowDef="['noData']"

[ngClass]="{'hide':(rowCount!== 0)}">

</mat-footer-row>

<ng-container matColumnDef="groupHeader">

<mat-cell *matCellDef="let group">{{group.initial}}</mat-cell>

</ng-container>

<mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row"

[ngClass]="{'hide':row.isGroupBy}">

</mat-row>

<mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"

[class.highlightRow]="true" [class.highlightRownew]="">

</mat-row>

</mat-table>

<mat-paginator #MatPaginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20,50,100]"

showFirstLastButtons>

</mat-paginator>

</div>

4).Service.ts File Code

import { Injectable, NgZone } from '@angular/core';

import * as moment from 'moment';

import { ContentService, AuthenticationService, AppConfigService } from '@alfresco/adf-core';

import { AlfrescoApiService } from '@alfresco/adf-core';

import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';

import { ConfirmationModalComponent } from '../modal/confirmation/confirmation-modal.component';

import { Router } from '@angular/router';

import { BrowserStorageService } from './browser-storage.service';

import { Constants } from '../constants/app.constants';

import { SpinnerService } from '../services/spinner.service';

import { ContractService } from '../services/contract/contract.service';

import { MyTaskServiceService } from '../my-task-service.service';

import { MinimalNodeEntryEntity } from '@alfresco/js-api';

import { UserService } from '../services/user/user.service';

import Swal, { SweetAlertOptions } from 'sweetalert2';

import { XmlContractService } from '../services/export-file/xml-contract.service';

import { DealFastXMLService } from '../services/export-file/dealfast_xml.service';

import * as FileSaver from 'file-saver';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import * as lodash from 'lodash';

import { ApiService } from '../services/api.service';

@Injectable()

export class UtilityProvider {

public modalReference: BsModalRef;

public modalConfig: any = {

backdrop: 'static'

};

public NumericOnly = { 'A': { pattern: new RegExp('\[0-9\]') } };

public Percentage = { 'A': { pattern: new RegExp('^(100\.00|100\.0|100)|([0-9]{1,2}){0,1}(\.[0-9]{1,2}){0,1}$') } };

//public Percentage = { 'A': { pattern: new RegExp('^$\?\:\d\{1,2\}\(\?\:\.\d\{1,2\}$\?\|100$\?\:\.0\?0$\?\)\$') } };

public AlphabateOnly = { 'A': { pattern: new RegExp('\[a-zA-Z\]') } };

public AlphaNumric = { 'A': { pattern: new RegExp('\[a-zA-Z0-9\]') } };

//public NotAllowChar = { 'A': { pattern: new RegExp('^[^~]+$') } };

// public NotAllowChar = { 'A': { pattern: new RegExp('^[-_@a-zA-Z0-9 ]+$') } };

public NotAllowChar = { 'A': { pattern: new RegExp('^[-_&@a-zA-Z0-9 ]+$') } };

public MobileNo = { 'A': { pattern: new RegExp('^[+0-9]+$') } };

public AlphaNumricDash = { 'A': { pattern: new RegExp('\[a-zA-Z0-9-\]') } };

public AlphaNumricUnderScore = { 'A': { pattern: new RegExp('\[a-zA-Z0-9_\]') } };

constructor(private contentService: ContentService,

public modalService: BsModalService,

private browserStorageService: BrowserStorageService,

private spinner: SpinnerService,

private router: Router,

private contractService: ContractService,

private alfAuthuthService: AuthenticationService,

private xmlContractService: XmlContractService,

private dealFastXMLService: DealFastXMLService,

private userService: UserService,

private myTaskSerice: MyTaskServiceService,

private appConfigService: AppConfigService,

private apiService: AlfrescoApiService,

private httpApiService: ApiService,

private http: HttpClient,

private zone: NgZone) { }

convertToFormatedDateWithTime(dateVar: any, patern?: string) {

if (dateVar == null || dateVar === '') {

return '';

}

return moment(dateVar).format(patern ? patern : 'DD-MM-YYYY HH:mm:ss');

}

setStatusMenu(Constant, docusignStatus) {

Object.keys(Constant.SIGN_STATUS).forEach((method) => {

Object.keys(Constant.SIGN_STATUS[method].STATUS).forEach((status: any) => {

docusignStatus.push({

dispName: Constant.SIGN_STATUS[method].STATUS[status].dispName + '(' + Constant.SIGN_STATUS[method].DISP_NAME + ')',

method: Constant.SIGN_STATUS[method].METHOD,

status: Constant.SIGN_STATUS[method].STATUS[status].status

});

}

getStatusMenu(Constant, docusignStatusMenu) {

Object.keys(Constant.SIGN_STATUS).forEach((method) => {

Object.keys(Constant.SIGN_STATUS[method].STATUS).forEach((status: any) => {

docusignStatusMenu.push({

dispName: Constant.SIGN_STATUS[method].NAME,

method: Constant.SIGN_STATUS[method].METHOD,

methodStatus: Constant.SIGN_STATUS[method].STATUS[status].status,

methodStatusName: Constant.SIGN_STATUS[method].STATUS[status].NAME

});

}

convertToFormatedDate(dateVar: any) {

if (dateVar == null || dateVar === '') {

return '';

}

return moment(dateVar).format('DD-MM-YYYY');

}

convertToFormatedDateWithoutYear(dateVar: any) {

if (dateVar == null || dateVar === '') {

return '';

}

return moment(dateVar).format('MM/DD/YYYY');

}

newConvertToFormatedDate(dateVar: any) {

if (dateVar == null || dateVar === '') {

return '';

}

return moment(dateVar, 'DD/MM/YYYY').format('DD-MM-YYYY');

}

convertToFormattedDate(dateVar: any) {

if (dateVar == null || dateVar === '') {

return '';

}

return moment(dateVar).format('DD/MM/YYYY');

}

downloadDocument(docNode: any) {

let url = this.contentService.getContentUrl(docNode);

url = url.replace('/workspace://SpacesStore', '');

// const link = document.createElement('a');

// link.style.display = 'none';

// link.href = url;

window.open(url);

// document.body.appendChild(link);

// link.click();

// document.body.removeChild(link);

}

downloadContent(docNode: any, docName: string) {

const ecmHost = this.appConfigService.get<string>('ecmHost');

const ticket = this.apiService.getInstance().getTicketEcm();

const roleTicket = `ROLE_TICKET:${ticket}`;

const header: Object = {

headers: new HttpHeaders().set('Authorization', `Basic ${btoa(roleTicket)}`),

responseType: 'blob'

};

this.http.get(

ecmHost +

'/alfresco/api/-default-/public/alfresco/versions/1/nodes/' + docNode +

'/content?attachment=true', header

).subscribe((data) => {

FileSaver.saveAs(data, docName);

});

}

downloadDocumentVersion(docNode: any, versionId: any) {

let url = this.contentService.getContentUrl(docNode, true);

url = url.replace('/content', '/versions/' + versionId + '/content');

url = url.replace('workspace://SpacesStore/', '');

const link = document.createElement('a');

link.style.display = 'none';

link.href = url;

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

}

openComponentModal(component: any, data?: ModalOptions) {

if (!data) {

data = {

backdrop: 'static',

keyboard: false,

};

}

this.modalReference = this.modalService.show(component, data);

return this.modalReference;

}

checkMimeTypeAndOpenUrl(nodeObj, preUrl, postUrl) {

const docTypes = [

{ fileType: '.docx', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },

{ fileType: '.pptx', mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' }];

let customViewerNeeded = true;

if (nodeObj.content) {

docTypes.forEach(element => {

if (nodeObj.content && nodeObj.content.mimeType === element.mimeType) {

customViewerNeeded = false;

}

});

let urlM = preUrl + nodeObj.id + postUrl;

if (customViewerNeeded) {

urlM += '?viewer=custom';

}

window.open(urlM);

} else {

console.log('sss');

this.displaySwalPopup('Contract Document', 'Contract Document is not uploaded yet', 'info');

}

closeModalComponent() {

this.modalReference.hide();

}

confirmationAlert(title, message, buttons?: any) {

const modalReference = this.modalService.show(ConfirmationModalComponent, {

backdrop: 'static',

keyboard: false,

});

modalReference.content.modalData.title = title;

modalReference.content.modalData.message = message;

if (buttons) {

modalReference.content.modalData.cancelTitle = buttons.no;

modalReference.content.modalData.isRemoveXButton = buttons.isRemoveX ? true : false;

modalReference.content.modalData.submitTitle = buttons.yes;

modalReference.content.modalData.closeTitle = buttons.close;

}

return modalReference;

}

checkMax(event: any, maxValue: number) {

const regex = new RegExp(',', 'g');

const tempVal = event.target.value.replace(regex, '') + event.key;

if (Number(tempVal) > maxValue) {

event.preventDefault();

}

changeOrder(data) {

data.forEach(element => {

this.setCase(element);

element.to.forEach(to => {

this.setCase(to);

});

}

setCase(element) {

switch (element.index) {

case 0:

element.index = 7;

break;

case 1:

element.index = 6;

break;

case 2:

element.index = 5;

break;

case 3:

element.index = 4;

break;

case 4:

element.index = 3;

break;

case 5:

element.index = 2;

break;

case 6:

element.index = 1;

break;

case 7:

element.index = 0;

break;

}

navToPrePage() {

let preUrl = this.browserStorageService.getSessionStorageItem('preUrl');

if (!preUrl) {

preUrl = '';

}

this.router.navigate([preUrl]);

}

setSignatureStatusLabel(activeWorkflows: any[]) {

if (activeWorkflows && activeWorkflows.length) {

activeWorkflows.forEach(element => {

if (element.docuSign) {

let statusDisplay = '';

let statusMain = '';

Object.keys(Constants.SIGN_STATUS).forEach((method) => {

Object.keys(Constants.SIGN_STATUS[method].STATUS).forEach((status: any) => {

if (Constants.SIGN_STATUS[method].METHOD === element.docuSign.typeOfSignature) {

if (Constants.SIGN_STATUS[method].STATUS[status].status.toLowerCase()

=== element.docuSign.status.toLowerCase()) {

statusMain = Constants.SIGN_STATUS[method].STATUS[status].dispName +

'(' + Constants.SIGN_STATUS[method].DISP_NAME + ')';

const signtype = element.docuSign.typeOfSignature === 'docusign'

|| element.docuSign.typeOfSignature === 'wetinkviadocusign';

if (signtype && element.docuSign.status.toLowerCase() === 'draft') {

statusDisplay = 'Awaiting c\'pt sign';

} else if (signtype && element.docuSign.status.toLowerCase() === 'ready') {

statusDisplay = 'C\'pt sign confirmed';

} else {

statusDisplay = Constants.SIGN_STATUS[method].STATUS[status].dispName;

}

element['statusDisplay'] = statusDisplay;

}

});

}

});

}

removeHighLightedText(referenceId: string, nodeObject) {

return new Promise((resolve, reject) => {

const dest = 'destination';

const params = 'referenceNo=' + referenceId + '&fileId='

+ nodeObject.id + '&alfToken=' + this.alfAuthuthService.getTicketEcm() + '&isFirstDraft=true&isCreatePDF=' + false + '&destination=' + dest;

this.contractService.removeHilightedText(params).then((res: any) => {

return resolve(res);

}).catch(err => {

return reject(err);

});

}

closeSpinnerRedirect() {

// setTimeout(() => {

this.router.navigate(['deal-fast/contracts']);

// }, 20000);

}

addFirstDraftProps(nodeObject: MinimalNodeEntryEntity, status: string) {

const data = {

isFirstDraftCreated: status === Constants.FIRST_DRAFT.CREATED,

firstDraftVersionStatus: status,

firstDraftVersionId: nodeObject.properties['cm:versionLabel'],

nodeRef: nodeObject.id

};

return new Promise((resolve, reject) => {

this.myTaskSerice.addPropsToNode(data, nodeObject.id).then((res: any) => {

return resolve(res);

}).catch(err => {

return reject(err);

});

}

downloadPDF(referenceId, nodeId, contractId) {

this.contractService.downloadPDF(referenceId,

nodeId.replace('workspace://SpacesStore/', '')).then((res: any) => {

const blob = new Blob([res], { type: 'application/pdf' });

const a = document.createElement('a');

a.href = URL.createObjectURL(blob);

a.download = referenceId + '.pdf';

// start download

a.click();

if (res['status'] === 417 || res['status'] === 400) {

this.userService.saveUserActivityLog(Constants.DEAL_FAST.NAME,

Constants.USER_ACTIVITIES.DOCUMENT.NAME, 'PDF ' + Constants.USER_ACTIVITIES.DOCUMENT.DOWNLOAD,

Constants.ERROR, contractId);

} else {

this.userService.saveUserActivityLog(Constants.DEAL_FAST.NAME,

Constants.USER_ACTIVITIES.DOCUMENT.NAME, 'PDF ' + Constants.USER_ACTIVITIES.DOCUMENT.DOWNLOAD,

Constants.NO_COMMENTS, contractId);

}

});

}

downloadXMLDocument(ContractID: string) {

if (ContractID) {

this.contractService.GetContractDetail(ContractID, 'Active', 0,

this.browserStorageService.getLocalStorageItem('userId')).then((res: any) => {

if (res['status'] === 200) {

this.userService.saveUserActivityLog(Constants.DEAL_FAST.NAME,

Constants.NO_COMMENTS, 'XML ' + Constants.USER_ACTIVITIES.DOCUMENT.DOWNLOAD,

Constants.USER_ACTIVITIES.DOCUMENT.NAME, ContractID);

this.dealFastXMLService.generateXml(res['result'].Current);

} else {

this.userService.saveUserActivityLog(Constants.DEAL_FAST.NAME,

Constants.NO_COMMENTS, Constants.USER_ACTIVITIES.DOCUMENT.NAME + ' '

+ Constants.USER_ACTIVITIES.DOCUMENT.DOWNLOAD, Constants.ERROR, ContractID);

this.displaySwalPopup('Error', res.message, 'error');

}

});

}

humanFileSize(bytes, si = false, dp = 1) {

const thresh = si ? 1000 : 1024;

if (Math.abs(bytes) < thresh) {

return bytes + ' B';

}

const units = si

? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];

let u = -1;

const r = 10 ** dp;

do {

bytes /= thresh;

++u;

} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);

return bytes.toFixed(dp) + ' ' + units[u];

}

chatDate(dateVar?: any, format?: any) {

if (!dateVar) {

dateVar = new Date();

}

if (format) {

return moment(dateVar, format).format('YYYY-MM-DD');

}

return moment(dateVar).format('YYYY-MM-DD');

}

getDocAndPDF(mimeType) {

const word = [...Constants.WORDDOCEXT];

// const pdf = [...Constants.PDFEXT];

// const types = word.concat(pdf);

if (word.includes(mimeType)) {

return true;

} else {

return false;

}

displaySwalPopup(title: string, text: string, type: any, showConfirmButton = false,

confirmButtonText = null, showCancelButton = false, cancelButtonText = null, html = null) {

return new Promise((resolve) => {

let modalJson: SweetAlertOptions = {

title: title,

text: text,

icon: type ? type : 'info',

allowOutsideClick: false,

allowEscapeKey: false

};

if (html) {

modalJson = {

title: title,

html: html,

icon: type ? type : 'info',

allowOutsideClick: false,

allowEscapeKey: false

};

}

if (showConfirmButton) {

modalJson['showConfirmButton'] = showConfirmButton;

modalJson['confirmButtonText'] = confirmButtonText ? confirmButtonText : 'Ok';

modalJson['confirmButtonColor'] = '#DD6B55';

}

if (showCancelButton) {

modalJson['showCancelButton'] = showCancelButton;

modalJson['cancelButtonText'] = cancelButtonText ? cancelButtonText : 'Cancel';

modalJson['cancelButtonColor'] = '#3085d6';

}

return resolve(Swal.fire(modalJson));

});

}

openInNewTabIfCtrl(navUrl, CtrlKey) {

if (CtrlKey) {

this.router.navigate([]).then(

result => { window.open('#' + navUrl, '_blank'); });

} else {

this.router.navigate([navUrl]);

}

copyInClipBoard(val: string) {

const selBox = document.createElement('textarea');

selBox.style.position = 'fixed';

selBox.style.left = '0';

selBox.style.top = '0';

selBox.style.opacity = '0';

selBox.value = val;

document.body.appendChild(selBox);

selBox.focus();

selBox.select();

document.execCommand('copy');

document.body.removeChild(selBox);

}

getsort(List?) {

if (List) {

return List.sort((a, b) => (a > b) ? 1 : -1);

} else { return null; }

}

getsortNew(List?) {

if (List) {

return lodash.sortBy(List, 'CountryID');

} else { return null; }

}

toggleSpinner(isSpinner) {

this.httpApiService.isSpinner = !isSpinner;

this.spinner.displaySpinner(isSpinner);

}

navigateOutside(path) {

this.zone.run(() => {

this.router.navigate(path);

});

}

sortByProperty(property) {

return function (a, b) {

if (a[property] > b[property])

return 1;

else if (a[property] < b[property])

return -1;

return 0;

}

convertdate(date: any) {

const dateArray = date.split('/');

return (dateArray[2] + '-' + dateArray[1] + '-' + dateArray[0]);

}

yesterday(): Date {

const today = new Date()

const yesterday = new Date(today)

yesterday.setDate(yesterday.getDate() - 1)

return yesterday;

}

__________________________________________________________________________

bindeventLog(ID, Name, SD, ED, DomainName): FormGroup {

return new FormGroup({

'UserID': new FormControl(ID),

'UserName': new FormControl(Name),

'StartDate': new FormControl(SD),

'EndDate': new FormControl(ED),

'DomainName': new FormControl(DomainName),

});

}

ViewUserLogs(UserID: any, UserName: any, DomainName, template: TemplateRef<any>) {

this.UserEventData = [];

this.logUserName = UserName;

const today = new Date()

this.EventLogForm = this.bindeventLog(

UserID,

UserName,

moment(this.utility.yesterday()).format('DD/MM/YYYY'),

moment(today).format('DD/MM/YYYY'),

DomainName);

this.userService.getUserActivityLog('UserActivityLog', UserID, this.utility.convertdate(this.EventLogForm.get('StartDate').value),

this.utility.convertdate(this.EventLogForm.get('EndDate').value)

).then(res => {

this.UserEventData = res.result;

this.openModal(template);

}).catch(err => {

this.UserEventData = [];

this.openModal(template);

});

}

Asp.net And HTML Css And Web Development