routing changes : kdk

src/app/app.module.ts

@@ -7,8 +7,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 
 import { StatusModule } from './views/status/status.module';
-import { EntrollmentModule } from './views/entrollment/entrollment.module';
+import { EnrolmentModule } from './views/enrolment/enrolment.module';
 import { StudymaterialModule } from './views/studymaterial/studymaterial.module';
+import { CourierModule } from './views/courier/courier.module';
 
 import { AppComponent } from './app.component';
 
@@ -75,8 +76,9 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
     TooltipModule.forRoot(),
     ChartsModule,
     StatusModule,
-    EntrollmentModule,
-	StudymaterialModule
+    EnrolmentModule,
+	StudymaterialModule,
+  CourierModule
   ],
   declarations: [
     AppComponent,

src/app/app.routing.ts

@@ -49,12 +49,16 @@ export const routes: Routes = [
         loadChildren: './views/status/status.module#StatusModule'
       },
       {
-        path: 'entrollment',
-        loadChildren: './views/entrollment/entrollment.module#EntrollmentModule'
+        path: 'enrolment',
+        loadChildren: './views/enrolment/enrolment.module#EnrolmentModule'
       },
 	   {
         path: 'studymaterial',
         loadChildren: './views/studymaterial/studymaterial.module#StudymaterialModule'
+      },
+	   {
+        path: 'courier',
+        loadChildren: './views/courier/courier.module#CourierModule'
       }
     ]
   },

src/app/components/app-sidebar/app-sidebar.component.html

@@ -8,7 +8,7 @@
         <a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="{{nav.icon}}"></i> {{nav.name}}</a>
         <ul class="nav-dropdown-items" *ngFor="let sub of nav.children">
           <li class="nav-item">
-            <a class="nav-link" routerLinkActive="active" [routerLink]="[sub.url]"><i class="{{sub.icon}}"></i> {{sub.name}}</a>
+            <a class="nav-link" routerLinkActive="active" [routerLink]="[sub.url]"> {{sub.name}}</a>
           </li>
         </ul>
       </li>

src/app/components/app-sidebar/app-sidebar.component.ts

@@ -80,31 +80,21 @@ export class AppSidebar {
           url: '/masters/FormMaster',
           icon: 'fa fa-language'
         },
-		
 		{
           name: 'Exam Timetable',
           url: '/masters/ExamTimetable',
           icon: 'fa fa-language'
         }
       ]
+    },{
+      name: 'Student Enrolment',
+      icon: 'fa fa-graduation-cap',
+      url : '/enrolment'
     },{
       name: 'Status',
       icon: 'fa fa-tasks',
       children: [
         {
-          name: 'Application',
-          url: '/status/application',
-          icon: 'fa fa-sticky-note'
-        },
-        {
-          name: 'Courier',
-          url: '/status/courier',
-          icon: 'fa fa-suitcase'
-        },{
-          name: 'Study Material',
-          url: '/status/studyMaterial',
-          icon: 'fa fa-square-o'
-        },{
           name: 'Answer Booklet',
           url: '/status/answerBooklet',
           icon: 'fa fa-file-word-o'
@@ -113,22 +103,12 @@ export class AppSidebar {
           url: '/status/documents',
           icon: 'fa fa-file-pdf-o'
         },
-		{
+		    {
           name: 'PaymentDetails',
           url: '/status/paymentdetails',
           icon: 'fa fa-user-secret'
         }
       ]
-    },{
-      name: 'Entrollment',
-      icon: 'fa fa-graduation-cap',
-      children: [
-        {
-          name: 'Student Entrollment',
-          url: '/entrollment/student',
-          icon: 'fa fa-user'
-        }
-      ]
     },{
       name: 'Study Material',
       icon: 'fa fa-gear',
@@ -142,8 +122,17 @@ export class AppSidebar {
           name: 'AllocateMaterial',
           url: '/studymaterial/allocatematerial',
           icon: 'fa fa-user-secret'
+        },
+        {
+          name: 'Study Material Status',
+          url: '/studymaterial/studyMaterialStatus',
+          icon: 'fa fa-square-o' 
         }
       ]
+    },{
+      name: 'Courier',
+      icon: 'fa fa-suitcase',
+      url : '/courier'
     }
   ];
 }

