From 69db29931f5d48caa789fd9ee9b77f97d09939d0 Mon Sep 17 00:00:00 2001 From: Mohamed Mekawy Date: Wed, 19 Feb 2020 20:58:03 +0300 Subject: [PATCH] finish absence confirmation page & add absence submit modal --- .../absence-confirm.component.html | 140 +++++++++- .../absence-confirm.component.scss | 244 +++++++++++++++++- .../absence-confirm.component.ts | 133 +++++++++- Mohem/src/app/absence/absence.module.ts | 8 +- .../submit-absence-modal.component.html | 39 +++ .../submit-absence-modal.component.scss | 53 ++++ .../submit-absence-modal.component.spec.ts | 27 ++ .../submit-absence-modal.component.ts | 36 +++ 8 files changed, 672 insertions(+), 8 deletions(-) create mode 100644 Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.html create mode 100644 Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.scss create mode 100644 Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.spec.ts create mode 100644 Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.ts diff --git a/Mohem/src/app/absence/absence-confirm/absence-confirm.component.html b/Mohem/src/app/absence/absence-confirm/absence-confirm.component.html index 30597134..d54f2c4e 100644 --- a/Mohem/src/app/absence/absence-confirm/absence-confirm.component.html +++ b/Mohem/src/app/absence/absence-confirm/absence-confirm.component.html @@ -1,6 +1,6 @@ - + {{ts.trPK('submitAbsenceConfirm','submitAbsenceConfirm')}} @@ -11,7 +11,137 @@ - + + + + +
{{'general, addAttach' | translate}}
+
+ +
+ +
+
+
+ + + {{ 'general, notAttch' | translate}} + +
+ + +
+ + + + {{attachList.AttachmentID +1 }} . + + + + + {{attachList.P_FILE_NAME }} + + + + + + + + +
+ +
+ +
+ + +
+
+ + {{attachRes.FILE_NAME }} + +
+ + + + + + + +
+
+ +
+ + + +
{{'confirmAddEit, comment' | translate}}
+ + + + +
+ + +
{{'confirmAddEit, approverList' | translate}}
+
+

{{ 'general, empty' | translate}}

