fixing payslip in arabic version

Mohem/src/app/home/home.page.ts

@@ -638,7 +638,7 @@ getSubordinatesAttStatus() {
   }
 
   openPage(subMenu) {
-    console.log("openPage");
+    console.log(subMenu);
     let selMenu: MenuResponse = new MenuResponse();
     selMenu = this.common.sharedService.getSharedData(
       MenuResponse.SHARED_DATA,

Mohem/src/app/payslip/home/home.component.html

@@ -78,7 +78,7 @@
                       [value]="gaugeValue"
                       [label]="gaugeLabel">
                   </ngx-gauge> -->
-                 <div class="result-graph">
+                 <div [ngClass]="direction == 'en'? 'result-graph':'result-graph-ar'">
     
           <!-- <div class="request-heading">
     
@@ -86,7 +86,7 @@
     
           </div> -->
     
-          <div class="result-text-container">
+          <div [ngClass]="direction == 'en'? 'result-text-container':'result-text-container-ar'">
     
               <h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
     
@@ -138,9 +138,9 @@
      
 
       <!-- <p>Summary of Payment</p> -->
-      <div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
-
-<div *ngIf="GetSummaryOfPaymentList !=''">
+      
+      <div *ngIf="GetSummaryOfPaymentList !=''">
+        <div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
     <ion-grid class="grids">
         <ion-row class="bgcolor">
             <ion-col class="colPayslip">
@@ -201,8 +201,8 @@
     </ion-grid>
 </div>
 
-<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
 <div *ngIf="GetEarningsList !=''">
+<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
     <ion-grid class="grids">
             <ion-row class="bgcolor">
                 <ion-col class="colPayslip">
@@ -224,8 +224,8 @@
     </ion-grid>
 </div>
 
-<div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
 <div *ngIf="GetDeductionsList !=''">
+    <div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
     <ion-grid class="grids">
         <ion-row class="bgcolor">
             <ion-col class="colPayslip">
@@ -255,8 +255,8 @@
     </ion-select>
   </ion-item> -->
 
+  <div *ngIf="GetPaymentInformationList !=''">
   <div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
-   <div *ngIf="GetPaymentInformationList !=''">
             <ion-grid class="grids" >
       <ion-row class="rowtables">
          <ion-col class="colPayslips">

Mohem/src/app/payslip/home/home.component.scss

@@ -137,6 +137,12 @@
     margin-left: -48px;
     margin-right: 3px;
    }
+
+   .result-graph-ar{
+    font-size: 14px;
+    margin-right: -48px;
+    margin-left: 3px;
+   }
    .headerGrid{
     background-color: white !important;
     border: 1px solid #cac8c8 !important;
@@ -150,6 +156,37 @@
     padding-right: 21px;
 
    }
+
+   .result-text-container-ar {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    left: 54%;
+    top: 50%;
+    display: block;
+    text-align: center;
+    transform: translate(-50%, -50%);
+
+    h2 {
+
+        font-size: 25px;
+        font-family: WorkSans-Bold;
+        margin: 0 auto;
+        line-height: 36px;
+
+    }
+
+    span {
+
+        width: 125px;
+        display: block;
+        margin: 0 auto;
+        font-size: 15px;
+        font-family: workSans-Regular;
+    }
+  }
+
+
    .result-text-container {
     padding: 0;
     margin: 0;

Mohem/src/app/payslip/home/home.component.ts

@@ -57,6 +57,7 @@ export class HomeComponent implements OnInit {
         tooltips: { enabled: false },
         legend: { display: false }};
         gaugeType = "full";
+  direction: string;
         // gaugeValue = 11.200;
         // gaugeLabel = "";
     
@@ -74,6 +75,7 @@ export class HomeComponent implements OnInit {
 
 
   ngOnInit() {
+    this.direction = TranslatorService.getCurrentLanguageName()
         // this.selEmp = this.common.sharedService.getSharedData(
         //   MenuResponse.SHARED_SEL_EMP,
         //   false