src/app/views/courier/courier-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+// Courier
+import { CourierComponent } from './courier/courier.component';
+const routes: Routes = [
+  {
+    path: '',
+    component: CourierComponent,
+    data: {
+     title: 'Courier'
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CourierRoutingModule {}

src/app/views/courier/courier.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
+import { FormsModule } from '@angular/forms';
+// import { BrowserModule } from '@angular/platform-browser';
+// Tabs Component
+import { TabsModule } from 'ngx-bootstrap/tabs';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { ModalModule } from 'ngx-bootstrap/modal';
+
+import { CourierRoutingModule } from './courier-routing.module';
+
+// Courier
+import { CourierComponent } from './courier/courier.component';
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    TabsModule,
+    ModalModule.forRoot(),
+    TooltipModule,
+    CourierRoutingModule 
+    ],
+  declarations: [
+   CourierComponent
+  ]
+})
+export class CourierModule { }

src/app/views/courier/courier/courier.component.html

@@ -0,0 +1,203 @@
+<!--<span *ngIf="show" class="backToList">
+    <a (click)="show = !show;" tooltip="Go to listing">Back to List</a>
+    </span>-->
+
+<div class="col-lg-12" *ngIf="!show">
+    <tabset>
+        <tab>
+            <ng-template tabHeading> Courier Details List</ng-template>
+            <div class="card">
+                <div class="card-header">
+                    <i class="fa fa-align-justify"></i> Courier Details List
+                </div>
+                <div class="card-body">
+                     <div class="row">
+                        <div class="col-md-4">
+                            <div class="input-prepend input-group">
+                                <span class="input-group-addon">
+                                    <i class="fa fa-search"></i>
+                                    </span>
+                                <input id="search" class="form-control" type="text" placeholder="search">
+                            </div>
+                        </div>
+                    </div>
+                    <br>
+                    <table class="table table-bordered table-responsive">
+                        <thead>
+                            <tr>
+                                <th>Courier Name</th>
+                                <th>Docket No.</th>
+                                <th>Type</th>
+                                <th>Comments</th>
+                                <th>Received By/ Dispatched By</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let cour of courier">
+                                <td>{{cour.courierName}}</td>
+                                <td>{{cour.docketNo}}</td>
+                                <td>{{cour.type}}</td>
+                                <td>{{cour.comments}}</td>
+                                <td>{{cour.receiveBy}}</td>
+                                <td>{{cour.status}}</td>
+                                <td>
+                                    <!--<i class="fa fa-edit" tooltip="Edit" (click)="editEmployee()"></i> |-->
+                                    <i class="fa fa-eye" tooltip="View More" data-toggle="modal" (click)="myModal.show(); getModelWindowDetails(cour)"></i>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <ul class="pagination">
+                        <li class="page-item"><a class="page-link" href="#">Prev</a></li>
+                        <li class="page-item active">
+                            <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item"><a class="page-link" href="#">2</a></li>
+                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <li class="page-item"><a class="page-link" href="#">4</a></li>
+                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
+                    </ul>
+                </div>
+            </div>
+        </tab>
+        <tab>
+            <ng-template tabHeading> Add Courier</ng-template>
+            <div class="animated fadeIn">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="card">
+                            <div class="card-header">
+                             <i class="fa fa-align-justify"></i> Add Courier Details
+                            </div>
+                            <form>
+                                <fieldset>
+                                    <div class="container">
+                                        <div class="row">
+                                            <div class="form-group col-md-4">
+                                                <label for="cname">Courier Name <span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="cname" placeholder="Enter Courier name">
+                                            </div>
+                                            <div class="form-group col-md-4">
+                                                <label for="lname">Docket No. <span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="lname" placeholder="Enter Docket No">
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="form-group col-md-4">
+                                                <label for="pmobile">Type<span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="pmobile" placeholder="Enter Type">
+                                            </div>
+                                            <div class="form-group col-md-4">
+                                                <label for="smobile">Status</label>
+                                                <input type="text" class="form-control" id="smobile" placeholder="Enter Status">
+                                            </div>
+                                           <div class="form-group col-md-4">
+                                                <label for="smobile">Comments</label>
+                                                <input type="text" class="form-control" id="smobile" placeholder="Enter Status">
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="form-group col-md-4">
+                                                <label for="email">Qty <span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="email" placeholder="Enter Qty">
+                                            </div>
+                                            <div class="form-group col-md-4">
+                                                <label for="fatherName">Amount<span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="fatherName" placeholder="Enter Amount">
+                                            </div>
+                                            <div class="form-group col-md-4">
+                                                <label for="motherName">Date<span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="motherName" placeholder="Enter Date">
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="form-group col-md-4">
+                                                <label for="motherName">Received By / Dispatched By<span class="danger">*</span></label>
+                                                <input type="text" class="form-control" id="motherName" placeholder="Enter Name">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </fieldset>
+                                <div class="card-footer" align="right">
+                                    <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
+                                    <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </tab>
+    </tabset>
+</div>
+
+
+<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document" *ngIf="myModalData">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{ myModalData.courierName }}</h4>
+                <button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+            </div>
+            <div class="modal-body">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b>Docket No. : </b> </label> {{myModalData.docketNo}}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b>Type : </b> </label> {{myModalData.type}}
+                        </div>
+                        <div class="col-md-6">
+                            <label><b>Comments : </b> </label> {{myModalData.comments}}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b>Qty : </b> </label> {{myModalData.qt}}
+                        </div>
+                        <div class="col-md-6">
+                            <label><b>Weight : </b> </label> {{myModalData.weight}}
+                        </div>
+                    </div>
+                     <div class="row">
+                        <div class="col-md-6">
+                            <label><b>Amount : </b> </label> {{myModalData.amt}}
+                        </div>
+                        <div class="col-md-6">
+                            <label><b>Date : </b> </label> {{myModalData.date}}
+                        </div>
+                    </div>
+                      <div class="row">
+                        <div class="col-md-4">
+                            <label for="name"> Status</label>
+                            <select id="disabledSelect" class="form-control">
+                                <option value="0">Select Status</option>
+                                <option value="2">Sent to SC</option>
+                                <option value="3">Rejection</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="comment">Comments <span class="danger">*</span></label>
+                            <textarea class="form-control" id="comments" placeholder="Enter Comments"></textarea>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
+                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->

