From ab54b565692ed73b7ebdc405cd81b5a6fd2b17a2 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Wed, 6 Nov 2019 18:55:24 +0530
Subject: [PATCH] implement library books funtionality and design

---
 src/api/menu.js                                 |  24 +--
 src/pages/Account/invoice.vue                   |   9 +-
 src/pages/Account/paymentHistory.vue            |  48 +++--
 src/pages/Attendence/studentAttendence.vue      |   2 +-
 src/pages/Attendence/viewStudentsAttendence.vue |   2 +-
 src/pages/Library/books.vue                     | 169 +++++++++++----
 src/pages/Library/eBook.vue                     | 261 ++++++++++++------------
 src/pages/Library/member.vue                    | 217 ++++++++++----------
 8 files changed, 413 insertions(+), 319 deletions(-)

diff --git a/src/api/menu.js b/src/api/menu.js
index f437996..6295d68 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -77,19 +77,19 @@ const Menu = [
         path: '/timeTable',
         icon: '/static/schoolIcons/Time_table.png',
     },
-    // {
-    //     title: 'Library',
-    //     group: 'Library',
-    //     component: 'Library',
-    //     icon: '/static/schoolIcons/Library.png',
-    //     items: [
-    //         { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
-    //         { name: 'Books', title: 'Books', component: 'Books', action: '', },
-    //         { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
-    //         { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
+    {
+        title: 'Library',
+        group: 'Library',
+        component: 'Library',
+        icon: '/static/schoolIcons/Library.png',
+        items: [
+            // { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
+            { name: 'Books', title: 'Books', component: 'Books', action: '', },
+            // { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
+            // { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
 
-    //     ]
-    // },
+        ]
+    },
     {
         title: 'Notification',
         path: '/notification',
diff --git a/src/pages/Account/invoice.vue b/src/pages/Account/invoice.vue
index 0622907..be140bb 100644
--- a/src/pages/Account/invoice.vue
+++ b/src/pages/Account/invoice.vue
@@ -639,7 +639,7 @@ export default {
           this.invoiceList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
@@ -720,11 +720,12 @@ export default {
         paidAmount: ""
       };
       for (let i = 0; i < this.feeTypeData.length; i++) {
+        
         // *********** AMOUNT ***********
 
         feeType.amount =
           Number(feeType.amount) + Number(this.feeTypeData[i].amount);
-        console.log("feeType.amount ", feeType.amount);
+        // console.log("feeType.amount ", feeType.amount);
         this.feeType.amount = feeType.amount;
         this.feeType.subTotal = feeType.amount;
         this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
@@ -734,12 +735,12 @@ export default {
         if (this.feeTypeData[i].discount) {
           feeType.discount =
             Number(feeType.discount) + Number(this.feeTypeData[i].discount);
-          console.log("feeType.discount", feeType.discount);
+          // console.log("feeType.discount", feeType.discount);
           this.feeType.discount = feeType.discount;
           feeType.subParticularTotal =
             this.feeTypeData[i].amount -
             (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
-          console.log("feeType.subTotal", feeType.subTotal);
+          // console.log("feeType.subTotal", feeType.subTotal);
           this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
         }
 
diff --git a/src/pages/Account/paymentHistory.vue b/src/pages/Account/paymentHistory.vue
index 3537497..6eab36c 100644
--- a/src/pages/Account/paymentHistory.vue
+++ b/src/pages/Account/paymentHistory.vue
@@ -26,18 +26,26 @@
         <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
         <!-- <td class="text-xs-center">
           <span>
-            <img
-              style="cursor:pointer; width:20px; height:18px; "
-              class="mr-5"
-              @click="editItem(props.item)"
-              src="/static/icon/edit1.png"
-            />
-            <img
-              style="cursor:pointer;width:20px; height:20px; "
-              class="mr-5"
-              @click="deleteItem(props.item)"
-              src="/static/icon/delete1.png"
-            />
+            <v-tooltip top>
+              <img
+                slot="activator"
+                style="cursor:pointer; width:20px; height:18px; "
+                class="mr-5"
+                @click="editItem(props.item)"
+                src="/static/icon/edit1.png"
+              />
+              <span>Edit</span>
+            </v-tooltip>
+            <v-tooltip top>
+              <img
+                slot="activator"
+                style="cursor:pointer;width:20px; height:20px; "
+                class="mr-5"
+                @click="deleteItem(props.item)"
+                src="/static/icon/delete1.png"
+              />
+              <span>Delete</span>
+            </v-tooltip>
           </span>
         </td> -->
       </template>
@@ -79,8 +87,18 @@ export default {
         align: "center"
       },
       { text: "Class", value: "class", sortable: false, align: "center" },
-      { text: "Fee Type", value: "feeTypeName", sortable: false, align: "center" },
-      { text: "Method", value: "paymentMethod", sortable: false, align: "center" },
+      {
+        text: "Fee Type",
+        value: "feeTypeName",
+        sortable: false,
+        align: "center"
+      },
+      {
+        text: "Method",
+        value: "paymentMethod",
+        sortable: false,
+        align: "center"
+      },
       {
         text: "Paid Amount",
         value: "totalPaidAmount",
@@ -106,7 +124,7 @@ export default {
       var token = this.$store.state.token;
       http()
         .get("/getInvoicesList", {
-          params:{ paymentStatus: "FULLY_PAID"},
+          params: { paymentStatus: "FULLY_PAID" },
           headers: { Authorization: "Bearer " + token }
         })
         .then(response => {
diff --git a/src/pages/Attendence/studentAttendence.vue b/src/pages/Attendence/studentAttendence.vue
index 90d1984..80c7f69 100644
--- a/src/pages/Attendence/studentAttendence.vue
+++ b/src/pages/Attendence/studentAttendence.vue
@@ -156,7 +156,7 @@ export default {
           this.studentsList = response.data.data;
           console.log("getSectionsList=====>", response.data.data);
         })
-        .catch(err => {
+        .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
diff --git a/src/pages/Attendence/viewStudentsAttendence.vue b/src/pages/Attendence/viewStudentsAttendence.vue
index 30a67ad..fd7b54b 100644
--- a/src/pages/Attendence/viewStudentsAttendence.vue
+++ b/src/pages/Attendence/viewStudentsAttendence.vue
@@ -223,7 +223,7 @@ export default {
           }
           this.activeDates = array;
         })
-        .catch(err => {
+        .catch(error => {
           console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
diff --git a/src/pages/Library/books.vue b/src/pages/Library/books.vue
index 882eae8..b44c94e 100644
--- a/src/pages/Library/books.vue
+++ b/src/pages/Library/books.vue
@@ -43,28 +43,62 @@
                     <v-form>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right pr-3">Books:</label>
+                          <label class="right pr-3">Name:</label>
+                        </v-flex>
+                        <v-flex xs8>
+                          <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right pr-3">Author:</label>
                         </v-flex>
                         <v-flex xs8>
                           <v-text-field
-                            v-model="editedItem.feeType"
-                            placeholder="fill your Fee Type"
-                            required
+                            v-model="editedItem.author"
+                            placeholder="fill your Author Name"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right pr-3">Note:</label>
+                          <label class="right pr-2">Subject Code :</label>
                         </v-flex>
                         <v-flex xs8>
-                          <v-textarea
-                            name="input-7-1"
-                            v-model="editedItem.note"
-                            placeholder="fill your Note"
-                            multi-line
-                            required
-                          ></v-textarea>
+                          <v-text-field
+                            v-model="editedItem.subjectCode"
+                            placeholder="fill your  Subject Code"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right pr-3">Price :</label>
+                        </v-flex>
+                        <v-flex xs8>
+                          <v-text-field
+                            v-model="editedItem.price"
+                            placeholder="fill your  Subject Code"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right pr-3">Quantity:</label>
+                        </v-flex>
+                        <v-flex xs8>
+                          <v-text-field
+                            v-model="editedItem.quantity"
+                            placeholder="fill your Quantity"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right pr-3">Rack No:</label>
+                        </v-flex>
+                        <v-flex xs8>
+                          <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field>
                         </v-flex>
                       </v-layout>
                       <v-card-actions>
@@ -99,21 +133,61 @@
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
-                          <b>Class Name:</b>
+                          <b>Name:</b>
+                        </h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.name }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">
+                          <b>Author:</b>
+                        </h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.author }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">
+                          <b>Subject Code :</b>
+                        </h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">
+                          <b>Price :</b>
+                        </h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.price }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">
+                          <b>Quantity :</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
-                        <h5 class="my-1">{{ editedItem.feeType }}</h5>
+                        <h5 class="my-1">{{ editedItem.quantity}}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
-                          <b>Books Name:</b>
+                          <b>Rack No :</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
-                        <h5 class="my-1">{{ editedItem.note }}</h5>
+                        <h5 class="my-1">{{ editedItem.rackNo}}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
@@ -136,14 +210,19 @@
 
         <v-data-table
           :headers="headers"
-          :items="BooksList"
+          :items="bookData"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
-            <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
-            <td id="td" class="text-xs-center">{{ props.item.note }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.name }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.author }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.subjectCode  }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.price }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.quantity }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.rackNo }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.status }}</td>
             <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
 
             <td class="text-xs-center">
@@ -238,7 +317,7 @@
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
-                       <v-layout>
+                      <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Price:</label>
                         </v-flex>
@@ -251,7 +330,7 @@
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
-                       <v-layout>
+                      <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Quantity:</label>
                         </v-flex>
@@ -334,7 +413,6 @@ export default {
     quantityRules: [v => !!v || "Quantity  is required"],
     rackNoRules: [v => !!v || "Rack No.  is required"],
 
-
     headers: [
       {
         text: "No",
@@ -348,35 +426,40 @@ export default {
         sortable: false,
         align: "center"
       },
-      { text: "Authour", value: "note", sortable: false, align: "center" },
-      { text: "Subject Code", value: "subjectCode", sortable: false, align: "center" },
+      { text: "Authour", value: "author", sortable: false, align: "center" },
+      {
+        text: "Subject Code",
+        value: "subjectCode",
+        sortable: false,
+        align: "center"
+      },
       { text: "Price", value: "price", sortable: false, align: "center" },
       { text: "Quantity", value: "quantity", sortable: false, align: "center" },
       { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
       { text: "Status", value: "status", sortable: false, align: "center" },
-      
+
       // { text: "Session", value: "session", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
-    BooksList: [],
+    bookData: [],
     select: "",
     token: "",
     editedItem: {},
     BooksData: {}
   }),
   methods: {
-    getFeeTypeList() {
+    getBookData() {
       this.showLoader = true;
       http()
-        .get("/getFeesList", {
+        .get("/getBooksList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
-          this.feeTypeList = response.data.data;
+          this.bookData = response.data.data;
           this.showLoader = false;
           // console.log("getAllfeetypes=====>",response.data.data)
         })
-        .catch(err => {
+        .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
@@ -387,23 +470,23 @@ export default {
         });
     },
     editItem(item) {
-      this.editedIndex = this.feeTypeList.indexOf(item);
+      this.editedIndex = this.bookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       console.log(this.editedItem);
       this.dialog = true;
     },
     profile(item) {
-      this.editedIndex = this.feeTypeList.indexOf(item);
+      this.editedIndex = this.bookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteStudent = {
-        feeId: item._id
+        bookId: item._id
       };
       http()
         .delete(
-          "/deleteFee",
+          "/deleteBook",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent
           }
@@ -412,7 +495,7 @@ export default {
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing feetype";
           }
-          this.getFeeTypeList();
+          this.getBookData();
         })
         .catch(error => {
           // console.log(error);
@@ -448,12 +531,12 @@ export default {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
-          .post("/createFee", this.feeTypeData)
+          .post("/createBook", this.BooksData)
           .then(response => {
             console.log(response);
-            this.getFeeTypeList();
+            this.getBookData();
             if ((this.snackbar = true)) {
-              this.text = "New feetype added successfully";
+              this.text = "New Book added successfully";
             }
 
             this.clear();
@@ -472,14 +555,14 @@ export default {
       this.$refs.form.reset();
     },
     save() {
-      this.editedItem.feeId = this.editedItem._id;
+      this.editedItem.bookId = this.editedItem._id;
       http()
-        .put("/updateFee", this.editedItem)
+        .put("/updateBook", this.editedItem)
         .then(response => {
           if ((this.snackbar = true)) {
-            this.text = "Successfully Edit Existing Fee Type";
+            this.text = "Successfully Edit Existing Book";
           }
-          this.getFeeTypeList();
+          this.getBookData();
           this.close();
         })
         .catch(error => {
@@ -490,7 +573,7 @@ export default {
   },
   mounted() {
     this.token = this.$store.state.token;
-    this.getFeeTypeList();
+    this.getBookData();
   },
   created() {
     this.$root.$on("app:search", search => {
diff --git a/src/pages/Library/eBook.vue b/src/pages/Library/eBook.vue
index 3bc58e9..8209735 100644
--- a/src/pages/Library/eBook.vue
+++ b/src/pages/Library/eBook.vue
@@ -155,8 +155,8 @@
 
         <!-- ****** PROFILE VIEW ALL NEWS DEATILS ******  -->
 
-        <v-dialog v-model="dialog1" max-width="800px">
-          <v-card>
+        <v-dialog v-model="dialog1" max-width="800px" scrollable>
+          <v-card style="height: 700px;">
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
@@ -165,70 +165,32 @@
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
-            <v-flex align-center justify-center layout text-xs-center>
-              <!-- <v-avatar size="50px" style="position:absolute; top:20px;">
-                <img src="/static/icon/user.png">
-              </v-avatar>-->
-              <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
-                <img :src="image.imageUrl" alt="eBooks" width="240" height="180" />
-              </span>
-            </v-flex>
             <v-card-text>
-              <v-container grid-list-md>
+              <v-container>
                 <v-layout wrap>
-                  <v-flex>
-                    <v-layout>
-                      <v-flex xs5 sm6>
-                        <h5 class="right my-1">
-                          <b>Title:</b>
-                        </h5>
-                      </v-flex>
-                      <v-flex sm6 xs8>
-                        <h5 class="my-1">{{ editedItem.title }}</h5>
-                      </v-flex>
-                    </v-layout>
-                    <v-layout>
-                      <v-flex xs5 sm6>
-                        <h5 class="right my-1">
-                          <b>Description:</b>
-                        </h5>
-                      </v-flex>
-                      <v-flex sm6 xs8>
-                        <h5 class="my-1">{{ editedItem.description }}</h5>
-                      </v-flex>
-                    </v-layout>
+                  <v-flex sm12 xs12>
+                    <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card-text>
           </v-card>
         </v-dialog>
-
-        <v-snackbar
-          :timeout="timeout"
-          :top="y === 'top'"
-          :right="x === 'right'"
-          :vertical="mode === 'vertical'"
-          v-model="snackbar"
-          color="success"
-        >{{ text }}</v-snackbar>
-
         <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
         <v-data-table
           :headers="headers"
-          :items="desserts"
+          :items="eBookData"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td class="text-xs-center">{{ props.index + 1}}</td>
             <td id="td" class="text-xs-center">
-              <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
-                <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
-              </span>
+              <img :src="props.item.fileUrl" alt="newsImage" width="100" height="70" />
             </td>
-            <td id="td" class="text-xs-center">{{ props.item.title}}</td>
-            <td id="td" class="text-xs-center">{{ props.item.description}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.name}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.author}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.classId}}</td>
 
             <td class="text-xs-center">
               <span>
@@ -288,12 +250,11 @@
                         style="display: none"
                         ref="image"
                         accept="image/*"
-                        multiple
-                        @change="onFilePicked"
+                        @change="onImagePicked"
                       />
                       <v-layout justify-center>
-                        <v-flex v-for="(file,index) in files" :key="index" v-if="files">
-                          <img :src="file" height="160" width="160px;" />
+                        <v-flex v-if="files">
+                          <img :src="files" height="160" width="160px;" />
                         </v-flex>
                       </v-layout>
                       <img
@@ -345,52 +306,62 @@
                       </v-flex>
                       <v-flex xs4 class="ml-3">
                         <v-select
-                          v-model="addEBooks.class"
+                          v-model="addEBooks.classId"
                           :items="addClass"
                           label="Select Class"
-                          name="name"
-                          type="text"
+                          item-text="classNum"
+                          item-value="_id"
                           :rules="titleRules"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                   </v-flex>
-                  <!-- <v-flex xs12>
+                  <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Private:</label>
+                        <label class="right">Upload Image:</label>
                       </v-flex>
                       <v-flex xs4 class="ml-3">
                         <v-text-field
-                          v-model="addEBooks.private"
-                          placeholder="fill your Private Name"
-                          name="name"
-                          type="text"
-                          :rules="titleRules"
-                          required
+                          label="Select Image"
+                          @click="pickImage"
+                          v-model="imageName"
+                          append-icon="attach_file"
+                          multiple
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
-                  </v-flex> -->
+                  </v-flex>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Uplaod Image:</label>
+                        <label class="right">Upload File:</label>
                       </v-flex>
                       <v-flex xs4 class="ml-3">
+                        <input type="file" style="display: none" ref="file" @change="onFilePicked" />
                         <v-text-field
                           label="Select Image"
                           @click="pickFile"
-                          v-model="imageName"
+                          v-model="fileName"
                           append-icon="attach_file"
                           multiple
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
+                  <v-flex xs12>
+                    <v-layout>
+                      <v-flex xs4 class="pt-3 subheading">
+                        <label class="right">Private:</label>
+                      </v-flex>
+                      <v-flex xs4 class="ml-3">
+                        <v-checkbox v-model="addEBooks.private"></v-checkbox>
+                      </v-flex>
+                    </v-layout>
+                  </v-flex>
                   <v-layout>
-                    <v-flex xs12 sm6 offset-sm3>
+                    <v-flex xs12 sm7 offset-sm2>
                       <v-card-actions>
                         <v-btn @click="clear" round dark>clear</v-btn>
                         <v-spacer></v-spacer>
@@ -432,18 +403,20 @@ export default {
     valid: true,
     isActive: true,
     newActive: false,
-    addclass: [],
+    addClass: [],
     addSection: [],
     AddUsercredentials: {},
     pagination: {
       rowsPerPage: 15
     },
     imageName: "",
+    fileName: "",
     imageUrl: "",
     imageFile: "",
     image: [],
     upload: "",
-    files: [],
+    files: "",
+    anyFile: "",
     titleRules: [v => !!v || " Tilte is required"],
     descriptionRules: [v => !!v || " Description is required"],
     headers: [
@@ -453,20 +426,24 @@ export default {
         sortable: false,
         value: "No"
       },
-      { text: "Image", vaue: "image", sortable: false, align: "center" },
-      { text: "Title", value: "title", sortable: false, align: "center" },
+      { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
+      { text: "Name", vaue: "name", sortable: false, align: "center" },
+      { text: "Author", value: "author", sortable: false, align: "center" },
       {
-        text: "Description",
-        value: "description",
+        text: "Class",
+        value: "classId",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
-    desserts: [],
+    eBookData: [],
     editedIndex: -1,
-    addEBooks: {},
-    editedItem: {}
+    addEBooks: {
+      private: false
+    },
+    editedItem: {},
+    token: ""
   }),
   methods: {
     getSections(_id) {
@@ -489,10 +466,13 @@ export default {
           // this.$router.replace({ path: '/' });
         });
     },
-    pickFile() {
+    pickImage() {
       this.$refs.image.click();
     },
-    onFilePicked(e) {
+    pickFile() {
+      this.$refs.file.click();
+    },
+    onImagePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
@@ -501,66 +481,69 @@ export default {
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
-        this.files = [];
-        // console.log("files", this.files);
         /** Select many image and showing many image add to news card **/
-        const test = Array.from(files).forEach((file, idx) => {
-          const fr = new FileReader();
-          const getResult = new Promise(resolve => {
-            fr.onload = e => {
-              this.files.push(
-                // id: idx,
-                e.target.result
-              );
-            };
-          });
-          fr.readAsDataURL(file);
-          return getResult.then(file => {
-            return file;
-          });
-        });
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
-          this.imageFile = files; // this is an image file that can be sent to server...
-          // console.log("uploadImage=======>", this.imageFile );
+          this.files = fr.result;
+          console.log("uploadImagethis.files=======>", this.files);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
+        this.files = "";
         this.imageUrl = "";
       }
     },
-    getNewsList() {
+    getBooksList() {
       this.showLoader = true;
-      var token = this.$store.state.token;
       http()
-        .get("/getNewsList", {
-          headers: { Authorization: "Bearer " + token }
+        .get("/getEBooksList", {
+          headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
-          this.desserts = response.data.data;
+          this.eBookData = response.data.data;
           this.showLoader = false;
-          // console.log("getNewsList=====>",this.desserts)
+          console.log("getNewsList=====>", response.data.data);
         })
         .catch(err => {
           // console.log("err====>", err);
           this.showLoader = false;
-          if (error.response.status === 401) {
-            this.$router.replace({ path: "/" });
-            this.$store.dispatch("setToken", null);
-            this.$store.dispatch("Id", null);
-          }
+          // if (error.response.status === 401) {
+          //   this.$router.replace({ path: "/" });
+          //   this.$store.dispatch("setToken", null);
+          //   this.$store.dispatch("Id", null);
+          // }
+        });
+    },
+    onFilePicked(e) {
+      // console.log(e)
+      const files = e.target.files;
+      /** fetch Image Name **/
+      if (files[0] !== undefined) {
+        this.fileName = files[0].name;
+        if (this.fileName.lastIndexOf(".") <= 0) {
+          return;
+        }
+        const fr = new FileReader();
+        fr.readAsDataURL(files[0]);
+        fr.addEventListener("load", () => {
+          this.anyFile = fr.result;
+          // console.log(" this.anyFile Url", this.anyFile )
         });
+      } else {
+        this.anyFile = "";
+        this.fileName = "";
+      }
     },
     editItem(item) {
       this.files = [];
-      this.editedIndex = this.desserts.indexOf(item);
+      this.editedIndex = this.eBookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
     },
     profile(item) {
-      this.editedIndex = this.desserts.indexOf(item);
+      this.editedIndex = this.eBookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
@@ -632,28 +615,24 @@ export default {
     submit() {
       this.loading = true;
       if (this.$refs.form.validate()) {
-        let newsData = {
-          title: this.addNews.title,
-          description: this.addNews.description
-        };
         if (this.files) {
-          var ary = [];
-          var imageData = [];
-          ary = this.files;
-          for (let i = 0; i < ary.length; i++) {
-            const [baseUrl, imageUrl] = ary[i].split(/,/);
-            imageData.push(imageUrl);
-            newsData.upload = imageData;
-          }
+          const [baseUrl, imageUrl] = this.files.split(/,/);
+          this.addEBooks.uploadCover = imageUrl;
+          // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
+        }
+        if (this.anyFile) {
+          const [baseUrl, fileUrl] = this.anyFile.split(/,/);
+          this.addEBooks.uploadFile = fileUrl;
+          // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
         }
         http()
-          .post("/createNews", newsData)
+          .post("/createEBook", this.addEBooks)
           .then(response => {
-            console.log(newsData);
             if ((this.snackbar = true)) {
-              this.text = "New News added successfully";
+              this.text = "New E-Book added successfully";
             }
-            this.getNewsList();
+            this.addEBooks.uploadCover = "";
+            // this.getNewsList();
             this.loading = false;
             this.clear();
           })
@@ -668,11 +647,6 @@ export default {
       this.$refs.form.reset();
     },
     save() {
-      let editNews = {
-        title: this.editedItem.title,
-        description: this.editedItem.description,
-        newsId: this.editedItem._id
-      };
       if (this.files) {
         var ary = [];
         var imageData = [];
@@ -680,9 +654,13 @@ export default {
         for (let i = 0; i < ary.length; i++) {
           const [baseUrl, imageUrl] = ary[i].split(/,/);
           imageData.push(imageUrl);
-          editNews.upload = imageData;
+          this.editedItem.uploadCover = imageData;
         }
       }
+      if (this.anyFile) {
+        const [baseUrl, fileUrl] = this.anyFile.split(/,/);
+        console.log("anyFile.split(/,/)", fileUrl);
+      }
       http()
         .put("/updateNews", editNews)
         .then(response => {
@@ -696,11 +674,26 @@ export default {
         .catch(error => {
           // console.log(error);
         });
+    },
+    getAllClass() {
+      http()
+        .get("/getClassesList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.addClass = response.data.data;
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+          // this.$router.replace({ path: "/" });
+        });
     }
   },
   mounted() {
-    this.getNewsList();
-    this.editItem;
+    this.token = this.$store.state.token;
+    this.getBooksList();
+    this.getAllClass();
+    // this.editItem;
   },
   created() {
     this.$root.$on("app:search", search => {
diff --git a/src/pages/Library/member.vue b/src/pages/Library/member.vue
index 6519c57..3014fb3 100644
--- a/src/pages/Library/member.vue
+++ b/src/pages/Library/member.vue
@@ -8,7 +8,52 @@
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
-
+    <!-- Add Library Dialog -->
+    <v-dialog v-model="addLibrary" max-width="600px">
+      <v-toolbar color="grey lighten-2">
+        <v-spacer></v-spacer>
+        <v-toolbar-title>
+          <h3>Library Member</h3>
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+      </v-toolbar>
+      <v-card>
+        <v-card-text>
+          <v-container>
+            <v-layout wrap justify-center>
+              <v-flex xs12 sm9>
+                <v-form>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <label class="right pr-3">Library Id:</label>
+                    </v-flex>
+                    <v-flex xs8>
+                      <v-text-field v-model="addBook.libraryId" placeholder="fill your Library ID"></v-text-field>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <label class="right pr-3">Library Fee:</label>
+                    </v-flex>
+                    <v-flex xs8>
+                      <v-text-field
+                        v-model="addBook.libraryFee"
+                        placeholder="fill your Library Fee"
+                      ></v-text-field>
+                    </v-flex>
+                  </v-layout>
+                  <v-card-actions>
+                    <v-btn round dark @click.native="close">Cancel</v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn round dark @click="submit">Add Member</v-btn>
+                  </v-card-actions>
+                </v-form>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
     <!-- ****** EXISTING MEMBER TABLE ****** -->
     <v-card flat>
       <v-card-actions>
@@ -25,11 +70,11 @@
             small
             :items="addclass"
             label="Select Class"
-            v-model="selectStudents.select"
+            v-model="selectStudents"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
-            @change="getSections(selectStudents.select)"
+            @change="getAllStudents(selectStudents)"
             class="px-2"
             required
           ></v-select>
@@ -38,12 +83,12 @@
     </v-card>
     <v-data-table
       :headers="headers"
-      :items="desserts"
+      :items="studentData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
-        <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
+        <td id="td" class="text-xs-center">{{ props.index}}</td>
         <td id="td" class="text-xs-center">
           <v-avatar>
             <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
@@ -51,15 +96,22 @@
           </v-avatar>
         </td>
         <td id="td" class="text-xs-center">{{ props.item.name}}</td>
+        <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
         <td id="td" class="text-xs-center">{{ props.item.email }}</td>
-        <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
+        <!-- <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> -->
+        <!-- <td id="td" class="text-xs-center">{{ props.item.gender }}</td> -->
+        <!-- <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td> -->
+        <!-- <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td> -->
+        <!-- <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>  -->
+        <!-- <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> -->
 
         <td class="text-xs-center">
+          <img
+            style="cursor:pointer; width:25px; height:18px; "
+            class="mr-5"
+            @click="addLibrary = true"
+            src="/static/icon/add.png"
+          />
           <span>
             <img
               style="cursor:pointer; width:25px; height:18px; "
@@ -110,22 +162,23 @@ export default {
     text: "",
     showLoader: false,
     loading: false,
+    addLibrary: false,
     date: null,
     search: "",
     addclass: [],
     pagination: {
       rowsPerPage: 15
     },
-    imageData: {},
+    addBook: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     headers: [
       {
-        text: "Roll No.",
+        text: "No",
         align: "center",
         sortable: false,
-        value: "rollNo"
+        value: "index"
       },
       {
         text: "Profile Pic",
@@ -138,53 +191,28 @@ export default {
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
-    desserts: [],
+    studentData: [],
     parentId: "",
     token: "",
-    selectStudents: {
-      select: "",
-      selectSection: ""
-    }
+    selectStudents: {}
   }),
   methods: {
-    // findStudents() {
-    //   this.showLoader = true;
-    //   http()
-    //     .get("/getStudentWithClass", {
-    //       params: {
-    //         classId: this.selectStudents.select,
-    //         sectionId: this.selectStudents.selectSection
-    //       }
-    //     })
-    //     .then(response => {
-    //       this.desserts = response.data.data;
-    //       this.showLoader = false;
-    //       console.log("getSectionsList=====>", this.addSection);
-    //     })
-    //     .catch(err => {
-    //       console.log("err====>", err);
-    //       this.showLoader = false;
-    //     });
-    // },
-    // getSections(_id) {
-    //   var token = this.$store.state.token;
-    //   http()
-    //     .get(
-    //       "/getSectionsList",
-    //       { params: { classId: _id } },
-    //       {
-    //         headers: { Authorization: "Bearer " + token }
-    //       }
-    //     )
-    //     .then(response => {
-    //       this.addSection = response.data.data;
-    //       console.log("getSectionsList=====>", this.addSection);
-    //     })
-    //     .catch(err => {
-    //       // console.log("err====>", err);
-    //       // this.$router.replace({ path: '/' });
-    //     });
-    // },
+    getAllStudents() {
+      this.showLoader = true;
+      http()
+        .get("/getStudentsList", {
+          params: { classId: this.selectStudents },
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.studentData = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+          // this.$router.replace({ path: "/" });
+        });
+    },
     // getSection(_id) {
     //   var token = this.$store.state.token;
     //   http()
@@ -322,58 +350,29 @@ export default {
     // close1() {
     //   this.dialog1 = false;
     // },
-    // submit() {
-    //   if (this.$refs.form.validate()) {
-    //     let addStudent = {
-    //       parentId: this.parentId,
-    //       name: this.addStudents.name,
-    //       email: this.addStudents.email,
-    //       role: this.addStudents.role,
-    //       dob: this.addStudents.date,
-    //       city: this.addStudents.city,
-    //       pincode: this.addStudents.pincode,
-    //       country: this.addStudents.country,
-    //       permanentAddress: this.addStudents.permanentAddress,
-    //       presentAddress: this.addStudents.presentAddress,
-    //       mobile: this.addStudents.mobile,
-    //       state: this.addStudents.state,
-    //       gender: this.addStudents.gender,
-    //       establishmentYear: this.addStudents.establishmentYear,
-    //       classId: this.addStudents.select,
-    //       sectionId: this.addStudents.selectSection,
-    //       bloodGroup: this.addStudents.bloodGroup,
-    //       allergies: this.addStudents.allergies,
-    //       medicalNotes: this.addStudents.medicalNotes,
-    //       height: this.addStudents.height,
-    //       weight: this.addStudents.weight,
-    //       rollNo: this.addStudents.rollNo
-    //     };
-    //     if (this.imageUrl) {
-    //       var str = this.imageUrl;
-    //       const [baseUrl, imageUrl] = str.split(/,/);
-    //       addStudent.upload = imageUrl;
-    //     }
-    //     this.loading = true;
-    //     http()
-    //       .post("/createStudent", addStudent)
-    //       .then(response => {
-    //         console.log(addStudent);
-    //         if ((this.snackbar = true)) {
-    //           this.text = "New Student added successfully";
-    //         }
-    //         // this.getStudentList();
-    //         this.clear();
-    //         this.loading = false;
-    //       })
-    //       .catch(error => {
-    //         // console.log(error);
-    //         if ((this.snackbar = true)) {
-    //           this.text = error.response.data.message;
-    //         }
-    //         this.loading = false;
-    //       });
-    //   }
-    // },
+    submit() {
+      if (this.$refs.form.validate()) {
+        this.loading = true;
+        http()
+          .post("/addBook", this.addBook)
+          .then(response => {
+            // console.log(addStudent);
+            // if ((this.snackbar = true)) {
+            //   this.text = "New Student added successfully";
+            // }
+            // this.getStudentList();
+            this.clear();
+            this.loading = false;
+          })
+          .catch(error => {
+            // console.log(error);
+            if ((this.snackbar = true)) {
+              this.text = error.response.data.message;
+            }
+            this.loading = false;
+          });
+      }
+    },
     // clear() {
     //   this.$refs.form.reset();
     // },
-- 
2.0.0