job message page

src/app/pages/jobmessage/jobmessage.page.html

@@ -19,9 +19,38 @@
 
     </div>
 
-    <div  class="lesson">
+      <div *ngIf="viewMode ==200" class="lesson">
 
-      <div class="video" *ngFor="let item of messageResult;" (click)="viewSeleted(item)">
+          <ion-card>
+              <ion-card-header>
+                  <ion-card-title>{{selectedMessage.memo}}</ion-card-title>
+                  <ion-card-subtitle>{{selectedMessage.msg_from}} - {{selectedMessage.msg_date}}</ion-card-subtitle>
+              </ion-card-header>
+
+              <ion-card-content>
+                <div>
+                    {{selectedMessage.msg}}
+                </div>
+                  <div style="background-color: aliceblue; padding: 2px; border-radius: 5px;">
+                      <div>
+                          <ion-textarea>
+
+                          </ion-textarea>
+                      </div>
+                      <div style="text-align: right; margin: 10px; background-color: #c0def8">
+                          <ion-button size="small">Reply</ion-button>
+                      </div>
+                  </div>
+              </ion-card-content>
+
+              <ion-button fill="clear" (click)="returnSelected()">Return</ion-button>
+          </ion-card>
+
+
+     </div>
+
+    <div *ngIf="viewMode ==100"   class="lesson">
+      <div class="video" *ngFor="let item of messageResult;" >
         <!--        <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">-->
         <div class="left">
 <!--          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>-->
@@ -35,13 +64,11 @@
           </div>
         </div>
         <div class="right">
-          <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
+          <ion-icon name="chevron-forward-outline" color="medium" (click)="viewSelected(item)"></ion-icon>
         </div>
       </div>
-
     </div>
 
-
   </div>
 </ion-content>
 

src/app/pages/jobmessage/jobmessage.page.ts

@@ -11,6 +11,8 @@ import {WrenchService} from "../../services/wrench.service";
 })
 export class JobmessagePage implements OnInit {
 
+  viewMode:number=100;
+
   constructor(
       private navctr: NavController,
       private router: Router,
@@ -64,7 +66,16 @@ export class JobmessagePage implements OnInit {
     );
 
   }
-   viewSeleted(item){
+  selectedMessage:any;
+   viewSelected(item){
+     // debugger;
+      this.selectedMessage = item;
+      this.viewMode = 200;
+  }
 
+  returnSelected(){
+    //debugger;
+    this.selectedMessage= null;
+    this.viewMode = 100;
   }
 }