src/app/views/courier/courier/courier.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: 'courier.component.html',
+  styleUrls: ['./courier.component.scss']
+})
+
+export class CourierComponent implements OnInit {
+  show = false;
+  closed = false;
+  public myModal;
+  public myModalData;
+  courier: any;
+  constructor() { }
+  ngOnInit(){
+       this.courier = [
+      {
+        courierName: 'Documents',
+        docketNo: '234dsf',
+        type: 'Received',
+        comments: 'Documents Details',
+        receiveBy: 'sss',
+        status: 'sent',
+        date: '20/07/2018',
+        qt: 120,
+        weight: '12kgm',
+        amt : 120
+      },
+      {
+        courierName: 'Answer Booklets',
+        docketNo: '43526345',
+        type: 'Dispatched',
+        comments: 'answer booklets details',
+        receiveBy: 'asd',
+        status: 'received by SC',
+        date: '28/06/2018',
+        qt: 120,
+        weight: '12kgm',
+        amt : 120
+      },
+      {
+        courierName: 'Forms',
+        docketNo: '8855435',
+        type: 'Dispatched',
+        comments: 'details',
+        receiveBy: 'abc',
+        status: 'Sent by SC',
+        date: '12/06/2018',
+        qt: 120,
+        weight: '12kgm',
+        amt : 120
+      }
+    ]
+  }
+
+  getModelWindowDetails(stuCent) {
+    this.myModalData = stuCent||null;
+  }
+  editDocuments(){
+     this.show = !this.show;
+  }
+
+}

