viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 0cb974fde1662962e56c8b25ba4517e3e54c76db

Authored by Amber Dev
1 parent bf63831beb
Exists in master and in 2 other branches amber-development, ui-design

made notes optional

Showing 5 changed files with 1 additions and 6 deletions   Show diff stats
src/pages/Account/expense.vue
Diff comments   View file @0cb974f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT EXPENSE ****** --> 3 <!-- ****** EDIT EXPENSE ****** -->
4 <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable> 4 <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Expense Profile</label> 8 <label class="title text-xs-center">Edit Expense Profile</label>
9 <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text style="height: 600px;"> 12 <v-card-text style="height: 600px;">
13 <v-layout> 13 <v-layout>
14 <v-flex 14 <v-flex
15 xs12 15 xs12
16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
17 > 17 >
18 <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl"> 18 <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl">
19 <img src="/static/icon/user.png" /> 19 <img src="/static/icon/user.png" />
20 </v-avatar> 20 </v-avatar>
21 <img 21 <img
22 :src="editedItem.fileUrl" 22 :src="editedItem.fileUrl"
23 v-else-if="editedItem.fileUrl && !imageUrl" 23 v-else-if="editedItem.fileUrl && !imageUrl"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="imageUrl" 27 v-if="imageUrl"
28 :src="imageUrl" 28 :src="imageUrl"
29 height="150" 29 height="150"
30 style="border-radius:50%; width:150px" 30 style="border-radius:50%; width:150px"
31 /> 31 />
32 <input 32 <input
33 type="file" 33 type="file"
34 style="display:none" 34 style="display:none"
35 ref="image" 35 ref="image"
36 accept="image/*" 36 accept="image/*"
37 @change="onFilePicked" 37 @change="onFilePicked"
38 /> 38 />
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 <v-layout wrap> 41 <v-layout wrap>
42 <v-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Name:</label> 45 <label class="right">Name:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs7 class="ml-3"> 47 <v-flex xs7 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.name" 49 v-model="editedItem.name"
50 placeholder="fill your full Name" 50 placeholder="fill your full Name"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 required 53 required
54 ></v-text-field> 54 ></v-text-field>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout wrap> 59 <v-layout wrap>
60 <v-flex xs12> 60 <v-flex xs12>
61 <v-layout> 61 <v-layout>
62 <v-flex xs4 class="pt-4 subheading"> 62 <v-flex xs4 class="pt-4 subheading">
63 <label class="right">Date:</label> 63 <label class="right">Date:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs7 class="ml-3"> 65 <v-flex xs7 class="ml-3">
66 <v-menu 66 <v-menu
67 ref="menu" 67 ref="menu"
68 :close-on-content-click="false" 68 :close-on-content-click="false"
69 v-model="menu3" 69 v-model="menu3"
70 :nudge-right="40" 70 :nudge-right="40"
71 lazy 71 lazy
72 transition="scale-transition" 72 transition="scale-transition"
73 offset-y 73 offset-y
74 full-width 74 full-width
75 min-width="290px" 75 min-width="290px"
76 > 76 >
77 <v-text-field 77 <v-text-field
78 slot="activator" 78 slot="activator"
79 v-model="editedItem.date" 79 v-model="editedItem.date"
80 placeholder="Select date" 80 placeholder="Select date"
81 ></v-text-field> 81 ></v-text-field>
82 <v-date-picker 82 <v-date-picker
83 ref="picker" 83 ref="picker"
84 v-model="editedItem.date" 84 v-model="editedItem.date"
85 @input="$refs.menu.save(editedItem.date)" 85 @input="$refs.menu.save(editedItem.date)"
86 ></v-date-picker> 86 ></v-date-picker>
87 </v-menu> 87 </v-menu>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-layout wrap> 91 <v-layout wrap>
92 <v-flex xs12 sm12> 92 <v-flex xs12 sm12>
93 <v-layout> 93 <v-layout>
94 <v-flex xs4 class="pt-4 subheading"> 94 <v-flex xs4 class="pt-4 subheading">
95 <label class="right">Amount:</label> 95 <label class="right">Amount:</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs7 class="ml-3"> 97 <v-flex xs7 class="ml-3">
98 <v-text-field v-model="editedItem.amount" required></v-text-field> 98 <v-text-field v-model="editedItem.amount" required></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-flex xs12> 103 <v-flex xs12>
104 <v-layout wrap> 104 <v-layout wrap>
105 <v-flex xs4 class="pt-4 subheading"> 105 <v-flex xs4 class="pt-4 subheading">
106 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 106 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
108 </v-flex> 108 </v-flex>
109 <v-flex xs7 class="ml-3"> 109 <v-flex xs7 class="ml-3">
110 <v-text-field 110 <v-text-field
111 label="Select Image" 111 label="Select Image"
112 @click="pickFile" 112 @click="pickFile"
113 v-model="imageName" 113 v-model="imageName"
114 append-icon="attach_file" 114 append-icon="attach_file"
115 ></v-text-field> 115 ></v-text-field>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 </v-flex> 118 </v-flex>
119 <v-flex xs12> 119 <v-flex xs12>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 class="pt-4 subheading"> 121 <v-flex xs4 class="pt-4 subheading">
122 <label class="right">Note:</label> 122 <label class="right">Note:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs7 class="ml-3"> 124 <v-flex xs7 class="ml-3">
125 <v-textarea 125 <v-textarea
126 name="input-7-1" 126 name="input-7-1"
127 v-model="editedItem.note" 127 v-model="editedItem.note"
128 placeholder="fill your Note" 128 placeholder="fill your Note"
129 type="text" 129 type="text"
130 :rules="noteRules" 130 :rules="noteRules"
131 multi-line 131 multi-line
132 required 132 required
133 ></v-textarea> 133 ></v-textarea>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 <v-layout> 138 <v-layout>
139 <v-flex xs12 sm12> 139 <v-flex xs12 sm12>
140 <v-card-actions> 140 <v-card-actions>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 142 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-card-text> 146 </v-card-text>
147 </v-card> 147 </v-card>
148 </v-dialog> 148 </v-dialog>
149 149
150 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> 150 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** -->
151 151
152 <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable> 152 <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable>
153 <v-card flat class="card-style pa-3" dark> 153 <v-card flat class="card-style pa-3" dark>
154 <v-layout> 154 <v-layout>
155 <v-flex xs12> 155 <v-flex xs12>
156 <label class="title text-xs-center">View Expense</label> 156 <label class="title text-xs-center">View Expense</label>
157 <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> 157 <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 <v-card-text> 160 <v-card-text>
161 <v-container grid-list-md> 161 <v-container grid-list-md>
162 <v-layout wrap> 162 <v-layout wrap>
163 <v-flex> 163 <v-flex>
164 <v-flex align-center justify-center layout text-xs-center> 164 <v-flex align-center justify-center layout text-xs-center>
165 <v-avatar size="160px"> 165 <v-avatar size="160px">
166 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> 166 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
167 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> 167 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
168 </v-avatar> 168 </v-avatar>
169 </v-flex> 169 </v-flex>
170 <v-layout> 170 <v-layout>
171 <v-flex xs5 sm6> 171 <v-flex xs5 sm6>
172 <h5 class="right my-1"> 172 <h5 class="right my-1">
173 <b>Name:</b> 173 <b>Name:</b>
174 </h5> 174 </h5>
175 </v-flex> 175 </v-flex>
176 <v-flex sm6 xs8> 176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.name }}</h5> 177 <h5 class="my-1">{{ editedItem.name }}</h5>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout> 180 <v-layout>
181 <v-flex xs5 sm6> 181 <v-flex xs5 sm6>
182 <h5 class="right my-1"> 182 <h5 class="right my-1">
183 <b>Amount:</b> 183 <b>Amount:</b>
184 </h5> 184 </h5>
185 </v-flex> 185 </v-flex>
186 <v-flex sm6 xs8> 186 <v-flex sm6 xs8>
187 <h5 class="my-1">{{ editedItem.amount }}</h5> 187 <h5 class="my-1">{{ editedItem.amount }}</h5>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 <v-layout> 190 <v-layout>
191 <v-flex xs5 sm6> 191 <v-flex xs5 sm6>
192 <h5 class="right my-1"> 192 <h5 class="right my-1">
193 <b>Date:</b> 193 <b>Date:</b>
194 </h5> 194 </h5>
195 </v-flex> 195 </v-flex>
196 <v-flex sm6 xs8> 196 <v-flex sm6 xs8>
197 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 197 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
198 </v-flex> 198 </v-flex>
199 </v-layout> 199 </v-layout>
200 <v-layout> 200 <v-layout>
201 <v-flex xs5 sm6> 201 <v-flex xs5 sm6>
202 <h5 class="right my-1"> 202 <h5 class="right my-1">
203 <b>Note:</b> 203 <b>Note:</b>
204 </h5> 204 </h5>
205 </v-flex> 205 </v-flex>
206 <v-flex sm6 xs8> 206 <v-flex sm6 xs8>
207 <h5 class="my-1">{{ editedItem.note }}</h5> 207 <h5 class="my-1">{{ editedItem.note }}</h5>
208 </v-flex> 208 </v-flex>
209 </v-layout> 209 </v-layout>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-container> 212 </v-container>
213 </v-card-text> 213 </v-card-text>
214 </v-card> 214 </v-card>
215 </v-dialog> 215 </v-dialog>
216 <!-- ****** EXPENSE TABLE ****** --> 216 <!-- ****** EXPENSE TABLE ****** -->
217 <v-toolbar color="transparent" flat> 217 <v-toolbar color="transparent" flat>
218 <v-btn 218 <v-btn
219 fab 219 fab
220 dark 220 dark
221 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 221 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
222 small 222 small
223 @click="addExpenseDialog = true" 223 @click="addExpenseDialog = true"
224 > 224 >
225 <v-icon dark>add</v-icon> 225 <v-icon dark>add</v-icon>
226 </v-btn> 226 </v-btn>
227 <v-btn 227 <v-btn
228 round 228 round
229 class="open-dialog-button hidden-sm-only hidden-xs-only" 229 class="open-dialog-button hidden-sm-only hidden-xs-only"
230 dark 230 dark
231 @click="addExpenseDialog = true" 231 @click="addExpenseDialog = true"
232 > 232 >
233 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense 233 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense
234 </v-btn> 234 </v-btn>
235 <v-spacer></v-spacer> 235 <v-spacer></v-spacer>
236 <v-card-title class="body-1" v-show="show"> 236 <v-card-title class="body-1" v-show="show">
237 <v-btn icon large flat @click="displaySearch"> 237 <v-btn icon large flat @click="displaySearch">
238 <v-avatar size="27"> 238 <v-avatar size="27">
239 <img src="/static/icon/search.png" alt="icon" /> 239 <img src="/static/icon/search.png" alt="icon" />
240 </v-avatar> 240 </v-avatar>
241 </v-btn> 241 </v-btn>
242 </v-card-title> 242 </v-card-title>
243 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 243 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
244 <v-layout> 244 <v-layout>
245 <v-text-field 245 <v-text-field
246 autofocus 246 autofocus
247 v-model="search" 247 v-model="search"
248 label="Search" 248 label="Search"
249 prepend-inner-icon="search" 249 prepend-inner-icon="search"
250 color="primary" 250 color="primary"
251 ></v-text-field> 251 ></v-text-field>
252 <v-icon @click="closeSearch" color="error">close</v-icon> 252 <v-icon @click="closeSearch" color="error">close</v-icon>
253 </v-layout> 253 </v-layout>
254 </v-flex> 254 </v-flex>
255 </v-toolbar> 255 </v-toolbar>
256 <v-data-table 256 <v-data-table
257 :headers="headers" 257 :headers="headers"
258 :items="expenseList" 258 :items="expenseList"
259 :pagination.sync="pagination" 259 :pagination.sync="pagination"
260 :search="search" 260 :search="search"
261 > 261 >
262 <template slot="items" slot-scope="props"> 262 <template slot="items" slot-scope="props">
263 <tr class="tr"> 263 <tr class="tr">
264 <td class="td td-row">{{ props.index + 1}}</td> 264 <td class="td td-row">{{ props.index + 1}}</td>
265 <td class="text-xs-center td td-row"> 265 <td class="text-xs-center td td-row">
266 <v-avatar> 266 <v-avatar>
267 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 267 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
268 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 268 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
269 </v-avatar> 269 </v-avatar>
270 </td> 270 </td>
271 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 271 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
272 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 272 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
273 <td class="text-xs-center td td-row">{{ props.item.user }}</td> 273 <td class="text-xs-center td td-row">{{ props.item.user }}</td>
274 <td class="text-xs-center td td-row">{{ props.item.amount }}</td> 274 <td class="text-xs-center td td-row">{{ props.item.amount }}</td>
275 <td class="text-xs-center td td-row">{{ props.item.note }}</td> 275 <td class="text-xs-center td td-row">{{ props.item.note }}</td>
276 <td class="text-xs-center td td-row"> 276 <td class="text-xs-center td td-row">
277 <span> 277 <span>
278 <v-tooltip top> 278 <v-tooltip top>
279 <img 279 <img
280 slot="activator" 280 slot="activator"
281 style="cursor:pointer; width:25px; height:25px; " 281 style="cursor:pointer; width:25px; height:25px; "
282 class="mr-3" 282 class="mr-3"
283 @click="profile(props.item)" 283 @click="profile(props.item)"
284 src="/static/icon/view.png" 284 src="/static/icon/view.png"
285 /> 285 />
286 <span>View</span> 286 <span>View</span>
287 </v-tooltip> 287 </v-tooltip>
288 <v-tooltip top> 288 <v-tooltip top>
289 <img 289 <img
290 slot="activator" 290 slot="activator"
291 style="cursor:pointer; width:20px; height:18px; " 291 style="cursor:pointer; width:20px; height:18px; "
292 class="mr-3" 292 class="mr-3"
293 @click="editItem(props.item)" 293 @click="editItem(props.item)"
294 src="/static/icon/edit.png" 294 src="/static/icon/edit.png"
295 /> 295 />
296 <span>Edit</span> 296 <span>Edit</span>
297 </v-tooltip> 297 </v-tooltip>
298 <v-tooltip top> 298 <v-tooltip top>
299 <img 299 <img
300 slot="activator" 300 slot="activator"
301 style="cursor:pointer; width:20px; height:20px; " 301 style="cursor:pointer; width:20px; height:20px; "
302 @click="deleteItem(props.item)" 302 @click="deleteItem(props.item)"
303 src="/static/icon/delete.png" 303 src="/static/icon/delete.png"
304 /> 304 />
305 <span>Delete</span> 305 <span>Delete</span>
306 </v-tooltip> 306 </v-tooltip>
307 </span> 307 </span>
308 </td> 308 </td>
309 </tr> 309 </tr>
310 </template> 310 </template>
311 <v-alert 311 <v-alert
312 slot="no-results" 312 slot="no-results"
313 :value="true" 313 :value="true"
314 color="error" 314 color="error"
315 icon="warning" 315 icon="warning"
316 >Your search for "{{ search }}" found no results.</v-alert> 316 >Your search for "{{ search }}" found no results.</v-alert>
317 </v-data-table> 317 </v-data-table>
318 318
319 <!-- ****** Add Expense Data ****** --> 319 <!-- ****** Add Expense Data ****** -->
320 <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog"> 320 <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog">
321 <v-card flat class="card-style pa-2" dark> 321 <v-card flat class="card-style pa-2" dark>
322 <v-layout> 322 <v-layout>
323 <v-flex xs12> 323 <v-flex xs12>
324 <label class="title text-xs-center">Add Expense</label> 324 <label class="title text-xs-center">Add Expense</label>
325 <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> 325 <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 <v-flex xs12 sm12> 328 <v-flex xs12 sm12>
329 <v-form ref="form" v-model="valid" lazy-validation> 329 <v-form ref="form" v-model="valid" lazy-validation>
330 <v-container fluid> 330 <v-container fluid>
331 <v-layout> 331 <v-layout>
332 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 332 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
333 <v-avatar size="80px"> 333 <v-avatar size="80px">
334 <img src="/static/icon/user.png" v-if="!imageUrl" /> 334 <img src="/static/icon/user.png" v-if="!imageUrl" />
335 </v-avatar> 335 </v-avatar>
336 <img 336 <img
337 :src="imageUrl" 337 :src="imageUrl"
338 height="150" 338 height="150"
339 v-if="imageUrl" 339 v-if="imageUrl"
340 style="border-radius:50%; width:150px" 340 style="border-radius:50%; width:150px"
341 /> 341 />
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 <v-layout> 344 <v-layout>
345 <v-flex xs12 sm12> 345 <v-flex xs12 sm12>
346 <v-layout> 346 <v-layout>
347 <v-flex xs4 class="pt-4 subheading"> 347 <v-flex xs4 class="pt-4 subheading">
348 <label class="right">Name:</label> 348 <label class="right">Name:</label>
349 </v-flex> 349 </v-flex>
350 <v-flex xs8 sm6 class="ml-3"> 350 <v-flex xs8 sm6 class="ml-3">
351 <v-text-field 351 <v-text-field
352 v-model="addExpense.name" 352 v-model="addExpense.name"
353 placeholder="fill your full Name" 353 placeholder="fill your full Name"
354 name="name" 354 name="name"
355 type="text" 355 type="text"
356 :rules="nameRules" 356 :rules="nameRules"
357 required 357 required
358 ></v-text-field> 358 ></v-text-field>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-layout> 363 <v-layout>
364 <v-flex xs12 sm12> 364 <v-flex xs12 sm12>
365 <v-layout> 365 <v-layout>
366 <v-flex xs4 class="pt-4 subheading"> 366 <v-flex xs4 class="pt-4 subheading">
367 <label class="right">Amount:</label> 367 <label class="right">Amount:</label>
368 </v-flex> 368 </v-flex>
369 <v-flex xs8 sm6 class="ml-3"> 369 <v-flex xs8 sm6 class="ml-3">
370 <v-text-field 370 <v-text-field
371 v-model="addExpense.amount" 371 v-model="addExpense.amount"
372 placeholder="fill your Amount" 372 placeholder="fill your Amount"
373 name="name" 373 name="name"
374 type="text" 374 type="text"
375 :rules="amountRules" 375 :rules="amountRules"
376 required 376 required
377 ></v-text-field> 377 ></v-text-field>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 <v-layout> 382 <v-layout>
383 <v-flex xs12 sm12> 383 <v-flex xs12 sm12>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Date</label> 386 <label class="right">Date</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm6 class="ml-3"> 388 <v-flex xs8 sm6 class="ml-3">
389 <v-menu 389 <v-menu
390 ref="menu1" 390 ref="menu1"
391 :close-on-content-click="false" 391 :close-on-content-click="false"
392 v-model="menu1" 392 v-model="menu1"
393 :nudge-right="40" 393 :nudge-right="40"
394 lazy 394 lazy
395 transition="scale-transition" 395 transition="scale-transition"
396 offset-y 396 offset-y
397 full-width 397 full-width
398 min-width="290px" 398 min-width="290px"
399 > 399 >
400 <v-text-field 400 <v-text-field
401 slot="activator" 401 slot="activator"
402 :rules="joinDateRules" 402 :rules="joinDateRules"
403 v-model="addExpense.date" 403 v-model="addExpense.date"
404 placeholder="Select date" 404 placeholder="Select date"
405 ></v-text-field> 405 ></v-text-field>
406 <v-date-picker 406 <v-date-picker
407 ref="picker" 407 ref="picker"
408 v-model="addExpense.date" 408 v-model="addExpense.date"
409 @input="$refs.menu1.save(addExpense.date)" 409 @input="$refs.menu1.save(addExpense.date)"
410 ></v-date-picker> 410 ></v-date-picker>
411 </v-menu> 411 </v-menu>
412 </v-flex> 412 </v-flex>
413 </v-layout> 413 </v-layout>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 <v-layout> 416 <v-layout>
417 <v-flex xs12 sm12> 417 <v-flex xs12 sm12>
418 <v-layout> 418 <v-layout>
419 <v-flex xs4 class="pt-4 subheading"> 419 <v-flex xs4 class="pt-4 subheading">
420 <label class="right">File:</label> 420 <label class="right">File:</label>
421 </v-flex> 421 </v-flex>
422 <v-flex xs8 sm6 class="ml-3"> 422 <v-flex xs8 sm6 class="ml-3">
423 <v-text-field 423 <v-text-field
424 label="Select file" 424 label="Select file"
425 @click="pickFile" 425 @click="pickFile"
426 v-model="imageName" 426 v-model="imageName"
427 append-icon="attach_file" 427 append-icon="attach_file"
428 ></v-text-field> 428 ></v-text-field>
429 <input 429 <input
430 type="file" 430 type="file"
431 style="display:none" 431 style="display:none"
432 ref="image" 432 ref="image"
433 accept="image/*" 433 accept="image/*"
434 @change="onFilePicked" 434 @change="onFilePicked"
435 /> 435 />
436 </v-flex> 436 </v-flex>
437 </v-layout> 437 </v-layout>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 <v-layout> 440 <v-layout>
441 <v-flex xs12 sm12> 441 <v-flex xs12 sm12>
442 <v-layout> 442 <v-layout>
443 <v-flex xs4 class="pt-4 subheading"> 443 <v-flex xs4 class="pt-4 subheading">
444 <label class="right">Note:</label> 444 <label class="right">Note:</label>
445 </v-flex> 445 </v-flex>
446 <v-flex xs8 sm6 class="ml-3"> 446 <v-flex xs8 sm6 class="ml-3">
447 <v-textarea 447 <v-textarea
448 name="input-7-1" 448 name="input-7-1"
449 v-model="addExpense.note" 449 v-model="addExpense.note"
450 placeholder="fill your Note" 450 placeholder="fill your Note"
451 type="text" 451 type="text"
452 :rules="noteRules"
453 multi-line 452 multi-line
454 required 453 required
455 ></v-textarea> 454 ></v-textarea>
456 </v-flex> 455 </v-flex>
457 </v-layout> 456 </v-layout>
458 </v-flex> 457 </v-flex>
459 </v-layout> 458 </v-layout>
460 <v-layout> 459 <v-layout>
461 <v-flex xs11> 460 <v-flex xs11>
462 <v-layout> 461 <v-layout>
463 <v-spacer></v-spacer> 462 <v-spacer></v-spacer>
464 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 463 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
465 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 464 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
466 </v-layout> 465 </v-layout>
467 </v-flex> 466 </v-flex>
468 </v-layout> 467 </v-layout>
469 </v-container> 468 </v-container>
470 </v-form> 469 </v-form>
471 </v-flex> 470 </v-flex>
472 </v-card> 471 </v-card>
473 </v-dialog> 472 </v-dialog>
474 <div class="loader" v-if="showLoader"> 473 <div class="loader" v-if="showLoader">
475 <v-progress-circular indeterminate color="white"></v-progress-circular> 474 <v-progress-circular indeterminate color="white"></v-progress-circular>
476 </div> 475 </div>
477 <v-snackbar 476 <v-snackbar
478 :timeout="timeout" 477 :timeout="timeout"
479 :top="y === 'top'" 478 :top="y === 'top'"
480 :right="x === 'right'" 479 :right="x === 'right'"
481 :vertical="mode === 'vertical'" 480 :vertical="mode === 'vertical'"
482 v-model="snackbar" 481 v-model="snackbar"
483 :color="color" 482 :color="color"
484 >{{ text }}</v-snackbar> 483 >{{ text }}</v-snackbar>
485 </v-container> 484 </v-container>
486 </template> 485 </template>
487 486
488 <script> 487 <script>
489 import http from "@/Services/http.js"; 488 import http from "@/Services/http.js";
490 import moment from "moment"; 489 import moment from "moment";
491 490
492 export default { 491 export default {
493 data: () => ({ 492 data: () => ({
494 component: "report-generate", 493 component: "report-generate",
495 snackbar: false, 494 snackbar: false,
496 y: "top", 495 y: "top",
497 x: "right", 496 x: "right",
498 mode: "", 497 mode: "",
499 timeout: 5000, 498 timeout: 5000,
500 text: "", 499 text: "",
501 color: "", 500 color: "",
502 showLoader: false, 501 showLoader: false,
503 loading: false, 502 loading: false,
504 date: null, 503 date: null,
505 search: "", 504 search: "",
506 menu: false, 505 menu: false,
507 menu1: false, 506 menu1: false,
508 menu2: false, 507 menu2: false,
509 menu3: false, 508 menu3: false,
510 editExpenseDialog: false, 509 editExpenseDialog: false,
511 viewExpenseDialog: false, 510 viewExpenseDialog: false,
512 valid: true, 511 valid: true,
513 show: true, 512 show: true,
514 addExpenseDialog: false, 513 addExpenseDialog: false,
515 showSearch: false, 514 showSearch: false,
516 pagination: { 515 pagination: {
517 rowsPerPage: 10, 516 rowsPerPage: 10,
518 }, 517 },
519 imageData: {}, 518 imageData: {},
520 token: "", 519 token: "",
521 imageName: "", 520 imageName: "",
522 imageUrl: "", 521 imageUrl: "",
523 imageFile: "", 522 imageFile: "",
524 nameRules: [(v) => !!v || " Full Name is required"], 523 nameRules: [(v) => !!v || " Full Name is required"],
525 amountRules: [(v) => !!v || "Amount is required"], 524 amountRules: [(v) => !!v || "Amount is required"],
526 noteRules: [(v) => !!v || "Note Name is required"], 525 noteRules: [(v) => !!v || "Note Name is required"],
527 joinDateRules: [(v) => !!v || "Date is required"], 526 joinDateRules: [(v) => !!v || "Date is required"],
528 errorMessages: "", 527 errorMessages: "",
529 headers: [ 528 headers: [
530 { 529 {
531 text: "No", 530 text: "No",
532 align: "center", 531 align: "center",
533 sortable: false, 532 sortable: false,
534 value: "No", 533 value: "No",
535 }, 534 },
536 { 535 {
537 text: "Profile Pic", 536 text: "Profile Pic",
538 value: "profilePicUrl", 537 value: "profilePicUrl",
539 sortable: false, 538 sortable: false,
540 align: "center", 539 align: "center",
541 }, 540 },
542 { text: "Name", value: "name", sortable: false, align: "center" }, 541 { text: "Name", value: "name", sortable: false, align: "center" },
543 { text: "Date", value: "date", sortable: false, align: "center" }, 542 { text: "Date", value: "date", sortable: false, align: "center" },
544 { text: "User", value: "user", sortable: false, align: "center" }, 543 { text: "User", value: "user", sortable: false, align: "center" },
545 { text: "Amount", value: "amount", sortable: false, align: "center" }, 544 { text: "Amount", value: "amount", sortable: false, align: "center" },
546 { text: "Note", value: "note", sortable: false, align: "center" }, 545 { text: "Note", value: "note", sortable: false, align: "center" },
547 { text: "Action", value: "", sortable: false, align: "center" }, 546 { text: "Action", value: "", sortable: false, align: "center" },
548 ], 547 ],
549 expenseList: [], 548 expenseList: [],
550 editedIndex: -1, 549 editedIndex: -1,
551 upload: "", 550 upload: "",
552 editedItem: { 551 editedItem: {
553 role: "TEACHER", 552 role: "TEACHER",
554 name: "", 553 name: "",
555 email: "", 554 email: "",
556 date: null, 555 date: null,
557 city: "", 556 city: "",
558 pincode: "", 557 pincode: "",
559 country: "", 558 country: "",
560 permanentAddress: "", 559 permanentAddress: "",
561 presentAddress: "", 560 presentAddress: "",
562 mobileNo: "", 561 mobileNo: "",
563 state: "", 562 state: "",
564 joinDate: null, 563 joinDate: null,
565 }, 564 },
566 addExpense: {}, 565 addExpense: {},
567 }), 566 }),
568 watch: { 567 watch: {
569 menu(val) { 568 menu(val) {
570 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 569 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
571 }, 570 },
572 menu1(val) { 571 menu1(val) {
573 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 572 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
574 }, 573 },
575 addExpenseDialog: function (val) { 574 addExpenseDialog: function (val) {
576 if (!val) { 575 if (!val) {
577 this.addExpense = []; 576 this.addExpense = [];
578 this.menu1 = false; 577 this.menu1 = false;
579 this.imageName = ""; 578 this.imageName = "";
580 this.imageFile = ""; 579 this.imageFile = "";
581 this.imageUrl = ""; 580 this.imageUrl = "";
582 } 581 }
583 }, 582 },
584 }, 583 },
585 methods: { 584 methods: {
586 save(date) { 585 save(date) {
587 this.$refs.menu.save(date); 586 this.$refs.menu.save(date);
588 }, 587 },
589 save(date) { 588 save(date) {
590 this.$refs.menu1.save(date); 589 this.$refs.menu1.save(date);
591 }, 590 },
592 pickFile() { 591 pickFile() {
593 this.$refs.image.click(); 592 this.$refs.image.click();
594 }, 593 },
595 dates: function (date) { 594 dates: function (date) {
596 return moment(date).format("MMMM DD, YYYY"); 595 return moment(date).format("MMMM DD, YYYY");
597 }, 596 },
598 onFilePicked(e) { 597 onFilePicked(e) {
599 // console.log(e) 598 // console.log(e)
600 const files = e.target.files; 599 const files = e.target.files;
601 this.upload = e.target.files[0]; 600 this.upload = e.target.files[0];
602 console.log("imageData-upload========>", this.upload); 601 console.log("imageData-upload========>", this.upload);
603 if (files[0] !== undefined) { 602 if (files[0] !== undefined) {
604 this.imageName = files[0].name; 603 this.imageName = files[0].name;
605 if (this.imageName.lastIndexOf(".") <= 0) { 604 if (this.imageName.lastIndexOf(".") <= 0) {
606 return; 605 return;
607 } 606 }
608 const fr = new FileReader(); 607 const fr = new FileReader();
609 fr.readAsDataURL(files[0]); 608 fr.readAsDataURL(files[0]);
610 fr.addEventListener("load", () => { 609 fr.addEventListener("load", () => {
611 this.imageUrl = fr.result; 610 this.imageUrl = fr.result;
612 this.imageFile = files[0]; // this is an image file that can be sent to server... 611 this.imageFile = files[0]; // this is an image file that can be sent to server...
613 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 612 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
614 // console.log("upload=======>", this.imageData.imageUrl); 613 // console.log("upload=======>", this.imageData.imageUrl);
615 console.log("imageFile", this.imageUrl); 614 console.log("imageFile", this.imageUrl);
616 }); 615 });
617 } else { 616 } else {
618 this.imageName = ""; 617 this.imageName = "";
619 this.imageFile = ""; 618 this.imageFile = "";
620 this.imageUrl = ""; 619 this.imageUrl = "";
621 } 620 }
622 }, 621 },
623 getExpenseList() { 622 getExpenseList() {
624 http() 623 http()
625 .get("/getExpensesList", { 624 .get("/getExpensesList", {
626 params: { schoolId: this.$store.state.schoolId }, 625 params: { schoolId: this.$store.state.schoolId },
627 headers: { Authorization: "Bearer " + this.token }, 626 headers: { Authorization: "Bearer " + this.token },
628 }) 627 })
629 .then((response) => { 628 .then((response) => {
630 this.expenseList = response.data.data; 629 this.expenseList = response.data.data;
631 this.showLoader = false; 630 this.showLoader = false;
632 // console.log("getTeacherList=====>",this.expenseList) 631 // console.log("getTeacherList=====>",this.expenseList)
633 }) 632 })
634 .catch((error) => { 633 .catch((error) => {
635 this.showLoader = false; 634 this.showLoader = false;
636 // if (error.response.status === 401) { 635 // if (error.response.status === 401) {
637 // this.$router.replace({ path: "/" }); 636 // this.$router.replace({ path: "/" });
638 // this.$store.dispatch("setToken", null); 637 // this.$store.dispatch("setToken", null);
639 // this.$store.dispatch("Id", null); 638 // this.$store.dispatch("Id", null);
640 // } 639 // }
641 }); 640 });
642 }, 641 },
643 editItem(item) { 642 editItem(item) {
644 this.editedIndex = this.expenseList.indexOf(item); 643 this.editedIndex = this.expenseList.indexOf(item);
645 this.editedItem = Object.assign({}, item); 644 this.editedItem = Object.assign({}, item);
646 this.editedItem.date = 645 this.editedItem.date =
647 this.editedItem.date != undefined 646 this.editedItem.date != undefined
648 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 647 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
649 : (this.editedItem.date = ""); 648 : (this.editedItem.date = "");
650 649
651 this.editExpenseDialog = true; 650 this.editExpenseDialog = true;
652 }, 651 },
653 profile(item) { 652 profile(item) {
654 this.editedIndex = this.expenseList.indexOf(item); 653 this.editedIndex = this.expenseList.indexOf(item);
655 this.editedItem = Object.assign({}, item); 654 this.editedItem = Object.assign({}, item);
656 this.viewExpenseDialog = true; 655 this.viewExpenseDialog = true;
657 }, 656 },
658 deleteItem(item) { 657 deleteItem(item) {
659 let deleteExpense = { 658 let deleteExpense = {
660 expenseId: item._id, 659 expenseId: item._id,
661 }; 660 };
662 // console.log("deleteUers",deleteTeachers) 661 // console.log("deleteUers",deleteTeachers)
663 http() 662 http()
664 .delete( 663 .delete(
665 "/deleteExpense", 664 "/deleteExpense",
666 confirm("Are you sure you want to delete this?") && { 665 confirm("Are you sure you want to delete this?") && {
667 params: deleteExpense, 666 params: deleteExpense,
668 } 667 }
669 ) 668 )
670 .then((response) => { 669 .then((response) => {
671 // console.log("deleteUers",deleteTeachers) 670 // console.log("deleteUers",deleteTeachers)
672 this.snackbar = true; 671 this.snackbar = true;
673 this.text = response.data.message; 672 this.text = response.data.message;
674 this.color = "green"; 673 this.color = "green";
675 this.getExpenseList(); 674 this.getExpenseList();
676 }) 675 })
677 .catch((error) => { 676 .catch((error) => {
678 this.snackbar = true; 677 this.snackbar = true;
679 this.text = error.response.data.message; 678 this.text = error.response.data.message;
680 this.color = "error"; 679 this.color = "error";
681 }); 680 });
682 }, 681 },
683 close() { 682 close() {
684 this.editExpenseDialog = false; 683 this.editExpenseDialog = false;
685 }, 684 },
686 closeAddExpenseModel() { 685 closeAddExpenseModel() {
687 this.addExpenseDialog = false; 686 this.addExpenseDialog = false;
688 this.addExpense = []; 687 this.addExpense = [];
689 this.menu1 = false; 688 this.menu1 = false;
690 this.imageName = ""; 689 this.imageName = "";
691 this.imageFile = ""; 690 this.imageFile = "";
692 this.imageUrl = ""; 691 this.imageUrl = "";
693 }, 692 },
694 submit() { 693 submit() {
695 if (this.$refs.form.validate()) { 694 if (this.$refs.form.validate()) {
696 if (this.imageUrl) { 695 if (this.imageUrl) {
697 var str = this.imageUrl; 696 var str = this.imageUrl;
698 const [baseUrl, imageUrl] = str.split(/,/); 697 const [baseUrl, imageUrl] = str.split(/,/);
699 this.addExpense.upload = imageUrl; 698 this.addExpense.upload = imageUrl;
700 } 699 }
701 this.loading = true; 700 this.loading = true;
702 // this.addExpense = this.$store.state.schoolId; 701 // this.addExpense = this.$store.state.schoolId;
703 http() 702 http()
704 .post("/createExpense", this.addExpense) 703 .post("/createExpense", this.addExpense)
705 .then((response) => { 704 .then((response) => {
706 this.getExpenseList(); 705 this.getExpenseList();
707 this.snackbar = true; 706 this.snackbar = true;
708 this.text = response.data.message; 707 this.text = response.data.message;
709 this.color = "green"; 708 this.color = "green";
710 this.clear(); 709 this.clear();
711 this.imageUrl = ""; 710 this.imageUrl = "";
712 this.loading = false; 711 this.loading = false;
713 this.addExpenseDialog = false; 712 this.addExpenseDialog = false;
714 }) 713 })
715 .catch((error) => { 714 .catch((error) => {
716 // console.log(error); 715 // console.log(error);
717 this.snackbar = true; 716 this.snackbar = true;
718 this.color = "error"; 717 this.color = "error";
719 this.text = error.response.data.message; 718 this.text = error.response.data.message;
720 this.loading = false; 719 this.loading = false;
721 }); 720 });
722 } 721 }
723 }, 722 },
724 clear() { 723 clear() {
725 this.$refs.form.reset(); 724 this.$refs.form.reset();
726 }, 725 },
727 save() { 726 save() {
728 this.loading = true; 727 this.loading = true;
729 this.editedItem.expenseId = this.editedItem._id; 728 this.editedItem.expenseId = this.editedItem._id;
730 if (this.imageUrl) { 729 if (this.imageUrl) {
731 var str = this.imageUrl; 730 var str = this.imageUrl;
732 const [baseUrl, imageUrl] = str.split(/,/); 731 const [baseUrl, imageUrl] = str.split(/,/);
733 this.editedItem.upload = imageUrl; 732 this.editedItem.upload = imageUrl;
734 } 733 }
735 http() 734 http()
736 .put("/updateExpense", this.editedItem) 735 .put("/updateExpense", this.editedItem)
737 .then((response) => { 736 .then((response) => {
738 this.snackbar = true; 737 this.snackbar = true;
739 this.text = response.data.message; 738 this.text = response.data.message;
740 this.color = "green"; 739 this.color = "green";
741 this.loading = false; 740 this.loading = false;
742 this.getExpenseList(); 741 this.getExpenseList();
743 this.close(); 742 this.close();
744 }) 743 })
745 .catch((error) => { 744 .catch((error) => {
746 this.snackbar = true; 745 this.snackbar = true;
747 this.text = error.response.data.message; 746 this.text = error.response.data.message;
748 this.color = "error"; 747 this.color = "error";
749 }); 748 });
750 }, 749 },
751 displaySearch() { 750 displaySearch() {
752 (this.show = false), (this.showSearch = true); 751 (this.show = false), (this.showSearch = true);
753 }, 752 },
754 closeSearch() { 753 closeSearch() {
755 this.showSearch = false; 754 this.showSearch = false;
756 this.show = true; 755 this.show = true;
757 this.search = ""; 756 this.search = "";
758 }, 757 },
759 }, 758 },
760 mounted() { 759 mounted() {
761 this.token = this.$store.state.token; 760 this.token = this.$store.state.token;
762 this.getExpenseList(); 761 this.getExpenseList();
763 }, 762 },
764 }; 763 };
765 </script> 764 </script>
src/pages/Account/income.vue
Diff comments   View file @0cb974f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Income DETAILS ****** --> 3 <!-- ****** EDIT Income DETAILS ****** -->
4 <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable> 4 <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Income</label> 8 <label class="title text-xs-center">Edit Income</label>
9 <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout> 13 <v-layout>
14 <v-flex 14 <v-flex
15 xs12 15 xs12
16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 16 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
17 > 17 >
18 <v-avatar size="160px"> 18 <v-avatar size="160px">
19 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> 19 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
20 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> 20 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
21 <img 21 <img
22 v-if="imageUrl" 22 v-if="imageUrl"
23 :src="imageUrl" 23 :src="imageUrl"
24 height="150" 24 height="150"
25 style="border-radius:50%; width:200px" 25 style="border-radius:50%; width:200px"
26 /> 26 />
27 </v-avatar> 27 </v-avatar>
28 <input 28 <input
29 type="file" 29 type="file"
30 style="display:none" 30 style="display:none"
31 ref="image" 31 ref="image"
32 accept="image/*" 32 accept="image/*"
33 @change="onFilePicked" 33 @change="onFilePicked"
34 /> 34 />
35 </v-flex> 35 </v-flex>
36 </v-layout> 36 </v-layout>
37 <v-layout wrap> 37 <v-layout wrap>
38 <v-flex xs12 sm12> 38 <v-flex xs12 sm12>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 class="pt-4 subheading"> 40 <v-flex xs4 class="pt-4 subheading">
41 <label class="right">Name:</label> 41 <label class="right">Name:</label>
42 </v-flex> 42 </v-flex>
43 <v-flex xs8 sm6 class="ml-3"> 43 <v-flex xs8 sm6 class="ml-3">
44 <v-text-field 44 <v-text-field
45 v-model="editedItem.name" 45 v-model="editedItem.name"
46 placeholder="fill your full Name" 46 placeholder="fill your full Name"
47 name="name" 47 name="name"
48 type="text" 48 type="text"
49 required 49 required
50 ></v-text-field> 50 ></v-text-field>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 <v-layout wrap> 55 <v-layout wrap>
56 <v-flex xs12> 56 <v-flex xs12>
57 <v-layout> 57 <v-layout>
58 <v-flex xs4 class="pt-4 subheading"> 58 <v-flex xs4 class="pt-4 subheading">
59 <label class="right">Date:</label> 59 <label class="right">Date:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs8 sm6 class="ml-3"> 61 <v-flex xs8 sm6 class="ml-3">
62 <v-menu 62 <v-menu
63 ref="menu" 63 ref="menu"
64 :close-on-content-click="false" 64 :close-on-content-click="false"
65 v-model="menu3" 65 v-model="menu3"
66 :nudge-right="40" 66 :nudge-right="40"
67 lazy 67 lazy
68 transition="scale-transition" 68 transition="scale-transition"
69 offset-y 69 offset-y
70 full-width 70 full-width
71 min-width="290px" 71 min-width="290px"
72 > 72 >
73 <v-text-field 73 <v-text-field
74 slot="activator" 74 slot="activator"
75 v-model="editedItem.date" 75 v-model="editedItem.date"
76 placeholder="Select date" 76 placeholder="Select date"
77 ></v-text-field> 77 ></v-text-field>
78 <v-date-picker 78 <v-date-picker
79 ref="picker" 79 ref="picker"
80 v-model="editedItem.date" 80 v-model="editedItem.date"
81 @input="$refs.menu.save(editedItem.date)" 81 @input="$refs.menu.save(editedItem.date)"
82 ></v-date-picker> 82 ></v-date-picker>
83 </v-menu> 83 </v-menu>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 <v-layout wrap> 87 <v-layout wrap>
88 <v-flex xs12 sm12> 88 <v-flex xs12 sm12>
89 <v-layout> 89 <v-layout>
90 <v-flex xs4 class="pt-4 subheading"> 90 <v-flex xs4 class="pt-4 subheading">
91 <label class="right">Amount:</label> 91 <label class="right">Amount:</label>
92 </v-flex> 92 </v-flex>
93 <v-flex xs8 sm6 class="ml-3"> 93 <v-flex xs8 sm6 class="ml-3">
94 <v-text-field v-model="editedItem.amount" required></v-text-field> 94 <v-text-field v-model="editedItem.amount" required></v-text-field>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 <v-flex xs12> 99 <v-flex xs12>
100 <v-layout> 100 <v-layout>
101 <v-flex xs4 class="pt-4 subheading"> 101 <v-flex xs4 class="pt-4 subheading">
102 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 102 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs8 sm6 class="ml-3"> 105 <v-flex xs8 sm6 class="ml-3">
106 <v-text-field 106 <v-text-field
107 label="Select Image" 107 label="Select Image"
108 @click="pickFile" 108 @click="pickFile"
109 v-model="imageName" 109 v-model="imageName"
110 append-icon="attach_file" 110 append-icon="attach_file"
111 ></v-text-field> 111 ></v-text-field>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 </v-flex> 114 </v-flex>
115 <v-flex xs12> 115 <v-flex xs12>
116 <v-layout> 116 <v-layout>
117 <v-flex xs4 class="pt-4 subheading"> 117 <v-flex xs4 class="pt-4 subheading">
118 <label class="right">Note:</label> 118 <label class="right">Note:</label>
119 </v-flex> 119 </v-flex>
120 <v-flex xs8 sm6 class="ml-3"> 120 <v-flex xs8 sm6 class="ml-3">
121 <v-textarea 121 <v-textarea
122 name="input-7-1" 122 name="input-7-1"
123 v-model="editedItem.note" 123 v-model="editedItem.note"
124 placeholder="fill your Note" 124 placeholder="fill your Note"
125 type="text" 125 type="text"
126 :rules="noteRules" 126 :rules="noteRules"
127 multi-line 127 multi-line
128 required 128 required
129 ></v-textarea> 129 ></v-textarea>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 <v-layout> 134 <v-layout>
135 <v-flex xs12> 135 <v-flex xs12>
136 <v-card-actions> 136 <v-card-actions>
137 <v-spacer></v-spacer> 137 <v-spacer></v-spacer>
138 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 138 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
139 <v-spacer></v-spacer> 139 <v-spacer></v-spacer>
140 </v-card-actions> 140 </v-card-actions>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-card-text> 143 </v-card-text>
144 </v-card> 144 </v-card>
145 </v-dialog> 145 </v-dialog>
146 146
147 <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> 147 <!-- ****** PROFILE VIEW INCOME DETAILS ****** -->
148 <v-dialog v-model="profileIncomeDialog" max-width="400px"> 148 <v-dialog v-model="profileIncomeDialog" max-width="400px">
149 <v-card flat class="card-style pa-3" dark> 149 <v-card flat class="card-style pa-3" dark>
150 <v-layout> 150 <v-layout>
151 <v-flex xs12> 151 <v-flex xs12>
152 <label class="title text-xs-center">View Income</label> 152 <label class="title text-xs-center">View Income</label>
153 <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> 153 <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 <v-card-text> 156 <v-card-text>
157 <v-container grid-list-md> 157 <v-container grid-list-md>
158 <v-layout wrap> 158 <v-layout wrap>
159 <v-flex> 159 <v-flex>
160 <v-flex align-center justify-center layout text-xs-center> 160 <v-flex align-center justify-center layout text-xs-center>
161 <v-avatar size="80px" v-if="!editedItem.fileUrl"> 161 <v-avatar size="80px" v-if="!editedItem.fileUrl">
162 <img src="/static/icon/user.png" /> 162 <img src="/static/icon/user.png" />
163 </v-avatar> 163 </v-avatar>
164 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> 164 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" />
165 </v-flex> 165 </v-flex>
166 <v-layout> 166 <v-layout>
167 <v-flex xs5 sm6> 167 <v-flex xs5 sm6>
168 <h5 class="right my-1"> 168 <h5 class="right my-1">
169 <b>Name:</b> 169 <b>Name:</b>
170 </h5> 170 </h5>
171 </v-flex> 171 </v-flex>
172 <v-flex sm6 xs8> 172 <v-flex sm6 xs8>
173 <h5 class="my-1">{{ editedItem.name }}</h5> 173 <h5 class="my-1">{{ editedItem.name }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 <v-layout> 176 <v-layout>
177 <v-flex xs5 sm6> 177 <v-flex xs5 sm6>
178 <h5 class="right my-1"> 178 <h5 class="right my-1">
179 <b>Amount:</b> 179 <b>Amount:</b>
180 </h5> 180 </h5>
181 </v-flex> 181 </v-flex>
182 <v-flex sm6 xs8> 182 <v-flex sm6 xs8>
183 <h5 class="my-1">{{ editedItem.amount }}</h5> 183 <h5 class="my-1">{{ editedItem.amount }}</h5>
184 </v-flex> 184 </v-flex>
185 </v-layout> 185 </v-layout>
186 <v-layout> 186 <v-layout>
187 <v-flex xs5 sm6> 187 <v-flex xs5 sm6>
188 <h5 class="right my-1"> 188 <h5 class="right my-1">
189 <b>Date:</b> 189 <b>Date:</b>
190 </h5> 190 </h5>
191 </v-flex> 191 </v-flex>
192 <v-flex sm6 xs8> 192 <v-flex sm6 xs8>
193 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 193 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 <v-layout> 196 <v-layout>
197 <v-flex xs5 sm6> 197 <v-flex xs5 sm6>
198 <h5 class="right my-1"> 198 <h5 class="right my-1">
199 <b>Note:</b> 199 <b>Note:</b>
200 </h5> 200 </h5>
201 </v-flex> 201 </v-flex>
202 <v-flex sm6 xs8> 202 <v-flex sm6 xs8>
203 <h5 class="my-1">{{ editedItem.note }}</h5> 203 <h5 class="my-1">{{ editedItem.note }}</h5>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 </v-container> 208 </v-container>
209 </v-card-text> 209 </v-card-text>
210 </v-card> 210 </v-card>
211 </v-dialog> 211 </v-dialog>
212 <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> 212 <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
213 213
214 <v-toolbar color="transparent" flat> 214 <v-toolbar color="transparent" flat>
215 <v-btn 215 <v-btn
216 fab 216 fab
217 dark 217 dark
218 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 218 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
219 small 219 small
220 @click="addIncomeDialog = true" 220 @click="addIncomeDialog = true"
221 > 221 >
222 <v-icon dark>add</v-icon> 222 <v-icon dark>add</v-icon>
223 </v-btn> 223 </v-btn>
224 <v-btn 224 <v-btn
225 round 225 round
226 class="open-dialog-button hidden-sm-only hidden-xs-only" 226 class="open-dialog-button hidden-sm-only hidden-xs-only"
227 dark 227 dark
228 @click="addIncomeDialog = true" 228 @click="addIncomeDialog = true"
229 > 229 >
230 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income 230 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income
231 </v-btn> 231 </v-btn>
232 <v-spacer></v-spacer> 232 <v-spacer></v-spacer>
233 <v-card-title class="body-1" v-show="show"> 233 <v-card-title class="body-1" v-show="show">
234 <v-btn icon large flat @click="displaySearch"> 234 <v-btn icon large flat @click="displaySearch">
235 <v-avatar size="27"> 235 <v-avatar size="27">
236 <img src="/static/icon/search.png" alt="icon" /> 236 <img src="/static/icon/search.png" alt="icon" />
237 </v-avatar> 237 </v-avatar>
238 </v-btn> 238 </v-btn>
239 </v-card-title> 239 </v-card-title>
240 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 240 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
241 <v-layout> 241 <v-layout>
242 <v-text-field 242 <v-text-field
243 autofocus 243 autofocus
244 v-model="search" 244 v-model="search"
245 label="Search" 245 label="Search"
246 prepend-inner-icon="search" 246 prepend-inner-icon="search"
247 color="primary" 247 color="primary"
248 ></v-text-field> 248 ></v-text-field>
249 <v-icon @click="closeSearch" color="error">close</v-icon> 249 <v-icon @click="closeSearch" color="error">close</v-icon>
250 </v-layout> 250 </v-layout>
251 </v-flex> 251 </v-flex>
252 </v-toolbar> 252 </v-toolbar>
253 <v-data-table 253 <v-data-table
254 :headers="headers" 254 :headers="headers"
255 :items="incomeList" 255 :items="incomeList"
256 :pagination.sync="pagination" 256 :pagination.sync="pagination"
257 :search="search" 257 :search="search"
258 > 258 >
259 <template slot="items" slot-scope="props"> 259 <template slot="items" slot-scope="props">
260 <tr class="tr"> 260 <tr class="tr">
261 <td class="text-xs-center td td-row">{{ props.index + 1}}</td> 261 <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
262 <td class="text-xs-center td td-row"> 262 <td class="text-xs-center td td-row">
263 <v-avatar class="40"> 263 <v-avatar class="40">
264 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 264 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
265 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 265 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
266 </v-avatar> 266 </v-avatar>
267 </td> 267 </td>
268 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 268 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
269 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 269 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
270 <td class="text-xs-center td td-row">{{ props.item.user }}</td> 270 <td class="text-xs-center td td-row">{{ props.item.user }}</td>
271 <td class="text-xs-center td td-row">{{ props.item.amount }}</td> 271 <td class="text-xs-center td td-row">{{ props.item.amount }}</td>
272 <td class="text-xs-center td td-row">{{ props.item.note }}</td> 272 <td class="text-xs-center td td-row">{{ props.item.note }}</td>
273 <td class="text-xs-center td td-row"> 273 <td class="text-xs-center td td-row">
274 <span> 274 <span>
275 <v-tooltip top> 275 <v-tooltip top>
276 <img 276 <img
277 slot="activator" 277 slot="activator"
278 style="cursor:pointer; width:25px; height:25px; " 278 style="cursor:pointer; width:25px; height:25px; "
279 class="mr-3" 279 class="mr-3"
280 @click="profile(props.item)" 280 @click="profile(props.item)"
281 src="/static/icon/view.png" 281 src="/static/icon/view.png"
282 /> 282 />
283 <span>View</span> 283 <span>View</span>
284 </v-tooltip> 284 </v-tooltip>
285 <v-tooltip top> 285 <v-tooltip top>
286 <img 286 <img
287 slot="activator" 287 slot="activator"
288 style="cursor:pointer; width:20px; height:18px; " 288 style="cursor:pointer; width:20px; height:18px; "
289 class="mr-3" 289 class="mr-3"
290 @click="editItem(props.item)" 290 @click="editItem(props.item)"
291 src="/static/icon/edit.png" 291 src="/static/icon/edit.png"
292 /> 292 />
293 <span>Edit</span> 293 <span>Edit</span>
294 </v-tooltip> 294 </v-tooltip>
295 <v-tooltip top> 295 <v-tooltip top>
296 <img 296 <img
297 slot="activator" 297 slot="activator"
298 style="cursor:pointer; width:20px; height:20px; " 298 style="cursor:pointer; width:20px; height:20px; "
299 @click="deleteItem(props.item)" 299 @click="deleteItem(props.item)"
300 src="/static/icon/delete.png" 300 src="/static/icon/delete.png"
301 /> 301 />
302 <span>Delete</span> 302 <span>Delete</span>
303 </v-tooltip> 303 </v-tooltip>
304 </span> 304 </span>
305 </td> 305 </td>
306 </tr> 306 </tr>
307 </template> 307 </template>
308 <v-alert 308 <v-alert
309 slot="no-results" 309 slot="no-results"
310 :value="true" 310 :value="true"
311 color="error" 311 color="error"
312 icon="warning" 312 icon="warning"
313 >Your search for "{{ search }}" found no results.</v-alert> 313 >Your search for "{{ search }}" found no results.</v-alert>
314 </v-data-table> 314 </v-data-table>
315 315
316 <!-- ****** Add Income Data****** --> 316 <!-- ****** Add Income Data****** -->
317 <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog"> 317 <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog">
318 <v-card flat class="card-style pa-2" dark> 318 <v-card flat class="card-style pa-2" dark>
319 <v-layout> 319 <v-layout>
320 <v-flex xs12> 320 <v-flex xs12>
321 <label class="title text-xs-center">Add Income</label> 321 <label class="title text-xs-center">Add Income</label>
322 <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> 322 <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon>
323 </v-flex> 323 </v-flex>
324 </v-layout> 324 </v-layout>
325 <v-form ref="form" v-model="valid" lazy-validation> 325 <v-form ref="form" v-model="valid" lazy-validation>
326 <v-container fluid> 326 <v-container fluid>
327 <v-layout> 327 <v-layout>
328 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 328 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
329 <v-avatar size="80px"> 329 <v-avatar size="80px">
330 <img src="/static/icon/user.png" v-if="!imageUrl" /> 330 <img src="/static/icon/user.png" v-if="!imageUrl" />
331 </v-avatar> 331 </v-avatar>
332 <img 332 <img
333 :src="imageUrl" 333 :src="imageUrl"
334 height="150" 334 height="150"
335 v-if="imageUrl" 335 v-if="imageUrl"
336 style="border-radius:50%; width:200px" 336 style="border-radius:50%; width:200px"
337 /> 337 />
338 </v-flex> 338 </v-flex>
339 </v-layout> 339 </v-layout>
340 <v-layout> 340 <v-layout>
341 <v-flex xs12 sm12> 341 <v-flex xs12 sm12>
342 <v-layout> 342 <v-layout>
343 <v-flex xs4 class="pt-4 subheading"> 343 <v-flex xs4 class="pt-4 subheading">
344 <label class="right">Name:</label> 344 <label class="right">Name:</label>
345 </v-flex> 345 </v-flex>
346 <v-flex xs8 sm6 class="ml-3"> 346 <v-flex xs8 sm6 class="ml-3">
347 <v-text-field 347 <v-text-field
348 v-model="addIncome.name" 348 v-model="addIncome.name"
349 placeholder="fill your full Name" 349 placeholder="fill your full Name"
350 name="name" 350 name="name"
351 type="text" 351 type="text"
352 :rules="nameRules" 352 :rules="nameRules"
353 required 353 required
354 ></v-text-field> 354 ></v-text-field>
355 </v-flex> 355 </v-flex>
356 </v-layout> 356 </v-layout>
357 </v-flex> 357 </v-flex>
358 </v-layout> 358 </v-layout>
359 <v-layout> 359 <v-layout>
360 <v-flex xs12 sm12> 360 <v-flex xs12 sm12>
361 <v-layout> 361 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Amount:</label> 363 <label class="right">Amount:</label>
364 </v-flex> 364 </v-flex>
365 <v-flex xs8 sm6 class="ml-3"> 365 <v-flex xs8 sm6 class="ml-3">
366 <v-text-field 366 <v-text-field
367 v-model="addIncome.amount" 367 v-model="addIncome.amount"
368 placeholder="fill your Amount" 368 placeholder="fill your Amount"
369 name="name" 369 name="name"
370 type="text" 370 type="text"
371 :rules="amountRules" 371 :rules="amountRules"
372 required 372 required
373 ></v-text-field> 373 ></v-text-field>
374 </v-flex> 374 </v-flex>
375 </v-layout> 375 </v-layout>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 <v-layout> 378 <v-layout>
379 <v-flex xs12 sm12> 379 <v-flex xs12 sm12>
380 <v-layout> 380 <v-layout>
381 <v-flex xs4 class="pt-4 subheading"> 381 <v-flex xs4 class="pt-4 subheading">
382 <label class="right">Date</label> 382 <label class="right">Date</label>
383 </v-flex> 383 </v-flex>
384 <v-flex xs8 sm6 class="ml-3"> 384 <v-flex xs8 sm6 class="ml-3">
385 <v-menu 385 <v-menu
386 ref="menu1" 386 ref="menu1"
387 :close-on-content-click="false" 387 :close-on-content-click="false"
388 v-model="menu1" 388 v-model="menu1"
389 :nudge-right="40" 389 :nudge-right="40"
390 lazy 390 lazy
391 transition="scale-transition" 391 transition="scale-transition"
392 offset-y 392 offset-y
393 full-width 393 full-width
394 min-width="290px" 394 min-width="290px"
395 > 395 >
396 <v-text-field 396 <v-text-field
397 slot="activator" 397 slot="activator"
398 :rules="joinDateRules" 398 :rules="joinDateRules"
399 v-model="addIncome.date" 399 v-model="addIncome.date"
400 placeholder="Select date" 400 placeholder="Select date"
401 ></v-text-field> 401 ></v-text-field>
402 <v-date-picker 402 <v-date-picker
403 ref="picker" 403 ref="picker"
404 v-model="addIncome.date" 404 v-model="addIncome.date"
405 @input="$refs.menu1.save(addIncome.date)" 405 @input="$refs.menu1.save(addIncome.date)"
406 ></v-date-picker> 406 ></v-date-picker>
407 </v-menu> 407 </v-menu>
408 </v-flex> 408 </v-flex>
409 </v-layout> 409 </v-layout>
410 </v-flex> 410 </v-flex>
411 </v-layout> 411 </v-layout>
412 <v-layout> 412 <v-layout>
413 <v-flex xs12 sm12> 413 <v-flex xs12 sm12>
414 <v-layout> 414 <v-layout>
415 <v-flex xs4 class="pt-4 subheading"> 415 <v-flex xs4 class="pt-4 subheading">
416 <label class="right">File:</label> 416 <label class="right">File:</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs8 sm6 class="ml-3"> 418 <v-flex xs8 sm6 class="ml-3">
419 <v-text-field 419 <v-text-field
420 label="Select file" 420 label="Select file"
421 @click="pickFile" 421 @click="pickFile"
422 v-model="imageName" 422 v-model="imageName"
423 append-icon="attach_file" 423 append-icon="attach_file"
424 ></v-text-field> 424 ></v-text-field>
425 <input 425 <input
426 type="file" 426 type="file"
427 style="display:none" 427 style="display:none"
428 ref="image" 428 ref="image"
429 accept="image/*" 429 accept="image/*"
430 @change="onFilePicked" 430 @change="onFilePicked"
431 /> 431 />
432 </v-flex> 432 </v-flex>
433 </v-layout> 433 </v-layout>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs12 sm12> 437 <v-flex xs12 sm12>
438 <v-layout> 438 <v-layout>
439 <v-flex xs4 class="pt-4 subheading"> 439 <v-flex xs4 class="pt-4 subheading">
440 <label class="right">Note:</label> 440 <label class="right">Note:</label>
441 </v-flex> 441 </v-flex>
442 <v-flex xs8 sm6 class="ml-3"> 442 <v-flex xs8 sm6 class="ml-3">
443 <v-textarea 443 <v-textarea
444 name="input-7-1" 444 name="input-7-1"
445 v-model="addIncome.note" 445 v-model="addIncome.note"
446 placeholder="fill your Note" 446 placeholder="fill your Note"
447 type="text" 447 type="text"
448 :rules="noteRules"
449 multi-line 448 multi-line
450 required 449 required
451 ></v-textarea> 450 ></v-textarea>
452 </v-flex> 451 </v-flex>
453 </v-layout> 452 </v-layout>
454 </v-flex> 453 </v-flex>
455 </v-layout> 454 </v-layout>
456 <v-layout> 455 <v-layout>
457 <v-flex xs12 sm11> 456 <v-flex xs12 sm11>
458 <v-layout> 457 <v-layout>
459 <v-spacer></v-spacer> 458 <v-spacer></v-spacer>
460 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 459 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
461 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 460 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
462 </v-layout> 461 </v-layout>
463 </v-flex> 462 </v-flex>
464 </v-layout> 463 </v-layout>
465 </v-container> 464 </v-container>
466 </v-form> 465 </v-form>
467 </v-card> 466 </v-card>
468 </v-dialog> 467 </v-dialog>
469 <div class="loader" v-if="showLoader"> 468 <div class="loader" v-if="showLoader">
470 <v-progress-circular indeterminate color="white"></v-progress-circular> 469 <v-progress-circular indeterminate color="white"></v-progress-circular>
471 </div> 470 </div>
472 </v-container> 471 </v-container>
473 </template> 472 </template>
474 473
475 <script> 474 <script>
476 import http from "@/Services/http.js"; 475 import http from "@/Services/http.js";
477 import Util from "@/util"; 476 import Util from "@/util";
478 import moment from "moment"; 477 import moment from "moment";
479 478
480 export default { 479 export default {
481 data: () => ({ 480 data: () => ({
482 component: "report-generate", 481 component: "report-generate",
483 snackbar: false, 482 snackbar: false,
484 y: "top", 483 y: "top",
485 x: "right", 484 x: "right",
486 mode: "", 485 mode: "",
487 timeout: 3000, 486 timeout: 3000,
488 text: "", 487 text: "",
489 show: true, 488 show: true,
490 showSearch: false, 489 showSearch: false,
491 showLoader: false, 490 showLoader: false,
492 loading: false, 491 loading: false,
493 date: null, 492 date: null,
494 search: "", 493 search: "",
495 addIncomeDialog: false, 494 addIncomeDialog: false,
496 menu: false, 495 menu: false,
497 menu1: false, 496 menu1: false,
498 menu2: false, 497 menu2: false,
499 menu3: false, 498 menu3: false,
500 editIncomeDialog: false, 499 editIncomeDialog: false,
501 profileIncomeDialog: false, 500 profileIncomeDialog: false,
502 valid: true, 501 valid: true,
503 pagination: { 502 pagination: {
504 rowsPerPage: 10, 503 rowsPerPage: 10,
505 }, 504 },
506 imageData: {}, 505 imageData: {},
507 imageName: "", 506 imageName: "",
508 imageUrl: "", 507 imageUrl: "",
509 imageFile: "", 508 imageFile: "",
510 nameRules: [(v) => !!v || " Full Name is required"], 509 nameRules: [(v) => !!v || " Full Name is required"],
511 amountRules: [(v) => !!v || "Amount is required"], 510 amountRules: [(v) => !!v || "Amount is required"],
512 noteRules: [(v) => !!v || "Note Name is required"], 511 noteRules: [(v) => !!v || "Note Name is required"],
513 joinDateRules: [(v) => !!v || "Date is required"], 512 joinDateRules: [(v) => !!v || "Date is required"],
514 errorMessages: "", 513 errorMessages: "",
515 headers: [ 514 headers: [
516 { 515 {
517 text: "No", 516 text: "No",
518 align: "", 517 align: "",
519 sortable: false, 518 sortable: false,
520 value: "No", 519 value: "No",
521 }, 520 },
522 { 521 {
523 text: "Profile Pic", 522 text: "Profile Pic",
524 value: "profilePicUrl", 523 value: "profilePicUrl",
525 sortable: false, 524 sortable: false,
526 align: "center", 525 align: "center",
527 }, 526 },
528 { text: "Name", value: "name", sortable: false, align: "center" }, 527 { text: "Name", value: "name", sortable: false, align: "center" },
529 { text: "Date", value: "date", sortable: false, align: "center" }, 528 { text: "Date", value: "date", sortable: false, align: "center" },
530 { text: "User", value: "user", sortable: false, align: "center" }, 529 { text: "User", value: "user", sortable: false, align: "center" },
531 { text: "Amount", value: "amount", sortable: false, align: "center" }, 530 { text: "Amount", value: "amount", sortable: false, align: "center" },
532 { text: "Note", value: "note", sortable: false, align: "center" }, 531 { text: "Note", value: "note", sortable: false, align: "center" },
533 { text: "Action", value: "", sortable: false, align: "center" }, 532 { text: "Action", value: "", sortable: false, align: "center" },
534 ], 533 ],
535 incomeList: [], 534 incomeList: [],
536 editedIndex: -1, 535 editedIndex: -1,
537 upload: "", 536 upload: "",
538 editedItem: {}, 537 editedItem: {},
539 addIncome: {}, 538 addIncome: {},
540 }), 539 }),
541 watch: { 540 watch: {
542 menu(val) { 541 menu(val) {
543 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 542 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
544 }, 543 },
545 menu1(val) { 544 menu1(val) {
546 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 545 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
547 }, 546 },
548 addIncomeDialog: function (val) { 547 addIncomeDialog: function (val) {
549 if (!val) { 548 if (!val) {
550 this.addIncome = []; 549 this.addIncome = [];
551 this.menu1 = false; 550 this.menu1 = false;
552 this.imageName = ""; 551 this.imageName = "";
553 this.imageUrl = ""; 552 this.imageUrl = "";
554 this.imageFile = ""; 553 this.imageFile = "";
555 } 554 }
556 }, 555 },
557 }, 556 },
558 methods: { 557 methods: {
559 save(date) { 558 save(date) {
560 this.$refs.menu.save(date); 559 this.$refs.menu.save(date);
561 }, 560 },
562 save(date) { 561 save(date) {
563 this.$refs.menu1.save(date); 562 this.$refs.menu1.save(date);
564 }, 563 },
565 pickFile() { 564 pickFile() {
566 this.$refs.image.click(); 565 this.$refs.image.click();
567 }, 566 },
568 onFilePicked(e) { 567 onFilePicked(e) {
569 // console.log(e) 568 // console.log(e)
570 const files = e.target.files; 569 const files = e.target.files;
571 this.upload = e.target.files[0]; 570 this.upload = e.target.files[0];
572 console.log("imageData-upload========>", this.upload); 571 console.log("imageData-upload========>", this.upload);
573 if (files[0] !== undefined) { 572 if (files[0] !== undefined) {
574 this.imageName = files[0].name; 573 this.imageName = files[0].name;
575 if (this.imageName.lastIndexOf(".") <= 0) { 574 if (this.imageName.lastIndexOf(".") <= 0) {
576 return; 575 return;
577 } 576 }
578 const fr = new FileReader(); 577 const fr = new FileReader();
579 fr.readAsDataURL(files[0]); 578 fr.readAsDataURL(files[0]);
580 fr.addEventListener("load", () => { 579 fr.addEventListener("load", () => {
581 this.imageUrl = fr.result; 580 this.imageUrl = fr.result;
582 this.imageFile = files[0]; // this is an image file that can be sent to server... 581 this.imageFile = files[0]; // this is an image file that can be sent to server...
583 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 582 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
584 // console.log("upload=======>", this.imageData.imageUrl); 583 // console.log("upload=======>", this.imageData.imageUrl);
585 console.log("imageFile", this.imageUrl); 584 console.log("imageFile", this.imageUrl);
586 }); 585 });
587 } else { 586 } else {
588 this.imageName = ""; 587 this.imageName = "";
589 this.imageFile = ""; 588 this.imageFile = "";
590 this.imageUrl = ""; 589 this.imageUrl = "";
591 } 590 }
592 }, 591 },
593 dates: function (date) { 592 dates: function (date) {
594 return moment(date).format("MMMM DD, YYYY"); 593 return moment(date).format("MMMM DD, YYYY");
595 }, 594 },
596 getIncomeList() { 595 getIncomeList() {
597 this.showLoader = true; 596 this.showLoader = true;
598 var token = this.$store.state.token; 597 var token = this.$store.state.token;
599 http() 598 http()
600 .get("/getIncomesList", { 599 .get("/getIncomesList", {
601 params: { schoolId: this.$store.state.schoolId }, 600 params: { schoolId: this.$store.state.schoolId },
602 headers: { Authorization: "Bearer " + token }, 601 headers: { Authorization: "Bearer " + token },
603 }) 602 })
604 .then((response) => { 603 .then((response) => {
605 this.incomeList = response.data.data; 604 this.incomeList = response.data.data;
606 this.showLoader = false; 605 this.showLoader = false;
607 // console.log("getTeacherList=====>",this.incomeList) 606 // console.log("getTeacherList=====>",this.incomeList)
608 }) 607 })
609 .catch((error) => { 608 .catch((error) => {
610 this.showLoader = false; 609 this.showLoader = false;
611 if (error.response.status === 401) { 610 if (error.response.status === 401) {
612 this.$router.replace({ path: "/" }); 611 this.$router.replace({ path: "/" });
613 this.$store.dispatch("setToken", null); 612 this.$store.dispatch("setToken", null);
614 this.$store.dispatch("Id", null); 613 this.$store.dispatch("Id", null);
615 } 614 }
616 }); 615 });
617 }, 616 },
618 editItem(item) { 617 editItem(item) {
619 this.editedIndex = this.incomeList.indexOf(item); 618 this.editedIndex = this.incomeList.indexOf(item);
620 this.editedItem = Object.assign({}, item); 619 this.editedItem = Object.assign({}, item);
621 this.editedItem.date = 620 this.editedItem.date =
622 this.editedItem.date != undefined 621 this.editedItem.date != undefined
623 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 622 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
624 : (this.editedItem.date = ""); 623 : (this.editedItem.date = "");
625 624
626 this.editIncomeDialog = true; 625 this.editIncomeDialog = true;
627 }, 626 },
628 profile(item) { 627 profile(item) {
629 this.editedIndex = this.incomeList.indexOf(item); 628 this.editedIndex = this.incomeList.indexOf(item);
630 this.editedItem = Object.assign({}, item); 629 this.editedItem = Object.assign({}, item);
631 this.profileIncomeDialog = true; 630 this.profileIncomeDialog = true;
632 }, 631 },
633 deleteItem(item) { 632 deleteItem(item) {
634 let deleteIncome = { 633 let deleteIncome = {
635 incomeId: item._id, 634 incomeId: item._id,
636 }; 635 };
637 http() 636 http()
638 .delete( 637 .delete(
639 "/deleteIncome", 638 "/deleteIncome",
640 confirm("Are you sure you want to delete this?") && { 639 confirm("Are you sure you want to delete this?") && {
641 params: deleteIncome, 640 params: deleteIncome,
642 } 641 }
643 ) 642 )
644 .then((response) => { 643 .then((response) => {
645 // console.log("deleteUers",deleteTeachers) 644 // console.log("deleteUers",deleteTeachers)
646 if ((this.snackbar = true)) { 645 if ((this.snackbar = true)) {
647 this.text = "Successfully delete Existing Income"; 646 this.text = "Successfully delete Existing Income";
648 } 647 }
649 this.getIncomeList(); 648 this.getIncomeList();
650 }) 649 })
651 .catch((error) => { 650 .catch((error) => {
652 console.log(error); 651 console.log(error);
653 }); 652 });
654 }, 653 },
655 close() { 654 close() {
656 this.editIncomeDialog = false; 655 this.editIncomeDialog = false;
657 }, 656 },
658 close1() { 657 close1() {
659 this.dialog1 = false; 658 this.dialog1 = false;
660 }, 659 },
661 closeAddIncomeModel() { 660 closeAddIncomeModel() {
662 this.addIncomeDialog = false; 661 this.addIncomeDialog = false;
663 this.addIncome = []; 662 this.addIncome = [];
664 this.menu1 = false; 663 this.menu1 = false;
665 this.imageName = ""; 664 this.imageName = "";
666 this.imageUrl = ""; 665 this.imageUrl = "";
667 this.imageFile = ""; 666 this.imageFile = "";
668 }, 667 },
669 submit() { 668 submit() {
670 if (this.$refs.form.validate()) { 669 if (this.$refs.form.validate()) {
671 if (this.imageUrl) { 670 if (this.imageUrl) {
672 var str = this.imageUrl; 671 var str = this.imageUrl;
673 const [baseUrl, imageUrl] = str.split(/,/); 672 const [baseUrl, imageUrl] = str.split(/,/);
674 this.addIncome.upload = imageUrl; 673 this.addIncome.upload = imageUrl;
675 } 674 }
676 this.loading = true; 675 this.loading = true;
677 // this.addIncome = this.$store.state.schoolId; 676 // this.addIncome = this.$store.state.schoolId;
678 http() 677 http()
679 .post("/createIncome", this.addIncome) 678 .post("/createIncome", this.addIncome)
680 .then((response) => { 679 .then((response) => {
681 this.getIncomeList(); 680 this.getIncomeList();
682 this.snackbar = true; 681 this.snackbar = true;
683 this.text = response.data.message; 682 this.text = response.data.message;
684 this.color = "green"; 683 this.color = "green";
685 this.addIncomeDialog = false; 684 this.addIncomeDialog = false;
686 this.clear(); 685 this.clear();
687 this.loading = false; 686 this.loading = false;
688 }) 687 })
689 .catch((error) => { 688 .catch((error) => {
690 // console.log(error); 689 // console.log(error);
691 this.loading = false; 690 this.loading = false;
692 this.snackbar = true; 691 this.snackbar = true;
693 this.color = "error"; 692 this.color = "error";
694 this.text = error.response.data.message; 693 this.text = error.response.data.message;
695 }); 694 });
696 } 695 }
697 }, 696 },
698 clear() { 697 clear() {
699 this.$refs.form.reset(); 698 this.$refs.form.reset();
700 }, 699 },
701 save() { 700 save() {
702 this.loading = true; 701 this.loading = true;
703 this.editedItem.incomeId = this.editedItem._id; 702 this.editedItem.incomeId = this.editedItem._id;
704 if (this.imageUrl) { 703 if (this.imageUrl) {
705 var str = this.imageUrl; 704 var str = this.imageUrl;
706 const [baseUrl, imageUrl] = str.split(/,/); 705 const [baseUrl, imageUrl] = str.split(/,/);
707 this.editedItem.upload = imageUrl; 706 this.editedItem.upload = imageUrl;
708 } 707 }
709 http() 708 http()
710 .put("/updateIncome", this.editedItem) 709 .put("/updateIncome", this.editedItem)
711 .then((response) => { 710 .then((response) => {
712 this.snackbar = true; 711 this.snackbar = true;
713 this.text = response.data.message; 712 this.text = response.data.message;
714 this.color = "green"; 713 this.color = "green";
715 this.loading = false; 714 this.loading = false;
716 this.getIncomeList(); 715 this.getIncomeList();
717 this.close(); 716 this.close();
718 }) 717 })
719 .catch((error) => { 718 .catch((error) => {
720 this.loading = false; 719 this.loading = false;
721 this.snackbar = true; 720 this.snackbar = true;
722 this.color = "error"; 721 this.color = "error";
723 this.loading = false; 722 this.loading = false;
724 }); 723 });
725 }, 724 },
726 725
727 displaySearch() { 726 displaySearch() {
728 (this.show = false), (this.showSearch = true); 727 (this.show = false), (this.showSearch = true);
729 }, 728 },
730 closeSearch() { 729 closeSearch() {
731 this.showSearch = false; 730 this.showSearch = false;
732 this.show = true; 731 this.show = true;
733 this.search = ""; 732 this.search = "";
734 }, 733 },
735 }, 734 },
736 mounted() { 735 mounted() {
737 this.getIncomeList(); 736 this.getIncomeList();
738 }, 737 },
739 }; 738 };
740 </script> 739 </script>
src/pages/Exam/grade.vue
Diff comments   View file @0cb974f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT GRADE ****** --> 3 <!-- ****** EDIT GRADE ****** -->
4 <v-dialog v-model="editGradeDialog" max-width="500px"> 4 <v-dialog v-model="editGradeDialog" max-width="500px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Grade</label> 8 <label class="title text-xs-center">Edit Grade</label>
9 <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> 12 <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>
13 <v-container fluid> 13 <v-container fluid>
14 <v-layout wrap> 14 <v-layout wrap>
15 <v-flex xs12 sm12> 15 <v-flex xs12 sm12>
16 <v-layout> 16 <v-layout>
17 <v-flex xs4 class="pt-4 subheading"> 17 <v-flex xs4 class="pt-4 subheading">
18 <label class="right">Grade Name:</label> 18 <label class="right">Grade Name:</label>
19 </v-flex> 19 </v-flex>
20 <v-flex xs7 class="ml-3"> 20 <v-flex xs7 class="ml-3">
21 <v-text-field 21 <v-text-field
22 placeholder="fill your Grade Name" 22 placeholder="fill your Grade Name"
23 v-model="editedItem.gradeName" 23 v-model="editedItem.gradeName"
24 type="text" 24 type="text"
25 :rules="editGradeName" 25 :rules="editGradeName"
26 ></v-text-field> 26 ></v-text-field>
27 </v-flex> 27 </v-flex>
28 </v-layout> 28 </v-layout>
29 </v-flex> 29 </v-flex>
30 <v-flex xs12 sm12> 30 <v-flex xs12 sm12>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 class="pt-4 subheading"> 32 <v-flex xs4 class="pt-4 subheading">
33 <label class="right">Grade Point:</label> 33 <label class="right">Grade Point:</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs7 class="ml-3"> 35 <v-flex xs7 class="ml-3">
36 <v-text-field 36 <v-text-field
37 placeholder="fill your Grade Point" 37 placeholder="fill your Grade Point"
38 v-model="editedItem.gradePoint" 38 v-model="editedItem.gradePoint"
39 :rules="editGradePoint" 39 :rules="editGradePoint"
40 type="text" 40 type="text"
41 ></v-text-field> 41 ></v-text-field>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm12> 45 <v-flex xs12 sm12>
46 <v-layout> 46 <v-layout>
47 <v-flex xs4 class="pt-4 subheading"> 47 <v-flex xs4 class="pt-4 subheading">
48 <label class="right">Mark From:</label> 48 <label class="right">Mark From:</label>
49 </v-flex> 49 </v-flex>
50 <v-flex xs7 class="ml-3"> 50 <v-flex xs7 class="ml-3">
51 <v-text-field 51 <v-text-field
52 placeholder="fill your Mark From" 52 placeholder="fill your Mark From"
53 v-model="editedItem.marksFrom" 53 v-model="editedItem.marksFrom"
54 :rules="editMarksFrom" 54 :rules="editMarksFrom"
55 type="text" 55 type="text"
56 ></v-text-field> 56 ></v-text-field>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 </v-flex> 59 </v-flex>
60 <v-flex xs12 sm12> 60 <v-flex xs12 sm12>
61 <v-layout> 61 <v-layout>
62 <v-flex xs4 class="pt-4 subheading"> 62 <v-flex xs4 class="pt-4 subheading">
63 <label class="right">Mark Upto:</label> 63 <label class="right">Mark Upto:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs7 class="ml-3"> 65 <v-flex xs7 class="ml-3">
66 <v-text-field 66 <v-text-field
67 placeholder="fill your Mark From" 67 placeholder="fill your Mark From"
68 v-model="editedItem.marksUpTo" 68 v-model="editedItem.marksUpTo"
69 :rules="editMarksUpTo" 69 :rules="editMarksUpTo"
70 type="text" 70 type="text"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 <v-flex xs12 sm12> 75 <v-flex xs12 sm12>
76 <v-layout> 76 <v-layout>
77 <v-flex xs4 class="pt-4 subheading"> 77 <v-flex xs4 class="pt-4 subheading">
78 <label class="right">Note:</label> 78 <label class="right">Note:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs7 class="ml-3"> 80 <v-flex xs7 class="ml-3">
81 <v-text-field 81 <v-text-field
82 placeholder="fill your Serial Number" 82 placeholder="fill your Serial Number"
83 v-model="editedItem.note" 83 v-model="editedItem.note"
84 type="text" 84 type="text"
85 ></v-text-field> 85 ></v-text-field>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 <v-layout> 90 <v-layout>
91 <v-flex xs12> 91 <v-flex xs12>
92 <v-card-actions> 92 <v-card-actions>
93 <v-spacer></v-spacer> 93 <v-spacer></v-spacer>
94 <v-btn round dark @click="save" class="add-button">Save</v-btn> 94 <v-btn round dark @click="save" class="add-button">Save</v-btn>
95 </v-card-actions> 95 </v-card-actions>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-container> 98 </v-container>
99 </v-form> 99 </v-form>
100 </v-card> 100 </v-card>
101 </v-dialog> 101 </v-dialog>
102 102
103 <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> 103 <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** -->
104 104
105 <v-dialog v-model="viewGradeDialog" max-width="500px"> 105 <v-dialog v-model="viewGradeDialog" max-width="500px">
106 <v-card flat class="card-style pa-3" dark> 106 <v-card flat class="card-style pa-3" dark>
107 <v-layout> 107 <v-layout>
108 <v-flex xs12> 108 <v-flex xs12>
109 <label class="title text-xs-center">View Grade</label> 109 <label class="title text-xs-center">View Grade</label>
110 <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> 110 <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 <v-card-text> 113 <v-card-text>
114 <v-container grid-list-md> 114 <v-container grid-list-md>
115 <v-layout wrap> 115 <v-layout wrap>
116 <v-flex> 116 <v-flex>
117 <v-layout> 117 <v-layout>
118 <v-flex xs5 sm6> 118 <v-flex xs5 sm6>
119 <h5 class="right my-1"> 119 <h5 class="right my-1">
120 <b>Grade Name:</b> 120 <b>Grade Name:</b>
121 </h5> 121 </h5>
122 </v-flex> 122 </v-flex>
123 <v-flex sm6 xs8> 123 <v-flex sm6 xs8>
124 <h5 class="my-1">{{ editedItem.gradeName }}</h5> 124 <h5 class="my-1">{{ editedItem.gradeName }}</h5>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 <v-layout> 127 <v-layout>
128 <v-flex xs5 sm6> 128 <v-flex xs5 sm6>
129 <h5 class="right my-1"> 129 <h5 class="right my-1">
130 <b>Grade Point:</b> 130 <b>Grade Point:</b>
131 </h5> 131 </h5>
132 </v-flex> 132 </v-flex>
133 <v-flex sm6 xs8> 133 <v-flex sm6 xs8>
134 <h5 class="my-1">{{ editedItem.gradePoint }}</h5> 134 <h5 class="my-1">{{ editedItem.gradePoint }}</h5>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 <v-layout> 137 <v-layout>
138 <v-flex xs5 sm6> 138 <v-flex xs5 sm6>
139 <h5 class="right my-1"> 139 <h5 class="right my-1">
140 <b>Mark From:</b> 140 <b>Mark From:</b>
141 </h5> 141 </h5>
142 </v-flex> 142 </v-flex>
143 <v-flex sm6 xs8> 143 <v-flex sm6 xs8>
144 <h5 class="my-1">{{ editedItem.marksFrom }}</h5> 144 <h5 class="my-1">{{ editedItem.marksFrom }}</h5>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 <v-layout> 147 <v-layout>
148 <v-flex xs5 sm6> 148 <v-flex xs5 sm6>
149 <h5 class="right my-1"> 149 <h5 class="right my-1">
150 <b>Mark Upto:</b> 150 <b>Mark Upto:</b>
151 </h5> 151 </h5>
152 </v-flex> 152 </v-flex>
153 <v-flex sm6 xs8> 153 <v-flex sm6 xs8>
154 <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> 154 <h5 class="my-1">{{ editedItem.marksUpTo }}</h5>
155 </v-flex> 155 </v-flex>
156 </v-layout> 156 </v-layout>
157 <v-layout> 157 <v-layout>
158 <v-flex xs5 sm6> 158 <v-flex xs5 sm6>
159 <h5 class="right my-1"> 159 <h5 class="right my-1">
160 <b>Note:</b> 160 <b>Note:</b>
161 </h5> 161 </h5>
162 </v-flex> 162 </v-flex>
163 <v-flex sm6 xs8> 163 <v-flex sm6 xs8>
164 <h5 class="my-1">{{ editedItem.note }}</h5> 164 <h5 class="my-1">{{ editedItem.note }}</h5>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </v-container> 169 </v-container>
170 </v-card-text> 170 </v-card-text>
171 </v-card> 171 </v-card>
172 </v-dialog> 172 </v-dialog>
173 <!-- ****** EXISTING GRADE TABLE****** --> 173 <!-- ****** EXISTING GRADE TABLE****** -->
174 174
175 <v-toolbar color="transparent" flat> 175 <v-toolbar color="transparent" flat>
176 <v-btn 176 <v-btn
177 fab 177 fab
178 dark 178 dark
179 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 179 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
180 small 180 small
181 @click="addGradeDialog = true" 181 @click="addGradeDialog = true"
182 > 182 >
183 <v-icon dark>add</v-icon> 183 <v-icon dark>add</v-icon>
184 </v-btn> 184 </v-btn>
185 <v-btn 185 <v-btn
186 round 186 round
187 class="open-dialog-button hidden-sm-only hidden-xs-only" 187 class="open-dialog-button hidden-sm-only hidden-xs-only"
188 dark 188 dark
189 @click="addGradeDialog = true" 189 @click="addGradeDialog = true"
190 > 190 >
191 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade 191 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade
192 </v-btn> 192 </v-btn>
193 <v-spacer></v-spacer> 193 <v-spacer></v-spacer>
194 <v-card-title class="body-1" v-show="show"> 194 <v-card-title class="body-1" v-show="show">
195 <v-btn icon large flat @click="displaySearch"> 195 <v-btn icon large flat @click="displaySearch">
196 <v-avatar size="27"> 196 <v-avatar size="27">
197 <img src="/static/icon/search.png" alt="icon" /> 197 <img src="/static/icon/search.png" alt="icon" />
198 </v-avatar> 198 </v-avatar>
199 </v-btn> 199 </v-btn>
200 </v-card-title> 200 </v-card-title>
201 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 201 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
202 <v-layout> 202 <v-layout>
203 <v-text-field 203 <v-text-field
204 autofocus 204 autofocus
205 v-model="search" 205 v-model="search"
206 label="Search" 206 label="Search"
207 prepend-inner-icon="search" 207 prepend-inner-icon="search"
208 color="primary" 208 color="primary"
209 ></v-text-field> 209 ></v-text-field>
210 <v-icon @click="closeSearch" color="error">close</v-icon> 210 <v-icon @click="closeSearch" color="error">close</v-icon>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 </v-toolbar> 213 </v-toolbar>
214 <v-data-table 214 <v-data-table
215 :headers="headers" 215 :headers="headers"
216 :items="gradeData" 216 :items="gradeData"
217 :pagination.sync="pagination" 217 :pagination.sync="pagination"
218 :search="search" 218 :search="search"
219 > 219 >
220 <template slot="items" slot-scope="props"> 220 <template slot="items" slot-scope="props">
221 <tr class="tr"> 221 <tr class="tr">
222 <td class="td td-row">{{ props.index + 1}}</td> 222 <td class="td td-row">{{ props.index + 1}}</td>
223 <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> 223 <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td>
224 <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> 224 <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>
225 <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> 225 <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>
226 <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> 226 <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>
227 <td class="td td-row text-xs-center">{{ props.item.note }}</td> 227 <td class="td td-row text-xs-center">{{ props.item.note }}</td>
228 <td class="td td-row text-xs-center"> 228 <td class="td td-row text-xs-center">
229 <span> 229 <span>
230 <v-tooltip top> 230 <v-tooltip top>
231 <img 231 <img
232 slot="activator" 232 slot="activator"
233 style="cursor:pointer; width:25px; height:25px; " 233 style="cursor:pointer; width:25px; height:25px; "
234 class="mr-3" 234 class="mr-3"
235 @click="profile(props.item)" 235 @click="profile(props.item)"
236 src="/static/icon/view.png" 236 src="/static/icon/view.png"
237 /> 237 />
238 <span>View</span> 238 <span>View</span>
239 </v-tooltip> 239 </v-tooltip>
240 <v-tooltip top> 240 <v-tooltip top>
241 <img 241 <img
242 slot="activator" 242 slot="activator"
243 style="cursor:pointer; width:20px; height:18px; " 243 style="cursor:pointer; width:20px; height:18px; "
244 class="mr-3" 244 class="mr-3"
245 @click="editItem(props.item)" 245 @click="editItem(props.item)"
246 src="/static/icon/edit.png" 246 src="/static/icon/edit.png"
247 /> 247 />
248 <span>Edit</span> 248 <span>Edit</span>
249 </v-tooltip> 249 </v-tooltip>
250 <v-tooltip top> 250 <v-tooltip top>
251 <img 251 <img
252 slot="activator" 252 slot="activator"
253 style="cursor:pointer; width:20px; height:20px; " 253 style="cursor:pointer; width:20px; height:20px; "
254 @click="deleteGrade(props.item)" 254 @click="deleteGrade(props.item)"
255 class="mr-3" 255 class="mr-3"
256 src="/static/icon/delete.png" 256 src="/static/icon/delete.png"
257 /> 257 />
258 <span>Delete</span> 258 <span>Delete</span>
259 </v-tooltip> 259 </v-tooltip>
260 </span> 260 </span>
261 </td> 261 </td>
262 </tr> 262 </tr>
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 <!-- ****** ADD GRADE ****** --> 271 <!-- ****** ADD GRADE ****** -->
272 <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog"> 272 <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog">
273 <v-card flat class="card-style pa-2" dark> 273 <v-card flat class="card-style pa-2" dark>
274 <v-layout> 274 <v-layout>
275 <v-flex xs12> 275 <v-flex xs12>
276 <label class="title text-xs-center">Add Grade</label> 276 <label class="title text-xs-center">Add Grade</label>
277 <v-icon 277 <v-icon
278 size="24" 278 size="24"
279 class="right" 279 class="right"
280 @click="$refs.form.reset();addGradeDialog = false" 280 @click="$refs.form.reset();addGradeDialog = false"
281 >cancel</v-icon> 281 >cancel</v-icon>
282 </v-flex> 282 </v-flex>
283 </v-layout> 283 </v-layout>
284 <v-form ref="form" v-model="valid" lazy-validation> 284 <v-form ref="form" v-model="valid" lazy-validation>
285 <v-container fluid> 285 <v-container fluid>
286 <v-flex xs12> 286 <v-flex xs12>
287 <v-layout> 287 <v-layout>
288 <v-flex xs5 sm4 class="pt-4 subheading"> 288 <v-flex xs5 sm4 class="pt-4 subheading">
289 <label class="right">Grade Name:</label> 289 <label class="right">Grade Name:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs7 class="ml-3"> 291 <v-flex xs7 class="ml-3">
292 <v-text-field 292 <v-text-field
293 placeholder="fill your Grade Name" 293 placeholder="fill your Grade Name"
294 :rules="gradeNameRules" 294 :rules="gradeNameRules"
295 v-model="addGrade.gradeName" 295 v-model="addGrade.gradeName"
296 ></v-text-field> 296 ></v-text-field>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-flex> 299 </v-flex>
300 <v-flex xs12> 300 <v-flex xs12>
301 <v-layout> 301 <v-layout>
302 <v-flex xs5 sm4 class="pt-4 subheading"> 302 <v-flex xs5 sm4 class="pt-4 subheading">
303 <label class="right">Grade Point:</label> 303 <label class="right">Grade Point:</label>
304 </v-flex> 304 </v-flex>
305 <v-flex xs7 class="ml-3"> 305 <v-flex xs7 class="ml-3">
306 <v-text-field 306 <v-text-field
307 placeholder="fill your Grade Point" 307 placeholder="fill your Grade Point"
308 v-model="addGrade.gradePoint" 308 v-model="addGrade.gradePoint"
309 :rules="gradePointRules" 309 :rules="gradePointRules"
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-layout> 312 </v-layout>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-layout> 315 <v-layout>
316 <v-flex xs5 sm4 class="pt-4 subheading"> 316 <v-flex xs5 sm4 class="pt-4 subheading">
317 <label class="right">Mark From:</label> 317 <label class="right">Mark From:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs7 class="ml-3"> 319 <v-flex xs7 class="ml-3">
320 <v-text-field 320 <v-text-field
321 placeholder="fill your Mark From" 321 placeholder="fill your Mark From"
322 :rules="markFromRules" 322 :rules="markFromRules"
323 v-model="addGrade.marksFrom" 323 v-model="addGrade.marksFrom"
324 type="number" 324 type="number"
325 ></v-text-field> 325 ></v-text-field>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12> 329 <v-flex xs12>
330 <v-layout> 330 <v-layout>
331 <v-flex xs5 sm4 class="pt-4 subheading"> 331 <v-flex xs5 sm4 class="pt-4 subheading">
332 <label class="right">Mark Upto:</label> 332 <label class="right">Mark Upto:</label>
333 </v-flex> 333 </v-flex>
334 <v-flex xs7 class="ml-3"> 334 <v-flex xs7 class="ml-3">
335 <v-text-field 335 <v-text-field
336 placeholder="fill your Mark Upto" 336 placeholder="fill your Mark Upto"
337 :rules="markUptoRules" 337 :rules="markUptoRules"
338 v-model="addGrade.marksUpTo" 338 v-model="addGrade.marksUpTo"
339 type="number" 339 type="number"
340 ></v-text-field> 340 ></v-text-field>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 <v-flex xs12> 344 <v-flex xs12>
345 <v-layout> 345 <v-layout>
346 <v-flex xs5 sm4 class="pt-4 subheading"> 346 <v-flex xs5 sm4 class="pt-4 subheading">
347 <label class="right">Note:</label> 347 <label class="right">Note:</label>
348 </v-flex> 348 </v-flex>
349 <v-flex xs7 class="ml-3"> 349 <v-flex xs7 class="ml-3">
350 <v-text-field 350 <v-text-field
351 placeholder="fill your Note" 351 placeholder="fill your Note"
352 :rules="noteRules"
353 v-model="addGrade.note" 352 v-model="addGrade.note"
354 @keyup.enter="submit" 353 @keyup.enter="submit"
355 ></v-text-field> 354 ></v-text-field>
356 </v-flex> 355 </v-flex>
357 </v-layout> 356 </v-layout>
358 </v-flex> 357 </v-flex>
359 <v-layout> 358 <v-layout>
360 <v-flex xs12> 359 <v-flex xs12>
361 <v-card-actions> 360 <v-card-actions>
362 <v-spacer class="hidden-xs-only"></v-spacer> 361 <v-spacer class="hidden-xs-only"></v-spacer>
363 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 362 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
364 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 363 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
365 </v-card-actions> 364 </v-card-actions>
366 </v-flex> 365 </v-flex>
367 </v-layout> 366 </v-layout>
368 </v-container> 367 </v-container>
369 </v-form> 368 </v-form>
370 </v-card> 369 </v-card>
371 </v-dialog> 370 </v-dialog>
372 <v-snackbar 371 <v-snackbar
373 :timeout="timeout" 372 :timeout="timeout"
374 :top="y === 'top'" 373 :top="y === 'top'"
375 :right="x === 'right'" 374 :right="x === 'right'"
376 :vertical="mode === 'vertical'" 375 :vertical="mode === 'vertical'"
377 v-model="snackbar" 376 v-model="snackbar"
378 :color="color" 377 :color="color"
379 >{{ text }}</v-snackbar> 378 >{{ text }}</v-snackbar>
380 <div class="loader" v-if="showLoader"> 379 <div class="loader" v-if="showLoader">
381 <v-progress-circular indeterminate color="white"></v-progress-circular> 380 <v-progress-circular indeterminate color="white"></v-progress-circular>
382 </div> 381 </div>
383 </v-container> 382 </v-container>
384 </template> 383 </template>
385 384
386 <script> 385 <script>
387 import http from "@/Services/http.js"; 386 import http from "@/Services/http.js";
388 import moment from "moment"; 387 import moment from "moment";
389 388
390 export default { 389 export default {
391 data: () => ({ 390 data: () => ({
392 snackbar: false, 391 snackbar: false,
393 date: null, 392 date: null,
394 menu1: false, 393 menu1: false,
395 menu2: false, 394 menu2: false,
396 addGradeDialog: false, 395 addGradeDialog: false,
397 color: "", 396 color: "",
398 y: "top", 397 y: "top",
399 x: "right", 398 x: "right",
400 mode: "", 399 mode: "",
401 timeout: 10000, 400 timeout: 10000,
402 text: "", 401 text: "",
403 show: true, 402 show: true,
404 showSearch: false, 403 showSearch: false,
405 loading: false, 404 loading: false,
406 loadingSearch: false, 405 loadingSearch: false,
407 date: null, 406 date: null,
408 search: "", 407 search: "",
409 showLoader: false, 408 showLoader: false,
410 editGradeDialog: false, 409 editGradeDialog: false,
411 viewGradeDialog: false, 410 viewGradeDialog: false,
412 valid: true, 411 valid: true,
413 validEditGrade: true, 412 validEditGrade: true,
414 pagination: { 413 pagination: {
415 rowsPerPage: 10, 414 rowsPerPage: 10,
416 }, 415 },
417 gradeNameRules: [(v) => !!v || "Grade Name is required"], 416 gradeNameRules: [(v) => !!v || "Grade Name is required"],
418 gradePointRules: [(v) => !!v || "Grade Point required"], 417 gradePointRules: [(v) => !!v || "Grade Point required"],
419 markFromRules: [(v) => !!v || "Mark From is required"], 418 markFromRules: [(v) => !!v || "Mark From is required"],
420 markUptoRules: [(v) => !!v || "Mark Upto is required"], 419 markUptoRules: [(v) => !!v || "Mark Upto is required"],
421 authorRules: [(v) => !!v || "Author is required"], 420 authorRules: [(v) => !!v || "Author is required"],
422 noteRules: [(v) => !!v || "Note is required"], 421 noteRules: [(v) => !!v || "Note is required"],
423 editGradeName: [(v) => !!v || "Grade Name is required"], 422 editGradeName: [(v) => !!v || "Grade Name is required"],
424 editGradeName: [(v) => !!v || "Grade Name is required"], 423 editGradeName: [(v) => !!v || "Grade Name is required"],
425 editGradePoint: [(v) => !!v || "Grade Point required"], 424 editGradePoint: [(v) => !!v || "Grade Point required"],
426 editMarksFrom: [(v) => !!v || "Mark From is required"], 425 editMarksFrom: [(v) => !!v || "Mark From is required"],
427 editMarksUpTo: [(v) => !!v || "Mark Upto is required"], 426 editMarksUpTo: [(v) => !!v || "Mark Upto is required"],
428 headers: [ 427 headers: [
429 { 428 {
430 align: "", 429 align: "",
431 text: "No", 430 text: "No",
432 sortable: false, 431 sortable: false,
433 value: "No", 432 value: "No",
434 }, 433 },
435 { 434 {
436 text: "Grade Name", 435 text: "Grade Name",
437 vaue: "gradeName", 436 vaue: "gradeName",
438 sortable: false, 437 sortable: false,
439 align: "center", 438 align: "center",
440 }, 439 },
441 { 440 {
442 text: "Grade Point", 441 text: "Grade Point",
443 value: "gradePoint", 442 value: "gradePoint",
444 sortable: false, 443 sortable: false,
445 align: "center", 444 align: "center",
446 }, 445 },
447 { 446 {
448 text: "Mark From", 447 text: "Mark From",
449 value: "marksFrom", 448 value: "marksFrom",
450 sortable: false, 449 sortable: false,
451 align: "center", 450 align: "center",
452 }, 451 },
453 { 452 {
454 text: "Mark Upto", 453 text: "Mark Upto",
455 value: "marksUpTo", 454 value: "marksUpTo",
456 sortable: false, 455 sortable: false,
457 align: "center", 456 align: "center",
458 }, 457 },
459 { 458 {
460 text: "Note", 459 text: "Note",
461 value: "note", 460 value: "note",
462 sortable: false, 461 sortable: false,
463 align: "center", 462 align: "center",
464 }, 463 },
465 { text: "Action", value: "", sortable: false, align: "center" }, 464 { text: "Action", value: "", sortable: false, align: "center" },
466 ], 465 ],
467 gradeData: [], 466 gradeData: [],
468 addGrade: {}, 467 addGrade: {},
469 editedItem: {}, 468 editedItem: {},
470 token: "", 469 token: "",
471 }), 470 }),
472 watch: { 471 watch: {
473 addGradeDialog: function (val) { 472 addGradeDialog: function (val) {
474 if (!val) { 473 if (!val) {
475 this.addGrade = []; 474 this.addGrade = [];
476 } 475 }
477 }, 476 },
478 }, 477 },
479 methods: { 478 methods: {
480 dates: function (date) { 479 dates: function (date) {
481 return moment(date).format("MMMM DD, YYYY"); 480 return moment(date).format("MMMM DD, YYYY");
482 }, 481 },
483 pickFile() { 482 pickFile() {
484 this.$refs.image.click(); 483 this.$refs.image.click();
485 }, 484 },
486 getGradeList() { 485 getGradeList() {
487 this.showLoader = true; 486 this.showLoader = true;
488 this.loadingSearch = true; 487 this.loadingSearch = true;
489 http() 488 http()
490 .get("/getGradesList", { 489 .get("/getGradesList", {
491 headers: { Authorization: "Bearer " + this.token }, 490 headers: { Authorization: "Bearer " + this.token },
492 }) 491 })
493 .then((response) => { 492 .then((response) => {
494 this.gradeData = response.data.data; 493 this.gradeData = response.data.data;
495 this.showLoader = false; 494 this.showLoader = false;
496 this.loadingSearch = false; 495 this.loadingSearch = false;
497 }) 496 })
498 .catch((error) => { 497 .catch((error) => {
499 // console.log("err====>", err); 498 // console.log("err====>", err);
500 this.showLoader = false; 499 this.showLoader = false;
501 this.loadingSearch = false; 500 this.loadingSearch = false;
502 this.snackbar = true; 501 this.snackbar = true;
503 this.text = error.response.data.message; 502 this.text = error.response.data.message;
504 if (error.response.status === 401) { 503 if (error.response.status === 401) {
505 this.$router.replace({ path: "/" }); 504 this.$router.replace({ path: "/" });
506 this.$store.dispatch("setToken", null); 505 this.$store.dispatch("setToken", null);
507 this.$store.dispatch("Id", null); 506 this.$store.dispatch("Id", null);
508 } 507 }
509 }); 508 });
510 }, 509 },
511 editItem(item) { 510 editItem(item) {
512 console.log("item", item); 511 console.log("item", item);
513 this.editedIndex = this.gradeData.indexOf(item); 512 this.editedIndex = this.gradeData.indexOf(item);
514 this.editedItem = Object.assign({}, item); 513 this.editedItem = Object.assign({}, item);
515 this.editedItem.date = 514 this.editedItem.date =
516 this.editedItem.date != undefined 515 this.editedItem.date != undefined
517 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 516 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
518 : (this.editedItem.date = ""); 517 : (this.editedItem.date = "");
519 this.editGradeDialog = true; 518 this.editGradeDialog = true;
520 }, 519 },
521 profile(item) { 520 profile(item) {
522 this.editedIndex = this.gradeData.indexOf(item); 521 this.editedIndex = this.gradeData.indexOf(item);
523 this.editedItem = Object.assign({}, item); 522 this.editedItem = Object.assign({}, item);
524 this.viewGradeDialog = true; 523 this.viewGradeDialog = true;
525 }, 524 },
526 deleteGrade(item) { 525 deleteGrade(item) {
527 let deleteGrade = { 526 let deleteGrade = {
528 gradeId: item._id, 527 gradeId: item._id,
529 }; 528 };
530 http() 529 http()
531 .delete( 530 .delete(
532 "/deleteGrade", 531 "/deleteGrade",
533 confirm("Are you sure you want to Delete this?") && { 532 confirm("Are you sure you want to Delete this?") && {
534 params: deleteGrade, 533 params: deleteGrade,
535 } 534 }
536 ) 535 )
537 .then((response) => { 536 .then((response) => {
538 this.snackbar = true; 537 this.snackbar = true;
539 this.text = response.data.message; 538 this.text = response.data.message;
540 this.color = "green"; 539 this.color = "green";
541 this.getGradeList(); 540 this.getGradeList();
542 }) 541 })
543 .catch((error) => { 542 .catch((error) => {
544 this.loading = false; 543 this.loading = false;
545 this.snackbar = true; 544 this.snackbar = true;
546 this.color = "error"; 545 this.color = "error";
547 this.text = error.response.data.message; 546 this.text = error.response.data.message;
548 }); 547 });
549 }, 548 },
550 close() { 549 close() {
551 this.editGradeDialog = false; 550 this.editGradeDialog = false;
552 }, 551 },
553 submit() { 552 submit() {
554 if (this.$refs.form.validate()) { 553 if (this.$refs.form.validate()) {
555 this.loading = true; 554 this.loading = true;
556 http() 555 http()
557 .post("/createGrade", this.addGrade) 556 .post("/createGrade", this.addGrade)
558 .then((response) => { 557 .then((response) => {
559 this.snackbar = true; 558 this.snackbar = true;
560 this.text = response.data.message; 559 this.text = response.data.message;
561 this.color = "green"; 560 this.color = "green";
562 this.addGradeDialog = false; 561 this.addGradeDialog = false;
563 this.loading = false; 562 this.loading = false;
564 this.clear(); 563 this.clear();
565 this.getGradeList(); 564 this.getGradeList();
566 }) 565 })
567 .catch((error) => { 566 .catch((error) => {
568 this.snackbar = true; 567 this.snackbar = true;
569 this.text = error.response.data.message; 568 this.text = error.response.data.message;
570 this.color = "red"; 569 this.color = "red";
571 this.loading = false; 570 this.loading = false;
572 }); 571 });
573 } 572 }
574 }, 573 },
575 clear() { 574 clear() {
576 this.$refs.form.reset(); 575 this.$refs.form.reset();
577 this.disable = false; 576 this.disable = false;
578 this.loading = false; 577 this.loading = false;
579 }, 578 },
580 save() { 579 save() {
581 if (this.$refs.formEditGrade.validate()) { 580 if (this.$refs.formEditGrade.validate()) {
582 this.editedItem.gradeId = this.editedItem._id; 581 this.editedItem.gradeId = this.editedItem._id;
583 http() 582 http()
584 .put("/updateGrade", this.editedItem) 583 .put("/updateGrade", this.editedItem)
585 .then((response) => { 584 .then((response) => {
586 this.snackbar = true; 585 this.snackbar = true;
587 this.text = response.data.message; 586 this.text = response.data.message;
588 this.color = "green"; 587 this.color = "green";
589 this.getGradeList(); 588 this.getGradeList();
590 this.close(); 589 this.close();
591 }) 590 })
592 .catch((error) => { 591 .catch((error) => {
593 this.snackbar = true; 592 this.snackbar = true;
594 this.text = error.response.data.message; 593 this.text = error.response.data.message;
595 this.color = "red"; 594 this.color = "red";
596 }); 595 });
597 } 596 }
598 }, 597 },
599 displaySearch() { 598 displaySearch() {
600 (this.show = false), (this.showSearch = true); 599 (this.show = false), (this.showSearch = true);
601 }, 600 },
602 closeSearch() { 601 closeSearch() {
603 this.showSearch = false; 602 this.showSearch = false;
604 this.show = true; 603 this.show = true;
605 this.search = ""; 604 this.search = "";
606 }, 605 },
607 }, 606 },
608 mounted() { 607 mounted() {
609 this.token = this.$store.state.token; 608 this.token = this.$store.state.token;
610 this.getGradeList(); 609 this.getGradeList();
611 }, 610 },
612 }; 611 };
613 </script> 612 </script>
src/pages/Library/eBook.vue
Diff comments   View file @0cb974f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS EBOOK DETAILS ****** --> 3 <!-- ****** EDITS EBOOK DETAILS ****** -->
4 <v-dialog v-model="editEbookDialog" max-width="600px"> 4 <v-dialog v-model="editEbookDialog" max-width="600px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit E-Book</label> 8 <label class="title text-xs-center">Edit E-Book</label>
9 <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 13 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
14 <input 14 <input
15 type="file" 15 type="file"
16 style="display: none" 16 style="display: none"
17 ref="editImage" 17 ref="editImage"
18 accept="image/*" 18 accept="image/*"
19 @change="onEditImagePicked" 19 @change="onEditImagePicked"
20 /> 20 />
21 <img 21 <img
22 v-if="editedItem.coverPhotoUrl" 22 v-if="editedItem.coverPhotoUrl"
23 :src="editedItem.coverPhotoUrl" 23 :src="editedItem.coverPhotoUrl"
24 height="160" 24 height="160"
25 width="160" 25 width="160"
26 alt="eBooks" 26 alt="eBooks"
27 class="pa-2" 27 class="pa-2"
28 /> 28 />
29 <img 29 <img
30 src="/static/icon/user.png" 30 src="/static/icon/user.png"
31 v-if="editedItem.coverPhotoUrl == ''" 31 v-if="editedItem.coverPhotoUrl == ''"
32 height="160" 32 height="160"
33 width="160" 33 width="160"
34 alt="Books" 34 alt="Books"
35 /> 35 />
36 </v-flex> 36 </v-flex>
37 <v-container grid-list-md> 37 <v-container grid-list-md>
38 <v-flex xs12 sm12> 38 <v-flex xs12 sm12>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 class="pt-4 subheading"> 40 <v-flex xs4 class="pt-4 subheading">
41 <label class="right hidden-xs-only hidden-sm-only">Name :</label> 41 <label class="right hidden-xs-only hidden-sm-only">Name :</label>
42 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label> 42 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label>
43 </v-flex> 43 </v-flex>
44 <v-flex xs8 class="ml-3"> 44 <v-flex xs8 class="ml-3">
45 <v-text-field 45 <v-text-field
46 v-model="editedItem.name" 46 v-model="editedItem.name"
47 placeholder="fill your full Name" 47 placeholder="fill your full Name"
48 name="name" 48 name="name"
49 type="text" 49 type="text"
50 required 50 required
51 ></v-text-field> 51 ></v-text-field>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 </v-flex> 54 </v-flex>
55 <v-flex xs12 sm12> 55 <v-flex xs12 sm12>
56 <v-layout> 56 <v-layout>
57 <v-flex xs4 class="pt-4 subheading"> 57 <v-flex xs4 class="pt-4 subheading">
58 <label class="right hidden-xs-only hidden-sm-only">Author :</label> 58 <label class="right hidden-xs-only hidden-sm-only">Author :</label>
59 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label> 59 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs8 class="ml-3"> 61 <v-flex xs8 class="ml-3">
62 <v-text-field 62 <v-text-field
63 v-model="editedItem.author" 63 v-model="editedItem.author"
64 placeholder="fill your full author" 64 placeholder="fill your full author"
65 name="name" 65 name="name"
66 type="text" 66 type="text"
67 required 67 required
68 ></v-text-field> 68 ></v-text-field>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 </v-flex> 71 </v-flex>
72 <v-flex xs12 sm12> 72 <v-flex xs12 sm12>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading"> 74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right hidden-xs-only hidden-sm-only">Class :</label> 75 <label class="right hidden-xs-only hidden-sm-only">Class :</label>
76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label> 76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 class="ml-3"> 78 <v-flex xs8 class="ml-3">
79 <v-select 79 <v-select
80 v-model="editedItem.classId" 80 v-model="editedItem.classId"
81 :items="addClass" 81 :items="addClass"
82 label="Select Class" 82 label="Select Class"
83 item-text="classNum" 83 item-text="classNum"
84 item-value="_id" 84 item-value="_id"
85 type="_id" 85 type="_id"
86 required 86 required
87 ></v-select> 87 ></v-select>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
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 hidden-xs-only hidden-sm-only">Upload Image :</label> 94 <label class="right hidden-xs-only hidden-sm-only">Upload Image :</label>
95 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label> 95 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs8 class="ml-3"> 97 <v-flex xs8 class="ml-3">
98 <v-text-field 98 <v-text-field
99 label="Select Image" 99 label="Select Image"
100 @click="editPickImage" 100 @click="editPickImage"
101 v-model="editImageName" 101 v-model="editImageName"
102 append-icon="attach_file" 102 append-icon="attach_file"
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> 107 <v-flex xs12>
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">Upload File:</label> 110 <label class="right">Upload File:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 class="ml-3"> 112 <v-flex xs8 class="ml-3">
113 <input 113 <input
114 type="file" 114 type="file"
115 style="display: none" 115 style="display: none"
116 ref="editFile" 116 ref="editFile"
117 @change="onEditFilePicked" 117 @change="onEditFilePicked"
118 /> 118 />
119 <v-text-field 119 <v-text-field
120 label="Select File" 120 label="Select File"
121 @click="editPickFile" 121 @click="editPickFile"
122 v-model="editFileName" 122 v-model="editFileName"
123 append-icon="attach_file" 123 append-icon="attach_file"
124 ></v-text-field> 124 ></v-text-field>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-card-actions> 128 <v-card-actions>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 130 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
131 <v-spacer></v-spacer> 131 <v-spacer></v-spacer>
132 </v-card-actions> 132 </v-card-actions>
133 </v-container> 133 </v-container>
134 </v-card-text> 134 </v-card-text>
135 </v-card> 135 </v-card>
136 </v-dialog> 136 </v-dialog>
137 137
138 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 138 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
139 139
140 <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable> 140 <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable>
141 <v-card flat class="card-style pa-3" dark> 141 <v-card flat class="card-style pa-3" dark>
142 <v-layout> 142 <v-layout>
143 <v-flex xs12> 143 <v-flex xs12>
144 <label class="title text-xs-center">View E-book</label> 144 <label class="title text-xs-center">View E-book</label>
145 <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon> 145 <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout> 148 <v-layout>
149 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 149 <v-flex align-center justify-center layout text-xs-center class="mt-3">
150 <v-avatar size="100px"> 150 <v-avatar size="100px">
151 <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" /> 151 <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" />
152 <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" /> 152 <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" />
153 </v-avatar> 153 </v-avatar>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 <v-container grid-list-md> 156 <v-container grid-list-md>
157 <v-layout wrap> 157 <v-layout wrap>
158 <v-flex xs12 sm12> 158 <v-flex xs12 sm12>
159 <v-layout> 159 <v-layout>
160 <v-flex xs6 sm6> 160 <v-flex xs6 sm6>
161 <h5 class="right my-1"> 161 <h5 class="right my-1">
162 <b>Name:</b> 162 <b>Name:</b>
163 </h5> 163 </h5>
164 </v-flex> 164 </v-flex>
165 <v-flex sm6 xs6> 165 <v-flex sm6 xs6>
166 <h5 class="my-1 left">{{ editedItem.name }}</h5> 166 <h5 class="my-1 left">{{ editedItem.name }}</h5>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </v-flex> 169 </v-flex>
170 <v-flex xs12 sm12> 170 <v-flex xs12 sm12>
171 <v-layout> 171 <v-layout>
172 <v-flex xs6 sm6> 172 <v-flex xs6 sm6>
173 <h5 class="right my-1"> 173 <h5 class="right my-1">
174 <b>Author:</b> 174 <b>Author:</b>
175 </h5> 175 </h5>
176 </v-flex> 176 </v-flex>
177 <v-flex sm6 xs6> 177 <v-flex sm6 xs6>
178 <h5 class="my-1 left">{{ editedItem.author }}</h5> 178 <h5 class="my-1 left">{{ editedItem.author }}</h5>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-flex xs12 sm12> 183 <v-flex xs12 sm12>
184 <v-layout> 184 <v-layout>
185 <v-flex xs6 sm6> 185 <v-flex xs6 sm6>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Class:</b> 187 <b>Class:</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm6 xs6> 190 <v-flex sm6 xs6>
191 <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5> 191 <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 </v-flex> 194 </v-flex>
195 </v-container> 195 </v-container>
196 </v-card> 196 </v-card>
197 </v-dialog> 197 </v-dialog>
198 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 198 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
199 199
200 <v-toolbar color="transparent" flat> 200 <v-toolbar color="transparent" flat>
201 <v-btn 201 <v-btn
202 fab 202 fab
203 dark 203 dark
204 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 204 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
205 small 205 small
206 @click="addEBookDialog = true" 206 @click="addEBookDialog = true"
207 > 207 >
208 <v-icon dark>add</v-icon> 208 <v-icon dark>add</v-icon>
209 </v-btn> 209 </v-btn>
210 <v-btn 210 <v-btn
211 round 211 round
212 class="open-dialog-button hidden-sm-only hidden-xs-only" 212 class="open-dialog-button hidden-sm-only hidden-xs-only"
213 dark 213 dark
214 @click="addEBookDialog = true" 214 @click="addEBookDialog = true"
215 > 215 >
216 <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book 216 <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book
217 </v-btn> 217 </v-btn>
218 <v-spacer></v-spacer> 218 <v-spacer></v-spacer>
219 <v-card-title class="body-1" v-show="show"> 219 <v-card-title class="body-1" v-show="show">
220 <v-btn icon large flat @click="displaySearch"> 220 <v-btn icon large flat @click="displaySearch">
221 <v-avatar size="27"> 221 <v-avatar size="27">
222 <img src="/static/icon/search.png" alt="icon" /> 222 <img src="/static/icon/search.png" alt="icon" />
223 </v-avatar> 223 </v-avatar>
224 </v-btn> 224 </v-btn>
225 </v-card-title> 225 </v-card-title>
226 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 226 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
227 <v-layout> 227 <v-layout>
228 <v-text-field 228 <v-text-field
229 autofocus 229 autofocus
230 v-model="search" 230 v-model="search"
231 label="Search" 231 label="Search"
232 prepend-inner-icon="search" 232 prepend-inner-icon="search"
233 color="primary" 233 color="primary"
234 ></v-text-field> 234 ></v-text-field>
235 <v-icon @click="closeSearch" color="error">close</v-icon> 235 <v-icon @click="closeSearch" color="error">close</v-icon>
236 </v-layout> 236 </v-layout>
237 </v-flex> 237 </v-flex>
238 </v-toolbar> 238 </v-toolbar>
239 <v-data-table 239 <v-data-table
240 :headers="headers" 240 :headers="headers"
241 :items="eBookData" 241 :items="eBookData"
242 :pagination.sync="pagination" 242 :pagination.sync="pagination"
243 :search="search" 243 :search="search"
244 > 244 >
245 <template slot="items" slot-scope="props"> 245 <template slot="items" slot-scope="props">
246 <tr class="tr"> 246 <tr class="tr">
247 <td class="td td-row">{{ props.index + 1}}</td> 247 <td class="td td-row">{{ props.index + 1}}</td>
248 <td class="td td-row text-xs-center"> 248 <td class="td td-row text-xs-center">
249 <v-avatar size="40"> 249 <v-avatar size="40">
250 <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" /> 250 <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" />
251 <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" /> 251 <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" />
252 </v-avatar> 252 </v-avatar>
253 </td> 253 </td>
254 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 254 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
255 <td class="td td-row text-xs-center">{{ props.item.author}}</td> 255 <td class="td td-row text-xs-center">{{ props.item.author}}</td>
256 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> 256 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
257 <td class="td td-row text-xs-center"> 257 <td class="td td-row text-xs-center">
258 <span> 258 <span>
259 <v-tooltip top> 259 <v-tooltip top>
260 <img 260 <img
261 slot="activator" 261 slot="activator"
262 style="cursor:pointer; width:25px; height:25px; " 262 style="cursor:pointer; width:25px; height:25px; "
263 class="mr-3" 263 class="mr-3"
264 @click="profile(props.item)" 264 @click="profile(props.item)"
265 src="/static/icon/view.png" 265 src="/static/icon/view.png"
266 /> 266 />
267 <span>View</span> 267 <span>View</span>
268 </v-tooltip> 268 </v-tooltip>
269 <v-tooltip top> 269 <v-tooltip top>
270 <img 270 <img
271 slot="activator" 271 slot="activator"
272 style="cursor:pointer; width:20px; height:18px; " 272 style="cursor:pointer; width:20px; height:18px; "
273 class="mr-3" 273 class="mr-3"
274 @click="editItem(props.item)" 274 @click="editItem(props.item)"
275 src="/static/icon/edit.png" 275 src="/static/icon/edit.png"
276 /> 276 />
277 <span>Edit</span> 277 <span>Edit</span>
278 </v-tooltip> 278 </v-tooltip>
279 <v-tooltip top v-if="role != 'TEACHER' "> 279 <v-tooltip top v-if="role != 'TEACHER' ">
280 <img 280 <img
281 slot="activator" 281 slot="activator"
282 style="cursor:pointer; width:20px; height:20px; " 282 style="cursor:pointer; width:20px; height:20px; "
283 @click="deleteItem(props.item)" 283 @click="deleteItem(props.item)"
284 src="/static/icon/delete.png" 284 src="/static/icon/delete.png"
285 /> 285 />
286 <span>Delete</span> 286 <span>Delete</span>
287 </v-tooltip> 287 </v-tooltip>
288 </span> 288 </span>
289 </td> 289 </td>
290 </tr> 290 </tr>
291 </template> 291 </template>
292 <v-alert 292 <v-alert
293 slot="no-results" 293 slot="no-results"
294 :value="true" 294 :value="true"
295 color="error" 295 color="error"
296 icon="warning" 296 icon="warning"
297 >Your search for "{{ search }}" found no results.</v-alert> 297 >Your search for "{{ search }}" found no results.</v-alert>
298 </v-data-table> 298 </v-data-table>
299 <!-- ****** ADD MULTIPLE E-BOOK ****** --> 299 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
300 <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog"> 300 <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog">
301 <v-card flat class="card-style pa-2" dark> 301 <v-card flat class="card-style pa-2" dark>
302 <v-layout> 302 <v-layout>
303 <v-flex xs12> 303 <v-flex xs12>
304 <label class="title text-xs-center">Add E-Book</label> 304 <label class="title text-xs-center">Add E-Book</label>
305 <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon> 305 <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-form ref="form" v-model="valid" lazy-validation> 308 <v-form ref="form" v-model="valid" lazy-validation>
309 <v-container fluid> 309 <v-container fluid>
310 <v-layout> 310 <v-layout>
311 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 311 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
312 <input 312 <input
313 type="file" 313 type="file"
314 style="display: none" 314 style="display: none"
315 ref="image" 315 ref="image"
316 accept="image/*" 316 accept="image/*"
317 @change="onImagePicked" 317 @change="onImagePicked"
318 /> 318 />
319 <v-layout justify-center> 319 <v-layout justify-center>
320 <v-flex v-if="files != ''"> 320 <v-flex v-if="files != ''">
321 <img :src="files" height="150" width="150" /> 321 <img :src="files" height="150" width="150" />
322 </v-flex> 322 </v-flex>
323 </v-layout> 323 </v-layout>
324 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> 324 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" />
325 </v-flex> 325 </v-flex>
326 </v-layout> 326 </v-layout>
327 <v-flex xs12> 327 <v-flex xs12>
328 <v-layout> 328 <v-layout>
329 <v-flex xs4 class="pt-4 subheading"> 329 <v-flex xs4 class="pt-4 subheading">
330 <label class="right">Name:</label> 330 <label class="right">Name:</label>
331 </v-flex> 331 </v-flex>
332 <v-flex xs7 class="ml-3"> 332 <v-flex xs7 class="ml-3">
333 <v-text-field 333 <v-text-field
334 v-model="addEBooks.name" 334 v-model="addEBooks.name"
335 placeholder="fill name" 335 placeholder="fill name"
336 name="name" 336 name="name"
337 type="text" 337 type="text"
338 :rules="titleRules" 338 :rules="titleRules"
339 required 339 required
340 ></v-text-field> 340 ></v-text-field>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 <v-flex xs12> 344 <v-flex xs12>
345 <v-layout> 345 <v-layout>
346 <v-flex xs4 class="pt-4 subheading"> 346 <v-flex xs4 class="pt-4 subheading">
347 <label class="right">Author:</label> 347 <label class="right">Author:</label>
348 </v-flex> 348 </v-flex>
349 <v-flex xs7 class="ml-3"> 349 <v-flex xs7 class="ml-3">
350 <v-text-field 350 <v-text-field
351 v-model="addEBooks.author" 351 v-model="addEBooks.author"
352 placeholder="fill your Author Name" 352 placeholder="fill your Author Name"
353 name="name" 353 name="name"
354 type="text" 354 type="text"
355 :rules="titleRules" 355 :rules="titleRules"
356 required 356 required
357 ></v-text-field> 357 ></v-text-field>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 </v-flex> 360 </v-flex>
361 <v-flex xs12> 361 <v-flex xs12>
362 <v-layout> 362 <v-layout>
363 <v-flex xs4 class="pt-4 subheading"> 363 <v-flex xs4 class="pt-4 subheading">
364 <label class="right">Class:</label> 364 <label class="right">Class:</label>
365 </v-flex> 365 </v-flex>
366 <v-flex xs7 class="ml-3"> 366 <v-flex xs7 class="ml-3">
367 <v-select 367 <v-select
368 v-model="addEBooks.classId" 368 v-model="addEBooks.classId"
369 :items="addClass" 369 :items="addClass"
370 label="Select Class" 370 label="Select Class"
371 item-text="classNum" 371 item-text="classNum"
372 item-value="_id" 372 item-value="_id"
373 :rules="titleRules" 373 :rules="titleRules"
374 required 374 required
375 ></v-select> 375 ></v-select>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 </v-flex> 378 </v-flex>
379 <v-flex xs12> 379 <v-flex xs12>
380 <v-layout> 380 <v-layout>
381 <v-flex xs4 class="pt-4 subheading"> 381 <v-flex xs4 class="pt-4 subheading">
382 <label class="right">Upload Image:</label> 382 <label class="right">Upload Image:</label>
383 </v-flex> 383 </v-flex>
384 <v-flex xs7 class="ml-3"> 384 <v-flex xs7 class="ml-3">
385 <v-text-field 385 <v-text-field
386 label="Select Image" 386 label="Select Image"
387 @click="pickImage" 387 @click="pickImage"
388 v-model="imageName" 388 v-model="imageName"
389 :rules="uploadImageRule"
390 append-icon="attach_file" 389 append-icon="attach_file"
391 ></v-text-field> 390 ></v-text-field>
392 </v-flex> 391 </v-flex>
393 </v-layout> 392 </v-layout>
394 </v-flex> 393 </v-flex>
395 <v-flex xs12> 394 <v-flex xs12>
396 <v-layout> 395 <v-layout>
397 <v-flex xs4 class="pt-4 subheading"> 396 <v-flex xs4 class="pt-4 subheading">
398 <label class="right">Upload File:</label> 397 <label class="right">Upload File:</label>
399 </v-flex> 398 </v-flex>
400 <v-flex xs8 class="ml-3"> 399 <v-flex xs8 class="ml-3">
401 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 400 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
402 <v-text-field 401 <v-text-field
403 label="Select File" 402 label="Select File"
404 @click="pickFile" 403 @click="pickFile"
405 v-model="fileName" 404 v-model="fileName"
406 :rules="uploadFileRule"
407 append-icon="attach_file" 405 append-icon="attach_file"
408 ></v-text-field> 406 ></v-text-field>
409 </v-flex> 407 </v-flex>
410 </v-layout> 408 </v-layout>
411 </v-flex> 409 </v-flex>
412 <v-flex xs12> 410 <v-flex xs12>
413 <v-layout> 411 <v-layout>
414 <v-flex xs4 class="pt-3 subheading"> 412 <v-flex xs4 class="pt-3 subheading">
415 <label class="right">Private:</label> 413 <label class="right">Private:</label>
416 </v-flex> 414 </v-flex>
417 <v-flex xs7 class="ml-3"> 415 <v-flex xs7 class="ml-3">
418 <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox> 416 <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox>
419 </v-flex> 417 </v-flex>
420 </v-layout> 418 </v-layout>
421 </v-flex> 419 </v-flex>
422 <v-layout> 420 <v-layout>
423 <v-flex xs12> 421 <v-flex xs12>
424 <v-card-actions> 422 <v-card-actions>
425 <v-spacer></v-spacer> 423 <v-spacer></v-spacer>
426 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 424 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
427 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 425 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
428 </v-card-actions> 426 </v-card-actions>
429 </v-flex> 427 </v-flex>
430 </v-layout> 428 </v-layout>
431 </v-container> 429 </v-container>
432 </v-form> 430 </v-form>
433 </v-card> 431 </v-card>
434 </v-dialog> 432 </v-dialog>
435 <div class="loader" v-if="showLoader"> 433 <div class="loader" v-if="showLoader">
436 <v-progress-circular indeterminate color="white"></v-progress-circular> 434 <v-progress-circular indeterminate color="white"></v-progress-circular>
437 </div> 435 </div>
438 </v-container> 436 </v-container>
439 </template> 437 </template>
440 438
441 <script> 439 <script>
442 import http from "@/Services/http.js"; 440 import http from "@/Services/http.js";
443 import Util from "@/util"; 441 import Util from "@/util";
444 442
445 export default { 443 export default {
446 data: () => ({ 444 data: () => ({
447 snackbar: false, 445 snackbar: false,
448 y: "top", 446 y: "top",
449 x: "right", 447 x: "right",
450 mode: "", 448 mode: "",
451 timeout: 3000, 449 timeout: 3000,
452 text: "", 450 text: "",
453 show: true, 451 show: true,
454 showSearch: false, 452 showSearch: false,
455 loading: false, 453 loading: false,
456 loadingUpadte: false, 454 loadingUpadte: false,
457 date: null, 455 date: null,
458 search: "", 456 search: "",
459 showLoader: false, 457 showLoader: false,
460 editEbookDialog: false, 458 editEbookDialog: false,
461 viewEbookDialog: false, 459 viewEbookDialog: false,
462 valid: true, 460 valid: true,
463 addEBookDialog: false, 461 addEBookDialog: false,
464 editLoading: false, 462 editLoading: false,
465 addClass: [], 463 addClass: [],
466 addSection: [], 464 addSection: [],
467 pagination: { 465 pagination: {
468 rowsPerPage: 10, 466 rowsPerPage: 10,
469 }, 467 },
470 imageName: "", 468 imageName: "",
471 fileName: "", 469 fileName: "",
472 imageUrl: "", 470 imageUrl: "",
473 imageFile: "", 471 imageFile: "",
474 image: [], 472 image: [],
475 upload: "", 473 upload: "",
476 files: "", 474 files: "",
477 anyFile: "", 475 anyFile: "",
478 titleRules: [(v) => !!v || " Tilte is required"], 476 titleRules: [(v) => !!v || " Tilte is required"],
479 descriptionRules: [(v) => !!v || " Description is required"], 477 descriptionRules: [(v) => !!v || " Description is required"],
480 uploadImageRule: [(v) => !!v || " field is required"], 478 uploadImageRule: [(v) => !!v || " field is required"],
481 uploadFileRule: [(v) => !!v || " fied is required"], 479 uploadFileRule: [(v) => !!v || " fied is required"],
482 uploadPrivateRule: [(v) => !!v || " fied is required"], 480 uploadPrivateRule: [(v) => !!v || " fied is required"],
483 481
484 headers: [ 482 headers: [
485 { 483 {
486 align: "left", 484 align: "left",
487 text: "No", 485 text: "No",
488 sortable: false, 486 sortable: false,
489 value: "No", 487 value: "No",
490 }, 488 },
491 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 489 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
492 { text: "Name", vaue: "name", sortable: false, align: "center" }, 490 { text: "Name", vaue: "name", sortable: false, align: "center" },
493 { text: "Author", value: "author", sortable: false, align: "center" }, 491 { text: "Author", value: "author", sortable: false, align: "center" },
494 { 492 {
495 text: "Class", 493 text: "Class",
496 value: "classId", 494 value: "classId",
497 sortable: false, 495 sortable: false,
498 align: "center", 496 align: "center",
499 }, 497 },
500 { text: "Action", value: "", sortable: false, align: "center" }, 498 { text: "Action", value: "", sortable: false, align: "center" },
501 ], 499 ],
502 eBookData: [], 500 eBookData: [],
503 editedIndex: -1, 501 editedIndex: -1,
504 addEBooks: { 502 addEBooks: {
505 private: false, 503 private: false,
506 }, 504 },
507 editedItem: {}, 505 editedItem: {},
508 editedItem: { 506 editedItem: {
509 classId: { 507 classId: {
510 classNum: "", 508 classNum: "",
511 }, 509 },
512 }, 510 },
513 token: "", 511 token: "",
514 uploadCover: {}, 512 uploadCover: {},
515 editImageName: "", 513 editImageName: "",
516 editFiles: "", 514 editFiles: "",
517 editAnyFile: "", 515 editAnyFile: "",
518 editFileName: "", 516 editFileName: "",
519 }), 517 }),
520 watch: { 518 watch: {
521 addEBookDialog: function (val) { 519 addEBookDialog: function (val) {
522 if (!val) { 520 if (!val) {
523 this.addEBooks = []; 521 this.addEBooks = [];
524 this.imageName = ""; 522 this.imageName = "";
525 this.fileName = ""; 523 this.fileName = "";
526 this.files = ""; 524 this.files = "";
527 } 525 }
528 }, 526 },
529 }, 527 },
530 methods: { 528 methods: {
531 editPickImage() { 529 editPickImage() {
532 this.$refs.editImage.click(); 530 this.$refs.editImage.click();
533 }, 531 },
534 pickImage() { 532 pickImage() {
535 this.$refs.image.click(); 533 this.$refs.image.click();
536 }, 534 },
537 pickFile() { 535 pickFile() {
538 this.$refs.file.click(); 536 this.$refs.file.click();
539 }, 537 },
540 editPickFile() { 538 editPickFile() {
541 this.$refs.editFile.click(); 539 this.$refs.editFile.click();
542 }, 540 },
543 onImagePicked(e) { 541 onImagePicked(e) {
544 // console.log(e) 542 // console.log(e)
545 const files = e.target.files; 543 const files = e.target.files;
546 /** fetch Image Name **/ 544 /** fetch Image Name **/
547 if (files[0] !== undefined) { 545 if (files[0] !== undefined) {
548 this.imageName = files[0].name; 546 this.imageName = files[0].name;
549 if (this.imageName.lastIndexOf(".") <= 0) { 547 if (this.imageName.lastIndexOf(".") <= 0) {
550 return; 548 return;
551 } 549 }
552 /** Select many image and showing many image add to news card **/ 550 /** Select many image and showing many image add to news card **/
553 const fr = new FileReader(); 551 const fr = new FileReader();
554 fr.readAsDataURL(files[0]); 552 fr.readAsDataURL(files[0]);
555 fr.addEventListener("load", () => { 553 fr.addEventListener("load", () => {
556 this.files = fr.result; 554 this.files = fr.result;
557 }); 555 });
558 } else { 556 } else {
559 this.imageName = ""; 557 this.imageName = "";
560 this.imageFile = ""; 558 this.imageFile = "";
561 this.files = ""; 559 this.files = "";
562 this.imageUrl = ""; 560 this.imageUrl = "";
563 } 561 }
564 }, 562 },
565 onEditImagePicked(e) { 563 onEditImagePicked(e) {
566 // console.log(e) 564 // console.log(e)
567 const files = e.target.files; 565 const files = e.target.files;
568 /** fetch Image Name **/ 566 /** fetch Image Name **/
569 if (files[0] !== undefined) { 567 if (files[0] !== undefined) {
570 this.editImageName = files[0].name; 568 this.editImageName = files[0].name;
571 if (this.editImageName.lastIndexOf(".") <= 0) { 569 if (this.editImageName.lastIndexOf(".") <= 0) {
572 return; 570 return;
573 } 571 }
574 /** Select many image and showing many image add to news card **/ 572 /** Select many image and showing many image add to news card **/
575 const fr = new FileReader(); 573 const fr = new FileReader();
576 fr.readAsDataURL(files[0]); 574 fr.readAsDataURL(files[0]);
577 fr.addEventListener("load", () => { 575 fr.addEventListener("load", () => {
578 this.editFiles = fr.result; 576 this.editFiles = fr.result;
579 }); 577 });
580 } else { 578 } else {
581 this.editImageName = ""; 579 this.editImageName = "";
582 this.editFiles = ""; 580 this.editFiles = "";
583 } 581 }
584 }, 582 },
585 getEBooksList() { 583 getEBooksList() {
586 this.showLoader = true; 584 this.showLoader = true;
587 http() 585 http()
588 .get("/getEBooksList", { 586 .get("/getEBooksList", {
589 params: { schoolId: this.$store.state.schoolId }, 587 params: { schoolId: this.$store.state.schoolId },
590 headers: { Authorization: "Bearer " + this.token }, 588 headers: { Authorization: "Bearer " + this.token },
591 }) 589 })
592 .then((response) => { 590 .then((response) => {
593 this.eBookData = response.data.data; 591 this.eBookData = response.data.data;
594 this.showLoader = false; 592 this.showLoader = false;
595 }) 593 })
596 .catch((error) => { 594 .catch((error) => {
597 // console.log("err====>", err); 595 // console.log("err====>", err);
598 this.showLoader = false; 596 this.showLoader = false;
599 if (error.response.status === 401) { 597 if (error.response.status === 401) {
600 this.$router.replace({ path: "/" }); 598 this.$router.replace({ path: "/" });
601 this.$store.dispatch("setToken", null); 599 this.$store.dispatch("setToken", null);
602 this.$store.dispatch("Id", null); 600 this.$store.dispatch("Id", null);
603 } 601 }
604 }); 602 });
605 }, 603 },
606 onFilePicked(e) { 604 onFilePicked(e) {
607 // console.log(e) 605 // console.log(e)
608 const files = e.target.files; 606 const files = e.target.files;
609 /** fetch Image Name **/ 607 /** fetch Image Name **/
610 if (files[0] !== undefined) { 608 if (files[0] !== undefined) {
611 this.fileName = files[0].name; 609 this.fileName = files[0].name;
612 if (this.fileName.lastIndexOf(".") <= 0) { 610 if (this.fileName.lastIndexOf(".") <= 0) {
613 return; 611 return;
614 } 612 }
615 const fr = new FileReader(); 613 const fr = new FileReader();
616 fr.readAsDataURL(files[0]); 614 fr.readAsDataURL(files[0]);
617 fr.addEventListener("load", () => { 615 fr.addEventListener("load", () => {
618 this.anyFile = fr.result; 616 this.anyFile = fr.result;
619 // console.log(" this.anyFile Url", this.anyFile ) 617 // console.log(" this.anyFile Url", this.anyFile )
620 }); 618 });
621 } else { 619 } else {
622 this.anyFile = ""; 620 this.anyFile = "";
623 this.fileName = ""; 621 this.fileName = "";
624 } 622 }
625 }, 623 },
626 onEditFilePicked(e) { 624 onEditFilePicked(e) {
627 // console.log(e) 625 // console.log(e)
628 const files = e.target.files; 626 const files = e.target.files;
629 /** fetch Image Name **/ 627 /** fetch Image Name **/
630 if (files[0] !== undefined) { 628 if (files[0] !== undefined) {
631 this.editFileName = files[0].name; 629 this.editFileName = files[0].name;
632 if (this.editFileName.lastIndexOf(".") <= 0) { 630 if (this.editFileName.lastIndexOf(".") <= 0) {
633 return; 631 return;
634 } 632 }
635 const fr = new FileReader(); 633 const fr = new FileReader();
636 fr.readAsDataURL(files[0]); 634 fr.readAsDataURL(files[0]);
637 fr.addEventListener("load", () => { 635 fr.addEventListener("load", () => {
638 this.editAnyFile = fr.result; 636 this.editAnyFile = fr.result;
639 // console.log(" this.anyFile Url", this.anyFile ) 637 // console.log(" this.anyFile Url", this.anyFile )
640 }); 638 });
641 } else { 639 } else {
642 this.editAnyFile = ""; 640 this.editAnyFile = "";
643 this.editFileName = ""; 641 this.editFileName = "";
644 } 642 }
645 }, 643 },
646 editItem(item) { 644 editItem(item) {
647 this.files = []; 645 this.files = [];
648 this.editedIndex = this.eBookData.indexOf(item); 646 this.editedIndex = this.eBookData.indexOf(item);
649 this.editedItem = Object.assign({}, item); 647 this.editedItem = Object.assign({}, item);
650 this.editedItem.className = item.classId.classNum; 648 this.editedItem.className = item.classId.classNum;
651 this.editEbookDialog = true; 649 this.editEbookDialog = true;
652 }, 650 },
653 profile(item) { 651 profile(item) {
654 this.editedIndex = this.eBookData.indexOf(item); 652 this.editedIndex = this.eBookData.indexOf(item);
655 this.editedItem = Object.assign({}, item); 653 this.editedItem = Object.assign({}, item);
656 this.viewEbookDialog = true; 654 this.viewEbookDialog = true;
657 }, 655 },
658 deleteItem(item) { 656 deleteItem(item) {
659 let deleteEBooks = { 657 let deleteEBooks = {
660 ebookId: item._id, 658 ebookId: item._id,
661 }; 659 };
662 http() 660 http()
663 .delete( 661 .delete(
664 "/deleteEBook", 662 "/deleteEBook",
665 confirm("Are you sure you want to delete this?") && { 663 confirm("Are you sure you want to delete this?") && {
666 params: deleteEBooks, 664 params: deleteEBooks,
667 } 665 }
668 ) 666 )
669 .then((response) => { 667 .then((response) => {
670 this.snackbar = true; 668 this.snackbar = true;
671 this.text = "Successfully delete Existing News"; 669 this.text = "Successfully delete Existing News";
672 this.getEBooksList(); 670 this.getEBooksList();
673 }) 671 })
674 .catch((error) => { 672 .catch((error) => {
675 this.snackbar = true; 673 this.snackbar = true;
676 this.text = error.response.data.message; 674 this.text = error.response.data.message;
677 }); 675 });
678 }, 676 },
679 close() { 677 close() {
680 this.editEbookDialog = false; 678 this.editEbookDialog = false;
681 }, 679 },
682 close1() { 680 close1() {
683 this.viewEbookDialog = false; 681 this.viewEbookDialog = false;
684 }, 682 },
685 closeAddEBookModel() { 683 closeAddEBookModel() {
686 this.addEBookDialog = false; 684 this.addEBookDialog = false;
687 this.eBookData = []; 685 this.eBookData = [];
688 this.addEBooks = []; 686 this.addEBooks = [];
689 this.imageName = ""; 687 this.imageName = "";
690 this.fileName = ""; 688 this.fileName = "";
691 this.files = ""; 689 this.files = "";
692 }, 690 },
693 submit() { 691 submit() {
694 if (this.$refs.form.validate()) { 692 if (this.$refs.form.validate()) {
695 this.loading = true; 693 this.loading = true;
696 var uploadCover = ""; 694 var uploadCover = "";
697 var uploadFile = ""; 695 var uploadFile = "";
698 if (this.files) { 696 if (this.files) {
699 const [baseUrl, imageUrl] = this.files.split(/,/); 697 const [baseUrl, imageUrl] = this.files.split(/,/);
700 uploadCover = imageUrl; 698 uploadCover = imageUrl;
701 console.log("anyFile.split(/,/)", uploadCover); 699 console.log("anyFile.split(/,/)", uploadCover);
702 } 700 }
703 if (this.anyFile) { 701 if (this.anyFile) {
704 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 702 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
705 uploadFile = fileUrl; 703 uploadFile = fileUrl;
706 console.log("anyFile.split(/,/)", uploadFile); 704 console.log("anyFile.split(/,/)", uploadFile);
707 } 705 }
708 let data = { 706 let data = {
709 classId: this.addEBooks.classId, 707 classId: this.addEBooks.classId,
710 name: this.addEBooks.name, 708 name: this.addEBooks.name,
711 author: this.addEBooks.author, 709 author: this.addEBooks.author,
712 private: this.addEBooks.private, 710 private: this.addEBooks.private,
713 uploadCover: uploadCover, 711 uploadCover: uploadCover,
714 uploadFile: uploadFile, 712 uploadFile: uploadFile,
715 }; 713 };
716 http() 714 http()
717 .post("/createEBook", data) 715 .post("/createEBook", data)
718 .then((response) => { 716 .then((response) => {
719 this.getEBooksList(); 717 this.getEBooksList();
720 // this.getEBooksList = []; 718 // this.getEBooksList = [];
721 this.addEBookDialog = false; 719 this.addEBookDialog = false;
722 this.snackbar = true; 720 this.snackbar = true;
723 this.text = response.data.message; 721 this.text = response.data.message;
724 this.color = "green"; 722 this.color = "green";
725 this.loading = false; 723 this.loading = false;
726 (this.imageName = ""), (this.fileName = ""); 724 (this.imageName = ""), (this.fileName = "");
727 }) 725 })
728 .catch((error) => { 726 .catch((error) => {
729 this.snackbar = true; 727 this.snackbar = true;
730 this.text = error.response.data.message; 728 this.text = error.response.data.message;
731 this.color = "red"; 729 this.color = "red";
732 }); 730 });
733 } 731 }
734 }, 732 },
735 clear() { 733 clear() {
736 this.$refs.form.reset(); 734 this.$refs.form.reset();
737 this.addEBooks.uploadCover = ""; 735 this.addEBooks.uploadCover = "";
738 this.files = ""; 736 this.files = "";
739 }, 737 },
740 save() { 738 save() {
741 this.editLoading = true; 739 this.editLoading = true;
742 this.loadingUpadte = true; 740 this.loadingUpadte = true;
743 if (this.editFiles) { 741 if (this.editFiles) {
744 const [baseUrl, imageUrl] = this.editFiles.split(/,/); 742 const [baseUrl, imageUrl] = this.editFiles.split(/,/);
745 this.editedItem.uploadCover = imageUrl; 743 this.editedItem.uploadCover = imageUrl;
746 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 744 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
747 } 745 }
748 if (this.editAnyFile) { 746 if (this.editAnyFile) {
749 const [baseUrl, fileUrl] = this.editAnyFile.split(/,/); 747 const [baseUrl, fileUrl] = this.editAnyFile.split(/,/);
750 this.editedItem.uploadFile = fileUrl; 748 this.editedItem.uploadFile = fileUrl;
751 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 749 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
752 } 750 }
753 if (this.editedItem.classId._id) { 751 if (this.editedItem.classId._id) {
754 this.editedItem.classId = this.editedItem.classId._id; 752 this.editedItem.classId = this.editedItem.classId._id;
755 } 753 }
756 this.editedItem.ebookId = this.editedItem._id; 754 this.editedItem.ebookId = this.editedItem._id;
757 console.log("this.editedItem", this.editedItem); 755 console.log("this.editedItem", this.editedItem);
758 http() 756 http()
759 .put("/updateEBook", this.editedItem) 757 .put("/updateEBook", this.editedItem)
760 .then((response) => { 758 .then((response) => {
761 this.loadingUpadte = false; 759 this.loadingUpadte = false;
762 this.snackbar = true; 760 this.snackbar = true;
763 this.text = "Successfully Edit Existing E-Book"; 761 this.text = "Successfully Edit Existing E-Book";
764 this.getEBooksList(); 762 this.getEBooksList();
765 this.editLoading = false; 763 this.editLoading = false;
766 this.editedItem.uploadFile = ""; 764 this.editedItem.uploadFile = "";
767 this.editedItem.uploadCover = ""; 765 this.editedItem.uploadCover = "";
768 this.anyFile = ""; 766 this.anyFile = "";
769 this.files = ""; 767 this.files = "";
770 this.close(); 768 this.close();
771 }) 769 })
772 .catch((error) => { 770 .catch((error) => {
773 this.editLoading = false; 771 this.editLoading = false;
774 this.loadingUpadte = false; 772 this.loadingUpadte = false;
775 this.snackbar = true; 773 this.snackbar = true;
776 this.text = error.response.data.message; 774 this.text = error.response.data.message;
777 // console.log(error); 775 // console.log(error);
778 }); 776 });
779 }, 777 },
780 getAllClass() { 778 getAllClass() {
781 http() 779 http()
782 .get("/getClassesList", { 780 .get("/getClassesList", {
783 headers: { Authorization: "Bearer " + this.token }, 781 headers: { Authorization: "Bearer " + this.token },
784 }) 782 })
785 .then((response) => { 783 .then((response) => {
786 this.addClass = response.data.data; 784 this.addClass = response.data.data;
787 }) 785 })
788 .catch((err) => { 786 .catch((err) => {
789 // console.log("err====>", err); 787 // console.log("err====>", err);
790 // this.$router.replace({ path: "/" }); 788 // this.$router.replace({ path: "/" });
791 }); 789 });
792 }, 790 },
793 displaySearch() { 791 displaySearch() {
794 (this.show = false), (this.showSearch = true); 792 (this.show = false), (this.showSearch = true);
795 }, 793 },
796 closeSearch() { 794 closeSearch() {
797 this.showSearch = false; 795 this.showSearch = false;
798 this.show = true; 796 this.show = true;
799 this.search = ""; 797 this.search = "";
800 }, 798 },
801 }, 799 },
802 mounted() { 800 mounted() {
803 this.token = this.$store.state.token; 801 this.token = this.$store.state.token;
804 this.getEBooksList(); 802 this.getEBooksList();
805 this.getAllClass(); 803 this.getAllClass();
806 this.role = this.$store.state.role; 804 this.role = this.$store.state.role;
807 // this.getBookData(); 805 // this.getBookData();
808 // this.editItem; 806 // this.editItem;
809 }, 807 },
810 }; 808 };
811 </script> 809 </script>
src/pages/Library/issue.vue
Diff comments   View file @0cb974f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT ISSUE ****** --> 3 <!-- ****** EDIT ISSUE ****** -->
4 <v-dialog v-model="editIssueDialog" max-width="600px" scrollable> 4 <v-dialog v-model="editIssueDialog" max-width="600px" scrollable>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Issue</label> 8 <label class="title text-xs-center">Edit Issue</label>
9 <v-icon size="24" class="right" @click="editIssueDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editIssueDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12> 16 <v-flex xs12 sm12>
17 <v-layout> 17 <v-layout>
18 <v-flex xs4 class="pt-4 subheading"> 18 <v-flex xs4 class="pt-4 subheading">
19 <label class="right">Library Id:</label> 19 <label class="right">Library Id:</label>
20 </v-flex> 20 </v-flex>
21 <v-flex xs7 class="ml-3"> 21 <v-flex xs7 class="ml-3">
22 <v-text-field 22 <v-text-field
23 v-model="editedItem.libraryId" 23 v-model="editedItem.libraryId"
24 placeholder="fill your Library Id" 24 placeholder="fill your Library Id"
25 name="name" 25 name="name"
26 type="text" 26 type="text"
27 disabled 27 disabled
28 ></v-text-field> 28 ></v-text-field>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 </v-flex> 31 </v-flex>
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
33 <v-layout> 33 <v-layout>
34 <v-flex xs4 class="pt-4 subheading"> 34 <v-flex xs4 class="pt-4 subheading">
35 <label class="right">Book:</label> 35 <label class="right">Book:</label>
36 </v-flex> 36 </v-flex>
37 <v-flex xs7 class="ml-3"> 37 <v-flex xs7 class="ml-3">
38 <v-select 38 <v-select
39 v-model="editedItem.bookId" 39 v-model="editedItem.bookId"
40 label="Select Book Name" 40 label="Select Book Name"
41 :rules="bookRules" 41 :rules="bookRules"
42 :items="books" 42 :items="books"
43 item-text="name" 43 item-text="name"
44 item-value="_id" 44 item-value="_id"
45 ></v-select> 45 ></v-select>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 </v-flex> 48 </v-flex>
49 <v-flex xs12 sm12> 49 <v-flex xs12 sm12>
50 <v-layout> 50 <v-layout>
51 <v-flex xs4 class="pt-4 subheading"> 51 <v-flex xs4 class="pt-4 subheading">
52 <label class="right">Author:</label> 52 <label class="right">Author:</label>
53 </v-flex> 53 </v-flex>
54 <v-flex xs7 class="ml-3"> 54 <v-flex xs7 class="ml-3">
55 <v-text-field 55 <v-text-field
56 placeholder="fill your Author Name" 56 placeholder="fill your Author Name"
57 v-model="editedItem.author" 57 v-model="editedItem.author"
58 type="text" 58 type="text"
59 ></v-text-field> 59 ></v-text-field>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 </v-flex> 62 </v-flex>
63 <v-flex xs12 sm12> 63 <v-flex xs12 sm12>
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 class="pt-4 subheading"> 65 <v-flex xs4 class="pt-4 subheading">
66 <label class="right">Subject Code:</label> 66 <label class="right">Subject Code:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs7 class="ml-3"> 68 <v-flex xs7 class="ml-3">
69 <v-text-field 69 <v-text-field
70 placeholder="fill your Subject Codes" 70 placeholder="fill your Subject Codes"
71 v-model="editedItem.subjectCode" 71 v-model="editedItem.subjectCode"
72 type="text" 72 type="text"
73 ></v-text-field> 73 ></v-text-field>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 <v-flex xs12 sm12> 77 <v-flex xs12 sm12>
78 <v-layout> 78 <v-layout>
79 <v-flex xs4 class="pt-4 subheading"> 79 <v-flex xs4 class="pt-4 subheading">
80 <label class="right">Serial Number:</label> 80 <label class="right">Serial Number:</label>
81 </v-flex> 81 </v-flex>
82 <v-flex xs7 class="ml-3"> 82 <v-flex xs7 class="ml-3">
83 <v-text-field 83 <v-text-field
84 placeholder="fill your Serial Number" 84 placeholder="fill your Serial Number"
85 v-model="editedItem.serialNumber" 85 v-model="editedItem.serialNumber"
86 type="text" 86 type="text"
87 ></v-text-field> 87 ></v-text-field>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
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">due Date:</label> 94 <label class="right">due Date:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs7 class="ml-3"> 96 <v-flex xs7 class="ml-3">
97 <v-menu 97 <v-menu
98 ref="menu1" 98 ref="menu1"
99 :close-on-content-click="false" 99 :close-on-content-click="false"
100 v-model="menu1" 100 v-model="menu1"
101 :nudge-right="40" 101 :nudge-right="40"
102 :return-value.sync="menu1" 102 :return-value.sync="menu1"
103 lazy 103 lazy
104 transition="scale-transition" 104 transition="scale-transition"
105 offset-y 105 offset-y
106 full-width 106 full-width
107 min-width="290px" 107 min-width="290px"
108 > 108 >
109 <v-text-field 109 <v-text-field
110 slot="activator" 110 slot="activator"
111 v-model="editedItem.dueDate" 111 v-model="editedItem.dueDate"
112 label="Select Due Date" 112 label="Select Due Date"
113 append-icon="event" 113 append-icon="event"
114 readonly 114 readonly
115 ></v-text-field> 115 ></v-text-field>
116 <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> 116 <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker>
117 </v-menu> 117 </v-menu>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-flex> 120 </v-flex>
121 <v-flex xs12 sm12> 121 <v-flex xs12 sm12>
122 <v-layout> 122 <v-layout>
123 <v-flex xs4 class="pt-4 subheading"> 123 <v-flex xs4 class="pt-4 subheading">
124 <label class="right">Note:</label> 124 <label class="right">Note:</label>
125 </v-flex> 125 </v-flex>
126 <v-flex xs7 class="ml-3"> 126 <v-flex xs7 class="ml-3">
127 <v-text-field 127 <v-text-field
128 placeholder="fill your Serial Number" 128 placeholder="fill your Serial Number"
129 v-model="editedItem.note" 129 v-model="editedItem.note"
130 type="text" 130 type="text"
131 ></v-text-field> 131 ></v-text-field>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 <v-layout> 136 <v-layout>
137 <v-flex xs12> 137 <v-flex xs12>
138 <v-card-actions> 138 <v-card-actions>
139 <v-spacer></v-spacer> 139 <v-spacer></v-spacer>
140 <v-btn round dark @click="save" class="add-button">Save</v-btn> 140 <v-btn round dark @click="save" class="add-button">Save</v-btn>
141 </v-card-actions> 141 </v-card-actions>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 </v-container> 144 </v-container>
145 </v-form> 145 </v-form>
146 </v-card-text> 146 </v-card-text>
147 </v-card> 147 </v-card>
148 </v-dialog> 148 </v-dialog>
149 149
150 <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> 150 <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** -->
151 151
152 <v-dialog v-model="viewIssueDialog" max-width="500px"> 152 <v-dialog v-model="viewIssueDialog" max-width="500px">
153 <v-card flat class="card-style pa-3" dark> 153 <v-card flat class="card-style pa-3" dark>
154 <v-layout> 154 <v-layout>
155 <v-flex xs12> 155 <v-flex xs12>
156 <label class="title text-xs-center">View Issue</label> 156 <label class="title text-xs-center">View Issue</label>
157 <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> 157 <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 <v-card-text> 160 <v-card-text>
161 <v-container grid-list-md> 161 <v-container grid-list-md>
162 <v-layout wrap> 162 <v-layout wrap>
163 <v-flex> 163 <v-flex>
164 <v-layout> 164 <v-layout>
165 <v-flex xs5 sm6> 165 <v-flex xs5 sm6>
166 <h5 class="right my-1"> 166 <h5 class="right my-1">
167 <b>Book:</b> 167 <b>Book:</b>
168 </h5> 168 </h5>
169 </v-flex> 169 </v-flex>
170 <v-flex sm6 xs8> 170 <v-flex sm6 xs8>
171 <h5 class="my-1">{{ editedItem.name }}</h5> 171 <h5 class="my-1">{{ editedItem.name }}</h5>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout> 174 <v-layout>
175 <v-flex xs5 sm6> 175 <v-flex xs5 sm6>
176 <h5 class="right my-1"> 176 <h5 class="right my-1">
177 <b>Serial Number:</b> 177 <b>Serial Number:</b>
178 </h5> 178 </h5>
179 </v-flex> 179 </v-flex>
180 <v-flex sm6 xs8> 180 <v-flex sm6 xs8>
181 <h5 class="my-1">{{ editedItem.serialNumber }}</h5> 181 <h5 class="my-1">{{ editedItem.serialNumber }}</h5>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 <v-layout> 184 <v-layout>
185 <v-flex xs5 sm6> 185 <v-flex xs5 sm6>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Issue date:</b> 187 <b>Issue date:</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm6 xs8> 190 <v-flex sm6 xs8>
191 <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> 191 <h5 class="my-1">{{ dates(editedItem.creted) }}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 <v-layout> 194 <v-layout>
195 <v-flex xs5 sm6> 195 <v-flex xs5 sm6>
196 <h5 class="right my-1"> 196 <h5 class="right my-1">
197 <b>Due date:</b> 197 <b>Due date:</b>
198 </h5> 198 </h5>
199 </v-flex> 199 </v-flex>
200 <v-flex sm6 xs8> 200 <v-flex sm6 xs8>
201 <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> 201 <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5>
202 </v-flex> 202 </v-flex>
203 </v-layout> 203 </v-layout>
204 <v-layout> 204 <v-layout>
205 <v-flex xs5 sm6> 205 <v-flex xs5 sm6>
206 <h5 class="right my-1"> 206 <h5 class="right my-1">
207 <b>Status:</b> 207 <b>Status:</b>
208 </h5> 208 </h5>
209 </v-flex> 209 </v-flex>
210 <v-flex sm6 xs8> 210 <v-flex sm6 xs8>
211 <h5 class="my-1">{{ editedItem.status }}</h5> 211 <h5 class="my-1">{{ editedItem.status }}</h5>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-container> 216 </v-container>
217 </v-card-text> 217 </v-card-text>
218 </v-card> 218 </v-card>
219 </v-dialog> 219 </v-dialog>
220 <!-- ****** EXISTING ISSUE TABLE****** --> 220 <!-- ****** EXISTING ISSUE TABLE****** -->
221 <!-- <v-card> 221 <!-- <v-card>
222 <v-layout> 222 <v-layout>
223 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> 223 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only">
224 <label class="right pt-4">Library ID:</label> 224 <label class="right pt-4">Library ID:</label>
225 </v-flex> 225 </v-flex>
226 <v-flex lg2 md3 xs7> 226 <v-flex lg2 md3 xs7>
227 <v-text-field 227 <v-text-field
228 class="pl-3" 228 class="pl-3"
229 @keyup.enter="getIssueList" 229 @keyup.enter="getIssueList"
230 v-model="libraryId" 230 v-model="libraryId"
231 placeholder="fill your library Id" 231 placeholder="fill your library Id"
232 ></v-text-field> 232 ></v-text-field>
233 </v-flex> 233 </v-flex>
234 <v-flex lg9 md3 xs5> 234 <v-flex lg9 md3 xs5>
235 <v-btn 235 <v-btn
236 round 236 round
237 class="black mt-1 right hidden-xs-only" 237 class="black mt-1 right hidden-xs-only"
238 @click="getIssueList" 238 @click="getIssueList"
239 :loading="loadingSearch" 239 :loading="loadingSearch"
240 dark 240 dark
241 >Search</v-btn> 241 >Search</v-btn>
242 <v-btn 242 <v-btn
243 round 243 round
244 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" 244 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
245 :loading="loadingSearch" 245 :loading="loadingSearch"
246 @click="getIssueList" 246 @click="getIssueList"
247 small 247 small
248 dark 248 dark
249 >Search</v-btn> 249 >Search</v-btn>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-card>--> 252 </v-card>-->
253 253
254 <v-toolbar color="transparent" flat> 254 <v-toolbar color="transparent" flat>
255 <v-btn 255 <v-btn
256 fab 256 fab
257 dark 257 dark
258 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 258 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
259 small 259 small
260 @click="addIssueDialog = true" 260 @click="addIssueDialog = true"
261 > 261 >
262 <v-icon dark>add</v-icon> 262 <v-icon dark>add</v-icon>
263 </v-btn> 263 </v-btn>
264 <v-btn 264 <v-btn
265 round 265 round
266 class="open-dialog-button hidden-sm-only hidden-xs-only" 266 class="open-dialog-button hidden-sm-only hidden-xs-only"
267 dark 267 dark
268 @click="addIssueDialog = true" 268 @click="addIssueDialog = true"
269 > 269 >
270 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue 270 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue
271 </v-btn> 271 </v-btn>
272 <v-flex lg2 md3 xs7> 272 <v-flex lg2 md3 xs7>
273 <v-text-field 273 <v-text-field
274 class="pl-3" 274 class="pl-3"
275 @keyup.enter="getIssueList" 275 @keyup.enter="getIssueList"
276 v-model="libraryId" 276 v-model="libraryId"
277 placeholder="fill your library Id" 277 placeholder="fill your library Id"
278 ></v-text-field> 278 ></v-text-field>
279 </v-flex> 279 </v-flex>
280 <v-spacer></v-spacer> 280 <v-spacer></v-spacer>
281 <v-btn 281 <v-btn
282 round 282 round
283 class="add-button mt-1 right hidden-xs-only" 283 class="add-button mt-1 right hidden-xs-only"
284 @click="getIssueList" 284 @click="getIssueList"
285 :loading="loadingSearch" 285 :loading="loadingSearch"
286 dark 286 dark
287 >Search</v-btn> 287 >Search</v-btn>
288 <v-btn 288 <v-btn
289 round 289 round
290 class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" 290 class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
291 :loading="loadingSearch" 291 :loading="loadingSearch"
292 @click="getIssueList" 292 @click="getIssueList"
293 small 293 small
294 dark 294 dark
295 >Search</v-btn> 295 >Search</v-btn>
296 <v-card-title class="body-1" v-show="show"> 296 <v-card-title class="body-1" v-show="show">
297 <v-btn icon large flat @click="displaySearch"> 297 <v-btn icon large flat @click="displaySearch">
298 <v-avatar size="27"> 298 <v-avatar size="27">
299 <img src="/static/icon/search.png" alt="icon" /> 299 <img src="/static/icon/search.png" alt="icon" />
300 </v-avatar> 300 </v-avatar>
301 </v-btn> 301 </v-btn>
302 </v-card-title> 302 </v-card-title>
303 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 303 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
304 <v-layout> 304 <v-layout>
305 <v-text-field 305 <v-text-field
306 autofocus 306 autofocus
307 v-model="search" 307 v-model="search"
308 label="Search" 308 label="Search"
309 prepend-inner-icon="search" 309 prepend-inner-icon="search"
310 color="primary" 310 color="primary"
311 ></v-text-field> 311 ></v-text-field>
312 <v-icon @click="closeSearch" color="error">close</v-icon> 312 <v-icon @click="closeSearch" color="error">close</v-icon>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 </v-toolbar> 315 </v-toolbar>
316 <v-data-table 316 <v-data-table
317 :headers="headers" 317 :headers="headers"
318 :items="desserts" 318 :items="desserts"
319 :pagination.sync="pagination" 319 :pagination.sync="pagination"
320 :search="search" 320 :search="search"
321 > 321 >
322 <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> 322 <template slot="items" slot-scope="props" v-if="props.item.isReturn != true">
323 <tr class="tr"> 323 <tr class="tr">
324 <td class="td td-row">{{ props.index + 1}}</td> 324 <td class="td td-row">{{ props.index + 1}}</td>
325 <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> 325 <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td>
326 <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> 326 <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td>
327 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> 327 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
328 <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> 328 <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td>
329 <td class="text-xs-center td td-row"> 329 <td class="text-xs-center td td-row">
330 <span 330 <span
331 v-if="props.item.bookId.status === 'AVAILABLE'" 331 v-if="props.item.bookId.status === 'AVAILABLE'"
332 class="green lighten-1 pa-1 px-2 white--text paymentStatus" 332 class="green lighten-1 pa-1 px-2 white--text paymentStatus"
333 >{{ props.item.bookId.status}}</span> 333 >{{ props.item.bookId.status}}</span>
334 <span 334 <span
335 v-if="props.item.bookId.status === 'UNAVAILABLE'" 335 v-if="props.item.bookId.status === 'UNAVAILABLE'"
336 class="red lighten-1 pa-1 px-2 white--text paymentStatus" 336 class="red lighten-1 pa-1 px-2 white--text paymentStatus"
337 >{{ props.item.bookId.status}}</span> 337 >{{ props.item.bookId.status}}</span>
338 </td> 338 </td>
339 <td class="text-xs-center td td-row"> 339 <td class="text-xs-center td td-row">
340 <span> 340 <span>
341 <v-tooltip top> 341 <v-tooltip top>
342 <img 342 <img
343 slot="activator" 343 slot="activator"
344 style="cursor:pointer; width:25px; height:25px; " 344 style="cursor:pointer; width:25px; height:25px; "
345 class="mr-3" 345 class="mr-3"
346 @click="profile(props.item)" 346 @click="profile(props.item)"
347 src="/static/icon/view.png" 347 src="/static/icon/view.png"
348 /> 348 />
349 <span>View</span> 349 <span>View</span>
350 </v-tooltip> 350 </v-tooltip>
351 <v-tooltip top> 351 <v-tooltip top>
352 <img 352 <img
353 slot="activator" 353 slot="activator"
354 style="cursor:pointer; width:20px; height:18px; " 354 style="cursor:pointer; width:20px; height:18px; "
355 class="mr-3" 355 class="mr-3"
356 @click="editItem(props.item)" 356 @click="editItem(props.item)"
357 src="/static/icon/edit.png" 357 src="/static/icon/edit.png"
358 /> 358 />
359 <span>Edit</span> 359 <span>Edit</span>
360 </v-tooltip> 360 </v-tooltip>
361 <v-tooltip top> 361 <v-tooltip top>
362 <img 362 <img
363 slot="activator" 363 slot="activator"
364 style="cursor:pointer; width:20px; height:20px; " 364 style="cursor:pointer; width:20px; height:20px; "
365 @click="deleteItem(props.item)" 365 @click="deleteItem(props.item)"
366 src="/static/icon/delete.png" 366 src="/static/icon/delete.png"
367 /> 367 />
368 <span>Delete</span> 368 <span>Delete</span>
369 </v-tooltip> 369 </v-tooltip>
370 </span> 370 </span>
371 </td> 371 </td>
372 </tr> 372 </tr>
373 </template> 373 </template>
374 <v-alert 374 <v-alert
375 slot="no-results" 375 slot="no-results"
376 :value="true" 376 :value="true"
377 color="error" 377 color="error"
378 icon="warning" 378 icon="warning"
379 >Your search for "{{ search }}" found no results.</v-alert> 379 >Your search for "{{ search }}" found no results.</v-alert>
380 </v-data-table> 380 </v-data-table>
381 381
382 <!-- ****** ADD Issue ****** --> 382 <!-- ****** ADD Issue ****** -->
383 <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog"> 383 <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog">
384 <v-card flat class="card-style pa-2" dark> 384 <v-card flat class="card-style pa-2" dark>
385 <v-layout> 385 <v-layout>
386 <v-flex xs12> 386 <v-flex xs12>
387 <label class="title text-xs-center">Add Issue</label> 387 <label class="title text-xs-center">Add Issue</label>
388 <v-icon size="24" class="right" @click="closeAddIssueModel">cancel</v-icon> 388 <v-icon size="24" class="right" @click="closeAddIssueModel">cancel</v-icon>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-form ref="form" v-model="valid" lazy-validation> 391 <v-form ref="form" v-model="valid" lazy-validation>
392 <v-container fluid> 392 <v-container fluid>
393 <v-flex xs12> 393 <v-flex xs12>
394 <v-layout> 394 <v-layout>
395 <v-flex xs4 class="pt-4 subheading"> 395 <v-flex xs4 class="pt-4 subheading">
396 <label class="right">Library ID:</label> 396 <label class="right">Library ID:</label>
397 </v-flex> 397 </v-flex>
398 <v-flex xs7 class="ml-3"> 398 <v-flex xs7 class="ml-3">
399 <v-text-field 399 <v-text-field
400 v-model="libraryID" 400 v-model="libraryID"
401 placeholder="fill your Library ID" 401 placeholder="fill your Library ID"
402 :rules="libraryIDRules" 402 :rules="libraryIDRules"
403 required 403 required
404 ></v-text-field> 404 ></v-text-field>
405 </v-flex> 405 </v-flex>
406 </v-layout> 406 </v-layout>
407 </v-flex> 407 </v-flex>
408 <v-flex xs12> 408 <v-flex xs12>
409 <v-layout> 409 <v-layout>
410 <v-flex xs4 class="pt-4 subheading"> 410 <v-flex xs4 class="pt-4 subheading">
411 <label class="right">Book:</label> 411 <label class="right">Book:</label>
412 </v-flex> 412 </v-flex>
413 <v-flex xs7 class="ml-3"> 413 <v-flex xs7 class="ml-3">
414 <v-select 414 <v-select
415 label="Select Book Name" 415 label="Select Book Name"
416 :rules="bookRules" 416 :rules="bookRules"
417 :items="books" 417 :items="books"
418 item-text="name" 418 item-text="name"
419 item-value="_id" 419 item-value="_id"
420 v-model="bookId" 420 v-model="bookId"
421 @change="getParticularBookData(bookId)" 421 @change="getParticularBookData(bookId)"
422 required 422 required
423 ></v-select> 423 ></v-select>
424 </v-flex> 424 </v-flex>
425 </v-layout> 425 </v-layout>
426 </v-flex> 426 </v-flex>
427 <v-flex xs12> 427 <v-flex xs12>
428 <v-layout> 428 <v-layout>
429 <v-flex xs4 class="pt-4 subheading"> 429 <v-flex xs4 class="pt-4 subheading">
430 <label class="right">Author:</label> 430 <label class="right">Author:</label>
431 </v-flex> 431 </v-flex>
432 <v-flex xs7 class="ml-3"> 432 <v-flex xs7 class="ml-3">
433 <v-text-field 433 <v-text-field
434 placeholder="fill your Author" 434 placeholder="fill your Author"
435 :rules="authorRules" 435 :rules="authorRules"
436 v-model="addIssue.author" 436 v-model="addIssue.author"
437 ></v-text-field> 437 ></v-text-field>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 </v-flex> 440 </v-flex>
441 <v-flex xs12> 441 <v-flex xs12>
442 <v-layout> 442 <v-layout>
443 <v-flex xs4 class="pt-4 subheading"> 443 <v-flex xs4 class="pt-4 subheading">
444 <label class="right">Subject Code:</label> 444 <label class="right">Subject Code:</label>
445 </v-flex> 445 </v-flex>
446 <v-flex xs7 class="ml-3"> 446 <v-flex xs7 class="ml-3">
447 <v-text-field 447 <v-text-field
448 placeholder="fill your Subject Code" 448 placeholder="fill your Subject Code"
449 :rules="subjectCodeRules" 449 :rules="subjectCodeRules"
450 v-model="addIssue.subjectCode" 450 v-model="addIssue.subjectCode"
451 ></v-text-field> 451 ></v-text-field>
452 </v-flex> 452 </v-flex>
453 </v-layout> 453 </v-layout>
454 </v-flex> 454 </v-flex>
455 <v-flex xs12> 455 <v-flex xs12>
456 <v-layout> 456 <v-layout>
457 <v-flex xs4 class="pt-4 subheading"> 457 <v-flex xs4 class="pt-4 subheading">
458 <label class="right">Serial No:</label> 458 <label class="right">Serial No:</label>
459 </v-flex> 459 </v-flex>
460 <v-flex xs7 class="ml-3"> 460 <v-flex xs7 class="ml-3">
461 <v-text-field 461 <v-text-field
462 placeholder="fill your Serial No" 462 placeholder="fill your Serial No"
463 :rules="authorRules" 463 :rules="authorRules"
464 v-model="serialNo" 464 v-model="serialNo"
465 ></v-text-field> 465 ></v-text-field>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 </v-flex> 468 </v-flex>
469 <v-flex xs12> 469 <v-flex xs12>
470 <v-layout> 470 <v-layout>
471 <v-flex xs4 class="pt-4 subheading"> 471 <v-flex xs4 class="pt-4 subheading">
472 <label class="right">Due Date:</label> 472 <label class="right">Due Date:</label>
473 </v-flex> 473 </v-flex>
474 <v-flex xs7 class="ml-3"> 474 <v-flex xs7 class="ml-3">
475 <v-menu 475 <v-menu
476 ref="menu2" 476 ref="menu2"
477 :close-on-content-click="false" 477 :close-on-content-click="false"
478 v-model="menu2" 478 v-model="menu2"
479 :nudge-right="40" 479 :nudge-right="40"
480 :return-value.sync="date" 480 :return-value.sync="date"
481 lazy 481 lazy
482 transition="scale-transition" 482 transition="scale-transition"
483 offset-y 483 offset-y
484 full-width 484 full-width
485 min-width="290px" 485 min-width="290px"
486 > 486 >
487 <v-text-field 487 <v-text-field
488 slot="activator" 488 slot="activator"
489 v-model="date" 489 v-model="date"
490 label="Select Due Date" 490 label="Select Due Date"
491 append-icon="event" 491 append-icon="event"
492 :rules="dueDateRule" 492 :rules="dueDateRule"
493 readonly 493 readonly
494 ></v-text-field> 494 ></v-text-field>
495 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> 495 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
496 </v-menu> 496 </v-menu>
497 </v-flex> 497 </v-flex>
498 </v-layout> 498 </v-layout>
499 </v-flex> 499 </v-flex>
500 <v-flex xs12> 500 <v-flex xs12>
501 <v-layout> 501 <v-layout>
502 <v-flex xs4 class="pt-4 subheading"> 502 <v-flex xs4 class="pt-4 subheading">
503 <label class="right">Note:</label> 503 <label class="right">Note:</label>
504 </v-flex> 504 </v-flex>
505 <v-flex xs7 class="ml-3"> 505 <v-flex xs7 class="ml-3">
506 <v-text-field placeholder="fill your Note" :rules="noteRules" v-model="note"></v-text-field> 506 <v-text-field placeholder="fill your Note" v-model="note"></v-text-field>
507 </v-flex> 507 </v-flex>
508 </v-layout> 508 </v-layout>
509 </v-flex> 509 </v-flex>
510 <v-layout> 510 <v-layout>
511 <v-flex xs12> 511 <v-flex xs12>
512 <v-card-actions> 512 <v-card-actions>
513 <v-spacer></v-spacer> 513 <v-spacer></v-spacer>
514 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 514 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
515 <v-btn 515 <v-btn
516 @click="submit" 516 @click="submit"
517 round 517 round
518 dark 518 dark
519 :loading="loading" 519 :loading="loading"
520 class="add-button" 520 class="add-button"
521 :disabled="disable" 521 :disabled="disable"
522 >Add</v-btn> 522 >Add</v-btn>
523 </v-card-actions> 523 </v-card-actions>
524 </v-flex> 524 </v-flex>
525 </v-layout> 525 </v-layout>
526 </v-container> 526 </v-container>
527 </v-form> 527 </v-form>
528 </v-card> 528 </v-card>
529 </v-dialog> 529 </v-dialog>
530 <div class="loader" v-if="showLoader"> 530 <div class="loader" v-if="showLoader">
531 <v-progress-circular indeterminate color="white"></v-progress-circular> 531 <v-progress-circular indeterminate color="white"></v-progress-circular>
532 </div> 532 </div>
533 <v-snackbar 533 <v-snackbar
534 :timeout="timeout" 534 :timeout="timeout"
535 :top="y === 'top'" 535 :top="y === 'top'"
536 :right="x === 'right'" 536 :right="x === 'right'"
537 :vertical="mode === 'vertical'" 537 :vertical="mode === 'vertical'"
538 v-model="snackbar" 538 v-model="snackbar"
539 :color="color" 539 :color="color"
540 >{{ text }}</v-snackbar> 540 >{{ text }}</v-snackbar>
541 </v-container> 541 </v-container>
542 </template> 542 </template>
543 543
544 <script> 544 <script>
545 import http from "@/Services/http.js"; 545 import http from "@/Services/http.js";
546 import moment from "moment"; 546 import moment from "moment";
547 547
548 export default { 548 export default {
549 data: () => ({ 549 data: () => ({
550 snackbar: false, 550 snackbar: false,
551 date: null, 551 date: null,
552 menu1: false, 552 menu1: false,
553 menu2: false, 553 menu2: false,
554 color: "", 554 color: "",
555 show: true, 555 show: true,
556 showSearch: false, 556 showSearch: false,
557 dueDate: null, 557 dueDate: null,
558 y: "top", 558 y: "top",
559 x: "right", 559 x: "right",
560 mode: "", 560 mode: "",
561 timeout: 10000, 561 timeout: 10000,
562 text: "", 562 text: "",
563 libraryId: "", 563 libraryId: "",
564 loading: false, 564 loading: false,
565 loadingSearch: false, 565 loadingSearch: false,
566 date: null, 566 date: null,
567 search: "", 567 search: "",
568 addIssueDialog: false, 568 addIssueDialog: false,
569 viewIssueDialog: false, 569 viewIssueDialog: false,
570 showLoader: false, 570 showLoader: false,
571 editIssueDialog: false, 571 editIssueDialog: false,
572 dialog1: false, 572 dialog1: false,
573 valid: true, 573 valid: true,
574 isActive: true, 574 isActive: true,
575 newActive: false, 575 newActive: false,
576 addclass: [], 576 addclass: [],
577 addSection: [], 577 addSection: [],
578 pagination: { 578 pagination: {
579 rowsPerPage: 10, 579 rowsPerPage: 10,
580 }, 580 },
581 libraryIDRules: [(v) => !!v || " Library ID is required"], 581 libraryIDRules: [(v) => !!v || " Library ID is required"],
582 bookRules: [(v) => !!v || " book Name is required"], 582 bookRules: [(v) => !!v || " book Name is required"],
583 authorRules: [(v) => !!v || "Author Name is required"], 583 authorRules: [(v) => !!v || "Author Name is required"],
584 subjectCodeRules: [(v) => !!v || "Subject Code is required"], 584 subjectCodeRules: [(v) => !!v || "Subject Code is required"],
585 authorRules: [(v) => !!v || "Author is required"], 585 authorRules: [(v) => !!v || "Author is required"],
586 noteRules: [(v) => !!v || "Note is required"], 586 noteRules: [(v) => !!v || "Note is required"],
587 dueDateRule: [(v) => !!v || "Due Date is required"], 587 dueDateRule: [(v) => !!v || "Due Date is required"],
588 headers: [ 588 headers: [
589 { 589 {
590 align: "justify-center", 590 align: "justify-center",
591 text: "No", 591 text: "No",
592 sortable: false, 592 sortable: false,
593 value: "No", 593 value: "No",
594 }, 594 },
595 { text: "Book", vaue: "name", sortable: false, align: "center" }, 595 { text: "Book", vaue: "name", sortable: false, align: "center" },
596 { 596 {
597 text: "Serial Number", 597 text: "Serial Number",
598 value: "serialNumber", 598 value: "serialNumber",
599 sortable: false, 599 sortable: false,
600 align: "center", 600 align: "center",
601 }, 601 },
602 { 602 {
603 text: "Issue Date", 603 text: "Issue Date",
604 value: "created", 604 value: "created",
605 sortable: false, 605 sortable: false,
606 align: "center", 606 align: "center",
607 }, 607 },
608 { 608 {
609 text: "Due Date", 609 text: "Due Date",
610 value: "dueDate", 610 value: "dueDate",
611 sortable: false, 611 sortable: false,
612 align: "center", 612 align: "center",
613 }, 613 },
614 { 614 {
615 text: "Status", 615 text: "Status",
616 value: "status", 616 value: "status",
617 sortable: false, 617 sortable: false,
618 align: "center", 618 align: "center",
619 }, 619 },
620 { text: "Action", value: "", sortable: false, align: "center" }, 620 { text: "Action", value: "", sortable: false, align: "center" },
621 ], 621 ],
622 desserts: [], 622 desserts: [],
623 addIssue: {}, 623 addIssue: {},
624 bookId: "", 624 bookId: "",
625 libraryID: "", 625 libraryID: "",
626 serialNo: "", 626 serialNo: "",
627 note: "", 627 note: "",
628 editedItem: {}, 628 editedItem: {},
629 books: [], 629 books: [],
630 token: "", 630 token: "",
631 disable: false, 631 disable: false,
632 }), 632 }),
633 watch: { 633 watch: {
634 addIssueDialog: function (val) { 634 addIssueDialog: function (val) {
635 if (!val) { 635 if (!val) {
636 this.addIssue = []; 636 this.addIssue = [];
637 this.libraryID = ""; 637 this.libraryID = "";
638 this.bookId = ""; 638 this.bookId = "";
639 this.serialNo = ""; 639 this.serialNo = "";
640 this.menu2 = false; 640 this.menu2 = false;
641 this.date = null; 641 this.date = null;
642 this.note = ""; 642 this.note = "";
643 } 643 }
644 }, 644 },
645 }, 645 },
646 methods: { 646 methods: {
647 dates: function (date) { 647 dates: function (date) {
648 return moment(date).format("MMMM DD, YYYY"); 648 return moment(date).format("MMMM DD, YYYY");
649 }, 649 },
650 pickFile() { 650 pickFile() {
651 this.$refs.image.click(); 651 this.$refs.image.click();
652 }, 652 },
653 getIssueList() { 653 getIssueList() {
654 this.showLoader = true; 654 this.showLoader = true;
655 this.loadingSearch = true; 655 this.loadingSearch = true;
656 if (this.libraryID) { 656 if (this.libraryID) {
657 this.libraryId = this.libraryID; 657 this.libraryId = this.libraryID;
658 } 658 }
659 http() 659 http()
660 .get( 660 .get(
661 "/getBooksIssueList", 661 "/getBooksIssueList",
662 { 662 {
663 params: { 663 params: {
664 libraryId: this.libraryId, 664 libraryId: this.libraryId,
665 schoolId: this.$store.state.schoolId, 665 schoolId: this.$store.state.schoolId,
666 }, 666 },
667 }, 667 },
668 { 668 {
669 headers: { Authorization: "Bearer " + this.token }, 669 headers: { Authorization: "Bearer " + this.token },
670 } 670 }
671 ) 671 )
672 .then((response) => { 672 .then((response) => {
673 this.desserts = response.data.data; 673 this.desserts = response.data.data;
674 this.showLoader = false; 674 this.showLoader = false;
675 this.loadingSearch = false; 675 this.loadingSearch = false;
676 }) 676 })
677 .catch((error) => { 677 .catch((error) => {
678 this.showLoader = false; 678 this.showLoader = false;
679 this.loadingSearch = false; 679 this.loadingSearch = false;
680 this.snackbar = true; 680 this.snackbar = true;
681 this.text = error.response.data.message; 681 this.text = error.response.data.message;
682 if (error.response.status === 401) { 682 if (error.response.status === 401) {
683 this.$router.replace({ path: "/" }); 683 this.$router.replace({ path: "/" });
684 this.$store.dispatch("setToken", null); 684 this.$store.dispatch("setToken", null);
685 this.$store.dispatch("Id", null); 685 this.$store.dispatch("Id", null);
686 this.$store.dispatch("Role", null); 686 this.$store.dispatch("Role", null);
687 } 687 }
688 }); 688 });
689 }, 689 },
690 editItem(item) { 690 editItem(item) {
691 this.editedIndex = this.desserts.indexOf(item); 691 this.editedIndex = this.desserts.indexOf(item);
692 this.editedItem = Object.assign({}, item); 692 this.editedItem = Object.assign({}, item);
693 this.editedItem.name = item.bookId.name; 693 this.editedItem.name = item.bookId.name;
694 this.editedItem.status = item.bookId.status; 694 this.editedItem.status = item.bookId.status;
695 this.editedItem.dueDate = 695 this.editedItem.dueDate =
696 this.editedItem.dueDate != undefined 696 this.editedItem.dueDate != undefined
697 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) 697 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10))
698 : (this.editedItem.dueDate = ""); 698 : (this.editedItem.dueDate = "");
699 this.editIssueDialog = true; 699 this.editIssueDialog = true;
700 }, 700 },
701 profile(item) { 701 profile(item) {
702 this.editedIndex = this.desserts.indexOf(item); 702 this.editedIndex = this.desserts.indexOf(item);
703 this.editedItem = Object.assign({}, item); 703 this.editedItem = Object.assign({}, item);
704 this.editedItem.name = item.bookId.name; 704 this.editedItem.name = item.bookId.name;
705 this.editedItem.status = item.bookId.status; 705 this.editedItem.status = item.bookId.status;
706 706
707 this.viewIssueDialog = true; 707 this.viewIssueDialog = true;
708 }, 708 },
709 deleteItem(item) { 709 deleteItem(item) {
710 let deleteParticularIssue = { 710 let deleteParticularIssue = {
711 bookIssueId: item._id, 711 bookIssueId: item._id,
712 }; 712 };
713 http() 713 http()
714 .delete( 714 .delete(
715 "/deleteBookIssue", 715 "/deleteBookIssue",
716 confirm("Are you sure you want to delete this?") && { 716 confirm("Are you sure you want to delete this?") && {
717 params: deleteParticularIssue, 717 params: deleteParticularIssue,
718 } 718 }
719 ) 719 )
720 .then((response) => { 720 .then((response) => {
721 this.snackbar = true; 721 this.snackbar = true;
722 this.text = "Delete Successfully"; 722 this.text = "Delete Successfully";
723 this.getIssueList(); 723 this.getIssueList();
724 if (this.libraryID) { 724 if (this.libraryID) {
725 this.libraryId = this.libraryID; 725 this.libraryId = this.libraryID;
726 } 726 }
727 if (this.libraryId) { 727 if (this.libraryId) {
728 this.libraryId = this.libraryId; 728 this.libraryId = this.libraryId;
729 } 729 }
730 this.snackbar = true; 730 this.snackbar = true;
731 this.text = response.data.message; 731 this.text = response.data.message;
732 this.color = "green"; 732 this.color = "green";
733 this.loading = false; 733 this.loading = false;
734 }) 734 })
735 .catch((error) => { 735 .catch((error) => {
736 // console.log(error); 736 // console.log(error);
737 this.snackbar = true; 737 this.snackbar = true;
738 this.text = error.response.data.message; 738 this.text = error.response.data.message;
739 this.color = "red"; 739 this.color = "red";
740 }); 740 });
741 }, 741 },
742 returnBook(item) { 742 returnBook(item) {
743 let returnBook = { 743 let returnBook = {
744 bookIssueId: item._id, 744 bookIssueId: item._id,
745 }; 745 };
746 http() 746 http()
747 .put( 747 .put(
748 "/returnBook", 748 "/returnBook",
749 confirm("Are you sure you want to return this?") && returnBook 749 confirm("Are you sure you want to return this?") && returnBook
750 ) 750 )
751 .then((response) => { 751 .then((response) => {
752 this.snackbar = true; 752 this.snackbar = true;
753 this.text = "Successfully return Issue a Book "; 753 this.text = "Successfully return Issue a Book ";
754 this.getIssueList(); 754 this.getIssueList();
755 }) 755 })
756 .catch((error) => {}); 756 .catch((error) => {});
757 }, 757 },
758 close() { 758 close() {
759 this.editIssueDialog = false; 759 this.editIssueDialog = false;
760 }, 760 },
761 close1() { 761 close1() {
762 this.viewIssueDialog = false; 762 this.viewIssueDialog = false;
763 }, 763 },
764 closeAddIssueModel() { 764 closeAddIssueModel() {
765 this.addIssueDialog = false; 765 this.addIssueDialog = false;
766 this.desserts = []; 766 this.desserts = [];
767 this.addIssue = []; 767 this.addIssue = [];
768 this.libraryID = ""; 768 this.libraryID = "";
769 this.bookId = ""; 769 this.bookId = "";
770 this.serialNo = ""; 770 this.serialNo = "";
771 this.menu2 = false; 771 this.menu2 = false;
772 this.date = null; 772 this.date = null;
773 this.note = ""; 773 this.note = "";
774 }, 774 },
775 submit() { 775 submit() {
776 if (this.$refs.form.validate()) { 776 if (this.$refs.form.validate()) {
777 let createBook = { 777 let createBook = {
778 bookId: this.bookId, 778 bookId: this.bookId,
779 author: this.addIssue.author, 779 author: this.addIssue.author,
780 subjectCode: this.addIssue.subjectCode, 780 subjectCode: this.addIssue.subjectCode,
781 libraryId: this.libraryID, 781 libraryId: this.libraryID,
782 serialNumber: this.serialNo, 782 serialNumber: this.serialNo,
783 note: this.note, 783 note: this.note,
784 dueDate: this.date, 784 dueDate: this.date,
785 schoolId: this.$store.state.schoolId, 785 schoolId: this.$store.state.schoolId,
786 }; 786 };
787 this.loading = true; 787 this.loading = true;
788 http() 788 http()
789 .post("/createBookIssue", createBook) 789 .post("/createBookIssue", createBook)
790 .then((response) => { 790 .then((response) => {
791 this.getIssueList(); 791 this.getIssueList();
792 this.snackbar = true; 792 this.snackbar = true;
793 this.text = response.data.message; 793 this.text = response.data.message;
794 this.addIssueDialog = false; 794 this.addIssueDialog = false;
795 this.color = "green"; 795 this.color = "green";
796 this.loading = false; 796 this.loading = false;
797 this.clear(); 797 this.clear();
798 }) 798 })
799 .catch((error) => { 799 .catch((error) => {
800 this.snackbar = true; 800 this.snackbar = true;
801 this.text = error.response.data.message; 801 this.text = error.response.data.message;
802 this.color = "red"; 802 this.color = "red";
803 this.loading = false; 803 this.loading = false;
804 }); 804 });
805 } 805 }
806 }, 806 },
807 clear() { 807 clear() {
808 this.$refs.form.reset(); 808 this.$refs.form.reset();
809 this.disable = false; 809 this.disable = false;
810 }, 810 },
811 save() { 811 save() {
812 this.editedItem.bookIssueId = this.editedItem._id; 812 this.editedItem.bookIssueId = this.editedItem._id;
813 this.editedItem.bookId = this.editedItem.bookId; 813 this.editedItem.bookId = this.editedItem.bookId;
814 http() 814 http()
815 .put("/updateBookIssue", this.editedItem) 815 .put("/updateBookIssue", this.editedItem)
816 .then((response) => { 816 .then((response) => {
817 this.editIssueDialog = false; 817 this.editIssueDialog = false;
818 this.snackbar = true; 818 this.snackbar = true;
819 this.text = "Successfully Edit Issue a Book"; 819 this.text = "Successfully Edit Issue a Book";
820 this.color = "green"; 820 this.color = "green";
821 this.getIssueList(); 821 this.getIssueList();
822 this.close(); 822 this.close();
823 }) 823 })
824 .catch((error) => { 824 .catch((error) => {
825 this.snackbar = true; 825 this.snackbar = true;
826 this.text = error.response.data.message; 826 this.text = error.response.data.message;
827 this.color = "red"; 827 this.color = "red";
828 }); 828 });
829 }, 829 },
830 getBookData() { 830 getBookData() {
831 this.showLoader = true; 831 this.showLoader = true;
832 http() 832 http()
833 .get("/getBooksList", { 833 .get("/getBooksList", {
834 params: { 834 params: {
835 schoolId: this.$store.state.schoolId, 835 schoolId: this.$store.state.schoolId,
836 }, 836 },
837 headers: { Authorization: "Bearer " + this.token }, 837 headers: { Authorization: "Bearer " + this.token },
838 }) 838 })
839 .then((response) => { 839 .then((response) => {
840 this.books = response.data.data; 840 this.books = response.data.data;
841 this.showLoader = false; 841 this.showLoader = false;
842 }) 842 })
843 .catch((error) => { 843 .catch((error) => {
844 this.showLoader = false; 844 this.showLoader = false;
845 if (error.response.status === 401) { 845 if (error.response.status === 401) {
846 this.$router.replace({ path: "/" }); 846 this.$router.replace({ path: "/" });
847 this.$store.dispatch("setToken", null); 847 this.$store.dispatch("setToken", null);
848 this.$store.dispatch("Id", null); 848 this.$store.dispatch("Id", null);
849 } 849 }
850 }); 850 });
851 }, 851 },
852 getParticularBookData(books) { 852 getParticularBookData(books) {
853 for (let i = 0; i < this.books.length; i++) { 853 for (let i = 0; i < this.books.length; i++) {
854 if (books == this.books[i]._id) { 854 if (books == this.books[i]._id) {
855 if (this.books[i].remaining <= 0) { 855 if (this.books[i].remaining <= 0) {
856 this.snackbar = true; 856 this.snackbar = true;
857 this.text = "Book is unavailable"; 857 this.text = "Book is unavailable";
858 this.color = "red"; 858 this.color = "red";
859 this.disable = true; 859 this.disable = true;
860 } else if (this.books[i].remaining > 0) { 860 } else if (this.books[i].remaining > 0) {
861 this.disable = false; 861 this.disable = false;
862 } 862 }
863 this.addIssue = { 863 this.addIssue = {
864 author: this.books[i].author, 864 author: this.books[i].author,
865 subjectCode: this.books[i].subjectCode, 865 subjectCode: this.books[i].subjectCode,
866 }; 866 };
867 } 867 }
868 } 868 }
869 this.addIssue.boojk = books; 869 this.addIssue.boojk = books;
870 }, 870 },
871 displaySearch() { 871 displaySearch() {
872 (this.show = false), (this.showSearch = true); 872 (this.show = false), (this.showSearch = true);
873 }, 873 },
874 closeSearch() { 874 closeSearch() {
875 this.showSearch = false; 875 this.showSearch = false;
876 this.show = true; 876 this.show = true;
877 this.search = ""; 877 this.search = "";
878 }, 878 },
879 }, 879 },
880 mounted() { 880 mounted() {
881 this.token = this.$store.state.token; 881 this.token = this.$store.state.token;
882 this.getBookData(); 882 this.getBookData();
883 }, 883 },
884 }; 884 };
885 </script> 885 </script>
886 <style scoped> 886 <style scoped>
887 .active { 887 .active {
888 background-color: gray; 888 background-color: gray;
889 color: white !important; 889 color: white !important;
890 } 890 }
891 .activebtn { 891 .activebtn {
892 color: black !important; 892 color: black !important;
893 } 893 }
894 </style> 894 </style>