pendind item

src/app/components/myjob-offers/myjob-offers.component.html

@@ -1,6 +1,6 @@
 <div style="background-color: white">
   <div  class="lesson">
-    <div class="video" *ngFor="let item of jobManagerOffersData">
+    <div class="video" *ngFor="let item of jobManagerOffersData" (click)="openDetailModal(item)">
       <div class="left">
         <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>
 
@@ -9,7 +9,7 @@
           <ion-label class="grey_text">{{item.description}}</ion-label>
           <ion-label class="price_line">{{item.offer_code}}   {{item.price*0.01}} {{item.currency}}  </ion-label>
           <ion-label class="due_date">Expire: {{item.expire |date}}</ion-label>
-          <ion-label class="grey_text">Send to : {{item.job_to}}</ion-label>
+          <ion-label class="grey_text">Sent to : <span class="job_to">{{item.job_to}}</span></ion-label>
         </div>
       </div>
       <div class="right">
@@ -17,6 +17,39 @@
       </div>
     </div>
   </div>
+
+<div *ngIf="isModalOpenBackdrop==true">
+  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
+  <ion-modal class="common_modal" [isOpen]="isModalOpen">
+
+    <ng-template>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pending Details</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="setCloseModal()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-card style="margin: 0px;">
+          <ion-card-header>
+            <ion-card-title style="font-size: 18px">{{modal_item_title}}</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            {{modal_item_description}}
+
+           <div  style="margin-top: 10px; font-size: 14px;">{{modal_item_job_detail}} </div>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</div>
+
+
 </div>
 <div *ngIf="total_item==0">
   <ion-card style="background-color: #e3d1d4; margin: 0px;">

src/app/components/myjob-offers/myjob-offers.component.scss

@@ -56,5 +56,10 @@
       font-size: 14px;
       color: grey;
     }
+    .job_to{
+      color: #8b198e;
+      font-weight: bolder;
+      margin-right: 10px;
+    }
   }
 }

src/app/components/myjob-offers/myjob-offers.component.ts

@@ -11,7 +11,8 @@ import {WrenchService} from "../../services/wrench.service";
 })
 export class MyjobOffersComponent implements OnInit {
   @Input('jobData') jobData:any;
-
+  isModalOpen:boolean = false;
+  isModalOpenBackdrop:boolean = false;
   total_item:number = 0;
 
   tabs = 'about';
@@ -27,12 +28,37 @@ export class MyjobOffersComponent implements OnInit {
     addEventListener('app-myjob-offers-refresh', () => {
       this.getPendingOffersData();
     });
+
+    addEventListener('app-myjob-offers-clear-modals', () => {
+      this.setCloseModal();
+    });
+
     this.getPendingOffersData();
   }
 
   ngOnInit() {
    // console.log('AMEYE===>', this.jobData);
   }
+  modal_item_title:string='';
+  modal_item_description:string='';
+  modal_item_job_detail:string='';
+
+  openDetailModal(item){
+
+    this.modal_item_title= item.title;
+    this.modal_item_description= item.description;
+    this.modal_item_job_detail=item.job_detail;
+
+    this.isModalOpen = true;
+    this.isModalOpenBackdrop= true;
+  }
+  setCloseModal(){
+    this.modal_item_title= '';
+    this.modal_item_description= '';
+    this.modal_item_job_detail='';
+    this.isModalOpen = false;
+    setTimeout(()=>{ this.isModalOpenBackdrop= false;},1000);
+}
   usrData: {
     action:number, member_id: number, uid: string, sessionid: string, limit:20, page:1,offset: 0
   };

src/app/pages/pendingoffers/pendingoffers.page.ts

@@ -26,6 +26,9 @@ export class PendingoffersPage implements OnInit {
   }
 
   onBack() {
+    const event = new Event("app-myjob-offers-clear-modals");
+    // Dispatch the event.
+    dispatchEvent(event);
     this.navctr.back();
   }
 

src/global.scss

@@ -288,3 +288,14 @@ ion-content{
     font-weight: bolder;
   }
 }
+.common_modal{
+  background-color: aliceblue;
+  max-width: 350px ;
+  max-height: 550px;
+  margin: auto;
+}
+ion-backdrop {
+  background: var(--ion-color-dark);
+  opacity: 0.3;
+  height: auto;
+}