src/app/views/enrolment/enrolment-routing.module.ts

@@ -6,16 +6,17 @@ import { StudentComponent } from './student/student.component';
 const routes: Routes = [
   {
     path: '',
+    component: StudentComponent,
     data: {
-     title: 'Entrollment'
-    },
-    children: [{
-      path: 'student',
-      component: StudentComponent,
-      data : {
-          title: 'Student Entollement'
-      }
-    }]
+     title: 'Student Enrolment'
+    }
+    // children: [{
+    //   path: 'student',
+    //   component: StudentComponent,
+    //   data : {
+    //       title: 'Student Enrolment'
+    //   }
+    // }]
   }
 ];
 
@@ -23,4 +24,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class EntrollmentRoutingModule {}
+export class EnrolmentRoutingModule {}

src/app/views/enrolment/enrolment.module.ts

@@ -7,7 +7,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
-import { EntrollmentRoutingModule } from './entrollment-routing.module';
+import { EnrolmentRoutingModule } from './enrolment-routing.module';
 
 // Student
 import { StudentComponent } from './student/student.component';
@@ -18,10 +18,10 @@ import { StudentComponent } from './student/student.component';
     TabsModule,
     ModalModule.forRoot(),
     TooltipModule,
-    EntrollmentRoutingModule 
+    EnrolmentRoutingModule 
     ],
   declarations: [
    StudentComponent
   ]
 })
-export class EntrollmentModule { }
+export class EnrolmentModule { }

src/app/views/enrolment/student/student.component.html

@@ -4,7 +4,7 @@
 <div class="col-lg-12" *ngIf="!show">
     <tabset>
         <tab>
-            <ng-template tabHeading>Student Entrollment</ng-template>
+            <ng-template tabHeading>Student Enrolment</ng-template>
             <div class="form-group">
                 <div class="row">
                     <div class="form-group col-md-4">

src/app/views/status/status-routing.module.ts

@@ -1,11 +1,8 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { ApplicationComponent } from './application/application.component';
-import { StudyMaterialComponent } from './study-material/study-material.component';
 import { DocumentsComponent } from './documents/documents.component';
 import { AnswerBookletComponent } from './answer-booklet/answer-booklet.component';
