viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit b8690bbc9ef4e8c9c32d070942ea9e1797811e49

Authored by Neeraj Sharma
1 parent 7140ae6bf7
Exists in master and in 3 other branches amber-development, development, ui-design

implement create issue in library

Showing 4 changed files with 145 additions and 128 deletions   Show diff stats
src/Services/http.js
Diff comments   View file @b8690bb
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 3
4 export default () => { 4 export default () => {
5 return axios.create({ 5 return axios.create({
6 // baseURL: 'http://192.168.4.220:3002/v1', 6 // baseURL: 'http://192.168.2.221:3002/v1',/
7 baseURL: 'http://13.234.251.173:8001/v1', 7 baseURL: 'http://13.234.251.173:8001/v1',
8 headers: { 8 headers: {
9 Authorization: `Bearer ${store.state.token}` 9 Authorization: `Bearer ${store.state.token}`
10 } 10 }
11 }) 11 })
12 } 12 }
src/pages/Library/books.vue
Diff comments   View file @b8690bb
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Books</v-tab> 10 >Existing Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Books</v-tab> 18 >Add New Books</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Books</h3> 34 <h3>Edit Books</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-card-text> 39 <v-card-text>
40 <v-container> 40 <v-container>
41 <v-layout wrap justify-center> 41 <v-layout wrap justify-center>
42 <v-flex xs12 sm9> 42 <v-flex xs12 sm9>
43 <v-form> 43 <v-form>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right pr-3">Name:</label> 46 <label class="right pr-3">Name:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8> 48 <v-flex xs8>
49 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> 49 <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 <v-layout> 52 <v-layout>
53 <v-flex xs4 class="pt-4 subheading"> 53 <v-flex xs4 class="pt-4 subheading">
54 <label class="right pr-3">Author:</label> 54 <label class="right pr-3">Author:</label>
55 </v-flex> 55 </v-flex>
56 <v-flex xs8> 56 <v-flex xs8>
57 <v-text-field 57 <v-text-field
58 v-model="editedItem.author" 58 v-model="editedItem.author"
59 placeholder="fill your Author Name" 59 placeholder="fill your Author Name"
60 ></v-text-field> 60 ></v-text-field>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 class="pt-4 subheading"> 64 <v-flex xs4 class="pt-4 subheading">
65 <label class="right pr-2">Subject Code :</label> 65 <label class="right pr-2">Subject Code:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs8> 67 <v-flex xs8>
68 <v-text-field 68 <v-text-field
69 v-model="editedItem.subjectCode" 69 v-model="editedItem.subjectCode"
70 placeholder="fill your Subject Code" 70 placeholder="fill your Subject Code"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 <v-layout> 74 <v-layout>
75 <v-flex xs4 class="pt-4 subheading"> 75 <v-flex xs4 class="pt-4 subheading">
76 <label class="right pr-3">Price :</label> 76 <label class="right pr-3">Price :</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8> 78 <v-flex xs8>
79 <v-text-field 79 <v-text-field
80 v-model="editedItem.price" 80 v-model="editedItem.price"
81 placeholder="fill your Subject Code" 81 placeholder="fill your Subject Code"
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 <v-layout> 85 <v-layout>
86 <v-flex xs4 class="pt-4 subheading"> 86 <v-flex xs4 class="pt-4 subheading">
87 <label class="right pr-3">Quantity:</label> 87 <label class="right pr-3">Quantity:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs8> 89 <v-flex xs8>
90 <v-text-field 90 <v-text-field
91 v-model="editedItem.quantity" 91 v-model="editedItem.quantity"
92 type="number"
92 placeholder="fill your Quantity" 93 placeholder="fill your Quantity"
93 ></v-text-field> 94 ></v-text-field>
94 </v-flex> 95 </v-flex>
95 </v-layout> 96 </v-layout>
96 <v-layout> 97 <v-layout>
97 <v-flex xs4 class="pt-4 subheading"> 98 <v-flex xs4 class="pt-4 subheading">
98 <label class="right pr-3">Rack No:</label> 99 <label class="right pr-3">Rack No:</label>
99 </v-flex> 100 </v-flex>
100 <v-flex xs8> 101 <v-flex xs8>
101 <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> 102 <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field>
102 </v-flex> 103 </v-flex>
103 </v-layout> 104 </v-layout>
104 <v-card-actions> 105 <v-card-actions>
105 <v-btn round dark @click.native="close">Cancel</v-btn> 106 <v-btn round dark @click.native="close">Cancel</v-btn>
106 <v-spacer></v-spacer> 107 <v-spacer></v-spacer>
107 <v-btn round dark @click="save">Save</v-btn> 108 <v-btn round dark @click="save">Save</v-btn>
108 </v-card-actions> 109 </v-card-actions>
109 </v-form> 110 </v-form>
110 </v-flex> 111 </v-flex>
111 </v-layout> 112 </v-layout>
112 </v-container> 113 </v-container>
113 </v-card-text> 114 </v-card-text>
114 </v-card> 115 </v-card>
115 </v-dialog> 116 </v-dialog>
116 117
117 <!-- ****** PROFILE VIEW BOOKS DATA ****** --> 118 <!-- ****** PROFILE VIEW BOOKS DATA ****** -->
118 119
119 <v-dialog v-model="dialog1" max-width="600px"> 120 <v-dialog v-model="dialog1" max-width="600px">
120 <v-toolbar color="grey lighten-2"> 121 <v-toolbar color="grey lighten-2">
121 <v-spacer></v-spacer> 122 <v-spacer></v-spacer>
122 <v-toolbar-title> 123 <v-toolbar-title>
123 <h3>Books</h3> 124 <h3>Books</h3>
124 </v-toolbar-title> 125 </v-toolbar-title>
125 <v-spacer></v-spacer> 126 <v-spacer></v-spacer>
126 <v-icon @click="close1">close</v-icon> 127 <v-icon @click="close1">close</v-icon>
127 </v-toolbar> 128 </v-toolbar>
128 <v-card> 129 <v-card>
129 <v-card-text> 130 <v-card-text>
130 <v-container grid-list-md> 131 <v-container grid-list-md>
131 <v-layout wrap> 132 <v-layout wrap>
132 <v-flex> 133 <v-flex>
133 <v-layout> 134 <v-layout>
134 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
135 <h5 class="right my-1"> 136 <h5 class="right my-1">
136 <b>Name:</b> 137 <b>Name:</b>
137 </h5> 138 </h5>
138 </v-flex> 139 </v-flex>
139 <v-flex sm6 xs8> 140 <v-flex sm6 xs8>
140 <h5 class="my-1">{{ editedItem.name }}</h5> 141 <h5 class="my-1">{{ editedItem.name }}</h5>
141 </v-flex> 142 </v-flex>
142 </v-layout> 143 </v-layout>
143 <v-layout> 144 <v-layout>
144 <v-flex xs5 sm6> 145 <v-flex xs5 sm6>
145 <h5 class="right my-1"> 146 <h5 class="right my-1">
146 <b>Author:</b> 147 <b>Author:</b>
147 </h5> 148 </h5>
148 </v-flex> 149 </v-flex>
149 <v-flex sm6 xs8> 150 <v-flex sm6 xs8>
150 <h5 class="my-1">{{ editedItem.author }}</h5> 151 <h5 class="my-1">{{ editedItem.author }}</h5>
151 </v-flex> 152 </v-flex>
152 </v-layout> 153 </v-layout>
153 <v-layout> 154 <v-layout>
154 <v-flex xs5 sm6> 155 <v-flex xs5 sm6>
155 <h5 class="right my-1"> 156 <h5 class="right my-1">
156 <b>Subject Code :</b> 157 <b>Subject Code :</b>
157 </h5> 158 </h5>
158 </v-flex> 159 </v-flex>
159 <v-flex sm6 xs8> 160 <v-flex sm6 xs8>
160 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 161 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
161 </v-flex> 162 </v-flex>
162 </v-layout> 163 </v-layout>
163 <v-layout> 164 <v-layout>
164 <v-flex xs5 sm6> 165 <v-flex xs5 sm6>
165 <h5 class="right my-1"> 166 <h5 class="right my-1">
166 <b>Price :</b> 167 <b>Price :</b>
167 </h5> 168 </h5>
168 </v-flex> 169 </v-flex>
169 <v-flex sm6 xs8> 170 <v-flex sm6 xs8>
170 <h5 class="my-1">{{ editedItem.price }}</h5> 171 <h5 class="my-1">{{ editedItem.price }}</h5>
171 </v-flex> 172 </v-flex>
172 </v-layout> 173 </v-layout>
173 <v-layout> 174 <v-layout>
174 <v-flex xs5 sm6> 175 <v-flex xs5 sm6>
175 <h5 class="right my-1"> 176 <h5 class="right my-1">
176 <b>Quantity :</b> 177 <b>Quantity :</b>
177 </h5> 178 </h5>
178 </v-flex> 179 </v-flex>
179 <v-flex sm6 xs8> 180 <v-flex sm6 xs8>
180 <h5 class="my-1">{{ editedItem.quantity}}</h5> 181 <h5 class="my-1">{{ editedItem.quantity}}</h5>
181 </v-flex> 182 </v-flex>
182 </v-layout> 183 </v-layout>
183 <v-layout> 184 <v-layout>
184 <v-flex xs5 sm6> 185 <v-flex xs5 sm6>
185 <h5 class="right my-1"> 186 <h5 class="right my-1">
186 <b>Rack No :</b> 187 <b>Rack No :</b>
187 </h5> 188 </h5>
188 </v-flex> 189 </v-flex>
189 <v-flex sm6 xs8> 190 <v-flex sm6 xs8>
190 <h5 class="my-1">{{ editedItem.rackNo}}</h5> 191 <h5 class="my-1">{{ editedItem.rackNo}}</h5>
191 </v-flex> 192 </v-flex>
192 </v-layout> 193 </v-layout>
193 </v-flex> 194 </v-flex>
194 </v-layout> 195 </v-layout>
195 </v-container> 196 </v-container>
196 </v-card-text> 197 </v-card-text>
197 </v-card> 198 </v-card>
198 </v-dialog> 199 </v-dialog>
199 200
200 <v-snackbar 201 <v-snackbar
201 :timeout="timeout" 202 :timeout="timeout"
202 :top="y === 'top'" 203 :top="y === 'top'"
203 :right="x === 'right'" 204 :right="x === 'right'"
204 :vertical="mode === 'vertical'" 205 :vertical="mode === 'vertical'"
205 v-model="snackbar" 206 v-model="snackbar"
206 color="success" 207 color="success"
207 >{{ text }}</v-snackbar> 208 >{{ text }}</v-snackbar>
208 209
209 <!-- ****** EXISTING-BOOKS TABLE ****** --> 210 <!-- ****** EXISTING-BOOKS TABLE ****** -->
210 211
211 <v-data-table 212 <v-data-table
212 :headers="headers" 213 :headers="headers"
213 :items="bookData" 214 :items="bookData"
214 :pagination.sync="pagination" 215 :pagination.sync="pagination"
215 :search="search" 216 :search="search"
216 > 217 >
217 <template slot="items" slot-scope="props"> 218 <template slot="items" slot-scope="props">
218 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 219 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
219 <td id="td" class="text-xs-center">{{ props.item.name }}</td> 220 <td id="td" class="text-xs-center">{{ props.item.name }}</td>
220 <td id="td" class="text-xs-center">{{ props.item.author }}</td> 221 <td id="td" class="text-xs-center">{{ props.item.author }}</td>
221 <td id="td" class="text-xs-center">{{ props.item.subjectCode }}</td> 222 <td id="td" class="text-xs-center">{{ props.item.subjectCode }}</td>
222 <td id="td" class="text-xs-center">{{ props.item.price }}</td> 223 <td id="td" class="text-xs-center">{{ props.item.price }}</td>
223 <td id="td" class="text-xs-center">{{ props.item.quantity }}</td> 224 <td id="td" class="text-xs-center">{{ props.item.quantity }}</td>
224 <td id="td" class="text-xs-center">{{ props.item.rackNo }}</td> 225 <td id="td" class="text-xs-center">{{ props.item.rackNo }}</td>
225 <td id="td" class="text-xs-center">{{ props.item.status }}</td> 226 <td id="td" class="text-xs-center">{{ props.item.status }}</td>
226 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> 227 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
227 228
228 <td class="text-xs-center"> 229 <td class="text-xs-center">
229 <span> 230 <span>
230 <img 231 <img
231 style="cursor:pointer; width:25px; height:18px; " 232 style="cursor:pointer; width:25px; height:18px; "
232 class="mr-5" 233 class="mr-5"
233 @click="profile(props.item)" 234 @click="profile(props.item)"
234 src="/static/icon/eye1.png" 235 src="/static/icon/eye1.png"
235 /> 236 />
236 <img 237 <img
237 style="cursor:pointer; width:20px; height:18px; " 238 style="cursor:pointer; width:20px; height:18px; "
238 class="mr-5" 239 class="mr-5"
239 @click="editItem(props.item)" 240 @click="editItem(props.item)"
240 src="/static/icon/edit1.png" 241 src="/static/icon/edit1.png"
241 /> 242 />
242 <img 243 <img
243 style="cursor:pointer; width:20px; height:20px; " 244 style="cursor:pointer; width:20px; height:20px; "
244 class="mr-5" 245 class="mr-5"
245 @click="deleteItem(props.item)" 246 @click="deleteItem(props.item)"
246 src="/static/icon/delete1.png" 247 src="/static/icon/delete1.png"
247 /> 248 />
248 </span> 249 </span>
249 </td> 250 </td>
250 </template> 251 </template>
251 <v-alert 252 <v-alert
252 slot="no-results" 253 slot="no-results"
253 :value="true" 254 :value="true"
254 color="error" 255 color="error"
255 icon="warning" 256 icon="warning"
256 >Your search for "{{ search }}" found no results.</v-alert> 257 >Your search for "{{ search }}" found no results.</v-alert>
257 </v-data-table> 258 </v-data-table>
258 </v-tab-item> 259 </v-tab-item>
259 260
260 <!-- ****** ADD multiple Students ****** --> 261 <!-- ****** ADD multiple Students ****** -->
261 262
262 <v-tab-item> 263 <v-tab-item>
263 <v-container> 264 <v-container>
264 <v-snackbar 265 <v-snackbar
265 :timeout="timeout" 266 :timeout="timeout"
266 :top="y === 'top'" 267 :top="y === 'top'"
267 :right="x === 'right'" 268 :right="x === 'right'"
268 :vertical="mode === 'vertical'" 269 :vertical="mode === 'vertical'"
269 v-model="snackbar" 270 v-model="snackbar"
270 color="success" 271 color="success"
271 >{{ text }}</v-snackbar> 272 >{{ text }}</v-snackbar>
272 <v-flex xs12 sm8 offset-sm2 class="top"> 273 <v-flex xs12 sm8 offset-sm2 class="top">
273 <v-card flat> 274 <v-card flat>
274 <v-container fluid fill-height> 275 <v-container fluid fill-height>
275 <v-layout align-center> 276 <v-layout align-center>
276 <v-flex xs12 class="mt-4"> 277 <v-flex xs12 class="mt-4">
277 <v-form ref="form" v-model="valid" lazy-validation> 278 <v-form ref="form" v-model="valid" lazy-validation>
278 <v-layout> 279 <v-layout>
279 <v-flex xs4 class="pt-4 subheading"> 280 <v-flex xs4 class="pt-4 subheading">
280 <label class="right">Name:</label> 281 <label class="right">Name:</label>
281 </v-flex> 282 </v-flex>
282 <v-flex xs6 class="ml-3"> 283 <v-flex xs6 class="ml-3">
283 <v-text-field 284 <v-text-field
284 v-model="BooksData.name" 285 v-model="BooksData.name"
285 placeholder="fill your Fee Type" 286 placeholder="fill your Name"
286 type="text" 287 type="text"
287 :rules="nameRules" 288 :rules="nameRules"
288 required 289 required
289 ></v-text-field> 290 ></v-text-field>
290 </v-flex> 291 </v-flex>
291 </v-layout> 292 </v-layout>
292 <v-layout> 293 <v-layout>
293 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
294 <label class="right">Author:</label> 295 <label class="right">Author:</label>
295 </v-flex> 296 </v-flex>
296 <v-flex xs6 class="ml-3"> 297 <v-flex xs6 class="ml-3">
297 <v-text-field 298 <v-text-field
298 v-model="BooksData.author" 299 v-model="BooksData.author"
299 placeholder="fill your Author Name" 300 placeholder="fill your Author Name"
300 type="text" 301 type="text"
301 :rules="authorRules" 302 :rules="authorRules"
302 required 303 required
303 ></v-text-field> 304 ></v-text-field>
304 </v-flex> 305 </v-flex>
305 </v-layout> 306 </v-layout>
306 <v-layout> 307 <v-layout>
307 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
308 <label class="right">Subject Code :</label> 309 <label class="right">Subject Code :</label>
309 </v-flex> 310 </v-flex>
310 <v-flex xs6 class="ml-3"> 311 <v-flex xs6 class="ml-3">
311 <v-text-field 312 <v-text-field
312 v-model="BooksData.subjectCode" 313 v-model="BooksData.subjectCode"
313 placeholder="fill your Subject Code" 314 placeholder="fill your Subject Code"
314 type="text" 315 type="text"
315 :rules="subjectRules" 316 :rules="subjectRules"
316 required 317 required
317 ></v-text-field> 318 ></v-text-field>
318 </v-flex> 319 </v-flex>
319 </v-layout> 320 </v-layout>
320 <v-layout> 321 <v-layout>
321 <v-flex xs4 class="pt-4 subheading"> 322 <v-flex xs4 class="pt-4 subheading">
322 <label class="right">Price:</label> 323 <label class="right">Price:</label>
323 </v-flex> 324 </v-flex>
324 <v-flex xs6 class="ml-3"> 325 <v-flex xs6 class="ml-3">
325 <v-text-field 326 <v-text-field
326 v-model="BooksData.price" 327 v-model="BooksData.price"
327 placeholder="fill your Price" 328 placeholder="fill your Price"
328 :rules="priceRules" 329 :rules="priceRules"
329 required 330 required
330 ></v-text-field> 331 ></v-text-field>
331 </v-flex> 332 </v-flex>
332 </v-layout> 333 </v-layout>
333 <v-layout> 334 <v-layout>
334 <v-flex xs4 class="pt-4 subheading"> 335 <v-flex xs4 class="pt-4 subheading">
335 <label class="right">Quantity:</label> 336 <label class="right">Quantity:</label>
336 </v-flex> 337 </v-flex>
337 <v-flex xs6 class="ml-3"> 338 <v-flex xs6 class="ml-3">
338 <v-text-field 339 <v-text-field
339 v-model="BooksData.quantity" 340 v-model="BooksData.quantity"
340 placeholder="fill your Quantity" 341 placeholder="fill your Quantity"
341 :rules="quantityRules" 342 :rules="quantityRules"
342 required 343 required
343 ></v-text-field> 344 ></v-text-field>
344 </v-flex> 345 </v-flex>
345 </v-layout> 346 </v-layout>
346 <v-layout> 347 <v-layout>
347 <v-flex xs4 class="pt-4 subheading"> 348 <v-flex xs4 class="pt-4 subheading">
348 <label class="right">Rack No:</label> 349 <label class="right">Rack No:</label>
349 </v-flex> 350 </v-flex>
350 <v-flex xs6 class="ml-3"> 351 <v-flex xs6 class="ml-3">
351 <v-text-field 352 <v-text-field
352 v-model="BooksData.rackNo" 353 v-model="BooksData.rackNo"
353 placeholder="fill your Rack No" 354 placeholder="fill your Rack No"
354 :rules="rackNoRules" 355 :rules="rackNoRules"
355 required 356 required
356 ></v-text-field> 357 ></v-text-field>
357 </v-flex> 358 </v-flex>
358 </v-layout> 359 </v-layout>
359 <v-layout> 360 <v-layout>
360 <v-flex xs12 sm9 offset-sm2> 361 <v-flex xs12 sm9 offset-sm2>
361 <v-card-actions> 362 <v-card-actions>
362 <v-btn @click="clear" round dark>clear</v-btn> 363 <v-btn @click="clear" round dark>clear</v-btn>
363 <v-spacer></v-spacer> 364 <v-spacer></v-spacer>
364 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 365 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
365 </v-card-actions> 366 </v-card-actions>
366 </v-flex> 367 </v-flex>
367 </v-layout> 368 </v-layout>
368 </v-form> 369 </v-form>
369 </v-flex> 370 </v-flex>
370 </v-layout> 371 </v-layout>
371 </v-container> 372 </v-container>
372 </v-card> 373 </v-card>
373 </v-flex> 374 </v-flex>
374 </v-container> 375 </v-container>
375 </v-tab-item> 376 </v-tab-item>
376 </v-tabs> 377 </v-tabs>
377 <div class="loader" v-if="showLoader"> 378 <div class="loader" v-if="showLoader">
378 <v-progress-circular indeterminate color="white"></v-progress-circular> 379 <v-progress-circular indeterminate color="white"></v-progress-circular>
379 </div> 380 </div>
380 </v-app> 381 </v-app>
381 </template> 382 </template>
382 383
383 <script> 384 <script>
384 import http from "@/Services/http.js"; 385 import http from "@/Services/http.js";
385 import Util from "@/util"; 386 import Util from "@/util";
386 387
387 export default { 388 export default {
388 data: () => ({ 389 data: () => ({
389 snackbar: false, 390 snackbar: false,
390 y: "top", 391 y: "top",
391 x: "right", 392 x: "right",
392 mode: "", 393 mode: "",
393 timeout: 3000, 394 timeout: 3000,
394 text: "", 395 text: "",
395 showLoader: false, 396 showLoader: false,
396 loading: false, 397 loading: false,
397 date: null, 398 date: null,
398 search: "", 399 search: "",
399 dialog: false, 400 dialog: false,
400 dialog1: false, 401 dialog1: false,
401 valid: true, 402 valid: true,
402 validEdit: true, 403 validEdit: true,
403 isActive: true, 404 isActive: true,
404 newActive: false, 405 newActive: false,
405 AddUsercredentials: {},
406 pagination: { 406 pagination: {
407 rowsPerPage: 15 407 rowsPerPage: 15
408 }, 408 },
409 nameRules: [v => !!v || " Name is required"], 409 nameRules: [v => !!v || " Name is required"],
410 authorRules: [v => !!v || "Author Name Monthly"], 410 authorRules: [v => !!v || "Author Name Monthly"],
411 subjectRules: [v => !!v || "Subject Code is required"], 411 subjectRules: [v => !!v || "Subject Code is required"],
412 priceRules: [v => !!v || "Price is required"], 412 priceRules: [v => !!v || "Price is required"],
413 quantityRules: [v => !!v || "Quantity is required"], 413 quantityRules: [v => !!v || "Quantity is required"],
414 rackNoRules: [v => !!v || "Rack No. is required"], 414 rackNoRules: [v => !!v || "Rack No. is required"],
415 415
416 headers: [ 416 headers: [
417 { 417 {
418 text: "No", 418 text: "No",
419 align: "center", 419 align: "center",
420 sortable: false, 420 sortable: false,
421 value: "No" 421 value: "No"
422 }, 422 },
423 { 423 {
424 text: "Name", 424 text: "Name",
425 value: "name", 425 value: "name",
426 sortable: false, 426 sortable: false,
427 align: "center" 427 align: "center"
428 }, 428 },
429 { text: "Authour", value: "author", sortable: false, align: "center" }, 429 { text: "Authour", value: "author", sortable: false, align: "center" },
430 { 430 {
431 text: "Subject Code", 431 text: "Subject Code",
432 value: "subjectCode", 432 value: "subjectCode",
433 sortable: false, 433 sortable: false,
434 align: "center" 434 align: "center"
435 }, 435 },
436 { text: "Price", value: "price", sortable: false, align: "center" }, 436 { text: "Price", value: "price", sortable: false, align: "center" },
437 { text: "Quantity", value: "quantity", sortable: false, align: "center" }, 437 { text: "Quantity", value: "quantity", sortable: false, align: "center" },
438 { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, 438 { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
439 { text: "Status", value: "status", sortable: false, align: "center" }, 439 { text: "Status", value: "status", sortable: false, align: "center" },
440 440
441 // { text: "Session", value: "session", sortable: false, align: "center" }, 441 // { text: "Session", value: "session", sortable: false, align: "center" },
442 { text: "Action", value: "", sortable: false, align: "center" } 442 { text: "Action", value: "", sortable: false, align: "center" }
443 ], 443 ],
444 bookData: [], 444 bookData: [],
445 select: "", 445 select: "",
446 token: "", 446 token: "",
447 editedItem: {}, 447 editedItem: {},
448 BooksData: {} 448 BooksData: {}
449 }), 449 }),
450 methods: { 450 methods: {
451 getBookData() { 451 getBookData() {
452 this.showLoader = true; 452 this.showLoader = true;
453 http() 453 http()
454 .get("/getBooksList", { 454 .get("/getBooksList", {
455 headers: { Authorization: "Bearer " + this.token } 455 headers: { Authorization: "Bearer " + this.token }
456 }) 456 })
457 .then(response => { 457 .then(response => {
458 this.bookData = response.data.data; 458 this.bookData = response.data.data;
459 this.showLoader = false; 459 this.showLoader = false;
460 // console.log("getAllfeetypes=====>",response.data.data) 460 // console.log("getAllfeetypes=====>",response.data.data)
461 }) 461 })
462 .catch(error => { 462 .catch(error => {
463 // console.log("err====>", err); 463 // console.log("err====>", err);
464 this.showLoader = false; 464 this.showLoader = false;
465 if (error.response.status === 401) { 465 if (error.response.status === 401) {
466 this.$router.replace({ path: "/" }); 466 this.$router.replace({ path: "/" });
467 this.$store.dispatch("setToken", null); 467 this.$store.dispatch("setToken", null);
468 this.$store.dispatch("Id", null); 468 this.$store.dispatch("Id", null);
469 } 469 }
470 }); 470 });
471 }, 471 },
472 editItem(item) { 472 editItem(item) {
473 this.editedIndex = this.bookData.indexOf(item); 473 this.editedIndex = this.bookData.indexOf(item);
474 this.editedItem = Object.assign({}, item); 474 this.editedItem = Object.assign({}, item);
475 console.log(this.editedItem); 475 console.log(this.editedItem);
476 this.dialog = true; 476 this.dialog = true;
477 }, 477 },
478 profile(item) { 478 profile(item) {
479 this.editedIndex = this.bookData.indexOf(item); 479 this.editedIndex = this.bookData.indexOf(item);
480 this.editedItem = Object.assign({}, item); 480 this.editedItem = Object.assign({}, item);
481 this.dialog1 = true; 481 this.dialog1 = true;
482 }, 482 },
483 deleteItem(item) { 483 deleteItem(item) {
484 let deleteStudent = { 484 let deleteStudent = {
485 bookId: item._id 485 bookId: item._id
486 }; 486 };
487 http() 487 http()
488 .delete( 488 .delete(
489 "/deleteBook", 489 "/deleteBook",
490 confirm("Are you sure you want to delete this?") && { 490 confirm("Are you sure you want to delete this?") && {
491 params: deleteStudent 491 params: deleteStudent
492 } 492 }
493 ) 493 )
494 .then(response => { 494 .then(response => {
495 if ((this.snackbar = true)) { 495 if ((this.snackbar = true)) {
496 this.text = "Successfully delete Existing feetype"; 496 this.text = "Successfully delete Existing Delete Student ";
497 } 497 }
498 this.getBookData(); 498 this.getBookData();
499 }) 499 })
500 .catch(error => { 500 .catch(error => {
501 // console.log(error); 501 // console.log(error);
502 }); 502 });
503 }, 503 },
504 activeTab(type) { 504 activeTab(type) {
505 switch (type) { 505 switch (type) {
506 case "existing": 506 case "existing":
507 this.newActive = false; 507 this.newActive = false;
508 this.isActive = true; 508 this.isActive = true;
509 break; 509 break;
510 510
511 default: 511 default:
512 this.newActive = true; 512 this.newActive = true;
513 this.isActive = false; 513 this.isActive = false;
514 break; 514 break;
515 } 515 }
516 }, 516 },
517 close() { 517 close() {
518 this.dialog = false; 518 this.dialog = false;
519 setTimeout(() => { 519 setTimeout(() => {
520 this.editedItem = Object.assign({}, this.defaultItem); 520 this.editedItem = Object.assign({}, this.defaultItem);
521 this.editedIndex = -1; 521 this.editedIndex = -1;
522 }, 300); 522 }, 300);
523 }, 523 },
524 close1() { 524 close1() {
525 this.dialog1 = false; 525 this.dialog1 = false;
526 }, 526 },
527 close2() { 527 close2() {
528 this.dialog2 = false; 528 this.dialog2 = false;
529 }, 529 },
530 submit() { 530 submit() {
531 this.BooksData.quantity = Number(this.BooksData.quantity);
531 if (this.$refs.form.validate()) { 532 if (this.$refs.form.validate()) {
532 this.loading = true; 533 this.loading = true;
533 http() 534 http()
534 .post("/createBook", this.BooksData) 535 .post("/createBook", this.BooksData)
535 .then(response => { 536 .then(response => {
536 console.log(response); 537 console.log(response);
537 this.getBookData(); 538 this.getBookData();
538 if ((this.snackbar = true)) { 539 if ((this.snackbar = true)) {
539 this.text = "New Book added successfully"; 540 this.text = "New Book added successfully";
540 } 541 }
541 542
542 this.clear(); 543 this.clear();
543 this.loading = false; 544 this.loading = false;
544 }) 545 })
545 .catch(error => { 546 .catch(error => {
546 // console.log(error); 547 // console.log(error);
547 if ((this.snackbar = true)) { 548 if ((this.snackbar = true)) {
548 this.text = error.response.data.message; 549 this.text = error.response.data.message;
549 } 550 }
550 this.loading = false; 551 this.loading = false;
551 }); 552 });
552 } 553 }
553 }, 554 },
554 clear() { 555 clear() {
555 this.$refs.form.reset(); 556 this.$refs.form.reset();
556 }, 557 },
557 save() { 558 save() {
558 this.editedItem.bookId = this.editedItem._id; 559 this.editedItem.bookId = this.editedItem._id;
559 http() 560 http()
560 .put("/updateBook", this.editedItem) 561 .put("/updateBook", this.editedItem)
561 .then(response => { 562 .then(response => {
562 if ((this.snackbar = true)) { 563 if ((this.snackbar = true)) {
563 this.text = "Successfully Edit Existing Book"; 564 this.text = "Successfully Edit Existing Book";
564 } 565 }
565 this.getBookData(); 566 this.getBookData();
566 this.close(); 567 this.close();
567 }) 568 })
568 .catch(error => { 569 .catch(error => {
569 this.text = error.response.data.message; 570 this.text = error.response.data.message;
570 // console.log(error); 571 // console.log(error);
571 }); 572 });
572 } 573 }
573 }, 574 },
574 mounted() { 575 mounted() {
575 this.token = this.$store.state.token; 576 this.token = this.$store.state.token;
576 this.getBookData(); 577 this.getBookData();
577 }, 578 },
578 created() { 579 created() {
579 this.$root.$on("app:search", search => { 580 this.$root.$on("app:search", search => {
580 this.search = search; 581 this.search = search;
581 }); 582 });
582 }, 583 },
583 beforeDestroy() { 584 beforeDestroy() {
584 // dont forget to remove the listener 585 // dont forget to remove the listener
585 this.$root.$off("app:search"); 586 this.$root.$off("app:search");
586 } 587 }
587 }; 588 };
588 </script> 589 </script>
589 590
590 <style scoped> 591 <style scoped>
591 .active { 592 .active {
592 background-color: gray; 593 background-color: gray;
593 color: white !important; 594 color: white !important;
594 } 595 }
595 .activebtn { 596 .activebtn {
596 color: black !important; 597 color: black !important;
597 } 598 }
src/pages/Library/eBook.vue
Diff comments   View file @b8690bb
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing E-Books</v-tab> 10 >Existing E-Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add E-Books</v-tab> 18 >Add E-Books</v-tab>
19 19
20 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 20 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit E-Books</h3> 36 <h3>Edit E-Books</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:760px;"> 40 <v-card-text style="height:760px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onImagePicked" 54 @change="onImagePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex v-if="files != ''"> 57 <v-flex v-if="files != ''">
58 <img :src="files" height="450" width="500;" /> 58 <img :src="files" height="450" width="500;" />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <img 61 <img
62 v-if="editedItem.coverPhotoUrl && files == '' " 62 v-if="editedItem.coverPhotoUrl && files == '' "
63 :src="editedItem.coverPhotoUrl" 63 :src="editedItem.coverPhotoUrl"
64 height="450" 64 height="450"
65 width="500" 65 width="500"
66 alt="eBooks" 66 alt="eBooks"
67 class="pa-2" 67 class="pa-2"
68 /> 68 />
69 <!-- <v-layout justify-center> 69 <!-- <v-layout justify-center>
70 <v-flex 70 <v-flex
71 xs3 71 xs3
72 v-for="Image in editedItem.newsImageUrl" 72 v-for="Image in editedItem.newsImageUrl"
73 :key="Image._id" 73 :key="Image._id"
74 v-if="editedItem.newsImageUrl" 74 v-if="editedItem.newsImageUrl"
75 class="profile-image-wrapper" 75 class="profile-image-wrapper"
76 > 76 >
77 77
78 <v-icon 78 <v-icon
79 class="red edit-profile-icon" 79 class="red edit-profile-icon"
80 dark 80 dark
81 @click="deleteImage(Image._id,editedItem._id)" 81 @click="deleteImage(Image._id,editedItem._id)"
82 >close</v-icon> 82 >close</v-icon>
83 </v-flex> 83 </v-flex>
84 <v-flex v-for="(file, index) in files" :key="index"> 84 <v-flex v-for="(file, index) in files" :key="index">
85 <img :src="file" height="160" width="160" class="pa-2" /> 85 <img :src="file" height="160" width="160" class="pa-2" />
86 </v-flex> 86 </v-flex>
87 </v-layout>--> 87 </v-layout>-->
88 <img 88 <img
89 src="/static/icon/user.png" 89 src="/static/icon/user.png"
90 v-if="editedItem.coverPhotoUrl == ''" 90 v-if="editedItem.coverPhotoUrl == ''"
91 height="160" 91 height="160"
92 width="160" 92 width="160"
93 alt="Books" 93 alt="Books"
94 /> 94 />
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout> 97 <v-layout>
98 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
101 <label class="right">Name:</label> 101 <label class="right">Name:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
104 <v-text-field 104 <v-text-field
105 v-model="editedItem.name" 105 v-model="editedItem.name"
106 placeholder="fill your Name" 106 placeholder="fill your Name"
107 type="text" 107 type="text"
108 ></v-text-field> 108 ></v-text-field>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Author:</label> 115 <label class="right">Author:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs5 class="ml-3"> 117 <v-flex xs5 class="ml-3">
118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> 118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 <v-flex xs12 sm12> 122 <v-flex xs12 sm12>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs5 class="ml-3"> 127 <v-flex xs5 class="ml-3">
128 <v-text-field 128 <v-text-field
129 v-model="editedItem.className" 129 v-model="editedItem.className"
130 :items="addClass" 130 :items="addClass"
131 label="Select Class" 131 label="Select Class"
132 item-text="classNum" 132 item-text="classNum"
133 item-value="_id" 133 item-value="_id"
134 ></v-text-field> 134 ></v-text-field>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 </v-flex> 137 </v-flex>
138 <v-flex xs12 sm12> 138 <v-flex xs12 sm12>
139 <v-layout> 139 <v-layout>
140 <v-flex xs4 class="pt-4 subheading"> 140 <v-flex xs4 class="pt-4 subheading">
141 <label class="right">Upload Image:</label> 141 <label class="right">Upload Image:</label>
142 </v-flex> 142 </v-flex>
143 <v-flex xs5 class="ml-3"> 143 <v-flex xs5 class="ml-3">
144 <v-text-field 144 <v-text-field
145 label="Select Image" 145 label="Select Image"
146 @click="pickImage" 146 @click="pickImage"
147 v-model="imageName" 147 v-model="imageName"
148 append-icon="attach_file" 148 append-icon="attach_file"
149 multiple 149 multiple
150 ></v-text-field> 150 ></v-text-field>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs4 class="pt-4 subheading"> 156 <v-flex xs4 class="pt-4 subheading">
157 <label class="right">Upload File:</label> 157 <label class="right">Upload File:</label>
158 </v-flex> 158 </v-flex>
159 <v-flex xs5 class="ml-3"> 159 <v-flex xs5 class="ml-3">
160 <input 160 <input
161 type="file" 161 type="file"
162 style="display: none" 162 style="display: none"
163 ref="file" 163 ref="file"
164 @change="onFilePicked" 164 @change="onFilePicked"
165 /> 165 />
166 <v-text-field 166 <v-text-field
167 label="Select File" 167 label="Select File"
168 @click="pickFile" 168 @click="pickFile"
169 v-model="fileName" 169 v-model="fileName"
170 append-icon="attach_file" 170 append-icon="attach_file"
171 multiple 171 multiple
172 ></v-text-field> 172 ></v-text-field>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 <v-flex xs12 sm12> 176 <v-flex xs12 sm12>
177 <v-layout> 177 <v-layout>
178 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
179 <label class="right">Private:</label> 179 <label class="right">Private:</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs5 class="ml-3"> 181 <v-flex xs5 class="ml-3">
182 <v-checkbox v-model="editedItem.private"></v-checkbox> 182 <v-checkbox v-model="editedItem.private"></v-checkbox>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 <v-layout> 187 <v-layout>
188 <v-flex xs12 sm8 offset-sm2> 188 <v-flex xs12 sm8 offset-sm2>
189 <v-card-actions> 189 <v-card-actions>
190 <v-btn round dark @click.native="close">Cancel</v-btn> 190 <v-btn round dark @click.native="close">Cancel</v-btn>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> 192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn>
193 </v-card-actions> 193 </v-card-actions>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-container> 196 </v-container>
197 </v-form> 197 </v-form>
198 </v-card-text> 198 </v-card-text>
199 </v-card> 199 </v-card>
200 </v-dialog> 200 </v-dialog>
201 201
202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
203 203
204 <v-dialog v-model="dialog1" max-width="800px" scrollable> 204 <v-dialog v-model="dialog1" max-width="800px" scrollable>
205 <v-card style="height: 700px;"> 205 <v-card style="height: 700px;">
206 <v-toolbar color="grey lighten-2" flat> 206 <v-toolbar color="grey lighten-2" flat>
207 <v-spacer></v-spacer> 207 <v-spacer></v-spacer>
208 <v-toolbar-title> 208 <v-toolbar-title>
209 <h3>E-Books</h3> 209 <h3>E-Books</h3>
210 </v-toolbar-title> 210 </v-toolbar-title>
211 <v-spacer></v-spacer> 211 <v-spacer></v-spacer>
212 <v-icon @click="close1">close</v-icon> 212 <v-icon @click="close1">close</v-icon>
213 </v-toolbar> 213 </v-toolbar>
214 <v-card-text> 214 <v-card-text>
215 <v-container> 215 <v-container>
216 <v-layout wrap> 216 <v-layout wrap>
217 <v-flex sm12 xs12> 217 <v-flex sm12 xs12>
218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> 218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 </v-container> 221 </v-container>
222 </v-card-text> 222 </v-card-text>
223 </v-card> 223 </v-card>
224 </v-dialog> 224 </v-dialog>
225 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 225 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
226 <v-data-table 226 <v-data-table
227 :headers="headers" 227 :headers="headers"
228 :items="eBookData" 228 :items="eBookData"
229 :pagination.sync="pagination" 229 :pagination.sync="pagination"
230 :search="search" 230 :search="search"
231 > 231 >
232 <template slot="items" slot-scope="props"> 232 <template slot="items" slot-scope="props">
233 <td class="text-xs-center">{{ props.index + 1}}</td> 233 <td class="text-xs-center">{{ props.index + 1}}</td>
234 <td id="td" class="text-xs-center"> 234 <td id="td" class="text-xs-center">
235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> 235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" />
236 </td> 236 </td>
237 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 237 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
238 <td id="td" class="text-xs-center">{{ props.item.author}}</td> 238 <td id="td" class="text-xs-center">{{ props.item.author}}</td>
239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
240 240
241 <td class="text-xs-center"> 241 <td class="text-xs-center">
242 <span> 242 <span>
243 <img 243 <img
244 style="cursor:pointer; width:25px; height:18px; " 244 style="cursor:pointer; width:25px; height:18px; "
245 class="mr-5" 245 class="mr-5"
246 @click="profile(props.item)" 246 @click="profile(props.item)"
247 src="/static/icon/eye1.png" 247 src="/static/icon/eye1.png"
248 /> 248 />
249 <img 249 <img
250 style="cursor:pointer; width:20px; height:18px; " 250 style="cursor:pointer; width:20px; height:18px; "
251 class="mr-5" 251 class="mr-5"
252 @click="editItem(props.item)" 252 @click="editItem(props.item)"
253 src="/static/icon/edit1.png" 253 src="/static/icon/edit1.png"
254 /> 254 />
255 <img 255 <img
256 style="cursor:pointer;width:20px; height:20px; " 256 style="cursor:pointer;width:20px; height:20px; "
257 class="mr-5" 257 class="mr-5"
258 @click="deleteItem(props.item)" 258 @click="deleteItem(props.item)"
259 src="/static/icon/delete1.png" 259 src="/static/icon/delete1.png"
260 /> 260 />
261 </span> 261 </span>
262 </td> 262 </td>
263 </template> 263 </template>
264 <v-alert 264 <v-alert
265 slot="no-results" 265 slot="no-results"
266 :value="true" 266 :value="true"
267 color="error" 267 color="error"
268 icon="warning" 268 icon="warning"
269 >Your search for "{{ search }}" found no results.</v-alert> 269 >Your search for "{{ search }}" found no results.</v-alert>
270 </v-data-table> 270 </v-data-table>
271 </v-tab-item> 271 </v-tab-item>
272 272
273 <!-- ****** ADD MULTIPLE NEWS ****** --> 273 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
274 274
275 <v-tab-item> 275 <v-tab-item>
276 <v-container> 276 <v-container>
277 <v-snackbar 277 <v-snackbar
278 :timeout="timeout" 278 :timeout="timeout"
279 :top="y === 'top'" 279 :top="y === 'top'"
280 :right="x === 'right'" 280 :right="x === 'right'"
281 :vertical="mode === 'vertical'" 281 :vertical="mode === 'vertical'"
282 v-model="snackbar" 282 v-model="snackbar"
283 color="success" 283 color="success"
284 >{{ text }}</v-snackbar> 284 >{{ text }}</v-snackbar>
285 <v-flex xs12 sm12 class="my-4"> 285 <v-flex xs12 sm12 class="my-4">
286 <v-card flat> 286 <v-card flat>
287 <v-form ref="form" v-model="valid" lazy-validation> 287 <v-form ref="form" v-model="valid" lazy-validation>
288 <v-container fluid> 288 <v-container fluid>
289 <v-layout> 289 <v-layout>
290 <v-flex 290 <v-flex
291 xs12 291 xs12
292 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 292 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
293 > 293 >
294 <input 294 <input
295 type="file" 295 type="file"
296 style="display: none" 296 style="display: none"
297 ref="image" 297 ref="image"
298 accept="image/*" 298 accept="image/*"
299 @change="onImagePicked" 299 @change="onImagePicked"
300 /> 300 />
301 <v-layout justify-center> 301 <v-layout justify-center>
302 <v-flex v-if="files != ''"> 302 <v-flex v-if="files != ''">
303 <img :src="files" height="240" width="260px;" /> 303 <img :src="files" height="240" width="260px;" />
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 <img 306 <img
307 src="/static/icon/user.png" 307 src="/static/icon/user.png"
308 v-if="files ==''" 308 v-if="files ==''"
309 height="140" 309 height="140"
310 width="180px;" 310 width="180px;"
311 /> 311 />
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 class="pt-4 subheading"> 316 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Name:</label> 317 <label class="right">Name:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs4 class="ml-3"> 319 <v-flex xs4 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="addEBooks.name" 321 v-model="addEBooks.name"
322 placeholder="fill your Title" 322 placeholder="fill your Title"
323 name="name" 323 name="name"
324 type="text" 324 type="text"
325 :rules="titleRules" 325 :rules="titleRules"
326 required 326 required
327 ></v-text-field> 327 ></v-text-field>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-flex> 330 </v-flex>
331 <v-flex xs12> 331 <v-flex xs12>
332 <v-layout> 332 <v-layout>
333 <v-flex xs4 class="pt-4 subheading"> 333 <v-flex xs4 class="pt-4 subheading">
334 <label class="right">Author:</label> 334 <label class="right">Author:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs4 class="ml-3"> 336 <v-flex xs4 class="ml-3">
337 <v-text-field 337 <v-text-field
338 v-model="addEBooks.author" 338 v-model="addEBooks.author"
339 placeholder="fill your Author Name" 339 placeholder="fill your Author Name"
340 name="name" 340 name="name"
341 type="text" 341 type="text"
342 :rules="titleRules" 342 :rules="titleRules"
343 required 343 required
344 ></v-text-field> 344 ></v-text-field>
345 </v-flex> 345 </v-flex>
346 </v-layout> 346 </v-layout>
347 </v-flex> 347 </v-flex>
348 <v-flex xs12> 348 <v-flex xs12>
349 <v-layout> 349 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
351 <label class="right">Class:</label> 351 <label class="right">Class:</label>
352 </v-flex> 352 </v-flex>
353 <v-flex xs4 class="ml-3"> 353 <v-flex xs4 class="ml-3">
354 <v-select 354 <v-select
355 v-model="addEBooks.classId" 355 v-model="addEBooks.classId"
356 :items="addClass" 356 :items="addClass"
357 label="Select Class" 357 label="Select Class"
358 item-text="classNum" 358 item-text="classNum"
359 item-value="_id" 359 item-value="_id"
360 :rules="titleRules" 360 :rules="titleRules"
361 required 361 required
362 ></v-select> 362 ></v-select>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 </v-flex> 365 </v-flex>
366 <v-flex xs12> 366 <v-flex xs12>
367 <v-layout> 367 <v-layout>
368 <v-flex xs4 class="pt-4 subheading"> 368 <v-flex xs4 class="pt-4 subheading">
369 <label class="right">Upload Image:</label> 369 <label class="right">Upload Image:</label>
370 </v-flex> 370 </v-flex>
371 <v-flex xs4 class="ml-3"> 371 <v-flex xs4 class="ml-3">
372 <v-text-field 372 <v-text-field
373 label="Select Image" 373 label="Select Image"
374 @click="pickImage" 374 @click="pickImage"
375 v-model="imageName" 375 v-model="imageName"
376 append-icon="attach_file" 376 append-icon="attach_file"
377 multiple 377 multiple
378 ></v-text-field> 378 ></v-text-field>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 </v-flex> 381 </v-flex>
382 <v-flex xs12> 382 <v-flex xs12>
383 <v-layout> 383 <v-layout>
384 <v-flex xs4 class="pt-4 subheading"> 384 <v-flex xs4 class="pt-4 subheading">
385 <label class="right">Upload File:</label> 385 <label class="right">Upload File:</label>
386 </v-flex> 386 </v-flex>
387 <v-flex xs4 class="ml-3"> 387 <v-flex xs4 class="ml-3">
388 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 388 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
389 <v-text-field 389 <v-text-field
390 label="Select File" 390 label="Select File"
391 @click="pickFile" 391 @click="pickFile"
392 v-model="fileName" 392 v-model="fileName"
393 append-icon="attach_file" 393 append-icon="attach_file"
394 multiple 394 multiple
395 ></v-text-field> 395 ></v-text-field>
396 </v-flex> 396 </v-flex>
397 </v-layout> 397 </v-layout>
398 </v-flex> 398 </v-flex>
399 <v-flex xs12> 399 <v-flex xs12>
400 <v-layout> 400 <v-layout>
401 <v-flex xs4 class="pt-3 subheading"> 401 <v-flex xs4 class="pt-3 subheading">
402 <label class="right">Private:</label> 402 <label class="right">Private:</label>
403 </v-flex> 403 </v-flex>
404 <v-flex xs4 class="ml-3"> 404 <v-flex xs4 class="ml-3">
405 <v-checkbox v-model="addEBooks.private"></v-checkbox> 405 <v-checkbox v-model="addEBooks.private"></v-checkbox>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 </v-flex> 408 </v-flex>
409 <v-layout> 409 <v-layout>
410 <v-flex xs12 sm7 offset-sm2> 410 <v-flex xs12 sm7 offset-sm2>
411 <v-card-actions> 411 <v-card-actions>
412 <v-btn @click="clear" round dark>clear</v-btn> 412 <v-btn @click="clear" round dark>clear</v-btn>
413 <v-spacer></v-spacer> 413 <v-spacer></v-spacer>
414 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 414 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
415 </v-card-actions> 415 </v-card-actions>
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 </v-container> 418 </v-container>
419 </v-form> 419 </v-form>
420 </v-card> 420 </v-card>
421 </v-flex> 421 </v-flex>
422 </v-container> 422 </v-container>
423 </v-tab-item> 423 </v-tab-item>
424 </v-tabs> 424 </v-tabs>
425 <div class="loader" v-if="showLoader"> 425 <div class="loader" v-if="showLoader">
426 <v-progress-circular indeterminate color="white"></v-progress-circular> 426 <v-progress-circular indeterminate color="white"></v-progress-circular>
427 </div> 427 </div>
428 </v-app> 428 </v-app>
429 </template> 429 </template>
430 430
431 <script> 431 <script>
432 import http from "@/Services/http.js"; 432 import http from "@/Services/http.js";
433 import Util from "@/util"; 433 import Util from "@/util";
434 434
435 export default { 435 export default {
436 data: () => ({ 436 data: () => ({
437 snackbar: false, 437 snackbar: false,
438 y: "top", 438 y: "top",
439 x: "right", 439 x: "right",
440 mode: "", 440 mode: "",
441 timeout: 3000, 441 timeout: 3000,
442 text: "", 442 text: "",
443 loading: false, 443 loading: false,
444 loadingUpadte: false, 444 loadingUpadte: false,
445 date: null, 445 date: null,
446 search: "", 446 search: "",
447 showLoader: false, 447 showLoader: false,
448 dialog: false, 448 dialog: false,
449 dialog1: false, 449 dialog1: false,
450 valid: true, 450 valid: true,
451 isActive: true, 451 isActive: true,
452 newActive: false, 452 newActive: false,
453 addClass: [], 453 addClass: [],
454 addSection: [], 454 addSection: [],
455 AddUsercredentials: {}, 455 AddUsercredentials: {},
456 pagination: { 456 pagination: {
457 rowsPerPage: 15 457 rowsPerPage: 15
458 }, 458 },
459 imageName: "", 459 imageName: "",
460 fileName: "", 460 fileName: "",
461 imageUrl: "", 461 imageUrl: "",
462 imageFile: "", 462 imageFile: "",
463 image: [], 463 image: [],
464 upload: "", 464 upload: "",
465 files: "", 465 files: "",
466 anyFile: "", 466 anyFile: "",
467 titleRules: [v => !!v || " Tilte is required"], 467 titleRules: [v => !!v || " Tilte is required"],
468 descriptionRules: [v => !!v || " Description is required"], 468 descriptionRules: [v => !!v || " Description is required"],
469 headers: [ 469 headers: [
470 { 470 {
471 align: "justify-center", 471 align: "justify-center",
472 text: "No", 472 text: "No",
473 sortable: false, 473 sortable: false,
474 value: "No" 474 value: "No"
475 }, 475 },
476 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 476 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
477 { text: "Name", vaue: "name", sortable: false, align: "center" }, 477 { text: "Name", vaue: "name", sortable: false, align: "center" },
478 { text: "Author", value: "author", sortable: false, align: "center" }, 478 { text: "Author", value: "author", sortable: false, align: "center" },
479 { 479 {
480 text: "Class", 480 text: "Class",
481 value: "classId", 481 value: "classId",
482 sortable: false, 482 sortable: false,
483 align: "center" 483 align: "center"
484 }, 484 },
485 { text: "Action", value: "", sortable: false, align: "center" } 485 { text: "Action", value: "", sortable: false, align: "center" }
486 ], 486 ],
487 eBookData: [], 487 eBookData: [],
488 editedIndex: -1, 488 editedIndex: -1,
489 addEBooks: { 489 addEBooks: {
490 private: false 490 private: false
491 }, 491 },
492 editedItem: {}, 492 editedItem: {},
493 token: "" 493 token: ""
494 }), 494 }),
495 methods: { 495 methods: {
496 pickImage() { 496 pickImage() {
497 this.$refs.image.click(); 497 this.$refs.image.click();
498 }, 498 },
499 pickFile() { 499 pickFile() {
500 this.$refs.file.click(); 500 this.$refs.file.click();
501 }, 501 },
502 onImagePicked(e) { 502 onImagePicked(e) {
503 // console.log(e) 503 // console.log(e)
504 const files = e.target.files; 504 const files = e.target.files;
505 /** fetch Image Name **/ 505 /** fetch Image Name **/
506 if (files[0] !== undefined) { 506 if (files[0] !== undefined) {
507 this.imageName = files[0].name; 507 this.imageName = files[0].name;
508 if (this.imageName.lastIndexOf(".") <= 0) { 508 if (this.imageName.lastIndexOf(".") <= 0) {
509 return; 509 return;
510 } 510 }
511 /** Select many image and showing many image add to news card **/ 511 /** Select many image and showing many image add to news card **/
512 const fr = new FileReader(); 512 const fr = new FileReader();
513 fr.readAsDataURL(files[0]); 513 fr.readAsDataURL(files[0]);
514 fr.addEventListener("load", () => { 514 fr.addEventListener("load", () => {
515 this.files = fr.result; 515 this.files = fr.result;
516 }); 516 });
517 } else { 517 } else {
518 this.imageName = ""; 518 this.imageName = "";
519 this.imageFile = ""; 519 this.imageFile = "";
520 this.files = ""; 520 this.files = "";
521 this.imageUrl = ""; 521 this.imageUrl = "";
522 } 522 }
523 }, 523 },
524 getEBooksList() { 524 getEBooksList() {
525 this.showLoader = true; 525 this.showLoader = true;
526 http() 526 http()
527 .get("/getEBooksList", { 527 .get("/getEBooksList", {
528 headers: { Authorization: "Bearer " + this.token } 528 headers: { Authorization: "Bearer " + this.token }
529 }) 529 })
530 .then(response => { 530 .then(response => {
531 this.eBookData = response.data.data; 531 this.eBookData = response.data.data;
532 this.showLoader = false; 532 this.showLoader = false;
533 }) 533 })
534 .catch(err => { 534 .catch(err => {
535 // console.log("err====>", err); 535 // console.log("err====>", err);
536 this.showLoader = false; 536 this.showLoader = false;
537 if (error.response.status === 401) { 537 if (error.response.status === 401) {
538 this.$router.replace({ path: "/" }); 538 this.$router.replace({ path: "/" });
539 this.$store.dispatch("setToken", null); 539 this.$store.dispatch("setToken", null);
540 this.$store.dispatch("Id", null); 540 this.$store.dispatch("Id", null);
541 } 541 }
542 }); 542 });
543 }, 543 },
544 onFilePicked(e) { 544 onFilePicked(e) {
545 // console.log(e) 545 // console.log(e)
546 const files = e.target.files; 546 const files = e.target.files;
547 /** fetch Image Name **/ 547 /** fetch Image Name **/
548 if (files[0] !== undefined) { 548 if (files[0] !== undefined) {
549 this.fileName = files[0].name; 549 this.fileName = files[0].name;
550 if (this.fileName.lastIndexOf(".") <= 0) { 550 if (this.fileName.lastIndexOf(".") <= 0) {
551 return; 551 return;
552 } 552 }
553 const fr = new FileReader(); 553 const fr = new FileReader();
554 fr.readAsDataURL(files[0]); 554 fr.readAsDataURL(files[0]);
555 fr.addEventListener("load", () => { 555 fr.addEventListener("load", () => {
556 this.anyFile = fr.result; 556 this.anyFile = fr.result;
557 // console.log(" this.anyFile Url", this.anyFile ) 557 // console.log(" this.anyFile Url", this.anyFile )
558 }); 558 });
559 } else { 559 } else {
560 this.anyFile = ""; 560 this.anyFile = "";
561 this.fileName = ""; 561 this.fileName = "";
562 } 562 }
563 }, 563 },
564 editItem(item) { 564 editItem(item) {
565 this.files = []; 565 this.files = [];
566 this.editedIndex = this.eBookData.indexOf(item); 566 this.editedIndex = this.eBookData.indexOf(item);
567 this.editedItem = Object.assign({}, item); 567 this.editedItem = Object.assign({}, item);
568 this.editedItem.className = item.classId.classNum; 568 this.editedItem.className = item.classId.classNum;
569 this.dialog = true; 569 this.dialog = true;
570 }, 570 },
571 profile(item) { 571 profile(item) {
572 this.editedIndex = this.eBookData.indexOf(item); 572 this.editedIndex = this.eBookData.indexOf(item);
573 this.editedItem = Object.assign({}, item); 573 this.editedItem = Object.assign({}, item);
574 this.dialog1 = true; 574 this.dialog1 = true;
575 }, 575 },
576 deleteItem(item) { 576 deleteItem(item) {
577 let deleteEBooks = { 577 let deleteEBooks = {
578 ebookId: item._id 578 ebookId: item._id
579 }; 579 };
580 http() 580 http()
581 .delete( 581 .delete(
582 "/deleteEBook", 582 "/deleteEBook",
583 confirm("Are you sure you want to delete this?") && { 583 confirm("Are you sure you want to delete this?") && {
584 params: deleteEBooks 584 params: deleteEBooks
585 } 585 }
586 ) 586 )
587 .then(response => { 587 .then(response => {
588 this.snackbar = true; 588 this.snackbar = true;
589 this.text = "Successfully delete Existing News"; 589 this.text = "Successfully delete Existing News";
590 this.getEBooksList(); 590 this.getEBooksList();
591 }) 591 })
592 .catch(error => { 592 .catch(error => {
593 this.snackbar = true; 593 this.snackbar = true;
594 this.text = error.response.data.message; 594 this.text = error.response.data.message;
595 }); 595 });
596 }, 596 },
597 activeTab(type) { 597 activeTab(type) {
598 switch (type) { 598 switch (type) {
599 case "existing": 599 case "existing":
600 this.newActive = false; 600 this.newActive = false;
601 this.isActive = true; 601 this.isActive = true;
602 break; 602 break;
603 603
604 default: 604 default:
605 this.newActive = true; 605 this.newActive = true;
606 this.isActive = false; 606 this.isActive = false;
607 break; 607 break;
608 } 608 }
609 }, 609 },
610 close() { 610 close() {
611 this.dialog = false; 611 this.dialog = false;
612 setTimeout(() => { 612 setTimeout(() => {
613 this.editedItem = Object.assign({}, this.defaultItem); 613 this.editedItem = Object.assign({}, this.defaultItem);
614 this.editedIndex = -1; 614 this.editedIndex = -1;
615 }, 300); 615 }, 300);
616 }, 616 },
617 close1() { 617 close1() {
618 this.dialog1 = false; 618 this.dialog1 = false;
619 }, 619 },
620 submit() { 620 submit() {
621 this.loading = true; 621 this.loading = true;
622 if (this.$refs.form.validate()) { 622 if (this.$refs.form.validate()) {
623 if (this.files) { 623 if (this.files) {
624 const [baseUrl, imageUrl] = this.files.split(/,/); 624 const [baseUrl, imageUrl] = this.files.split(/,/);
625 this.addEBooks.uploadCover = imageUrl; 625 this.addEBooks.uploadCover = imageUrl;
626 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 626 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
627 } 627 }
628 if (this.anyFile) { 628 if (this.anyFile) {
629 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 629 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
630 this.addEBooks.uploadFile = fileUrl; 630 this.addEBooks.uploadFile = fileUrl;
631 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 631 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
632 } 632 }
633 http() 633 http()
634 .post("/createEBook", this.addEBooks) 634 .post("/createEBook", this.addEBooks)
635 .then(response => { 635 .then(response => {
636 this.snackbar = true; 636 this.snackbar = true;
637 this.text = "New E-Book added successfully"; 637 this.text = "New E-Book added successfully";
638 this.addEBooks.uploadCover = ""; 638 this.addEBooks.uploadCover = "";
639 this.addEBooks.uploadFile = ""; 639 this.addEBooks.uploadFile = "";
640 this.files = ""; 640 this.files = "";
641 this.getEBooksList(); 641 this.getEBooksList();
642 this.loading = false; 642 this.loading = false;
643 this.clear(); 643 this.clear();
644 }) 644 })
645 .catch(error => { 645 .catch(error => {
646 this.snackbar = true; 646 this.snackbar = true;
647 this.text = error.response.data.message; 647 this.text = error.response.data.message;
648 }); 648 });
649 } 649 }
650 }, 650 },
651 clear() { 651 clear() {
652 this.$refs.form.reset(); 652 this.$refs.form.reset();
653 }, 653 },
654 save() { 654 save() {
655 this.loadingUpadte = true; 655 this.loadingUpadte = true;
656 if (this.files.length > 0) { 656 if (this.files.length > 0) {
657 const [baseUrl, imageUrl] = this.files.split(/,/); 657 const [baseUrl, imageUrl] = this.files.split(/,/);
658 this.editedItem.uploadCover = imageUrl; 658 this.editedItem.uploadCover = imageUrl;
659 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 659 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
660 } 660 }
661 if (this.anyFile) { 661 if (this.anyFile) {
662 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 662 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
663 this.editedItem.uploadFile = fileUrl; 663 this.editedItem.uploadFile = fileUrl;
664 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 664 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
665 } 665 }
666 this.editedItem.ebookId = this.editedItem._id; 666 this.editedItem.ebookId = this.editedItem._id;
667 http() 667 http()
668 .put("/updateEBook", this.editedItem) 668 .put("/updateEBook", this.editedItem)
669 .then(response => { 669 .then(response => {
670 this.loadingUpadte = false; 670 this.loadingUpadte = false;
671 this.snackbar = true; 671 this.snackbar = true;
672 this.text = "Successfully Edit Existing E-Book"; 672 this.text = "Successfully Edit Existing E-Book";
673 this.getEBooksList(); 673 this.getEBooksList();
674 this.editedItem.uploadFile = ""; 674 this.editedItem.uploadFile = "";
675 this.editedItem.uploadCover = ""; 675 this.editedItem.uploadCover = "";
676 this.anyFile = ""; 676 this.anyFile = "";
677 this.files = ""; 677 this.files = "";
678 this.close(); 678 this.close();
679 }) 679 })
680 .catch(error => { 680 .catch(error => {
681 this.loadingUpadte = false; 681 this.loadingUpadte = false;
682 this.snackbar = true; 682 this.snackbar = true;
683 this.text = error.response.data.message; 683 this.text = error.response.data.message;
684 // console.log(error); 684 // console.log(error);
685 }); 685 });
686 }, 686 },
687 getAllClass() { 687 getAllClass() {
688 http() 688 http()
689 .get("/getClassesList", { 689 .get("/getClassesList", {
690 headers: { Authorization: "Bearer " + this.token } 690 headers: { Authorization: "Bearer " + this.token }
691 }) 691 })
692 .then(response => { 692 .then(response => {
693 this.addClass = response.data.data; 693 this.addClass = response.data.data;
694 }) 694 })
695 .catch(err => { 695 .catch(err => {
696 // console.log("err====>", err); 696 // console.log("err====>", err);
697 // this.$router.replace({ path: "/" }); 697 // this.$router.replace({ path: "/" });
698 }); 698 });
699 } 699 }
700 }, 700 },
701 mounted() { 701 mounted() {
702 this.token = this.$store.state.token; 702 this.token = this.$store.state.token;
703 this.getEBooksList(); 703 this.getEBooksList();
704 this.getAllClass(); 704 this.getAllClass();
705 this.getBookData();
705 // this.editItem; 706 // this.editItem;
706 }, 707 },
707 created() { 708 created() {
708 this.$root.$on("app:search", search => { 709 this.$root.$on("app:search", search => {
709 this.search = search; 710 this.search = search;
710 }); 711 });
711 }, 712 },
712 beforeDestroy() { 713 beforeDestroy() {
713 // dont forget to remove the listener 714 // dont forget to remove the listener
714 this.$root.$off("app:search"); 715 this.$root.$off("app:search");
715 } 716 }
716 }; 717 };
717 </script> 718 </script>
718 <style scoped> 719 <style scoped>
719 .active { 720 .active {
720 background-color: gray; 721 background-color: gray;
721 color: white !important; 722 color: white !important;
722 } 723 }
723 .activebtn { 724 .activebtn {
724 color: black !important; 725 color: black !important;
725 } 726 }
726 </style> 727 </style>
src/pages/Library/issue.vue
Diff comments   View file @b8690bb
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Issue</v-tab> 10 >Existing Issue</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add Issue</v-tab> 18 >Add Issue</v-tab>
19 19
20 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 20 <!-- ****** EDIT ISSUE ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Issue</h3> 36 <h3>Edit Issue</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:600px;"> 40 <v-card-text style="height:600px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <!-- <v-layout row> 43 <!-- <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onFilePicked" 54 @change="onFilePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex 57 <v-flex
58 xs3 58 xs3
59 v-for="Image in editedItem.newsImageUrl" 59 v-for="Image in editedItem.newsImageUrl"
60 :key="Image._id" 60 :key="Image._id"
61 v-if="editedItem.newsImageUrl" 61 v-if="editedItem.newsImageUrl"
62 class="profile-image-wrapper" 62 class="profile-image-wrapper"
63 > 63 >
64 <img 64 <img
65 :src="Image.imageUrl" 65 :src="Image.imageUrl"
66 height="160" 66 height="160"
67 width="160" 67 width="160"
68 alt="Issue" 68 alt="Issue"
69 class="pa-2" 69 class="pa-2"
70 /> 70 />
71 <v-icon 71 <v-icon
72 class="red edit-profile-icon" 72 class="red edit-profile-icon"
73 dark 73 dark
74 @click="deleteImage(Image._id,editedItem._id)" 74 @click="deleteImage(Image._id,editedItem._id)"
75 >close</v-icon> 75 >close</v-icon>
76 </v-flex> 76 </v-flex>
77 <v-flex v-for="(file, index) in files" :key="index"> 77 <v-flex v-for="(file, index) in files" :key="index">
78 <img :src="file" height="160" width="160" class="pa-2" /> 78 <img :src="file" height="160" width="160" class="pa-2" />
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 <img 81 <img
82 src="/static/icon/user.png" 82 src="/static/icon/user.png"
83 v-if="editedItem.newsImageUrl ==''" 83 v-if="editedItem.newsImageUrl ==''"
84 height="160" 84 height="160"
85 width="160" 85 width="160"
86 alt="Issue" 86 alt="Issue"
87 /> 87 />
88 </v-flex> 88 </v-flex>
89 </v-layout>--> 89 </v-layout>-->
90 <v-layout> 90 <v-layout>
91 <v-flex xs12 sm12> 91 <v-flex xs12 sm12>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Title:</label> 94 <label class="right">Title:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs5 class="ml-3"> 96 <v-flex xs5 class="ml-3">
97 <v-text-field 97 <v-text-field
98 v-model="editedItem.title" 98 v-model="editedItem.title"
99 placeholder="fill your Title" 99 placeholder="fill your Title"
100 name="name" 100 name="name"
101 type="text" 101 type="text"
102 required 102 required
103 ></v-text-field> 103 ></v-text-field>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <v-flex xs12 sm12> 107 <v-flex xs12 sm12>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Description:</label> 110 <label class="right">Description:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs5 class="ml-3"> 112 <v-flex xs5 class="ml-3">
113 <v-text-field 113 <v-text-field
114 placeholder="fill your Description" 114 placeholder="fill your Description"
115 v-model="editedItem.description" 115 v-model="editedItem.description"
116 type="text" 116 type="text"
117 name="email" 117 name="email"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12> 123 <v-flex xs12>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Add New Images:</label> 126 <label class="right">Add New Images:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs5 class="ml-3"> 128 <v-flex xs5 class="ml-3">
129 <!-- <v-text-field 129 <!-- <v-text-field
130 label="Select Image" 130 label="Select Image"
131 @click="pickFile" 131 @click="pickFile"
132 v-model="imageName" 132 v-model="imageName"
133 append-icon="attach_file" 133 append-icon="attach_file"
134 multiple 134 multiple
135 ></v-text-field>--> 135 ></v-text-field>-->
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 <v-layout> 140 <v-layout>
141 <v-flex xs12 sm8 offset-sm2> 141 <v-flex xs12 sm8 offset-sm2>
142 <v-card-actions> 142 <v-card-actions>
143 <v-btn round dark @click.native="close">Cancel</v-btn> 143 <v-btn round dark @click.native="close">Cancel</v-btn>
144 <v-spacer></v-spacer> 144 <v-spacer></v-spacer>
145 <v-btn round dark @click="save">Save</v-btn> 145 <v-btn round dark @click="save">Save</v-btn>
146 </v-card-actions> 146 </v-card-actions>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-container> 149 </v-container>
150 </v-form> 150 </v-form>
151 </v-card-text> 151 </v-card-text>
152 </v-card> 152 </v-card>
153 </v-dialog> 153 </v-dialog>
154 154
155 <!-- ****** PROFILE VIEW ALL Issue DEATILS ****** --> 155 <!-- ****** PROFILE VIEW ALL Issue DEATILS ****** -->
156 156
157 <v-dialog v-model="dialog1" max-width="800px"> 157 <v-dialog v-model="dialog1" max-width="800px">
158 <v-card> 158 <v-card>
159 <v-toolbar color="grey lighten-2" flat> 159 <v-toolbar color="grey lighten-2" flat>
160 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
161 <v-toolbar-title> 161 <v-toolbar-title>
162 <h3>Issue</h3> 162 <h3>Issue</h3>
163 </v-toolbar-title> 163 </v-toolbar-title>
164 <v-spacer></v-spacer> 164 <v-spacer></v-spacer>
165 <v-icon @click="close1">close</v-icon> 165 <v-icon @click="close1">close</v-icon>
166 </v-toolbar> 166 </v-toolbar>
167 <!-- <v-flex align-center justify-center layout text-xs-center> 167 <!-- <v-flex align-center justify-center layout text-xs-center>
168 <v-avatar size="50px" style="position:absolute; top:20px;"> 168 <v-avatar size="50px" style="position:absolute; top:20px;">
169 <img src="/static/icon/user.png"> 169 <img src="/static/icon/user.png">
170 </v-avatar> 170 </v-avatar>
171 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2"> 171 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
172 <img :src="image.imageUrl" alt="Issue" width="240" height="180" /> 172 <img :src="image.imageUrl" alt="Issue" width="240" height="180" />
173 </span> 173 </span>
174 </v-flex>--> 174 </v-flex>-->
175 <v-card-text> 175 <v-card-text>
176 <v-container grid-list-md> 176 <v-container grid-list-md>
177 <v-layout wrap> 177 <v-layout wrap>
178 <v-flex> 178 <v-flex>
179 <v-layout> 179 <v-layout>
180 <v-flex xs5 sm6> 180 <v-flex xs5 sm6>
181 <h5 class="right my-1"> 181 <h5 class="right my-1">
182 <b>Title:</b> 182 <b>Title:</b>
183 </h5> 183 </h5>
184 </v-flex> 184 </v-flex>
185 <v-flex sm6 xs8> 185 <v-flex sm6 xs8>
186 <h5 class="my-1">{{ editedItem.title }}</h5> 186 <h5 class="my-1">{{ editedItem.title }}</h5>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 <v-layout> 189 <v-layout>
190 <v-flex xs5 sm6> 190 <v-flex xs5 sm6>
191 <h5 class="right my-1"> 191 <h5 class="right my-1">
192 <b>Description:</b> 192 <b>Description:</b>
193 </h5> 193 </h5>
194 </v-flex> 194 </v-flex>
195 <v-flex sm6 xs8> 195 <v-flex sm6 xs8>
196 <h5 class="my-1">{{ editedItem.description }}</h5> 196 <h5 class="my-1">{{ editedItem.description }}</h5>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 </v-flex> 199 </v-flex>
200 </v-layout> 200 </v-layout>
201 </v-container> 201 </v-container>
202 </v-card-text> 202 </v-card-text>
203 </v-card> 203 </v-card>
204 </v-dialog> 204 </v-dialog>
205 205
206 <v-snackbar 206 <v-snackbar
207 :timeout="timeout" 207 :timeout="timeout"
208 :top="y === 'top'" 208 :top="y === 'top'"
209 :right="x === 'right'" 209 :right="x === 'right'"
210 :vertical="mode === 'vertical'" 210 :vertical="mode === 'vertical'"
211 v-model="snackbar" 211 v-model="snackbar"
212 color="success" 212 color="success"
213 >{{ text }}</v-snackbar> 213 >{{ text }}</v-snackbar>
214 214
215 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 215 <!-- ****** EXISTING ISSUE TABLE****** -->
216 <v-card> 216 <v-card>
217 <v-layout> 217 <v-layout>
218 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> 218 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only">
219 <label class="right pt-4">Library ID:</label> 219 <label class="right pt-4">Library ID:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex lg2 md3 xs7> 221 <v-flex lg2 md3 xs7>
222 <v-text-field class="pl-3" @keyup.enter="searchLibrary" v-model="libraryId" placeholder="fill your library Id"></v-text-field> 222 <v-text-field
223 class="pl-3"
224 @keyup.enter="searchLibrary"
225 v-model="libraryId"
226 placeholder="fill your library Id"
227 ></v-text-field>
223 </v-flex> 228 </v-flex>
224 <v-flex lg9 md3 xs5> 229 <v-flex lg9 md3 xs5>
225 <v-btn 230 <v-btn
226 round 231 round
227 class="black mt-1 right hidden-xs-only" 232 class="black mt-1 right hidden-xs-only"
228 @click="searchLibrary" 233 @click="searchLibrary"
229 :loading="loadingSearch" 234 :loading="loadingSearch"
230 dark 235 dark
231 >Search</v-btn> 236 >Search</v-btn>
232 <v-btn 237 <v-btn
233 round 238 round
234 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" 239 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
235 :loading="loadingSearch" 240 :loading="loadingSearch"
236 @click="searchLibrary" 241 @click="searchLibrary"
237 small 242 small
238 dark 243 dark
239 >Search</v-btn> 244 >Search</v-btn>
240 </v-flex> 245 </v-flex>
241 </v-layout> 246 </v-layout>
242 </v-card> 247 </v-card>
243 <v-data-table 248 <v-data-table
244 :headers="headers" 249 :headers="headers"
245 :items="desserts" 250 :items="desserts"
246 :pagination.sync="pagination" 251 :pagination.sync="pagination"
247 :search="search" 252 :search="search"
248 > 253 >
249 <template slot="items" slot-scope="props"> 254 <template slot="items" slot-scope="props">
250 <td class="text-xs-center">{{ props.index + 1}}</td> 255 <td class="text-xs-center">{{ props.index + 1}}</td>
251 <!-- <td id="td" class="text-xs-center">
252 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
253 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
254 </span>
255 </td>-->
256 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 256 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
257 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 257 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
258 258
259 <td class="text-xs-center"> 259 <td class="text-xs-center">
260 <span> 260 <span>
261 <img 261 <img
262 style="cursor:pointer; width:25px; height:18px; " 262 style="cursor:pointer; width:25px; height:18px; "
263 class="mr-5" 263 class="mr-5"
264 @click="profile(props.item)" 264 @click="profile(props.item)"
265 src="/static/icon/eye1.png" 265 src="/static/icon/eye1.png"
266 /> 266 />
267 <img 267 <img
268 style="cursor:pointer; width:20px; height:18px; " 268 style="cursor:pointer; width:20px; height:18px; "
269 class="mr-5" 269 class="mr-5"
270 @click="editItem(props.item)" 270 @click="editItem(props.item)"
271 src="/static/icon/edit1.png" 271 src="/static/icon/edit1.png"
272 /> 272 />
273 <img 273 <img
274 style="cursor:pointer;width:20px; height:20px; " 274 style="cursor:pointer;width:20px; height:20px; "
275 class="mr-5" 275 class="mr-5"
276 @click="deleteItem(props.item)" 276 @click="deleteItem(props.item)"
277 src="/static/icon/delete1.png" 277 src="/static/icon/delete1.png"
278 /> 278 />
279 </span> 279 </span>
280 </td> 280 </td>
281 </template> 281 </template>
282 <v-alert 282 <v-alert
283 slot="no-results" 283 slot="no-results"
284 :value="true" 284 :value="true"
285 color="error" 285 color="error"
286 icon="warning" 286 icon="warning"
287 >Your search for "{{ search }}" found no results.</v-alert> 287 >Your search for "{{ search }}" found no results.</v-alert>
288 </v-data-table> 288 </v-data-table>
289 </v-tab-item> 289 </v-tab-item>
290 290
291 <!-- ****** ADD MULTIPLE NEWS ****** --> 291 <!-- ****** ADD Issue ****** -->
292 292
293 <v-tab-item> 293 <v-tab-item>
294 <v-container> 294 <v-container>
295 <v-snackbar 295 <v-snackbar
296 :timeout="timeout" 296 :timeout="timeout"
297 :top="y === 'top'" 297 :top="y === 'top'"
298 :right="x === 'right'" 298 :right="x === 'right'"
299 :vertical="mode === 'vertical'" 299 :vertical="mode === 'vertical'"
300 v-model="snackbar" 300 v-model="snackbar"
301 color="success" 301 :color="color"
302 >{{ text }}</v-snackbar> 302 >{{ text }}</v-snackbar>
303 <v-flex xs12 sm12 class="my-4"> 303 <v-flex xs12 sm12 class="my-4">
304 <v-card flat> 304 <v-card flat>
305 <v-form ref="form" v-model="valid" lazy-validation> 305 <v-form ref="form" v-model="valid" lazy-validation>
306 <v-container fluid> 306 <v-container fluid>
307 <!-- <v-layout>
308 <v-flex
309 xs12
310 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
311 >
312 <input
313 type="file"
314 style="display: none"
315 ref="image"
316 accept="image/*"
317 multiple
318 @change="onFilePicked"
319 />
320 <v-layout justify-center>
321 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
322 <img :src="file" height="160" width="160px;" />
323 </v-flex>
324 </v-layout>
325 <img
326 src="/static/icon/user.png"
327 v-if="files ==''"
328 height="140"
329 width="180px;"
330 />
331 </v-flex>
332 </v-layout>-->
333 <v-flex xs12> 307 <v-flex xs12>
334 <v-layout> 308 <v-layout>
335 <v-flex xs4 class="pt-4 subheading"> 309 <v-flex xs4 class="pt-4 subheading">
336 <label class="right">Library ID:</label> 310 <label class="right">Library ID:</label>
337 </v-flex> 311 </v-flex>
338 <v-flex xs4 class="ml-3"> 312 <v-flex xs4 class="ml-3">
339 <v-text-field 313 <v-text-field
340 v-model="addIssue.libraryID" 314 v-model="libraryID"
341 placeholder="fill your Library ID" 315 placeholder="fill your Library ID"
342 :rules="libraryIDRules" 316 :rules="libraryIDRules"
343 required 317 required
344 ></v-text-field> 318 ></v-text-field>
345 </v-flex> 319 </v-flex>
346 </v-layout> 320 </v-layout>
347 </v-flex> 321 </v-flex>
348 <v-flex xs12> 322 <v-flex xs12>
349 <v-layout> 323 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 324 <v-flex xs4 class="pt-4 subheading">
351 <label class="right">Book:</label> 325 <label class="right">Book:</label>
352 </v-flex> 326 </v-flex>
353 <v-flex xs4 class="ml-3"> 327 <v-flex xs4 class="ml-3">
354 <v-text-field 328 <v-select
355 placeholder="fill your Description" 329 label="Select Book Name"
356 :rules="bookRules" 330 :rules="bookRules"
357 v-model="addIssue.book" 331 :items="books"
332 item-text="name"
333 item-value="_id"
334 v-model="bookId"
335 @change="getParticularBookData(bookId)"
358 required 336 required
359 ></v-text-field> 337 ></v-select>
360 </v-flex> 338 </v-flex>
361 </v-layout> 339 </v-layout>
362 </v-flex> 340 </v-flex>
363 <v-flex xs12> 341 <v-flex xs12>
364 <v-layout> 342 <v-layout>
365 <v-flex xs4 class="pt-4 subheading"> 343 <v-flex xs4 class="pt-4 subheading">
366 <label class="right">Author:</label> 344 <label class="right">Author:</label>
367 </v-flex> 345 </v-flex>
368 <v-flex xs4 class="ml-3"> 346 <v-flex xs4 class="ml-3">
369 <v-text-field 347 <v-text-field
370 placeholder="fill your Author" 348 placeholder="fill your Author"
371 :rules="authorRules" 349 :rules="authorRules"
372 v-model="addIssue.author" 350 v-model="addIssue.author"
373 ></v-text-field> 351 ></v-text-field>
374 </v-flex> 352 </v-flex>
375 </v-layout> 353 </v-layout>
376 </v-flex> 354 </v-flex>
377 <v-flex xs12> 355 <v-flex xs12>
378 <v-layout> 356 <v-layout>
379 <v-flex xs4 class="pt-4 subheading"> 357 <v-flex xs4 class="pt-4 subheading">
380 <label class="right">Subject Code:</label> 358 <label class="right">Subject Code:</label>
381 </v-flex> 359 </v-flex>
382 <v-flex xs4 class="ml-3"> 360 <v-flex xs4 class="ml-3">
383 <v-text-field 361 <v-text-field
384 placeholder="fill your Subject Code" 362 placeholder="fill your Subject Code"
385 :rules="subjectCodeRules" 363 :rules="subjectCodeRules"
386 v-model="addIssue.subjectCode" 364 v-model="addIssue.subjectCode"
387 ></v-text-field> 365 ></v-text-field>
388 </v-flex> 366 </v-flex>
389 </v-layout> 367 </v-layout>
390 </v-flex> 368 </v-flex>
391 <v-flex xs12> 369 <v-flex xs12>
392 <v-layout> 370 <v-layout>
393 <v-flex xs4 class="pt-4 subheading"> 371 <v-flex xs4 class="pt-4 subheading">
394 <label class="right">Serial No:</label> 372 <label class="right">Serial No:</label>
395 </v-flex> 373 </v-flex>
396 <v-flex xs4 class="ml-3"> 374 <v-flex xs4 class="ml-3">
397 <v-text-field 375 <v-text-field
398 placeholder="fill your Serial No" 376 placeholder="fill your Serial No"
399 :rules="authorRules" 377 :rules="authorRules"
400 v-model="addIssue.serialNo" 378 v-model="serialNo"
401 ></v-text-field> 379 ></v-text-field>
402 </v-flex> 380 </v-flex>
403 </v-layout> 381 </v-layout>
404 </v-flex> 382 </v-flex>
405 <v-flex xs12> 383 <v-flex xs12>
406 <v-layout> 384 <v-layout>
407 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Serial No:</label>
387 </v-flex>
388 <v-flex xs4 class="ml-3">
389 <v-menu
390 ref="menu2"
391 :close-on-content-click="false"
392 v-model="menu2"
393 :nudge-right="40"
394 :return-value.sync="date"
395 lazy
396 transition="scale-transition"
397 offset-y
398 full-width
399 min-width="290px"
400 >
401 <v-text-field
402 slot="activator"
403 v-model="date"
404 label="Picker without buttons"
405 append-icon="event"
406 readonly
407 ></v-text-field>
408 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
409 </v-menu>
410 </v-flex>
411 </v-layout>
412 </v-flex>
413 <v-flex xs12>
414 <v-layout>
415 <v-flex xs4 class="pt-4 subheading">
408 <label class="right">Note:</label> 416 <label class="right">Note:</label>
409 </v-flex> 417 </v-flex>
410 <v-flex xs4 class="ml-3"> 418 <v-flex xs4 class="ml-3">
411 <v-text-field 419 <v-text-field
412 placeholder="fill your Note" 420 placeholder="fill your Note"
413 :rules="noteRules" 421 :rules="noteRules"
414 v-model="addIssue.note" 422 v-model="note"
415 ></v-text-field> 423 ></v-text-field>
416 </v-flex> 424 </v-flex>
417 </v-layout> 425 </v-layout>
418 </v-flex> 426 </v-flex>
419 <v-layout> 427 <v-layout>
420 <v-flex xs12 sm6 offset-sm3> 428 <v-flex xs12 sm6 offset-sm3>
421 <v-card-actions> 429 <v-card-actions>
422 <v-btn @click="clear" round dark>clear</v-btn> 430 <v-btn @click="clear" round dark>clear</v-btn>
423 <v-spacer></v-spacer> 431 <v-spacer></v-spacer>
424 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 432 <v-btn @click="submit" round dark :loading="loading" :disabled="disable">Add</v-btn>
425 </v-card-actions> 433 </v-card-actions>
426 </v-flex> 434 </v-flex>
427 </v-layout> 435 </v-layout>
428 </v-container> 436 </v-container>
429 </v-form> 437 </v-form>
430 </v-card> 438 </v-card>
431 </v-flex> 439 </v-flex>
432 </v-container> 440 </v-container>
433 </v-tab-item> 441 </v-tab-item>
434 </v-tabs> 442 </v-tabs>
435 <div class="loader" v-if="showLoader"> 443 <div class="loader" v-if="showLoader">
436 <v-progress-circular indeterminate color="white"></v-progress-circular> 444 <v-progress-circular indeterminate color="white"></v-progress-circular>
437 </div> 445 </div>
438 </v-app> 446 </v-app>
439 </template> 447 </template>
440 448
441 <script> 449 <script>
442 import http from "@/Services/http.js"; 450 import http from "@/Services/http.js";
443 import Util from "@/util"; 451 import Util from "@/util";
444 452
445 export default { 453 export default {
446 data: () => ({ 454 data: () => ({
447 snackbar: false, 455 snackbar: false,
456 date: null,
457 menu2: false,
458 color: "",
448 y: "top", 459 y: "top",
449 x: "right", 460 x: "right",
450 mode: "", 461 mode: "",
451 timeout: 3000, 462 timeout: 10000,
452 text: "", 463 text: "",
453 libraryId: "", 464 libraryId: "",
454 loading: false, 465 loading: false,
455 loadingSearch: false, 466 loadingSearch: false,
456 date: null, 467 date: null,
457 search: "", 468 search: "",
458 showLoader: false, 469 showLoader: false,
459 dialog: false, 470 dialog: false,
460 dialog1: false, 471 dialog1: false,
461 valid: true, 472 valid: true,
462 isActive: true, 473 isActive: true,
463 newActive: false, 474 newActive: false,
464 addclass: [], 475 addclass: [],
465 addSection: [], 476 addSection: [],
466 AddUsercredentials: {}, 477 AddUsercredentials: {},
467 pagination: { 478 pagination: {
468 rowsPerPage: 15 479 rowsPerPage: 15
469 }, 480 },
470 libraryIDRules: [v => !!v || " Library ID is required"], 481 libraryIDRules: [v => !!v || " Library ID is required"],
471 bookRules: [v => !!v || " book Name is required"], 482 bookRules: [v => !!v || " book Name is required"],
472 authorRules: [v => !!v || "Author Name is required"], 483 authorRules: [v => !!v || "Author Name is required"],
473 subjectCodeRules: [v => !!v || "Subject Code is required"], 484 subjectCodeRules: [v => !!v || "Subject Code is required"],
474 authorRules: [v => !!v || "Author is required"], 485 authorRules: [v => !!v || "Author is required"],
475 noteRules: [v => !!v || "Note is required"], 486 noteRules: [v => !!v || "Note is required"],
476 headers: [ 487 headers: [
477 { 488 {
478 align: "justify-center", 489 align: "justify-center",
479 text: "No", 490 text: "No",
480 sortable: false, 491 sortable: false,
481 value: "No" 492 value: "No"
482 }, 493 },
483 { text: "Image", vaue: "image", sortable: false, align: "center" }, 494 { text: "Image", vaue: "image", sortable: false, align: "center" },
484 { text: "Title", value: "title", sortable: false, align: "center" }, 495 { text: "Title", value: "title", sortable: false, align: "center" },
485 { 496 {
486 text: "Description", 497 text: "Description",
487 value: "description", 498 value: "description",
488 sortable: false, 499 sortable: false,
489 align: "center" 500 align: "center"
490 }, 501 },
491 { text: "Action", value: "", sortable: false, align: "center" } 502 { text: "Action", value: "", sortable: false, align: "center" }
492 ], 503 ],
493 desserts: [], 504 desserts: [],
494 addIssue: {}, 505 addIssue: {},
495 editedItem: {} 506 bookId: "",
507 libraryID: "",
508 serialNo: "",
509 note: "",
510 editedItem: {},
511 books: [],
512 token: "",
513 disable: false
496 }), 514 }),
497 methods: { 515 methods: {
498 getSections(_id) { 516 getSections(_id) {
499 console.log("_id", _id); 517 console.log("_id", _id);
500 var token = this.$store.state.token;
501 http() 518 http()
502 .get( 519 .get(
503 "/getSectionsList", 520 "/getSectionsList",
504 { params: { classId: _id } }, 521 { params: { classId: _id } },
505 { 522 {
506 headers: { Authorization: "Bearer " + token } 523 headers: { Authorization: "Bearer " + this.token }
507 } 524 }
508 ) 525 )
509 .then(response => { 526 .then(response => {
510 this.addSection = response.data.data; 527 this.addSection = response.data.data;
511 // console.log("getSectionsList=====>", this.addSection); 528 // console.log("getSectionsList=====>", this.addSection);
512 }) 529 })
513 .catch(err => { 530 .catch(err => {
514 console.log("err====>", err); 531 console.log("err====>", err);
515 // this.$router.replace({ path: '/' }); 532 // this.$router.replace({ path: '/' });
516 }); 533 });
517 }, 534 },
518 pickFile() { 535 pickFile() {
519 this.$refs.image.click(); 536 this.$refs.image.click();
520 }, 537 },
521 // onFilePicked(e) {
522 // // console.log(e)
523 // const files = e.target.files;
524 // /** fetch Image Name **/
525 // if (files[0] !== undefined) {
526 // this.imageName = files[0].name;
527 // if (this.imageName.lastIndexOf(".") <= 0) {
528 // return;
529 // }
530 // this.files = [];
531 // // console.log("files", this.files);
532 // /** Select many image and showing many image add to news card **/
533 // const test = Array.from(files).forEach((file, idx) => {
534 // const fr = new FileReader();
535 // const getResult = new Promise(resolve => {
536 // fr.onload = e => {
537 // this.files.push(
538 // // id: idx,
539 // e.target.result
540 // );
541 // };
542 // });
543 // fr.readAsDataURL(file);
544 // return getResult.then(file => {
545 // return file;
546 // });
547 // });
548 // const fr = new FileReader();
549 // fr.readAsDataURL(files[0]);
550 // fr.addEventListener("load", () => {
551 // this.imageFile = files; // this is an image file that can be sent to server...
552 // // console.log("uploadImage=======>", this.imageFile );
553 // });
554 // } else {
555 // this.imageName = "";
556 // this.imageFile = "";
557 // this.imageUrl = "";
558 // }
559 // },
560 searchLibrary() { 538 searchLibrary() {
561 this.showLoader = true; 539 this.showLoader = true;
562 this.loadingSearch = true; 540 this.loadingSearch = true;
563 var token = this.$store.state.token; 541 var token = this.$store.state.token;
564 http() 542 http()
565 .get( 543 .get(
566 "/getLibrary", 544 "/getLibrary",
567 { 545 {
568 params: { libraryId: this.libraryId } 546 params: { libraryId: this.libraryId }
569 }, 547 },
570 { 548 {
571 headers: { Authorization: "Bearer " + this.token } 549 headers: { Authorization: "Bearer " + this.token }
572 } 550 }
573 ) 551 )
574 .then(response => { 552 .then(response => {
575 // this.desserts = response.data.data; 553 // this.desserts = response.data.data;
576 this.showLoader = false; 554 this.showLoader = false;
577 this.loadingSearch = false; 555 this.loadingSearch = false;
578 556
579 // console.log("getIssueList=====>",this.desserts) 557 // console.log("getIssueList=====>",this.desserts)
580 }) 558 })
581 .catch(error => { 559 .catch(error => {
582 // console.log("err====>", err); 560 // console.log("err====>", err);
583 this.showLoader = false; 561 this.showLoader = false;
584 this.loadingSearch = false; 562 this.loadingSearch = false;
585 this.snackbar = true; 563 this.snackbar = true;
586 this.text = error.response.data.message; 564 this.text = error.response.data.message;
587 if (error.response.status === 401) { 565 if (error.response.status === 401) {
588 this.$router.replace({ path: "/" }); 566 this.$router.replace({ path: "/" });
589 this.$store.dispatch("setToken", null); 567 this.$store.dispatch("setToken", null);
590 this.$store.dispatch("Id", null); 568 this.$store.dispatch("Id", null);
591 } 569 }
592 }); 570 });
593 }, 571 },
594 editItem(item) { 572 editItem(item) {
595 this.editedIndex = this.desserts.indexOf(item); 573 this.editedIndex = this.desserts.indexOf(item);
596 this.editedItem = Object.assign({}, item); 574 this.editedItem = Object.assign({}, item);
597 this.dialog = true; 575 this.dialog = true;
598 }, 576 },
599 profile(item) { 577 profile(item) {
600 this.editedIndex = this.desserts.indexOf(item); 578 this.editedIndex = this.desserts.indexOf(item);
601 this.editedItem = Object.assign({}, item); 579 this.editedItem = Object.assign({}, item);
602 this.dialog1 = true; 580 this.dialog1 = true;
603 }, 581 },
604 deleteItem(item) { 582 deleteItem(item) {
605 let deleteIssue = { 583 let deleteIssue = {
606 issueId: item._id 584 issueId: item._id
607 }; 585 };
608 http() 586 http()
609 .delete( 587 .delete(
610 "/deleteIssue", 588 "/deleteIssue",
611 confirm("Are you sure you want to delete this?") && { 589 confirm("Are you sure you want to delete this?") && {
612 params: deleteIssue 590 params: deleteIssue
613 } 591 }
614 ) 592 )
615 .then(response => { 593 .then(response => {
616 // console.log("deleteIssue",deleteIssue) 594 // console.log("deleteIssue",deleteIssue)
617 if ((this.snackbar = true)) { 595 if ((this.snackbar = true)) {
618 this.text = "Successfully delete Existing Issue"; 596 this.text = "Successfully delete Existing Issue";
619 } 597 }
620 this.getIssueList(); 598 this.getIssueList();
621 }) 599 })
622 .catch(error => { 600 .catch(error => {
623 // console.log(error); 601 // console.log(error);
624 }); 602 });
625 }, 603 },
626 // deleteImage(issueId) {
627 // console.log(imageId, issueId);
628 // let deleteImages = {
629 // issueId: issueId,
630 // };
631 // http()
632 // .put("/deleteImages", deleteImages)
633 // .then(response => {
634 // console.log("deleteIssue", deleteImages);
635 // if ((this.snackbar = true)) {
636 // this.text = "Image deleted Successfully";
637 // }
638 // this.getIssueList();
639 // this.close();
640 // })
641 // .catch(error => {
642 // console.log(error);
643 // });
644 // },
645 activeTab(type) { 604 activeTab(type) {
646 switch (type) { 605 switch (type) {
647 case "existing": 606 case "existing":
648 this.newActive = false; 607 this.newActive = false;
649 this.isActive = true; 608 this.isActive = true;
650 break; 609 break;
651 610
652 default: 611 default:
653 this.newActive = true; 612 this.newActive = true;
654 this.isActive = false; 613 this.isActive = false;
655 break; 614 break;
656 } 615 }
657 }, 616 },
658 close() { 617 close() {
659 this.dialog = false; 618 this.dialog = false;
660 setTimeout(() => { 619 setTimeout(() => {
661 this.editedItem = Object.assign({}, this.defaultItem); 620 this.editedItem = Object.assign({}, this.defaultItem);
662 this.editedIndex = -1; 621 this.editedIndex = -1;
663 }, 300); 622 }, 300);
664 }, 623 },
665 close1() { 624 close1() {
666 this.dialog1 = false; 625 this.dialog1 = false;
667 }, 626 },
668 submit() { 627 submit() {
669 this.loading = true; 628 this.loading = true;
670 http() 629 // if (this.$refs.form.validate()){
671 .post("/createIssue") 630 // let createBook = {
672 .then(response => { 631 // bookId: this.bookId,
673 if ((this.snackbar = true)) { 632 // author: this.addIssue.author,
674 this.text = "New Issue added successfully"; 633 // subjectCode: this.addIssue.subjectCode,
675 } 634 // libraryId: this.libraryID,
676 this.getIssueList(); 635 // serialNumber: this.serialNo,
677 this.loading = false; 636 // note: this.note,
678 this.clear(); 637 // dueDate: this.date
679 }) 638 // };
680 .catch(error => { 639 // console.log("====================", createBook);
681 if ((this.snackbar = true)) { 640 // http()
682 this.text = error.response.data.message; 641 // .post("/createBookIssue", createBook)
683 } 642 // .then(response => {
684 }); 643 // this.snackbar = true;
644 // this.text = "New Issue added successfully";
645 // // this.getIssueList();
646 // this.color = "succses";
647 // this.loading = false;
648 // this.clear();
649 // })
650 // .catch(error => {
651 // if ((this.snackbar = true)) {
652 // this.text = error.response.data.message;