+
+
+ +
+ + +
+
+ +
+
+ + + {{employee.APPROVER}} + + + {{employee.POSITION_TITLE}} + + + +
+
+
+
+
+ +
+ + + + + + + + + + + - +
- {{ts.trPK('confirmAddEit','start')}} + {{ts.trPK('confirmAddEit','start')}}
\ No newline at end of file diff --git a/Mohem/src/app/absence/absence-confirm/absence-confirm.component.scss b/Mohem/src/app/absence/absence-confirm/absence-confirm.component.scss index b4dba631..aad79b10 100644 --- a/Mohem/src/app/absence/absence-confirm/absence-confirm.component.scss +++ b/Mohem/src/app/absence/absence-confirm/absence-confirm.component.scss @@ -28,4 +28,246 @@ ion-card-content.confirm-details{ } .confirm-details label{ font-size: 13px; -} \ No newline at end of file +} + +/****************** NEW Design ***************************************/ +.footer-button { + border-radius: 2px; + padding: 0 1.1em; + min-height: 45px; + min-width: 200px; + } + + + + .Header { + font-weight: bold; + color: #1a586d !important; + font-size: 10px; + } + + .tbData { + font-size: 10px; + } + + .btnBack { + background: transparent; + float: right; + } + + .attachmentDiv{ + background: #ffffff; + height: auto; + text-align: center; + padding-top: 1px; + margin: 10px; + border-radius: 15px; + border: 1px solid grey; + } + + .noDataDiv{ + background: #ffffff; + height: 11%; + text-align: center; + padding-top: 1px; + border-radius: 10px; + margin: 10px; + border-radius: 5px; + } + .submitNote{ + background: #ffffff; + height: 80px; + padding-top: 1px; + margin: 10px; + border-radius: 15px; + border: 1px solid grey; + } + + .approvalList{ + background: #ffffff; + height: auto; + text-align: center; + padding-top: 1px; + border-radius: 10px; + margin: 10px; + border-radius: 5px; + } + + /************************New Design**********************************/ + .notification-list{ + background: none; + background: none; + border-radius: 32px; + ion-item{ + // margin-top: 5px; + // margin-bottom: 5px; + + background-color: transparent; + .item-date{ + width: 100%; + font-size: 16px; + font-weight: bold; + + text-align: start; + padding: 0; + margin: 0; + + position: absolute; + left: 0; + top: 12%; + } + ion-label , [item-end]{ + + white-space: normal; + font-size: 14px; + padding-top: 15%; + // :root[dir="ltr"]{ + // margin-left: 10px; + // } + // :root[dir="rtl"]{ + // margin-right: 10px; + // } + + } + + } + } + + + + + + + .timeline { + position: relative; + margin: 15px 0 0 0; + // border-bottom: solid 1px var(--cusgray); + } + + .timeline:before { + + content: ''; + position: inherit !important; + top: 0; + bottom: 0; + width: 4px; + // background: #e4e4e4; + z-index: 1; + left: 35px; + /* margin-left: -10px; */ + /* z-index: 1; */ + } + + .timeline .timeline-thumb { + + border-radius: 500px; + width: 70px !important; + z-index: 2; + position: absolute; + left: 0px; + // :root[dir="ltr"]{ + // left: 37px; + // } + // :root[dir="rtl"]{ + // right: 37px; + // } + float: right; + top: 9px; + } + + .timeline .timeline-thumb.timeline-icon { + height: 70px; + // text-align: center; + // color: white; + // border: 5px solid #CBD0D3; + // transform: scale(0.2); + } + + + + .timeline .timeline-item { + width: 40px; + + } + + .timeline .timeline-stats { + position: relative; + font-size: 12px; + color: var(--darkgray); + + } + + .empImge{ + border-radius: 50%; + width:100%; + height: 100%; + border: #dedede solid 1px; + + } + .empImgeRep { + border-radius: 50% !important; + width: 80px; + height: 80px; + border: #dedede solid 1px; + } + + .line{ + padding-bottom:87px; + } + + .attachLable{ + position: absolute; + top: 0px; + z-index: 0; + background: #30b8c6; + color: #fff; + border-radius: 50%; + border: 0px; + width: 24px; + height: 24px; + text-align: center; + font-size: 5px; + } + + .removeLable{ + top: 0px; + z-index: 0; + background: #d8252d; + color: #fff; + border-radius: 50%; + border: 0px; + width: 20px; + height: 20px; + text-align: center; + font-size: 5px; + } + + .note-modal { + // width: 90%; + // height: 50%; + // top: 20%; + // left: 5%; + // right: 5%; + // bottom: 5%; + background: rgba(0, 0, 0, 0.5) !important; + padding: 30% 10% !important; + --height: 12cm !important; + // --width: 80% !important; + --border-radius:20px; + + } + .header-toolbar-new{ + --background: #22c6b3; + } + + .confirmEitOkButton{ + white-space: normal !important; + text-transform: capitalize !important; + min-height: 45px !important; + min-width: 5px !important; + margin: 8px !important; + --background: #22c6b3; + width: 80% !important; + color: white!important; + border-radius: 16px !important; + } \ No newline at end of file diff --git a/Mohem/src/app/absence/absence-confirm/absence-confirm.component.ts b/Mohem/src/app/absence/absence-confirm/absence-confirm.component.ts index 06b73416..a68cbad8 100644 --- a/Mohem/src/app/absence/absence-confirm/absence-confirm.component.ts +++ b/Mohem/src/app/absence/absence-confirm/absence-confirm.component.ts @@ -13,7 +13,8 @@ import { ConfirmAddEitService } from '../service/confirm-add-eit-service'; import { AbsenceNotificatonBodyResponse } from '../models/AbsenceNotificationBodyRes'; import { AbsenceAttachmentComponent } from '../absence-attachment/absence-attachment.component'; import { WorkListAttachViewComponent } from 'src/app/notification/work-list-attach-view/work-list-attach-view.component'; - +import { FileUploader } from 'ng2-file-upload'; +import { SubmitAbsenceModalComponent } from '../submit-absence-modal/submit-absence-modal.component'; @Component({ selector: "app-absence-confirm", templateUrl: "./absence-confirm.component.html", @@ -38,6 +39,9 @@ export class AbsenceConfirmComponent implements OnInit { attachReqObj: WorkListButtonRequest = new WorkListButtonRequest(); private isResubmitAbs: boolean = false; private isSubmitBtnClicked: boolean; + filterAllowedType: any = ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'image/jpg', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']; + + constructor( public common: CommonService, public ts: TranslatorService, @@ -225,6 +229,41 @@ export class AbsenceConfirmComponent implements OnInit { } + +/*****submit modal********/ +async openSubmitModal() { + this.common.sharedService.setSharedData( this.attachListOver, 'submitAbsAttachmentList'); + this.common.sharedService.setSharedData(this.absComments, 'absComments'); + const modal = await this.modalCtrl.create({ + component: SubmitAbsenceModalComponent, + backdropDismiss: false, + + }); + modal.cssClass = 'note-modal'; + + modal.onDidDismiss() + .then((data) => { + console.log(data.data); + + if (data.data == "cancel" || data.data == undefined) { + return; + } else { + this.startAbApproval(); + } + }); + + return await modal.present(); + + + + +} + + + + + + removeFile(objectitem) { if (this.attachListOver) { @@ -324,4 +363,96 @@ export class AbsenceConfirmComponent implements OnInit { if (this.P_TransactionID && this.isSubmitBtnClicked == false) this.cancelAbProcess(); } + + + + /*******************Add attchement Functions*************/ + + public uploader: FileUploader = new FileUploader({ + allowedMimeType: ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'image/jpg', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'], + maxFileSize: 10 * 1024 * 1024, + formatDataFunctionIsAsync: true, + formatDataFunction: async (item) => { + return new Promise((resolve, reject) => { + resolve({ + name: item._file.name, + length: item._file.size, + contentType: item._file.type, + date: new Date() + }); + }); + } + }); + + + onFileSelected(input) { + + // this.uploader.onWhenAddingFileFailed = function (item: any, filter: any, options: any){ + + if (!(this.filterAllowedType.indexOf(input.target.files[0].type) > -1)) { + let msg: string = ""; + msg = this.ts.trPK("general", "notSupport"); + this.common.presentAlert(msg); + return + } // todo: show alert that you tried uploading wrong files + + else { + + const file = input.target.files[0]; + + // console.log(file); + + //var encoded = Base64.encode(file); + this.getBase64(file).then( + data => this.pushObject(data, file.name, file.type) + ); + + // } + // }; + + } + } + + + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); + } + + + pushObject(fileData, name, type) { + + console.log("before push: "+ this.index); + //this.attachListOver.length++; + try { + let array = name.split('.'); + let attachType: string = array[array.length - 1]; + + this.attachListOver.push( + { + AttachmentID: this.attachListOver.length, + P_FILE_CONTENT_TYPE: attachType,//type.split('/')[1], + P_FILE_DATA: fileData.split(',')[1], + P_FILE_NAME: name,//.split('.')[0], + P_TRANSACTION_ID: this.P_TransactionID + }) + + } catch (e) { + + } + + + //console.log("after push: "+ this.index); + // return this.addAttachRequest + } + + + + + + } diff --git a/Mohem/src/app/absence/absence.module.ts b/Mohem/src/app/absence/absence.module.ts index 2a2c609b..e98a0b8d 100644 --- a/Mohem/src/app/absence/absence.module.ts +++ b/Mohem/src/app/absence/absence.module.ts @@ -20,6 +20,7 @@ import { AbsenceAttachmentComponent } from "./absence-attachment/absence-attachm import { AddAttachService } from "./service/add-attach-service"; import { WorkListAttachViewComponent } from "src/app/notification/work-list-attach-view/work-list-attach-view.component"; import { ViewAttachmentsComponent } from './view-attachments/view-attachments.component'; +import { SubmitAbsenceModalComponent } from './submit-absence-modal/submit-absence-modal.component'; const routes: Routes = [ { path: "", @@ -52,6 +53,10 @@ const routes: Routes = [ { path:'view-attachements', component:ViewAttachmentsComponent + }, + { + path:'absence-submit-modal', + component:SubmitAbsenceModalComponent } ] } @@ -81,7 +86,8 @@ const routes: Routes = [ SubmitAbsenceComponent, AbsenceConfirmComponent, AbsenceAttachmentComponent, - ViewAttachmentsComponent + ViewAttachmentsComponent, + SubmitAbsenceModalComponent ] }) export class AbsencePageModule {} diff --git a/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.html b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.html new file mode 100644 index 00000000..9eb85a34 --- /dev/null +++ b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.html @@ -0,0 +1,39 @@ + + + + + +

Confirmation

+ +
+
+ No Attachment +
+
+ No Note +
+
+ + + + + Are you sure you want to submit + {{ts.trPK('general','ok')}} + + + + + {{ts.trPK('general','cancel')}} + + + + +
+ \ No newline at end of file diff --git a/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.scss b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.scss new file mode 100644 index 00000000..5803e3f2 --- /dev/null +++ b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.scss @@ -0,0 +1,53 @@ +.rowBtn{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.Header{ + color: black !important; + font-size: 25px !important; + font-weight: bold !important;; + margin: 0; + text-align: center; + margin-bottom: 20px; +} + +.labelRadio{ + color: black !important; + font-weight: bold !important; + padding-bottom: 20px; +} + +.labelcheck{ + color: red !important; + font-weight: bold !important; + margin-bottom: 10px; +} + +.submitOkButton{ + white-space: normal !important; + text-transform: capitalize !important; + min-height: 45px !important; + min-width: 5px !important; + margin: 8px !important; + --background:: #22c6b3; + width: 100% !important; + color: white!important; + border-radius: 16px !important; +} +.submitCancelButton{ + white-space: normal !important; + text-transform: capitalize !important; + min-height: 45px !important; + min-width: 5px !important; + margin: 8px !important; + --background:: #094875; + width: 100% !important; + color: white!important; + border-radius: 16px !important; +} + + + diff --git a/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.spec.ts b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.spec.ts new file mode 100644 index 00000000..b1caf2ba --- /dev/null +++ b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubmitAbsenceModalComponent } from './submit-absence-modal.component'; + +describe('SubmitAbsenceModalComponent', () => { + let component: SubmitAbsenceModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubmitAbsenceModalComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubmitAbsenceModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.ts b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.ts new file mode 100644 index 00000000..53dc2393 --- /dev/null +++ b/Mohem/src/app/absence/submit-absence-modal/submit-absence-modal.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { ModalController } from '@ionic/angular'; +import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; + +@Component({ + selector: 'app-submit-absence-modal', + templateUrl: './submit-absence-modal.component.html', + styleUrls: ['./submit-absence-modal.component.scss'], +}) +export class SubmitAbsenceModalComponent implements OnInit { + submitAbsAttachmentList :any =[]; + absComments: string; + constructor( private ts: TranslatorService,private modalCtrl: ModalController, private cs: CommonService){ + this.submitAbsAttachmentList = this.cs.sharedService.getSharedData('submitAbsAttachmentList', false); + this.absComments = this.cs.sharedService.getSharedData('absComments', false); + } + + ngOnInit() { + console.log("modal"); + //this.actionBtns = this.cs.sharedService.getSharedData("passActionMore" , false); + console.log("modal"); + + } + closeModal() { + this.modalCtrl.dismiss(); + } + + + OkBtnModal() { + let data = "ok"; + this.modalCtrl.dismiss(data); + } + +} +