-import { CourierComponent } from './courier/courier.component';
 import { PaymentdetailsComponent } from './paymentdetails/paymentdetails.component';
 
 const routes: Routes = [
@@ -14,26 +11,7 @@ const routes: Routes = [
     data: {
      title: 'Status'
     },
-    children: [
-      {
-        path: 'application',
-        component: ApplicationComponent,
-        data: {
-          title: 'Application'
-        }
-      },{
-        path: 'courier',
-        component: CourierComponent,
-        data: {
-          title: 'Couriers'
-        }
-      },{
-        path: 'studyMaterial',
-        component: StudyMaterialComponent,
-        data: {
-          title: 'Study Material'
-        }
-      },{
+    children: [{
         path: 'answerBooklet',
         component: AnswerBookletComponent,
         data: {
@@ -45,8 +23,7 @@ const routes: Routes = [
         data: {
           title: 'Documents'
         }
-      }
-	  ,{
+      },{
         path: 'paymentdetails',
         component: PaymentdetailsComponent,
         data: {

src/app/views/status/status.module.ts

@@ -9,17 +9,13 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { StatusRoutingModule } from './status-routing.module';
 
 //application
-import { ApplicationComponent } from './application/application.component';
-//study material
-import { StudyMaterialComponent } from './study-material/study-material.component';
+// import { ApplicationComponent } from './application/application.component';
 //documents
 import { DocumentsComponent } from './documents/documents.component';
 import { EditDocumentsComponent } from './documents/edit-documents/edit-documents.component';
 //answer-booklet
 import { AnswerBookletComponent } from './answer-booklet/answer-booklet.component';
 import { EditAnswerBookletComponent } from './answer-booklet/edit-answer-booklet/edit-answer-booklet.component';
-//courier
-import { CourierComponent } from './courier/courier.component';
 //paymentdetails
 import { PaymentdetailsComponent } from './paymentdetails/paymentdetails.component';
 
@@ -33,13 +29,10 @@ import { PaymentdetailsComponent } from './paymentdetails/paymentdetails.compone
     StatusRoutingModule
     ],
   declarations: [
-      ApplicationComponent,
-      StudyMaterialComponent,
       DocumentsComponent,
       EditDocumentsComponent,
       AnswerBookletComponent,
       EditAnswerBookletComponent,
-      CourierComponent,
 	  PaymentdetailsComponent
   ]
 })

src/app/views/studymaterial/study-material/study-material.component.html

@@ -0,0 +1,152 @@
+<div class="col-lg-12" *ngIf="!show">
+    <tabset>
+        <tab>
+            <ng-template tabHeading>Study Material Status</ng-template>
+            <div class="form-group">
+                <div class="row">
+                    <div class="form-group col-md-4">
+                        <label for="name"> Study Material Center</label>
+                            <select id="disabledSelect" class="form-control">
+                                <option value="0">Please select Study Center</option>
+                                <option value="1">SC 001</option>
+                                <option value="2">SC 002</option>
+                                <option value="3">SC 003</option>
+                            </select>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <i class="fa fa-align-justify"></i> Study Matrial Status List
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="input-prepend input-group">
+                                <span class="input-group-addon">
+                                    <i class="fa fa-search"></i>
+                                    </span>
+                                <input id="search" class="form-control" type="text" placeholder="search">
+                            </div>
+                        </div>
+                    </div>
+                    <br>
+                    <table class="table table-bordered table-responsive">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Study Material Details</th>
+                                <th>University</th>
+                                <th>Course</th>
+                                <th>Total</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let app of studyMaterialDetails">
+                                <td>{{app.applicationId}}</td>
+                                <td>{{app.details}}</td>
+                                <td>{{app.univ}}</td>
+                                <td>{{app.course}}</td>
+                                <td>{{app.total}}</td>
+                                <td>
+                                    <span *ngIf="app.status == 1" class="badge badge-success">Received</span>
+                                    <span *ngIf="app.status == 0" class="badge badge-danger">Sent</span>
+                                </td>
+                                <td>
+                                    <!--<i class="fa fa-edit" tooltip="Edit" (click)="editStudyCenter()"></i> |-->
+                                    <i class="fa fa-eye" tooltip="View More" data-toggle="modal" (click)="myModal.show(); getModelWindowDetails(app)"></i>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <ul class="pagination">
+                        <li class="page-item"><a class="page-link" href="#">Prev</a></li>
+                        <li class="page-item active">
+                            <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item"><a class="page-link" href="#">2</a></li>
+                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <li class="page-item"><a class="page-link" href="#">4</a></li>
+                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
+                    </ul>
+                </div>
+            </div>
+        </tab>
+    </tabset>
+</div>
+
+
+<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document" *ngIf="myModalData">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{ myModalData.applicationId }}</h4>
+                <button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+            </div>
+            <div class="modal-body">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b> Student Material Details : </b> </label> {{myModalData.details}}
+                        </div>
+                        <div class="col-md-6">
+                            <label><b>University : </b> </label> {{myModalData.univ}}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b> Course : </b> </label> {{myModalData.course}}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b> Total : </b> </label> {{myModalData.total}}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label><b> Sent Date : </b> </label> 
+                        </div>
+                         <div class="col-md-6">
+                            <label><b> Comments : </b> </label> 
+                        </div>
+                    </div>
+                      <div class="row">
+                        <div class="col-md-6">
+                            <label><b> Recive Date : </b> </label> 
+                        </div>
+                         <div class="col-md-6">
+                            <label><b> Comments : </b> </label>
+                        </div>
+                    </div>
+                    <div class="row">
+                    <div class="col-md-4">
+                         <label for="name"> Status</label>
+                            <select id="disabledSelect" class="form-control">
+                                <option value="0">Select Status</option>
+                                <option value="1">Sent</option>
+                                <option value="2">Received</option>
+                            </select>
+                    </div>
+                       <div class="col-md-4">
+                        <label for="comment">Comments <span class="danger">*</span></label>
+                        <textarea class="form-control" id="comments" placeholder="Enter Comments"></textarea>
+                                           
+                    </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
+                <button type="button" class="btn btn-primary">Save</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->

src/app/views/studymaterial/study-material/study-material.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: 'study-material.component.html'
+})
+
+export class StudyMaterialComponent implements OnInit {
+  show = false;
+  closed = false;
+  public myModal;
+  public myModalData;
+  studyMaterialDetails: any;
+  constructor() { }
+  ngOnInit(){
+       this.studyMaterialDetails = [
+      {
+        applicationId: '1',
+        details: 'xyz',
+        univ: 'kr university',
+        course: 'B.com',
+        total: '12',
+        status: '1'
+      },
+      {
+        applicationId: '2',
+        details: 'xyz',
+        univ: 'kr university',
+        course: 'B.Sc',
+        total: '12',
+        status: '1'
+      },
+      {
+        applicationId: '3',
+        details: 'xyz',
+        univ: 'kr university',
+        course: 'MCA',
+        total: '12',
+        status: '0'
+      }
+    ]
+  }
+
+  getModelWindowDetails(stuCent) {
+    this.myModalData = stuCent||null;
+  }
+  editStudyCenter(){
+     this.show = !this.show;
+  }
+
+}

src/app/views/studymaterial/studymaterial-routing.module.ts

@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ReceivedmaterialComponent } from './receivedmaterial/receivedmaterial.component';
 import { AllocatematerialComponent } from './allocatematerial/allocatematerial.component';
+import { StudyMaterialComponent } from './study-material/study-material.component';
 
 const routes: Routes = [
 {
     path: '',
     data: {
-     title: 'Studymaterial'
+     title: 'Study Material'
     },
     children: [
       {
@@ -23,6 +24,13 @@ const routes: Routes = [
         data: {
           title: 'AllocateMaterial'
         }
+      },
+	  {
+        path: 'studyMaterialStatus',
+        component: StudyMaterialComponent,
+        data: {
+          title: 'Study Material Status'
+        }
       }
     ]
   }];

src/app/views/studymaterial/studymaterial.module.ts

@@ -10,6 +10,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { StudymaterialRoutingModule } from './studymaterial-routing.module';
 import { ReceivedmaterialComponent } from './receivedmaterial/receivedmaterial.component';
 import { AllocatematerialComponent } from './allocatematerial/allocatematerial.component';
+import { StudyMaterialComponent } from './study-material/study-material.component';
 
 @NgModule({
   imports: [
@@ -20,6 +21,7 @@ import { AllocatematerialComponent } from './allocatematerial/allocatematerial.c
 	 TabsModule,
     StudymaterialRoutingModule
   ],
-  declarations: [ReceivedmaterialComponent, AllocatematerialComponent]
+  declarations: [ReceivedmaterialComponent, AllocatematerialComponent,
+  StudyMaterialComponent]
 })
 export class StudymaterialModule { }