Merge branch 'sultan26April' of https://gitlab.com/haroon6138/mohemmionic5 into sultan26April
commit
cdc81881f5
@ -0,0 +1,152 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar class="header-toolbar-new">
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','createHR-Request')}}</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<!-- <form [formGroup] = "form" (ngSubmit) = "submitRequest(form.value)"> -->
|
||||||
|
|
||||||
|
<div >
|
||||||
|
<ion-card class="result-serviceType">
|
||||||
|
<ion-card-content>
|
||||||
|
<div class="request-heading">
|
||||||
|
<span>{{ts.trPK('userProfile','ServiceType')}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ion-row class="custom-radio">
|
||||||
|
<ion-radio-group [(ngModel)]="SelectedServiceType" class="radio-list">
|
||||||
|
|
||||||
|
<ion-radio value="HR Services" [color]="myColor">{{HR}}</ion-radio>
|
||||||
|
<ion-label class="text-label" >{{HR}}</ion-label>
|
||||||
|
|
||||||
|
<ion-radio value="Complaints" [color]="myColor" >{{complaints}}</ion-radio>
|
||||||
|
<ion-label class="text-label">{{complaints}}</ion-label>
|
||||||
|
|
||||||
|
<ion-radio value="Inquiry" [color]="myColor" >{{inquiry}}</ion-radio>
|
||||||
|
<ion-label class="text-label">{{inquiry}}</ion-label>
|
||||||
|
|
||||||
|
</ion-radio-group>
|
||||||
|
</ion-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- /////////////////////////////////////////// -->
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<ion-list>
|
||||||
|
<label class="labels">{{ts.trPK('userProfile','DeptName')}}</label>
|
||||||
|
<ion-item lines="none" class="filed-container">
|
||||||
|
<select class="filed1" placeholder="Select Department" type="text" [(ngModel)]="depType">
|
||||||
|
<option [selected]="x.departmentName" value="{{i}}"
|
||||||
|
*ngFor="let x of departTypeList; let i=index;">
|
||||||
|
{{x.departmentName}} </option>
|
||||||
|
</select>
|
||||||
|
<!-- <select class="filed1" placeholder="Select Department" type="text">
|
||||||
|
<option >{{EmpRelations}}</option>
|
||||||
|
<option >{{Hr}}</option>
|
||||||
|
<option >{{Payroll}}</option>
|
||||||
|
<option >{{GovRelation}}</option>
|
||||||
|
</select> -->
|
||||||
|
</ion-item>
|
||||||
|
<label class="labels">{{ts.trPK('userProfile','RelatedSection')}}</label>
|
||||||
|
<ion-item lines="none" class="filed-container">
|
||||||
|
<select [(ngModel)]="secType" class="filed2" placeholder="Select Sectiont" type="text">
|
||||||
|
<option [selected]="x.projectName" value="{{i}}"
|
||||||
|
*ngFor="let x of sectionTypeList; let i=index;">
|
||||||
|
{{x.sectionName}} </option>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
</ion-item>
|
||||||
|
<label class="labels">{{ts.trPK('userProfile','RelatedTopic')}}</label>
|
||||||
|
<ion-item lines="none" class="filed-container">
|
||||||
|
<select [(ngModel)]="topicType" class="filed3" placeholder="Select Topic" type="text">
|
||||||
|
<option [selected]="x.topicName" value="{{i}}"
|
||||||
|
*ngFor="let x of topicTypeList; let i=index;">
|
||||||
|
{{x.topicName}} </option>
|
||||||
|
</select>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="request-heading">
|
||||||
|
<span>{{ts.trPK('userProfile','SupportingDocument')}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="fileUpload btn btn-primary">
|
||||||
|
<img slot="start" style=" height: 55px;"src="../assets/imgs/add-photo.svg">
|
||||||
|
<input end class="upload" type="file" ng2FileSelect [uploader]="uploader"(change)="onFileSelected($event)" />
|
||||||
|
</div>
|
||||||
|
<ion-slides>
|
||||||
|
<ion-slide>
|
||||||
|
<ion-grid class=" gridAH" *ngIf="uploader?.queue?.length > 0">
|
||||||
|
<ion-col class="rowAH" *ngFor="let item of uploader.queue">
|
||||||
|
<ion-col size="4">
|
||||||
|
<label for="">{{ item?.file?.name }}</label>
|
||||||
|
</ion-col>
|
||||||
|
<!-- <ion-col size="4">
|
||||||
|
<label *ngIf="uploader.options.isHTML5">{{ item?.file?.size/1024/1024 | number:'.2' }}
|
||||||
|
MB</label>
|
||||||
|
</ion-col> -->
|
||||||
|
<ion-col size="2">
|
||||||
|
<button class="iconButton" ion-button (click)="removeFile(item)">
|
||||||
|
<ion-icon style="color: red;" name="close"></ion-icon>
|
||||||
|
<!-- <img class="imgSize" src="../assets/imgs/close_menu_icon.png "> -->
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-col>
|
||||||
|
</ion-grid>
|
||||||
|
</ion-slide>
|
||||||
|
</ion-slides>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div>
|
||||||
|
<button class="iconButton" ion-button (click)="removeFile(item)">
|
||||||
|
<img class="imgSize" src="../assets/imgs/close_menu_icon.png "></button>
|
||||||
|
</div>
|
||||||
|
<div class="fileUpload btn btn-primary">
|
||||||
|
<img slot="start" style=" height: 55px;"src="../assets/imgs/add-photo.svg">
|
||||||
|
<input type="file" class="upload" ng2FileSelect [uploader]="uploader"
|
||||||
|
(change)="onFileSelected($event)" (click)="onFileSelectedclick($event)" />
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="request-heading">
|
||||||
|
<span>{{ts.trPK('userProfile','Description')}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-col size="12">
|
||||||
|
<ion-item style="margin-left: -20px;margin-right: -13px;margin-top: -24px;" lines="none">
|
||||||
|
<ion-input [(ngModel)]="Description" [ngClass]="direction == 'en' ? 'filedDesc':'filedDesc-ar' " placeholder="{{ts.trPK('userProfile','Description')}}" type="text"></ion-input>
|
||||||
|
</ion-item>
|
||||||
|
</ion-col>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ion-card-content>
|
||||||
|
</ion-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- </form> -->
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-footer >
|
||||||
|
<div class="centerDiv">
|
||||||
|
<button class="gridCancelBtn" ion-button (click)="cancelRequest()">{{ts.trPK('general','cancel')}}</button>
|
||||||
|
<button class="gridSubmitBtn" ion-button (click)="submitRequest()">{{ts.trPK('general','submit')}}</button>
|
||||||
|
</div>
|
||||||
|
</ion-footer>
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,485 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.header-toolbar-new{
|
||||||
|
--background: #269DB8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBg{
|
||||||
|
padding: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBg:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: #269DB8;
|
||||||
|
height: 140px;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1px) and (max-width:767px){
|
||||||
|
.result-graph {
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
// margin-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 56px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding-top: 12px;
|
||||||
|
}}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) and (max-width:1024px){
|
||||||
|
.result-graph {
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
// margin-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 89px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding-top: 114px !important;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.user-info{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
.user-image-container{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
justify-content: space-between;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.Boldtext{
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: WorkSans-Bold;
|
||||||
|
color: black !important;
|
||||||
|
display: block !important;
|
||||||
|
// line-height: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Nametext{
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: WorkSans-Bold;
|
||||||
|
color: black !important;
|
||||||
|
display: block !important;
|
||||||
|
// line-height: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.employee-information-indetail{
|
||||||
|
background: white;
|
||||||
|
margin-top: 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
ion-col{
|
||||||
|
padding: 15px;
|
||||||
|
// border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 13px;
|
||||||
|
// font-family: WorkSans-Bold;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgb(128, 124, 124);
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0;
|
||||||
|
font-family: WorkSans-Bold;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1px) and (max-width:767px){
|
||||||
|
.user-image{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 80px;
|
||||||
|
/* border: 1px solid #ccc; */
|
||||||
|
margin-top: -125px;
|
||||||
|
|
||||||
|
}}
|
||||||
|
@media screen and (min-width: 768px) and (max-width:1024px){
|
||||||
|
.user-image{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 80px;
|
||||||
|
margin-bottom: 371px;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.img{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: inline-flex;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 70% !important;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sendCodeBtn{
|
||||||
|
--background: #269DB8;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 5px !important;
|
||||||
|
margin-top: 15px !important;
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
/* border-radius: 4px; */
|
||||||
|
height: 26px;
|
||||||
|
/* padding: 6px 24px; */
|
||||||
|
font-size: 15px;
|
||||||
|
width: 322px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-code{
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 21px 3px 34px 14px;
|
||||||
|
margin: 25px 22px 2px 22px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// .sms_code{
|
||||||
|
// margin: 0px;
|
||||||
|
// text-align: center;
|
||||||
|
// }
|
||||||
|
|
||||||
|
ion-input {
|
||||||
|
margin: 0 5px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0;
|
||||||
|
font-size: 32px;
|
||||||
|
//border: solid 1px #ccc;
|
||||||
|
border: 1px solid #ccc !important;
|
||||||
|
//box-shadow: 0 0 5px #ccc inset;
|
||||||
|
outline: none;
|
||||||
|
width: 20%;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
&:focus {
|
||||||
|
border-color:var(--ion-color-secondary) !important;
|
||||||
|
box-shadow: 0 0 5px var(--ion-color-secondary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::selection {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sendVerifyBtn{
|
||||||
|
--background: #269DB8;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 15px !important;
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
/* border-radius: 4px; */
|
||||||
|
height: 26px;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 322px;
|
||||||
|
margin-left: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-radio .radio-icon {
|
||||||
|
margin: 0px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-width: var(--border-width);
|
||||||
|
border-style: var(--border-style);
|
||||||
|
border-color: #dcdcdc;
|
||||||
|
margin-top: 6px !important;
|
||||||
|
border-color: #d8d4d4 !important;
|
||||||
|
margin-bottom: 18px;}
|
||||||
|
|
||||||
|
.text-label{
|
||||||
|
color: black !important;
|
||||||
|
font-size: 10px;
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-right: 18px;
|
||||||
|
font-family: 'WorkSans-Bold';
|
||||||
|
}
|
||||||
|
|
||||||
|
// .radio-list{
|
||||||
|
// background: white;
|
||||||
|
// margin-left: 18px;
|
||||||
|
// /* margin-right: 10px; */
|
||||||
|
// margin-top: 12px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.result-serviceType{
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 25px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.request-heading {
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
// padding-top: 8px;
|
||||||
|
// padding-left: 15px;
|
||||||
|
/* font-weight: bold; */
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: 'WorkSans-Bold';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filed1{
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 1px solid #d3d5d5 !important;
|
||||||
|
margin: 10px;
|
||||||
|
padding-left: 11px !important;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
color: #636161;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
// padding-right: 252px;
|
||||||
|
padding-right: 115px;
|
||||||
|
}
|
||||||
|
.filed2{
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 1px solid #d3d5d5 !important;
|
||||||
|
margin: 10px;
|
||||||
|
padding-left: 11px !important;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
color: #636161;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
padding-right: 44px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.filed3{
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 1px solid #d3d5d5 !important;
|
||||||
|
margin: 10px;
|
||||||
|
padding-left: 11px !important;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
color: #636161;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
.filedDesc{
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 1px solid #d3d5d5 !important;
|
||||||
|
// margin: 10px;
|
||||||
|
padding-left: 20px !important;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
color: #636161;
|
||||||
|
--padding-bottom: 90px;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
.filedDesc-ar{
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 1px solid #d3d5d5 !important;
|
||||||
|
// margin: 10px;
|
||||||
|
padding-right: 20px !important;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
color: #636161;
|
||||||
|
--padding-bottom: 90px;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelDesc{
|
||||||
|
display: block;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-left: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #adabab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectLabel{
|
||||||
|
display: block;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-left: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
/* font-family: 'WorkSans-Bold'; */
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// .cancelRequest{
|
||||||
|
// padding: 10px 7px 10px 0px;
|
||||||
|
// ion-button{
|
||||||
|
// border-radius: 7px;
|
||||||
|
// padding: 12px 30px 12px 30px;
|
||||||
|
// background: #d00a0a;
|
||||||
|
// --background: transparent;
|
||||||
|
// --box-shadow: none !important;
|
||||||
|
// height: auto;
|
||||||
|
// min-height: inherit;
|
||||||
|
// font-size: 16px;
|
||||||
|
// font-weight: bold;
|
||||||
|
// margin-top: -5px;
|
||||||
|
// }}
|
||||||
|
// .submitRequest{
|
||||||
|
// padding: 10px 7px 10px 0px;
|
||||||
|
// ion-button{
|
||||||
|
// border-radius: 7px;
|
||||||
|
// padding: 12px 30px 12px 30px;
|
||||||
|
// background: #19a163;
|
||||||
|
// --background: transparent;
|
||||||
|
// --box-shadow: none !important;
|
||||||
|
// height: auto;
|
||||||
|
// min-height: inherit;
|
||||||
|
// font-size: 16px;
|
||||||
|
// font-weight: bold;
|
||||||
|
// margin-top: -5px;
|
||||||
|
// }}
|
||||||
|
|
||||||
|
|
||||||
|
.gridDiv{
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridCancelBtn{
|
||||||
|
min-width: auto;
|
||||||
|
// margin: 0px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid var(--cusgray);
|
||||||
|
box-shadow: none;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
width: 45%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #d00a0a;
|
||||||
|
color: white;
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-right: 5px;
|
||||||
|
font-family: 'WorkSans-bold';
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridSubmitBtn{
|
||||||
|
min-width: auto;
|
||||||
|
// margin: 0px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid var(--cusgray);
|
||||||
|
box-shadow: none;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
width: 45%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #19a163;
|
||||||
|
color: white;
|
||||||
|
// margin-left: 15px;
|
||||||
|
// margin-right: 5px;
|
||||||
|
font-family: 'WorkSans-bold';}
|
||||||
|
|
||||||
|
|
||||||
|
.filed-container{
|
||||||
|
margin-right: -17px;
|
||||||
|
margin-left: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labels{
|
||||||
|
display: block;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-left: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: 'WorkSans-Bold';
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
padding: 15px 0px 0px 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;
|
||||||
|
}
|
||||||
|
.footer2{
|
||||||
|
padding: 15px 0px 0px 24px;
|
||||||
|
background-color: var(--light) !important;
|
||||||
|
border: 0px !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-footer .footer-button{
|
||||||
|
--background: #259CB8;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fileUpload {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: -233px;
|
||||||
|
}
|
||||||
|
.fileUpload input.upload {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
filter: alpha(opacity=0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconButton .imgSize{
|
||||||
|
width: 10px !important;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.iconButton.button.button-ios.button-default.button-default-ios,
|
||||||
|
button.iconButton.button.button-md.button-default.button-default-md {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { HrRequestFormComponent } from './hr-request-form.component';
|
||||||
|
|
||||||
|
describe('HrRequestFormComponent', () => {
|
||||||
|
let component: HrRequestFormComponent;
|
||||||
|
let fixture: ComponentFixture<HrRequestFormComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ HrRequestFormComponent ],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(HrRequestFormComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,404 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Platform, Events, MenuController } from '@ionic/angular';
|
||||||
|
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||||
|
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||||
|
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
|
||||||
|
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
|
||||||
|
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
|
||||||
|
import { MowadhafiService } from '../mowadhafi.service';
|
||||||
|
import { Location } from '@angular/common';
|
||||||
|
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
|
||||||
|
import { LoginModel } from 'src/app/authentication/models/LoginModel';
|
||||||
|
import { SendActivationByType } from 'src/app/authentication/models/sendActivationByType';
|
||||||
|
import { FileUploader } from 'ng2-file-upload';
|
||||||
|
@Component({
|
||||||
|
selector: 'app-hr-request-form',
|
||||||
|
templateUrl: './hr-request-form.component.html',
|
||||||
|
styleUrls: ['./hr-request-form.component.scss'],
|
||||||
|
})
|
||||||
|
export class HrRequestFormComponent implements OnInit {
|
||||||
|
public EmpName : string;
|
||||||
|
public EmpNum : string;
|
||||||
|
public EmpGroup : string;
|
||||||
|
public EmpMobile : string;
|
||||||
|
public EmpJob : string;
|
||||||
|
public EmpOrgName : string;
|
||||||
|
public EmpPayrol : string;
|
||||||
|
public EmpPosition : string;
|
||||||
|
public EmpEmail: string;
|
||||||
|
public EmpCatMeaning:string;
|
||||||
|
public EmpGRADENAME : string;
|
||||||
|
public EmpLocation : string;
|
||||||
|
public EmpImg : string;
|
||||||
|
public userImage: any = '../assets/imgs/profile.png';
|
||||||
|
public loginData = new LoginModel();
|
||||||
|
public searchKeySelect = 'Complaints';
|
||||||
|
myColor: string = 'secondary';
|
||||||
|
public showRequestDetails = false;
|
||||||
|
public proID= "CS"
|
||||||
|
public inquiry: string;
|
||||||
|
public HR : string;
|
||||||
|
public complaints:string;
|
||||||
|
public Projectresult:any;
|
||||||
|
public EmpRelations:any;
|
||||||
|
public Hr:any;
|
||||||
|
public Payroll:any;
|
||||||
|
public GovRelation:any;
|
||||||
|
public projName:any;
|
||||||
|
public topicName:any;
|
||||||
|
public departTypeList: any;
|
||||||
|
public topicTypeList:any;
|
||||||
|
public sectionTypeList:any;
|
||||||
|
public projectDetial:any;
|
||||||
|
public projectDep:any;
|
||||||
|
public sectionDep:any;
|
||||||
|
public projectCode;
|
||||||
|
public SelectedServiceType:any;
|
||||||
|
public depType:any;
|
||||||
|
public secType:any;
|
||||||
|
public topicType:any;
|
||||||
|
indexLastObj: any;
|
||||||
|
addAttachRequest: any = [];
|
||||||
|
TransactionID: any;
|
||||||
|
public teckitDetial:any;
|
||||||
|
public teckitInfo:any;
|
||||||
|
public Description:any;
|
||||||
|
public selectedFile: any;
|
||||||
|
filterAllowedType: any = [
|
||||||
|
"application/pdf",
|
||||||
|
"image/jpeg",
|
||||||
|
"image/png",
|
||||||
|
"text/plain",
|
||||||
|
"image/jpg",
|
||||||
|
"application/vnd.ms-excel",
|
||||||
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||||
|
];
|
||||||
|
|
||||||
|
public direction: string;
|
||||||
|
constructor(
|
||||||
|
public ts: TranslatorService,
|
||||||
|
public cs: CommonService,
|
||||||
|
public authService: AuthenticationService,
|
||||||
|
public sharedData: SharedDataService,
|
||||||
|
public events: Events,
|
||||||
|
public MowadhafiService: MowadhafiService,
|
||||||
|
private location: Location,
|
||||||
|
private menu: MenuController,
|
||||||
|
|
||||||
|
|
||||||
|
) {
|
||||||
|
this.direction = TranslatorService.getCurrentLanguageName();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.projectCode = this.cs.sharedService.getSharedData("projcet-code");
|
||||||
|
this.getTicketsByEmployee();
|
||||||
|
this.getTicketTypes();
|
||||||
|
this.getProject();
|
||||||
|
this.getCreateTicket();
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
goback() {
|
||||||
|
this.location.back();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
showSelectedField(){}
|
||||||
|
|
||||||
|
getTicketTypes(){
|
||||||
|
const request = {
|
||||||
|
EmployeeNumber:"",
|
||||||
|
|
||||||
|
};
|
||||||
|
this.MowadhafiService.getTicketTypes(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
{
|
||||||
|
this.handlegetTicketTypesResult(result);
|
||||||
|
|
||||||
|
}) }
|
||||||
|
handlegetTicketTypesResult(result){
|
||||||
|
this.HR = result.Mohemm_Itg_TicketTypesList[0].typeName;
|
||||||
|
this.complaints = result.Mohemm_Itg_TicketTypesList[1].typeName;
|
||||||
|
this.inquiry = result.Mohemm_Itg_TicketTypesList[2].typeName;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getProject(){
|
||||||
|
const request = {
|
||||||
|
EmployeeNumber:"",
|
||||||
|
ItgProjectCode: this.projectCode
|
||||||
|
|
||||||
|
};
|
||||||
|
this.MowadhafiService.getProject(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
{
|
||||||
|
this.handlegetProjectResult(result);
|
||||||
|
|
||||||
|
}) }
|
||||||
|
handlegetProjectResult(result){
|
||||||
|
this.Projectresult=result.Mohemm_Itg_ProjectsList;
|
||||||
|
this.getProjectDepartments();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getProjectDepartments(){
|
||||||
|
const request = {
|
||||||
|
EmployeeNumber:"",
|
||||||
|
ItgProjectId:this.Projectresult[0].projectId,
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
this.MowadhafiService.getProjectDepartments(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
{
|
||||||
|
this.handlegetProjectDepartmentsResult(result);
|
||||||
|
|
||||||
|
}) }
|
||||||
|
handlegetProjectDepartmentsResult(result){
|
||||||
|
this.departTypeList= result.Mohemm_ITG_ProjectDepartmentsList;
|
||||||
|
this.getDepartmentSections();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
getDepartmentSections(){
|
||||||
|
const request = {
|
||||||
|
EmployeeNumber:"",
|
||||||
|
ItgProjectDepartmentId:this.departTypeList.projectDepartmentId,
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
this.MowadhafiService.getDepartmentSections(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
{
|
||||||
|
this.handlegetDepartmentSectionsResult(result);
|
||||||
|
|
||||||
|
}) }
|
||||||
|
handlegetDepartmentSectionsResult(result){
|
||||||
|
this.sectionTypeList= result.Mohemm_ITG_DepartmentSectionsList;
|
||||||
|
|
||||||
|
this.getSectionTopics();
|
||||||
|
}
|
||||||
|
|
||||||
|
getSectionTopics(){
|
||||||
|
const request = {
|
||||||
|
EmployeeNumber:"",
|
||||||
|
ItgDepartmentSectionId:this.sectionTypeList.departmentSectionId,
|
||||||
|
|
||||||
|
};
|
||||||
|
this.MowadhafiService.getSectionTopics(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
{
|
||||||
|
this.handlegetSectionTopicsResult(result);
|
||||||
|
|
||||||
|
}) }
|
||||||
|
handlegetSectionTopicsResult(result){
|
||||||
|
// this.topicName=result.Mohemm_ITG_SectionTopicsList[0].topicName
|
||||||
|
this.topicTypeList= result.Mohemm_ITG_SectionTopicsList;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// getTicketDetails(){
|
||||||
|
// const request = {
|
||||||
|
// EmployeeNumber:'',
|
||||||
|
// ItgTicketId:this.teckitDetial.ticketId,
|
||||||
|
|
||||||
|
// };
|
||||||
|
// this.MowadhafiService.getTicketDetails(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
// {
|
||||||
|
// this.handlegetTicketDetailsResult(result);
|
||||||
|
|
||||||
|
// }) }
|
||||||
|
// handlegetTicketDetailsResult(result){
|
||||||
|
|
||||||
|
// let res;
|
||||||
|
// if(this.cs.validResponse(result)){
|
||||||
|
// res = JSON.parse(result.Mohemm_ITG_ResponseItem);
|
||||||
|
// console.log(res);
|
||||||
|
// this.teckitInfo = res.result.data;
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
getTicketsByEmployee() {
|
||||||
|
const request = {
|
||||||
|
// TokenID:"xxx",
|
||||||
|
EmployeeNumber: "",
|
||||||
|
ItgPageSize: 10,
|
||||||
|
ItgPageNo: 1
|
||||||
|
|
||||||
|
};
|
||||||
|
this.MowadhafiService.getTicketsByEmployee(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||||
|
this.handlegetTicketsByEmployeeResult(result);
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handlegetTicketsByEmployeeResult(result){
|
||||||
|
let x;
|
||||||
|
if(this.cs.validResponse(result)){
|
||||||
|
x = JSON.parse(result.Mohemm_ITG_ResponseItem);
|
||||||
|
console.log(x);
|
||||||
|
this.teckitInfo=x.result.data;
|
||||||
|
// for (let i = 0; i < this.ticketsInfo.length; i++) {
|
||||||
|
// console.log(i + ' : ' + this.ticketsInfo[i].ticketTypeName)
|
||||||
|
|
||||||
|
// }
|
||||||
|
console.log("getTicketsByEmployee()-------------------------------------------------------");
|
||||||
|
console.log(this.teckitInfo);
|
||||||
|
console.log("Type Id" + this.teckitInfo[0].ticketTypeId);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getCreateTicket(){
|
||||||
|
// const request = {
|
||||||
|
// // EmployeeNumber:"",
|
||||||
|
// // ticketTypeId:this.teckitInfo[0].ticketTypeId,
|
||||||
|
// // projectId:this.teckitInfo[0].projectId,
|
||||||
|
// // departmentId:this.teckitInfo[0].departmentId,
|
||||||
|
// // sectionId:this.teckitInfo[0].sectionId,
|
||||||
|
// // sectionTopicId:this.teckitInfo[0].topicId,
|
||||||
|
// // description:this.teckitInfo[0].description,
|
||||||
|
// // fileColl:this.
|
||||||
|
// // employeeNumber:this.teckitInfo[0].employeeNumber,
|
||||||
|
// // ticketStatus:this.teckitInfo[0].ticketStatusName,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// // channelId:this.teckitInfo.channelId,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// };
|
||||||
|
var request = new FormData();
|
||||||
|
request.append('EmployeeNumber',"" );
|
||||||
|
|
||||||
|
request.append('ticketTypeId', this.teckitInfo[0].ticketTypeId );
|
||||||
|
request.append('projectId',this.teckitInfo[0].projectId);
|
||||||
|
request.append('departmentId',this.teckitInfo[0].departmentId );
|
||||||
|
request.append('sectionId',this. teckitInfo[0].sectionId );
|
||||||
|
request.append('sectionTopicId', this.teckitInfo[0].topicId );
|
||||||
|
request.append('description',this.teckitInfo[0].description );
|
||||||
|
request.append('fileColl',this.selectedFile[0],this.selectedFile[0].name );
|
||||||
|
request.append('employeeNumber',this.teckitInfo[0].employeeNumber );
|
||||||
|
request.append('ticketStatus',this.teckitInfo[0].ticketStatusName );
|
||||||
|
|
||||||
|
|
||||||
|
//request.append('file', this.uploadForm.get('profile').value);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.MowadhafiService.getCreateTicket(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||||
|
{
|
||||||
|
this.handlegetCreateTicketResult(result);
|
||||||
|
|
||||||
|
}) }
|
||||||
|
handlegetCreateTicketResult(result){
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public cancelRequest() {
|
||||||
|
this.cs.openMyRequestPage();
|
||||||
|
// this.menu.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*******************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()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
onFileSelectedclick(event){
|
||||||
|
//event.target.value = '';
|
||||||
|
this.selectedFile = event;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onFileSelected(input) {
|
||||||
|
if (!(this.filterAllowedType.indexOf(input.target.files[0].type) > -1)) {
|
||||||
|
let msg: string = "";
|
||||||
|
msg = this.ts.trPK("general", "noFileSelect");
|
||||||
|
this.cs.presentAlert(msg);
|
||||||
|
return;
|
||||||
|
} // todo: show alert that you tried uploading wrong files
|
||||||
|
else {
|
||||||
|
const file = input.target.files[0];
|
||||||
|
|
||||||
|
// console.log(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.indexLastObj++;
|
||||||
|
try {
|
||||||
|
let array = name.split(".");
|
||||||
|
let attachType: string = array[array.length - 1];
|
||||||
|
|
||||||
|
this.addAttachRequest.push({
|
||||||
|
AttachmentID: this.indexLastObj,
|
||||||
|
P_FILE_CONTENT_TYPE: attachType, //type.split('/')[1],
|
||||||
|
P_FILE_DATA: fileData.split(",")[1],
|
||||||
|
P_FILE_NAME: name, //.split('.')[0],
|
||||||
|
P_TRANSACTION_ID: this.TransactionID
|
||||||
|
});
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
removeFile(objectitem) {
|
||||||
|
let objIndex1 = this.uploader.queue.findIndex(item => item == objectitem);
|
||||||
|
this.uploader.queue.splice(objIndex1, 1);
|
||||||
|
let objIndex = this.addAttachRequest.findIndex(
|
||||||
|
item => item.AttachmentID == objectitem.AttachmentID
|
||||||
|
);
|
||||||
|
this.addAttachRequest.splice(objIndex, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
submitRequest(){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue