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

 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) {
    a{
      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 class="tab-container">
    <div class="box-section">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="box-header bottom-border row">
                    <div class="col-md-3">

                    </div>
                    <div class="col-md-6">
                        <h3 class="box-header-title">{{EventLogForm.get('UserName').value}}({{
                            EventLogForm.get('DomainName').value }}) - Activity Log
                        </h3>
                    </div>

                    <div class="col-md-3 removeRowMargin">
                        <div class="input-group search-filter">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa fa-search"></i>
                                </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">
                                <i class="fa fa-file-excel-o" (click)="generateListExcel()"></i>
                            </button>
                            <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"
                                style="padding: 5px;
                        width: 27px">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                    </div>
                </div>
                <div class="box-bd-sec" style="border-top: 1px solid #8080803d;">

                    <form [formGroup]="EventLogForm" class="row" style="padding-left: 10px;">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-2">
                                    <app-date-picker [formControlDateObj]="EventLogForm.get('StartDate')"
                                        placeholder="Start Date *"
                                        (actionChangeDate)="compareTwoDates('StartDate','EndDate');">
                                    </app-date-picker>
                                </div>
                                <div class="col-md-2">
                                    <app-date-picker [formControlDateObj]="EventLogForm.get('EndDate')"
                                        placeholder="End Date *"
                                        (actionChangeDate)="compareTwoDates('StartDate','EndDate');">
                                    </app-date-picker>
                                </div>

                                <div class="col-md-1">
                                    <button type="button" class="btn-gray pull-left" style="margin-top: 14px;"
                                        (click)="GetEventLog()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                                <div class="col-md-5">
                                    <div class="error">
                                        <p *ngIf="ifcompareTwoDates" style="color:red;margin-top: 28px;">
                                            End Date must be greater than Start Date.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="workflow-table custom-table-responsive">
                                <div class="example-container mat-elevation-z8">
                                    <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">
                                                {{element.Module}}
                                            </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="SubModule">
                                            <mat-header-cell *matHeaderCellDef mat-sort-header>
                                                SubModule
                                            </mat-header-cell>
                                            <mat-cell *matCellDef="let element">
                                                {{element.SubModule}}
                                            </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="Event">
                                            <mat-header-cell *matHeaderCellDef mat-sort-header>
                                                Event
                                            </mat-header-cell>
                                            <mat-cell *matCellDef="let element">
                                                {{element.Event}}
                                            </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">
                                                {{element.IPAddress}}
                                            </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="Device">
                                            <mat-header-cell *matHeaderCellDef mat-sort-header>
                                                Device
                                            </mat-header-cell>
                                            <mat-cell *matCellDef="let element">
                                                {{element.Device}}
                                            </mat-cell>
                                        </ng-container>
                                        <ng-container matColumnDef="Comments">
                                            <mat-header-cell *matHeaderCellDef mat-sort-header>
                                                Comments
                                            </mat-header-cell>
                                            <mat-cell *matCellDef="let element">
                                                {{element.Comments}}
                                            </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">
                                                {{element.CreatedDate}}
                                            </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>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</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 = {
        class: 'modal-lg',
        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,
                class: ''
            };
        }
        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,
            class: ''
        });
        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);
    });
  }

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

How to sent authorized header attribute value using c# .net httpclient for third party api call of oauth 2.0

How to sent authorized header attribute value using C# .NET HTTP client for third party API call of OAuth 2.0 For call token From Authorized...

Popular Posts