concorrent report changes
Sultan Khan
3 years ago
parent
c7de4250fe
commit
df7c53059e
@ -0,0 +1,69 @@
|
||||
<ion-content>
|
||||
<div class="head-title">
|
||||
|
||||
<app-generic-header showImage="false" showBack="true" [headerText]="'general,concurrent-report' | translate">
|
||||
</app-generic-header>
|
||||
</div>
|
||||
<div class="header"></div>
|
||||
<div class="bottom"></div>
|
||||
|
||||
|
||||
|
||||
<div class="main-container">
|
||||
<ion-item>
|
||||
<ion-label>{{ 'worklist,template-name' | translate}}</ion-label>
|
||||
<ion-select [(ngModel)]="template" (ionChange)="selectTemplates()" [placeholder]="'general,select' | translate"
|
||||
[okText]="'general,ok' | translate" [cancelText]="'general,cancel' | translate" class="concorrent-select large-ion-select">
|
||||
<ion-select-option *ngFor="let program of programList" [value]="program">
|
||||
{{ program.USER_CONCURRENT_PROGRAM_NAME}}</ion-select-option></ion-select>
|
||||
|
||||
</ion-item>
|
||||
<div *ngIf="transactionList && transactionList.length>0" class="transaction-list">
|
||||
<ion-card *ngFor="let transaction of transactionList">
|
||||
<div [ngClass]="direction =='rtl' ? 'date_ar' :'date'" >{{getDate(transaction.REQUEST_DATE)}}</div>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<ion-text color="primary">
|
||||
<div>
|
||||
<p class="display-created" >{{'transaction, request-id' | translate}}</p>
|
||||
<P class="inline-display">
|
||||
{{transaction.REQUEST_ID}}
|
||||
</P>
|
||||
</div>
|
||||
<p class="display-created" >{{'transaction, phase' | translate}}</p>
|
||||
<p class="display-created bold padding">{{transaction.CCP_PHASE}}</p>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="secondary">
|
||||
<div class="name-container">
|
||||
<p class="color-black display-inline">{{'transaction,program-name' | translate}}</p>
|
||||
<p class="display-inline red">{{transaction.CONCURRENT_PROGRAM_NAME}}</p>
|
||||
</div>
|
||||
</ion-text>
|
||||
|
||||
|
||||
<div class="output-container" >
|
||||
<p class="color-black display-inline">{{'transaction,output' | translate}}</p>
|
||||
<p class="display-inline" (click)="getCppOutput(transaction)" [ngClass]="transaction.CCP_PHASE =='Running' || transaction.CCP_PHASE =='Pending'? 'disabled-icon' : '' " ><ion-icon name="download" class="download"></ion-icon></p>
|
||||
<p class="display-inline" (click)="refresh(transaction)" *ngIf="transaction.CCP_PHASE =='Running' || transaction.CCP_PHASE =='Pending'"><ion-icon name="refresh" class="refresh" > </ion-icon></p>
|
||||
</div>
|
||||
|
||||
</ion-label>
|
||||
</ion-card>
|
||||
|
||||
</div>
|
||||
<div class="no-dataDiv"
|
||||
*ngIf="transactionList && transactionList.length ==0">
|
||||
<ion-row>
|
||||
<img class="empty-data" src="../assets/imgs/box.png" />
|
||||
</ion-row>
|
||||
<h4> {{'general, noData' | translate}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer class="footer">
|
||||
<div class="Btn">
|
||||
<ion-button class="CreateBtn" color="customnavy" ion-button (click)="createTransaction()">
|
||||
{{'vacation-rule, create-request' | translate}}</ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
@ -0,0 +1,213 @@
|
||||
.display-created {
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#containerDiv {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.color-black {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
.date_ar {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
.transaction-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.date-container {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
// margin-left: 15px;
|
||||
color: #a2a5a6 !important;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
/* font-size: inherit; */
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
white-space: normal;
|
||||
// padding-top: 10px;
|
||||
padding: 5px 0px;
|
||||
padding-left: 10px !important;
|
||||
margin: 10px auto;
|
||||
|
||||
:root[dir="ltr"] {
|
||||
font-family: var(--fontFamilySemiBoldEN) !important;
|
||||
}
|
||||
|
||||
:root[dir="rtl"] {
|
||||
font-family: var(--fontFamilyIOSAR) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.Field-en {
|
||||
border-radius: 30px;
|
||||
border: 1px solid #a2a5a6 !important;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
.Field-ar {
|
||||
border-radius: 30px;
|
||||
border: 1px solid #a2a5a6 !important;
|
||||
margin-bottom: 20px;
|
||||
padding-right: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 300px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.padding_date {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
font-size: 20px;
|
||||
left: -1px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
ion-card {
|
||||
padding: 10px;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0px 1px 2px 1px #ccc;
|
||||
}
|
||||
|
||||
.display-inline {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #CA3332;
|
||||
font-weight: 600;
|
||||
margin: 0px 5px;
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.inline-display {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.download {
|
||||
font-size: 26px;
|
||||
margin: 0px 10px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
color: #CA3332;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
font-size: 22px;
|
||||
margin: 0px 10px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
color: #CA3332;
|
||||
}
|
||||
|
||||
.disabled-icon {
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 300px) {
|
||||
.CreateBtn {
|
||||
--background: var(--newgreen) !important;
|
||||
background: var(--newgreen) !important;
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 1.0cm;
|
||||
--border-radius: 7px !important;
|
||||
border-radius: 7px !important;
|
||||
--min-height: 1.6cm !important;
|
||||
width: 315px;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1px) and (max-width:290px) {
|
||||
.CreateBtn {
|
||||
--background: var(--newgreen) !important;
|
||||
background: var(--newgreen) !important;
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 1.0cm;
|
||||
--border-radius: 7px !important;
|
||||
border-radius: 7px !important;
|
||||
--min-height: 1.6cm !important;
|
||||
width: 257px;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 15px 0px;
|
||||
background-color: var(--light) !important;
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
|
||||
.Btn {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TransactionsComponent } from './transactions.component';
|
||||
|
||||
describe('TransactionsComponent', () => {
|
||||
let component: TransactionsComponent;
|
||||
let fixture: ComponentFixture<TransactionsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TransactionsComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TransactionsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,126 @@
|
||||
import { Component, ElementRef, OnInit } from '@angular/core';
|
||||
import { FileOpener } from '@ionic-native/file-opener/ngx';
|
||||
import { File } from '@ionic-native/file/ngx';
|
||||
import { Platform } from '@ionic/angular';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
import { ReportServiceService } from '../report-service.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-transactions',
|
||||
templateUrl: './transactions.component.html',
|
||||
styleUrls: ['./transactions.component.scss'],
|
||||
})
|
||||
export class TransactionsComponent implements OnInit {
|
||||
transactionList: any = [];
|
||||
selectedMenu: any;
|
||||
template: any;
|
||||
direction: any;
|
||||
programList: any = [];
|
||||
|
||||
constructor(public cs: CommonService, private elementRef: ElementRef, public reports: ReportServiceService, public ts: TranslatorService, private platform: Platform, private file: File, private opener: FileOpener,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.selectedMenu = this.cs.sharedService.getSharedData(MenuResponse.SELECTED_MENU, false);
|
||||
// this.transactionList = this.cs.sharedService.getSharedData(ReportServiceService.TRANSACTION_LIST, false);
|
||||
//this.template = this.cs.sharedService.getSharedData(ReportServiceService.TEMPLATE, false);
|
||||
this.direction = TranslatorService.getCurrentDirection();
|
||||
this.getConcurrentProgram();
|
||||
}
|
||||
getDate(date) {
|
||||
return this.cs.evaluteDate(date);
|
||||
}
|
||||
getCppOutput(transaction) {
|
||||
var request: any = {
|
||||
P_REQUEST_ID: transaction['REQUEST_ID']
|
||||
};
|
||||
this.cs.startLoading();
|
||||
this.reports.getCppOutput(request, {}, this.ts.trPK('general', 'retry')).subscribe((result: any) => {
|
||||
this.saveAndOpenPdf(result.GetCcpOutputList['P_OUTPUT_FILE'], 'report.pdf');
|
||||
|
||||
console.log(result);
|
||||
this.cs.stopLoading();
|
||||
|
||||
});
|
||||
}
|
||||
// saveAndOpenPdf(pdf: string, filename: string) {
|
||||
|
||||
// const linkSource = `data:application/pdf;base64,${pdf}`;
|
||||
// const downloadLink = document.createElement("a");
|
||||
// const fileName = "report.pdf";
|
||||
// downloadLink.href = linkSource;
|
||||
// downloadLink.download = fileName;
|
||||
// downloadLink.click();
|
||||
|
||||
// }
|
||||
|
||||
saveAndOpenPdf(pdf: string, filename: string) {
|
||||
const writeDirectory = this.platform.is('ios') ? this.file.dataDirectory : this.file.externalDataDirectory;
|
||||
this.file.writeFile(writeDirectory, filename, this.convertBase64ToBlob(pdf, 'data:application/pdf;base64'), { replace: true })
|
||||
.then(() => {
|
||||
this.opener.open(writeDirectory + filename, 'application/pdf')
|
||||
.catch(() => {
|
||||
console.log('Error opening pdf file');
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('Error writing pdf file');
|
||||
});
|
||||
}
|
||||
|
||||
convertBase64ToBlob(b64Data, contentType): Blob {
|
||||
contentType = contentType || '';
|
||||
const sliceSize = 512;
|
||||
b64Data = b64Data.replace(/^[^,]+,/, '');
|
||||
b64Data = b64Data.replace(/\s/g, '');
|
||||
const byteCharacters = window.atob(b64Data);
|
||||
const byteArrays = [];
|
||||
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
||||
const slice = byteCharacters.slice(offset, offset + sliceSize);
|
||||
const byteNumbers = new Array(slice.length);
|
||||
for (let i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i);
|
||||
}
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
byteArrays.push(byteArray);
|
||||
}
|
||||
return new Blob(byteArrays, { type: contentType });
|
||||
}
|
||||
refresh() {
|
||||
// var request: any = {
|
||||
// P_REQUEST_ID: transaction['REQUEST_ID']
|
||||
// };
|
||||
this.cs.startLoading();
|
||||
var request: any = {};
|
||||
request.P_MENU_TYPE = this.selectedMenu.MENU_TYPE;
|
||||
request.P_SELECTED_RESP_ID = -999;
|
||||
request.P_FUNCTION_NAME = this.selectedMenu.FUNCTION_NAME;
|
||||
request.P_DESC_FLEX_NAME = this.template.CONCURRENT_PROGRAM_NAME;
|
||||
|
||||
this.reports.getTransaction(request, {}, this.ts.trPK('general', 'retry')).subscribe((result: any) => {
|
||||
this.cs.stopLoading();
|
||||
this.transactionList = result['GetCcpTransactionsList_New'];
|
||||
});
|
||||
}
|
||||
getConcurrentProgram() {
|
||||
this.cs.startLoading();
|
||||
this.reports.getConcurrentProgram({
|
||||
P_REQUEST_GROUP_ID: this.selectedMenu.REQUEST_GROUP_ID
|
||||
}, () => { }, this.ts.trPK('general', 'retry')).subscribe((response) => {
|
||||
this.cs.stopLoading();
|
||||
this.programList = response.GetConcurrentProgramsList;
|
||||
|
||||
})
|
||||
}
|
||||
selectTemplates() {
|
||||
// this.elementRef
|
||||
// .nativeElement.querySelectorAll('#containerDiv')[0].innerHTML = '';
|
||||
this.refresh();
|
||||
}
|
||||
createTransaction() {
|
||||
this.cs.openConcurrentReport();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue