viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d10c2663246cc38fa18dec72d59101147cafc3ed

Authored by Shikha Mishra
1 parent 9a4a647259
Exists in master and in 2 other branches amber-development, ui-design

Improve updateBookIssue API, Upload Image was not working in many screen(Assignm… 

…ent screen,Syllabus screen,Expense screen,Income screen,Notice Board screen) while editing now it's improved and Match button theme according to project theme
Showing 9 changed files with 41 additions and 11 deletions   Show diff stats
src/pages/Academic/assignment.vue
Diff comments   View file @d10c266
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Assignment ****** --> 3 <!-- ****** EDIT Assignment ****** -->
4 <v-dialog v-model="editAssignmentDialog" max-width="400px"> 4 <v-dialog v-model="editAssignmentDialog" max-width="400px">
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 Assignment</label> 8 <label class="title text-xs-center">Edit Assignment</label>
9 <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation> 13 <v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Title:</label> 16 <label class="right">Title:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field> 19 <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-layout> 22 <v-layout>
23 <v-flex xs4 class="pt-4 subheading"> 23 <v-flex xs4 class="pt-4 subheading">
24 <label class="right">Description:</label> 24 <label class="right">Description:</label>
25 </v-flex> 25 </v-flex>
26 <v-flex xs8 class="ml-3"> 26 <v-flex xs8 class="ml-3">
27 <v-text-field 27 <v-text-field
28 v-model="editedItem.description" 28 v-model="editedItem.description"
29 type="text" 29 type="text"
30 :rules="deadlineRules" 30 :rules="deadlineRules"
31 required 31 required
32 ></v-text-field> 32 ></v-text-field>
33 </v-flex> 33 </v-flex>
34 </v-layout> 34 </v-layout>
35 <v-layout> 35 <v-layout>
36 <v-flex xs4 class="pt-4 subheading"> 36 <v-flex xs4 class="pt-4 subheading">
37 <label class="right">Deadline:</label> 37 <label class="right">Deadline:</label>
38 </v-flex> 38 </v-flex>
39 <v-flex xs8 class="ml-3"> 39 <v-flex xs8 class="ml-3">
40 <v-menu 40 <v-menu
41 ref="menu1" 41 ref="menu1"
42 :close-on-content-click="false" 42 :close-on-content-click="false"
43 v-model="menu1" 43 v-model="menu1"
44 :nudge-right="40" 44 :nudge-right="40"
45 :return-value.sync="menu1" 45 :return-value.sync="menu1"
46 lazy 46 lazy
47 transition="scale-transition" 47 transition="scale-transition"
48 offset-y 48 offset-y
49 full-width 49 full-width
50 min-width="290px" 50 min-width="290px"
51 > 51 >
52 <v-text-field 52 <v-text-field
53 slot="activator" 53 slot="activator"
54 v-model="editedItem.deadline" 54 v-model="editedItem.deadline"
55 placeholder="Select Date" 55 placeholder="Select Date"
56 :rules="deadlineRules" 56 :rules="deadlineRules"
57 append-icon="event" 57 append-icon="event"
58 required 58 required
59 ></v-text-field> 59 ></v-text-field>
60 <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> 60 <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
61 </v-menu> 61 </v-menu>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
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">Class:</label> 66 <label class="right">Class:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs8 class="ml-3"> 68 <v-flex xs8 class="ml-3">
69 <v-select 69 <v-select
70 :items="classList" 70 :items="classList"
71 item-text="classNum" 71 item-text="classNum"
72 item-value="_id" 72 item-value="_id"
73 :rules="classRules" 73 :rules="classRules"
74 v-model="editedItem.classId" 74 v-model="editedItem.classId"
75 @change="getSections(editedItem.classId)" 75 @change="getSections(editedItem.classId)"
76 required 76 required
77 ></v-select> 77 ></v-select>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 <v-layout> 80 <v-layout>
81 <v-flex xs4 class="pt-4 subheading"> 81 <v-flex xs4 class="pt-4 subheading">
82 <label class="right">Section:</label> 82 <label class="right">Section:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8 class="ml-3"> 84 <v-flex xs8 class="ml-3">
85 <v-select 85 <v-select
86 :items="addSection" 86 :items="addSection"
87 item-text="name" 87 item-text="name"
88 item-value="_id" 88 item-value="_id"
89 v-model="editedItem.sectionId" 89 v-model="editedItem.sectionId"
90 :rules="sectionRules" 90 :rules="sectionRules"
91 @change="getClassSubject(editedItem.classId)" 91 @change="getClassSubject(editedItem.classId)"
92 required 92 required
93 ></v-select> 93 ></v-select>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <v-layout> 96 <v-layout>
97 <v-flex xs4 class="pt-4 subheading"> 97 <v-flex xs4 class="pt-4 subheading">
98 <label class="right">Subject</label> 98 <label class="right">Subject</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 class="ml-3"> 100 <v-flex xs8 class="ml-3">
101 <v-select 101 <v-select
102 :items="subjectList.subjects" 102 :items="subjectList.subjects"
103 v-model="editedItem.subjectName" 103 v-model="editedItem.subjectName"
104 item-text="subjectName" 104 item-text="subjectName"
105 item-value="_id" 105 item-value="_id"
106 :rules="subjectRules" 106 :rules="subjectRules"
107 required 107 required
108 ></v-select> 108 ></v-select>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> 113 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
114 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label> 114 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label>
115 </v-flex> 115 </v-flex>
116 <v-flex xs8 sm8 class="ml-3"> 116 <v-flex xs8 sm8 class="ml-3">
117 <v-text-field 117 <v-text-field
118 label="Select File" 118 label="Select File"
119 @click="pickFile" 119 @click="pickFile"
120 v-model="imageName" 120 v-model="imageName"
121 append-icon="attach_file" 121 append-icon="attach_file"
122 ></v-text-field> 122 ></v-text-field>
123 <input
124 type="file"
125 style="display:none"
126 ref="image"
127 accept="image/*"
128 @change="onFilePicked"
129 />
123 </v-flex> 130 </v-flex>
124 </v-layout> 131 </v-layout>
125 <v-flex xs12 sm12> 132 <v-flex xs12 sm12>
126 <v-card-actions> 133 <v-card-actions>
127 <v-spacer></v-spacer> 134 <v-spacer></v-spacer>
128 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 135 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
129 </v-card-actions> 136 </v-card-actions>
130 </v-flex> 137 </v-flex>
131 </v-form> 138 </v-form>
132 </v-container> 139 </v-container>
133 </v-card> 140 </v-card>
134 </v-dialog> 141 </v-dialog>
135 142
136 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 143 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
137 <v-dialog v-model="viewAssignmentDialog" max-width="500px"> 144 <v-dialog v-model="viewAssignmentDialog" max-width="500px">
138 <v-card flat class="card-style pa-3" dark> 145 <v-card flat class="card-style pa-3" dark>
139 <v-layout> 146 <v-layout>
140 <v-flex xs12> 147 <v-flex xs12>
141 <label class="title text-xs-center">View Attendence</label> 148 <label class="title text-xs-center">View Attendence</label>
142 <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon> 149 <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon>
143 </v-flex> 150 </v-flex>
144 </v-layout> 151 </v-layout>
145 <v-card-text> 152 <v-card-text>
146 <v-container grid-list-md> 153 <v-container grid-list-md>
147 <v-layout wrap> 154 <v-layout wrap>
148 <v-flex> 155 <v-flex>
149 <v-layout> 156 <v-layout>
150 <v-flex xs6 sm4> 157 <v-flex xs6 sm4>
151 <h5 class="right my-1"> 158 <h5 class="right my-1">
152 <b>Title:</b> 159 <b>Title:</b>
153 </h5> 160 </h5>
154 </v-flex> 161 </v-flex>
155 <v-flex sm8 xs6> 162 <v-flex sm8 xs6>
156 <h5 class="my-1">{{ editedItem.title }}</h5> 163 <h5 class="my-1">{{ editedItem.title }}</h5>
157 </v-flex> 164 </v-flex>
158 </v-layout> 165 </v-layout>
159 <v-layout> 166 <v-layout>
160 <v-flex xs6 sm4> 167 <v-flex xs6 sm4>
161 <h5 class="right my-1"> 168 <h5 class="right my-1">
162 <b>Description:</b> 169 <b>Description:</b>
163 </h5> 170 </h5>
164 </v-flex> 171 </v-flex>
165 <v-flex sm8 xs6> 172 <v-flex sm8 xs6>
166 <h5 class="my-1">{{ editedItem.description }}</h5> 173 <h5 class="my-1">{{ editedItem.description }}</h5>
167 </v-flex> 174 </v-flex>
168 </v-layout> 175 </v-layout>
169 <v-layout> 176 <v-layout>
170 <v-flex xs6 sm4> 177 <v-flex xs6 sm4>
171 <h5 class="right my-1"> 178 <h5 class="right my-1">
172 <b>Deadline:</b> 179 <b>Deadline:</b>
173 </h5> 180 </h5>
174 </v-flex> 181 </v-flex>
175 <v-flex sm8 xs6> 182 <v-flex sm8 xs6>
176 <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5> 183 <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5>
177 </v-flex> 184 </v-flex>
178 </v-layout> 185 </v-layout>
179 </v-flex> 186 </v-flex>
180 </v-layout> 187 </v-layout>
181 </v-container> 188 </v-container>
182 </v-card-text> 189 </v-card-text>
183 </v-card> 190 </v-card>
184 </v-dialog> 191 </v-dialog>
185 192
186 <!-- ****** EXISTING ASSIGNMENT TABLE ****** --> 193 <!-- ****** EXISTING ASSIGNMENT TABLE ****** -->
187 <v-toolbar color="transparent" flat> 194 <v-toolbar color="transparent" flat>
188 <v-btn 195 <v-btn
189 fab 196 fab
190 dark 197 dark
191 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 198 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
192 small 199 small
193 @click="addAssignmentDialog = true" 200 @click="addAssignmentDialog = true"
194 > 201 >
195 <v-icon dark>add</v-icon> 202 <v-icon dark>add</v-icon>
196 </v-btn> 203 </v-btn>
197 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 204 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
198 <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true"> 205 <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true">
199 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment 206 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment
200 </v-btn> 207 </v-btn>
201 </v-flex> 208 </v-flex>
202 <v-spacer></v-spacer> 209 <v-spacer></v-spacer>
203 <v-flex lg2 md2 xs12 v-show="show"> 210 <v-flex lg2 md2 xs12 v-show="show">
204 <v-select 211 <v-select
205 :items="classList" 212 :items="classList"
206 placeholder="Select Your Class" 213 placeholder="Select Your Class"
207 v-model="showAssignment.classId" 214 v-model="showAssignment.classId"
208 item-text="classNum" 215 item-text="classNum"
209 item-value="_id" 216 item-value="_id"
210 name="Select Class" 217 name="Select Class"
211 :rules="classRules" 218 :rules="classRules"
212 @change="getAssignmentList()" 219 @change="getAssignmentList()"
213 class="pl-2" 220 class="pl-2"
214 required 221 required
215 ></v-select> 222 ></v-select>
216 </v-flex> 223 </v-flex>
217 <v-card-title class="body-1" v-show="show"> 224 <v-card-title class="body-1" v-show="show">
218 <v-btn icon flat @click="displaySearch"> 225 <v-btn icon flat @click="displaySearch">
219 <v-avatar size="27"> 226 <v-avatar size="27">
220 <img src="/static/icon/search.png" alt="icon" /> 227 <img src="/static/icon/search.png" alt="icon" />
221 </v-avatar> 228 </v-avatar>
222 </v-btn> 229 </v-btn>
223 </v-card-title> 230 </v-card-title>
224 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 231 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
225 <v-layout> 232 <v-layout>
226 <v-text-field 233 <v-text-field
227 v-model="search" 234 v-model="search"
228 placeholder="Search" 235 placeholder="Search"
229 prepend-inner-icon="search" 236 prepend-inner-icon="search"
230 color="primary" 237 color="primary"
231 autofocus 238 autofocus
232 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 239 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
233 ></v-text-field> 240 ></v-text-field>
234 <v-icon @click="closeSearch" color="error">close</v-icon> 241 <v-icon @click="closeSearch" color="error">close</v-icon>
235 </v-layout> 242 </v-layout>
236 </v-flex> 243 </v-flex>
237 </v-toolbar> 244 </v-toolbar>
238 <v-data-table 245 <v-data-table
239 :headers="headers" 246 :headers="headers"
240 :items="assignmentData" 247 :items="assignmentData"
241 :pagination.sync="pagination" 248 :pagination.sync="pagination"
242 :search="search" 249 :search="search"
243 > 250 >
244 <template slot="items" slot-scope="props"> 251 <template slot="items" slot-scope="props">
245 <tr class="tr"> 252 <tr class="tr">
246 <td class="td-row td">{{ props.index + 1 }}</td> 253 <td class="td-row td">{{ props.index + 1 }}</td>
247 <td class="text-xs-center td td-row">{{ props.item.title }}</td> 254 <td class="text-xs-center td td-row">{{ props.item.title }}</td>
248 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 255 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
249 <td class="text-xs-center td td-row">{{ props.item.deadline }}</td> 256 <td class="text-xs-center td td-row">{{ props.item.deadline }}</td>
250 <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td> 257 <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td>
251 <td 258 <td
252 class="text-xs-center td td-row" 259 class="text-xs-center td td-row"
253 v-if="role != 'TEACHER' " 260 v-if="role != 'TEACHER' "
254 >{{ props.item.teacherId.name }}</td> 261 >{{ props.item.teacherId.name }}</td>
255 <td 262 <td
256 class="text-xs-center td td-row" 263 class="text-xs-center td td-row"
257 v-if="role != 'ADMIN'" 264 v-if="role != 'ADMIN'"
258 >{{ props.item.schoolId .name }}</td> 265 >{{ props.item.schoolId .name }}</td>
259 <td class="text-xs-center td td-row"> 266 <td class="text-xs-center td td-row">
260 <v-btn 267 <v-btn
261 class="add-button" 268 class="add-button"
262 @click="generatePDF2Canvas(props.item)" 269 @click="generatePDF2Canvas(props.item)"
263 :loading="loadingPdf" 270 :loading="loadingPdf"
264 dark 271 dark
265 >{{ props.item.fileType }}</v-btn> 272 >{{ props.item.fileType }}</v-btn>
266 </td> 273 </td>
267 <td class="text-xs-center td td-row"> 274 <td class="text-xs-center td td-row">
268 <span> 275 <span>
269 <v-tooltip top> 276 <v-tooltip top>
270 <img 277 <img
271 slot="activator" 278 slot="activator"
272 style="cursor:pointer; width:25px; height:25px; " 279 style="cursor:pointer; width:25px; height:25px; "
273 class="mr-3" 280 class="mr-3"
274 @click="profile(props.item)" 281 @click="profile(props.item)"
275 src="/static/icon/view.png" 282 src="/static/icon/view.png"
276 /> 283 />
277 <span>View</span> 284 <span>View</span>
278 </v-tooltip> 285 </v-tooltip>
279 <v-tooltip top> 286 <v-tooltip top>
280 <img 287 <img
281 slot="activator" 288 slot="activator"
282 style="cursor:pointer; width:20px; height:18px; " 289 style="cursor:pointer; width:20px; height:18px; "
283 class="mr-3" 290 class="mr-3"
284 @click="editItem(props.item)" 291 @click="editItem(props.item)"
285 src="/static/icon/edit.png" 292 src="/static/icon/edit.png"
286 /> 293 />
287 <span>Edit</span> 294 <span>Edit</span>
288 </v-tooltip> 295 </v-tooltip>
289 <v-tooltip top> 296 <v-tooltip top>
290 <img 297 <img
291 slot="activator" 298 slot="activator"
292 style="cursor:pointer; width:20px; height:20px; " 299 style="cursor:pointer; width:20px; height:20px; "
293 class="mr-3" 300 class="mr-3"
294 @click="deleteItem(props.item)" 301 @click="deleteItem(props.item)"
295 src="/static/icon/delete.png" 302 src="/static/icon/delete.png"
296 /> 303 />
297 <span>Delete</span> 304 <span>Delete</span>
298 </v-tooltip> 305 </v-tooltip>
299 </span> 306 </span>
300 </td> 307 </td>
301 </tr> 308 </tr>
302 </template> 309 </template>
303 <v-alert 310 <v-alert
304 slot="no-results" 311 slot="no-results"
305 :value="true" 312 :value="true"
306 color="error" 313 color="error"
307 icon="warning" 314 icon="warning"
308 >Your search for "{{ search }}" found no results.</v-alert> 315 >Your search for "{{ search }}" found no results.</v-alert>
309 </v-data-table> 316 </v-data-table>
310 <!-- ****** ADD MULTIPLE Subject ****** --> 317 <!-- ****** ADD MULTIPLE Subject ****** -->
311 <v-snackbar 318 <v-snackbar
312 :timeout="timeout" 319 :timeout="timeout"
313 :top="y === 'top'" 320 :top="y === 'top'"
314 :right="x === 'right'" 321 :right="x === 'right'"
315 :vertical="mode === 'vertical'" 322 :vertical="mode === 'vertical'"
316 v-model="snackbar" 323 v-model="snackbar"
317 :color="color" 324 :color="color"
318 >{{ text }}</v-snackbar> 325 >{{ text }}</v-snackbar>
319 <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog"> 326 <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog">
320 <v-card flat class="card-style pa-2" dark> 327 <v-card flat class="card-style pa-2" dark>
321 <v-layout> 328 <v-layout>
322 <v-flex xs12> 329 <v-flex xs12>
323 <label class="title text-xs-center">Add Assignment</label> 330 <label class="title text-xs-center">Add Assignment</label>
324 <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon> 331 <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon>
325 </v-flex> 332 </v-flex>
326 </v-layout> 333 </v-layout>
327 <v-container fluid fill-height> 334 <v-container fluid fill-height>
328 <v-layout align-center> 335 <v-layout align-center>
329 <v-flex xs12> 336 <v-flex xs12>
330 <v-form ref="form" v-model="valid" lazy-validation> 337 <v-form ref="form" v-model="valid" lazy-validation>
331 <v-layout> 338 <v-layout>
332 <v-flex xs4 sm4 class="pt-4 subheading"> 339 <v-flex xs4 sm4 class="pt-4 subheading">
333 <label class="right">Title :</label> 340 <label class="right">Title :</label>
334 </v-flex> 341 </v-flex>
335 <v-flex xs8 sm8 class="ml-3"> 342 <v-flex xs8 sm8 class="ml-3">
336 <v-text-field 343 <v-text-field
337 name="name" 344 name="name"
338 type="text" 345 type="text"
339 placeholder="Select Title" 346 placeholder="Select Title"
340 :rules="titleRules" 347 :rules="titleRules"
341 v-model="addAssignment.title" 348 v-model="addAssignment.title"
342 required 349 required
343 ></v-text-field> 350 ></v-text-field>
344 </v-flex> 351 </v-flex>
345 </v-layout> 352 </v-layout>
346 <v-layout> 353 <v-layout>
347 <v-flex xs4 sm4 class="pt-4 subheading"> 354 <v-flex xs4 sm4 class="pt-4 subheading">
348 <label class="right">Description :</label> 355 <label class="right">Description :</label>
349 </v-flex> 356 </v-flex>
350 <v-flex xs8 sm8 class="ml-3"> 357 <v-flex xs8 sm8 class="ml-3">
351 <v-text-field 358 <v-text-field
352 name="name" 359 name="name"
353 type="text" 360 type="text"
354 placeholder="Select Description" 361 placeholder="Select Description"
355 :rules="descriptionRules" 362 :rules="descriptionRules"
356 v-model="addAssignment.description" 363 v-model="addAssignment.description"
357 required 364 required
358 ></v-text-field> 365 ></v-text-field>
359 </v-flex> 366 </v-flex>
360 </v-layout> 367 </v-layout>
361 <v-layout> 368 <v-layout>
362 <v-flex xs4 sm4 class="pt-4 subheading"> 369 <v-flex xs4 sm4 class="pt-4 subheading">
363 <label class="right">Deadline :</label> 370 <label class="right">Deadline :</label>
364 </v-flex> 371 </v-flex>
365 <v-flex xs8 sm7 class="ml-3"> 372 <v-flex xs8 sm7 class="ml-3">
366 <v-menu 373 <v-menu
367 ref="menu2" 374 ref="menu2"
368 :close-on-content-click="false" 375 :close-on-content-click="false"
369 v-model="menu2" 376 v-model="menu2"
370 :nudge-right="40" 377 :nudge-right="40"
371 :return-value.sync="addAssignment.date" 378 :return-value.sync="addAssignment.date"
372 lazy 379 lazy
373 transition="scale-transition" 380 transition="scale-transition"
374 offset-y 381 offset-y
375 full-width 382 full-width
376 min-width="290px" 383 min-width="290px"
377 > 384 >
378 <v-text-field 385 <v-text-field
379 slot="activator" 386 slot="activator"
380 v-model="addAssignment.deadline" 387 v-model="addAssignment.deadline"
381 :rules="deadlineRules" 388 :rules="deadlineRules"
382 placeholder="Select Date" 389 placeholder="Select Date"
383 append-icon="event" 390 append-icon="event"
384 readonly 391 readonly
385 ></v-text-field> 392 ></v-text-field>
386 <v-date-picker 393 <v-date-picker
387 v-model="addAssignment.deadline" 394 v-model="addAssignment.deadline"
388 @input="$refs.menu2.save(addAssignment.date)" 395 @input="$refs.menu2.save(addAssignment.date)"
389 ></v-date-picker> 396 ></v-date-picker>
390 </v-menu> 397 </v-menu>
391 </v-flex> 398 </v-flex>
392 </v-layout> 399 </v-layout>
393 <v-layout> 400 <v-layout>
394 <v-flex xs4 sm4 class="pt-4 subheading"> 401 <v-flex xs4 sm4 class="pt-4 subheading">
395 <label class="right">Class :</label> 402 <label class="right">Class :</label>
396 </v-flex> 403 </v-flex>
397 <v-flex xs8 sm8 class="ml-3"> 404 <v-flex xs8 sm8 class="ml-3">
398 <v-select 405 <v-select
399 :items="classList" 406 :items="classList"
400 placeholder="Select Class" 407 placeholder="Select Class"
401 item-text="classNum" 408 item-text="classNum"
402 item-value="_id" 409 item-value="_id"
403 v-model="addAssignment.classId" 410 v-model="addAssignment.classId"
404 name="Select Class" 411 name="Select Class"
405 :rules="classRules" 412 :rules="classRules"
406 @change="getSections(addAssignment.classId)" 413 @change="getSections(addAssignment.classId)"
407 class="pl-2" 414 class="pl-2"
408 required 415 required
409 ></v-select> 416 ></v-select>
410 </v-flex> 417 </v-flex>
411 </v-layout> 418 </v-layout>
412 <v-layout> 419 <v-layout>
413 <v-flex xs4 sm4 class="pt-4 subheading"> 420 <v-flex xs4 sm4 class="pt-4 subheading">
414 <label class="right">Section :</label> 421 <label class="right">Section :</label>
415 </v-flex> 422 </v-flex>
416 <v-flex xs8 sm8 class="ml-3"> 423 <v-flex xs8 sm8 class="ml-3">
417 <v-select 424 <v-select
418 :items="addSection" 425 :items="addSection"
419 placeholder="Select Section" 426 placeholder="Select Section"
420 item-text="name" 427 item-text="name"
421 item-value="_id" 428 item-value="_id"
422 v-model="addAssignment.sectionId" 429 v-model="addAssignment.sectionId"
423 name="Select Section" 430 name="Select Section"
424 :rules="sectionRules" 431 :rules="sectionRules"
425 @change="getClassSubject(addAssignment.classId)" 432 @change="getClassSubject(addAssignment.classId)"
426 class="px-2" 433 class="px-2"
427 required 434 required
428 ></v-select> 435 ></v-select>
429 </v-flex> 436 </v-flex>
430 </v-layout> 437 </v-layout>
431 <v-layout> 438 <v-layout>
432 <v-flex xs3 sm4 class="pt-4 subheading"> 439 <v-flex xs3 sm4 class="pt-4 subheading">
433 <label class="right">Subject :</label> 440 <label class="right">Subject :</label>
434 </v-flex> 441 </v-flex>
435 <v-flex xs8 sm8 class="ml-2"> 442 <v-flex xs8 sm8 class="ml-2">
436 <v-select 443 <v-select
437 :items="subjectList.subjects" 444 :items="subjectList.subjects"
438 placeholder="Select your subject" 445 placeholder="Select your subject"
439 v-model="addAssignment.subjectName" 446 v-model="addAssignment.subjectName"
440 item-text="subjectName" 447 item-text="subjectName"
441 item-value="_id" 448 item-value="_id"
442 :rules="subjectRules" 449 :rules="subjectRules"
443 required 450 required
444 ></v-select> 451 ></v-select>
445 </v-flex> 452 </v-flex>
446 </v-layout> 453 </v-layout>
447 <v-layout> 454 <v-layout>
448 <v-flex xs4 class="pt-4 subheading"> 455 <v-flex xs4 class="pt-4 subheading">
449 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> 456 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
450 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label> 457 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label>
451 </v-flex> 458 </v-flex>
452 <v-flex xs8 class="ml-3"> 459 <v-flex xs8 class="ml-3">
453 <v-text-field 460 <v-text-field
454 placeholder="Select File" 461 placeholder="Select File"
455 @click="pickFile" 462 @click="pickFile"
456 v-model="imageName" 463 v-model="imageName"
457 append-icon="attach_file" 464 append-icon="attach_file"
458 ></v-text-field> 465 ></v-text-field>
459 <input 466 <input
460 type="file" 467 type="file"
461 style="display:none" 468 style="display:none"
462 ref="image" 469 ref="image"
463 accept="image/*" 470 accept="image/*"
464 @change="onFilePicked" 471 @change="onFilePicked"
465 /> 472 />
466 </v-flex> 473 </v-flex>
467 </v-layout> 474 </v-layout>
468 <v-layout> 475 <v-layout>
469 <v-flex xs12 sm12> 476 <v-flex xs12 sm12>
470 <v-card-actions> 477 <v-card-actions>
471 <v-spacer></v-spacer> 478 <v-spacer></v-spacer>
472 <v-btn 479 <v-btn
473 @click="submit" 480 @click="submit"
474 round 481 round
475 dark 482 dark
476 :loading="loading" 483 :loading="loading"
477 class="add-button" 484 class="add-button"
478 >Add Assignment</v-btn> 485 >Add Assignment</v-btn>
479 </v-card-actions> 486 </v-card-actions>
480 </v-flex> 487 </v-flex>
481 </v-layout> 488 </v-layout>
482 </v-form> 489 </v-form>
483 </v-flex> 490 </v-flex>
484 </v-layout> 491 </v-layout>
485 </v-container> 492 </v-container>
486 </v-card> 493 </v-card>
487 </v-dialog> 494 </v-dialog>
488 <div class="loader" v-if="showLoader"> 495 <div class="loader" v-if="showLoader">
489 <v-progress-circular indeterminate color="white"></v-progress-circular> 496 <v-progress-circular indeterminate color="white"></v-progress-circular>
490 </div> 497 </div>
491 </v-container> 498 </v-container>
492 </template> 499 </template>
493 500
494 <script> 501 <script>
495 import http from "@/Services/http.js"; 502 import http from "@/Services/http.js";
496 import Util from "@/util"; 503 import Util from "@/util";
497 import moment from "moment"; 504 import moment from "moment";
498 import jsPDF from "jspdf"; 505 import jsPDF from "jspdf";
499 import { saveAs } from "file-saver"; 506 import { saveAs } from "file-saver";
500 507
501 export default { 508 export default {
502 data: () => ({ 509 data: () => ({
503 snackbar: false, 510 snackbar: false,
504 role: "", 511 role: "",
505 menu1: false, 512 menu1: false,
506 menu2: false, 513 menu2: false,
507 y: "top", 514 y: "top",
508 x: "right", 515 x: "right",
509 mode: "", 516 mode: "",
510 timeout: 3000, 517 timeout: 3000,
511 text: "", 518 text: "",
512 color: "", 519 color: "",
513 show: true, 520 show: true,
514 showSearch: false, 521 showSearch: false,
515 showLoader: false, 522 showLoader: false,
516 loading: false, 523 loading: false,
517 editLoading: false, 524 editLoading: false,
518 date: null, 525 date: null,
519 search: "", 526 search: "",
520 viewAssignmentDialog: false, 527 viewAssignmentDialog: false,
521 editAssignmentDialog: false, 528 editAssignmentDialog: false,
522 valid: true, 529 valid: true,
523 validEditAssignment: true, 530 validEditAssignment: true,
524 addAssignmentDialog: false, 531 addAssignmentDialog: false,
525 532
526 pagination: { 533 pagination: {
527 rowsPerPage: 10, 534 rowsPerPage: 10,
528 }, 535 },
529 token: "", 536 token: "",
530 headers: [ 537 headers: [
531 { 538 {
532 text: "No", 539 text: "No",
533 align: "", 540 align: "",
534 sortable: false, 541 sortable: false,
535 value: "No", 542 value: "No",
536 }, 543 },
537 { 544 {
538 text: "Title", 545 text: "Title",
539 value: "title", 546 value: "title",
540 sortable: false, 547 sortable: false,
541 align: "center", 548 align: "center",
542 }, 549 },
543 { 550 {
544 text: "Description", 551 text: "Description",
545 value: "description", 552 value: "description",
546 sortable: false, 553 sortable: false,
547 align: "center", 554 align: "center",
548 }, 555 },
549 { 556 {
550 text: "Deadline", 557 text: "Deadline",
551 value: "deadline", 558 value: "deadline",
552 sortable: false, 559 sortable: false,
553 align: "center", 560 align: "center",
554 }, 561 },
555 { 562 {
556 text: "Section", 563 text: "Section",
557 value: "name", 564 value: "name",
558 sortable: false, 565 sortable: false,
559 align: "center", 566 align: "center",
560 }, 567 },
561 { 568 {
562 text: "Uploader", 569 text: "Uploader",
563 value: "name", 570 value: "name",
564 sortable: false, 571 sortable: false,
565 align: "center", 572 align: "center",
566 }, 573 },
567 { 574 {
568 text: "File", 575 text: "File",
569 value: "file", 576 value: "file",
570 sortable: false, 577 sortable: false,
571 align: "center", 578 align: "center",
572 }, 579 },
573 { text: "Action", value: "", sortable: false, align: "center" }, 580 { text: "Action", value: "", sortable: false, align: "center" },
574 ], 581 ],
575 582
576 showPdfData: false, 583 showPdfData: false,
577 loadingPdf: false, 584 loadingPdf: false,
578 hideData: true, 585 hideData: true,
579 586
580 assignmentData: [], 587 assignmentData: [],
581 subjectList: [], 588 subjectList: [],
582 classList: [], 589 classList: [],
583 addSection: [], 590 addSection: [],
584 editedIndex: -1, 591 editedIndex: -1,
585 addSubject: {}, 592 addSubject: {},
586 593
587 editedItem: { 594 editedItem: {
588 title: "", 595 title: "",
589 description: "", 596 description: "",
590 deadline: "", 597 deadline: "",
591 classId: "", 598 classId: "",
592 sectionId: "", 599 sectionId: "",
593 subjectName: "", 600 subjectName: "",
594 fileType: "", 601 fileType: "",
595 }, 602 },
596 addAssignment: {}, 603 addAssignment: {},
597 showAssignment: {}, 604 showAssignment: {},
598 605
599 imageData: {}, 606 imageData: {},
600 imageName: "", 607 imageName: "",
601 imageUrl: "", 608 imageUrl: "",
602 imageFile: "", 609 imageFile: "",
603 610
604 titleRules: [(v) => !!v || " Title is required"], 611 titleRules: [(v) => !!v || " Title is required"],
605 descriptionRules: [(v) => !!v || " Description is required"], 612 descriptionRules: [(v) => !!v || " Description is required"],
606 deadlineRules: [(v) => !!v || " Deadline is required"], 613 deadlineRules: [(v) => !!v || " Deadline is required"],
607 classRules: [(v) => !!v || "Class is required"], 614 classRules: [(v) => !!v || "Class is required"],
608 sectionRules: [(v) => !!v || "Section is required"], 615 sectionRules: [(v) => !!v || "Section is required"],
609 subjectRules: [(v) => !!v || "Student is required"], 616 subjectRules: [(v) => !!v || "Student is required"],
610 fileRules: [(v) => !!v || "File is required"], 617 fileRules: [(v) => !!v || "File is required"],
611 }), 618 }),
612 watch: { 619 watch: {
613 addAssignmentDialog: function (val) { 620 addAssignmentDialog: function (val) {
614 if (!val) { 621 if (!val) {
615 this.addAssignment = []; 622 this.addAssignment = [];
616 this.imageName = ""; 623 this.imageName = "";
617 } 624 }
618 }, 625 },
619 }, 626 },
620 methods: { 627 methods: {
621 dates: function (date) { 628 dates: function (date) {
622 return moment(date).format("MMMM DD, YYYY"); 629 return moment(date).format("MMMM DD, YYYY");
623 }, 630 },
624 pickFile() { 631 pickFile() {
625 this.$refs.image.click(); 632 this.$refs.image.click();
626 }, 633 },
627 editItem(item) { 634 editItem(item) {
628 this.editedIndex = this.assignmentData; 635 this.editedIndex = this.assignmentData;
629 this.editedItem = Object.assign({}, item); 636 this.editedItem = Object.assign({}, item);
630 this.dialog = true; 637 this.dialog = true;
631 this.editAssignmentDialog = true; 638 this.editAssignmentDialog = true;
632 }, 639 },
633 profile(item) { 640 profile(item) {
634 this.editedIndex = this.assignmentData; 641 this.editedIndex = this.assignmentData;
635 this.editedItem = Object.assign({}, item); 642 this.editedItem = Object.assign({}, item);
636 this.dialog1 = true; 643 this.dialog1 = true;
637 this.viewAssignmentDialog = true; 644 this.viewAssignmentDialog = true;
638 }, 645 },
639 deleteItem(item) { 646 deleteItem(item) {
640 let deleteAssignment = { 647 let deleteAssignment = {
641 assignmentId: item._id, 648 assignmentId: item._id,
642 }; 649 };
643 http() 650 http()
644 .delete( 651 .delete(
645 "/deleteAssignment", 652 "/deleteAssignment",
646 confirm("Are you sure you want to delete this?") && { 653 confirm("Are you sure you want to delete this?") && {
647 params: deleteAssignment, 654 params: deleteAssignment,
648 }, 655 },
649 { 656 {
650 headers: { Authorization: "Bearer " + this.token }, 657 headers: { Authorization: "Bearer " + this.token },
651 } 658 }
652 ) 659 )
653 .then((response) => { 660 .then((response) => {
654 this.getAssignmentList(); 661 this.getAssignmentList();
655 this.snackbar = true; 662 this.snackbar = true;
656 this.text = "Successfully delete Existing Assignment"; 663 this.text = "Successfully delete Existing Assignment";
657 this.color = "green"; 664 this.color = "green";
658 }) 665 })
659 .catch((error) => { 666 .catch((error) => {
660 this.snackbar = true; 667 this.snackbar = true;
661 this.text = error.response.data.message; 668 this.text = error.response.data.message;
662 this.color = "error"; 669 this.color = "error";
663 }); 670 });
664 }, 671 },
665 close() { 672 close() {
666 this.editAssignmentDialog = false; 673 this.editAssignmentDialog = false;
667 }, 674 },
668 close1() { 675 close1() {
669 this.viewAssignmentDialog = false; 676 this.viewAssignmentDialog = false;
670 }, 677 },
671 closeAddAssignmentModel() { 678 closeAddAssignmentModel() {
672 this.addAssignmentDialog = false; 679 this.addAssignmentDialog = false;
673 // this.assignmentData = []; 680 // this.assignmentData = [];
674 this.addAssignment = []; 681 this.addAssignment = [];
675 this.imageName = ""; 682 this.imageName = "";
676 }, 683 },
677 submit() { 684 submit() {
678 var addAssignment = { 685 var addAssignment = {
679 title: this.addAssignment.title, 686 title: this.addAssignment.title,
680 description: this.addAssignment.description, 687 description: this.addAssignment.description,
681 deadline: this.addAssignment.deadline, 688 deadline: this.addAssignment.deadline,
682 classId: this.addAssignment.classId, 689 classId: this.addAssignment.classId,
683 sectionId: this.addAssignment.sectionId, 690 sectionId: this.addAssignment.sectionId,
684 subjectName: this.addAssignment.subjectName, 691 subjectName: this.addAssignment.subjectName,
685 file: this.addAssignment.imageName, 692 file: this.addAssignment.imageName,
686 fileName: this.imageName, 693 fileName: this.imageName,
687 }; 694 };
688 var signatures = { 695 var signatures = {
689 JVBERi0: "other", 696 JVBERi0: "other",
690 iVBORw0KGgo: "image", 697 iVBORw0KGgo: "image",
691 UEsDBBQ: "other", 698 UEsDBBQ: "other",
692 "/": "image", 699 "/": "image",
693 AAABAA: "image", 700 AAABAA: "image",
694 IywiV2hhdC: "other", 701 IywiV2hhdC: "other",
695 bmFtZSxl: "other", 702 bmFtZSxl: "other",
696 }; 703 };
697 function detectMimeType(b64) { 704 function detectMimeType(b64) {
698 for (var s in signatures) { 705 for (var s in signatures) {
699 if (b64.indexOf(s) === 0) { 706 if (b64.indexOf(s) === 0) {
700 return signatures[s]; 707 return signatures[s];
701 } 708 }
702 } 709 }
703 } 710 }
704 if (this.$refs.form.validate()) { 711 if (this.$refs.form.validate()) {
705 if (this.imageUrl) { 712 if (this.imageUrl) {
706 var str = this.imageUrl; 713 var str = this.imageUrl;
707 const [baseUrl, imageUrl] = str.split(/,/); 714 const [baseUrl, imageUrl] = str.split(/,/);
708 addAssignment.upload = imageUrl; 715 addAssignment.upload = imageUrl;
709 addAssignment.fileType = detectMimeType(imageUrl); 716 addAssignment.fileType = detectMimeType(imageUrl);
710 } 717 }
711 console.log("data===>", addAssignment); 718 console.log("data===>", addAssignment);
712 http() 719 http()
713 .post("/createAssignment", addAssignment) 720 .post("/createAssignment", addAssignment)
714 .then((response) => { 721 .then((response) => {
715 this.getAssignmentList(); 722 this.getAssignmentList();
716 this.snackbar = true; 723 this.snackbar = true;
717 this.text = "Syllabus added successfully"; 724 this.text = "Syllabus added successfully";
718 this.color = "green"; 725 this.color = "green";
719 this.addAssignmentDialog = false; 726 this.addAssignmentDialog = false;
720 this.clear(); 727 this.clear();
721 }) 728 })
722 .catch((error) => { 729 .catch((error) => {
723 // console.log(error); 730 // console.log(error);
724 this.snackbar = true; 731 this.snackbar = true;
725 this.text = error.response.data.message; 732 this.text = error.response.data.message;
726 this.color = "red"; 733 this.color = "red";
727 }); 734 });
728 } 735 }
729 }, 736 },
730 getAssignmentList() { 737 getAssignmentList() {
731 if (this.addAssignment.classId) { 738 if (this.addAssignment.classId) {
732 this.addAssignment.classId = this.addAssignment.classId; 739 this.addAssignment.classId = this.addAssignment.classId;
733 } 740 }
734 this.showLoader = true; 741 this.showLoader = true;
735 http() 742 http()
736 .get( 743 .get(
737 "/getAssignmentList", 744 "/getAssignmentList",
738 { 745 {
739 params: { classId: this.showAssignment.classId }, 746 params: { classId: this.showAssignment.classId },
740 }, 747 },
741 { 748 {
742 headers: { Authorization: "Bearer " + this.token }, 749 headers: { Authorization: "Bearer " + this.token },
743 } 750 }
744 ) 751 )
745 .then((response) => { 752 .then((response) => {
746 this.assignmentData = response.data.data; 753 this.assignmentData = response.data.data;
747 this.showLoader = false; 754 this.showLoader = false;
748 this.loadingSearch = false; 755 this.loadingSearch = false;
749 }) 756 })
750 .catch((error) => { 757 .catch((error) => {
751 // console.log("err====>", err); 758 // console.log("err====>", err);
752 this.showLoader = false; 759 this.showLoader = false;
753 this.loadingSearch = false; 760 this.loadingSearch = false;
754 this.snackbar = true; 761 this.snackbar = true;
755 this.text = error.response.data.message; 762 this.text = error.response.data.message;
756 if (error.response.status === 401) { 763 if (error.response.status === 401) {
757 this.$router.replace({ path: "/" }); 764 this.$router.replace({ path: "/" });
758 this.$store.dispatch("setToken", null); 765 this.$store.dispatch("setToken", null);
759 this.$store.dispatch("Id", null); 766 this.$store.dispatch("Id", null);
760 } 767 }
761 }); 768 });
762 }, 769 },
763 clear() { 770 clear() {
764 this.$refs.form.reset(); 771 this.$refs.form.reset();
765 }, 772 },
766 save() { 773 save() {
767 if (this.$refs.formEditAssignment.validate()) { 774 if (this.$refs.formEditAssignment.validate()) {
768 let editAssignment = { 775 let editAssignment = {
769 assignmentId: this.editedItem._id, 776 assignmentId: this.editedItem._id,
770 title: this.addAssignment.title, 777 title: this.addAssignment.title,
771 description: this.addAssignment.description, 778 description: this.addAssignment.description,
772 deadline: this.addAssignment.deadline, 779 deadline: this.addAssignment.deadline,
773 classId: this.addAssignment.classId, 780 classId: this.addAssignment.classId,
774 sectionId: this.addAssignment.sectionId, 781 sectionId: this.addAssignment.sectionId,
775 subjectName: this.addAssignment.subjectName, 782 subjectName: this.addAssignment.subjectName,
776 file: this.addAssignment.imageName, 783 file: this.addAssignment.imageName,
777 fileName: this.imageName, 784 fileName: this.imageName,
778 }; 785 };
779 this.editLoading = true; 786 this.editLoading = true;
780 var signatures = { 787 var signatures = {
781 JVBERi0: "other", 788 JVBERi0: "other",
782 iVBORw0KGgo: "image", 789 iVBORw0KGgo: "image",
783 UEsDBBQ: "other", 790 UEsDBBQ: "other",
784 "/": "image", 791 "/": "image",
785 AAABAA: "image", 792 AAABAA: "image",
786 IywiV2hhdC: "other", 793 IywiV2hhdC: "other",
787 bmFtZSxl: "other", 794 bmFtZSxl: "other",
788 }; 795 };
789 function detectMimeType(b64) { 796 function detectMimeType(b64) {
790 for (var s in signatures) { 797 for (var s in signatures) {
791 if (b64.indexOf(s) === 0) { 798 if (b64.indexOf(s) === 0) {
792 return signatures[s]; 799 return signatures[s];
793 } 800 }
794 } 801 }
795 } 802 }
796 if (this.imageUrl) { 803 if (this.imageUrl) {
797 var str = this.imageUrl; 804 var str = this.imageUrl;
798 const [baseUrl, imageUrl] = str.split(/,/); 805 const [baseUrl, imageUrl] = str.split(/,/);
799 editAssignment.upload = imageUrl; 806 editAssignment.upload = imageUrl;
800 editAssignment.fileType = detectMimeType(imageUrl); 807 editAssignment.fileType = detectMimeType(imageUrl);
801 } 808 }
802 http() 809 http()
803 .put("/updateAssignment", editAssignment) 810 .put("/updateAssignment", editAssignment)
804 .then((response) => { 811 .then((response) => {
805 this.snackbar = true; 812 this.snackbar = true;
806 this.text = "Successfully Edit Existing Assignment"; 813 this.text = "Successfully Edit Existing Assignment";
807 this.color = "green"; 814 this.color = "green";
808 this.getAssignmentList(); 815 this.getAssignmentList();
809 this.editLoading = false; 816 this.editLoading = false;
810 this.editAssignmentDialog = false; 817 this.editAssignmentDialog = false;
811 }) 818 })
812 .catch((error) => { 819 .catch((error) => {
813 this.editLoading = false; 820 this.editLoading = false;
814 // console.log(error); 821 // console.log(error);
815 }); 822 });
816 } 823 }
817 }, 824 },
818 getClass() { 825 getClass() {
819 http() 826 http()
820 .get("/getClassesList", { 827 .get("/getClassesList", {
821 headers: { Authorization: "Bearer " + this.token }, 828 headers: { Authorization: "Bearer " + this.token },
822 }) 829 })
823 .then((response) => { 830 .then((response) => {
824 this.classList = response.data.data; 831 this.classList = response.data.data;
825 }) 832 })
826 .catch((error) => { 833 .catch((error) => {
827 if (error.response.status === 401) { 834 if (error.response.status === 401) {
828 this.$router.replace({ path: "/" }); 835 this.$router.replace({ path: "/" });
829 this.$store.dispatch("setToken", null); 836 this.$store.dispatch("setToken", null);
830 this.$store.dispatch("Id", null); 837 this.$store.dispatch("Id", null);
831 } 838 }
832 }); 839 });
833 }, 840 },
834 getSections(_id) { 841 getSections(_id) {
835 var token = this.$store.state.token; 842 var token = this.$store.state.token;
836 this.showLoader = true; 843 this.showLoader = true;
837 http() 844 http()
838 .get( 845 .get(
839 "/getSectionsList", 846 "/getSectionsList",
840 { params: { classId: _id } }, 847 { params: { classId: _id } },
841 { 848 {
842 headers: { Authorization: "Bearer " + token }, 849 headers: { Authorization: "Bearer " + token },
843 } 850 }
844 ) 851 )
845 .then((response) => { 852 .then((response) => {
846 this.addSection = response.data.data; 853 this.addSection = response.data.data;
847 this.showLoader = false; 854 this.showLoader = false;
848 }) 855 })
849 .catch((err) => { 856 .catch((err) => {
850 this.showLoader = false; 857 this.showLoader = false;
851 }); 858 });
852 }, 859 },
853 getClassSubject(_id) { 860 getClassSubject(_id) {
854 this.showLoader = true; 861 this.showLoader = true;
855 // this.classId = this.classId; 862 // this.classId = this.classId;
856 http() 863 http()
857 .get( 864 .get(
858 "/getParticularClass", 865 "/getParticularClass",
859 { params: { classId: _id } }, 866 { params: { classId: _id } },
860 { 867 {
861 headers: { Authorization: "Bearer " + this.token }, 868 headers: { Authorization: "Bearer " + this.token },
862 } 869 }
863 ) 870 )
864 .then((response) => { 871 .then((response) => {
865 this.subjectList = response.data.data; 872 this.subjectList = response.data.data;
866 this.showLoader = false; 873 this.showLoader = false;
867 }) 874 })
868 .catch((err) => { 875 .catch((err) => {
869 this.showLoader = false; 876 this.showLoader = false;
870 }); 877 });
871 }, 878 },
872 onFilePicked(e) { 879 onFilePicked(e) {
873 const files = e.target.files; 880 const files = e.target.files;
874 this.upload = e.target.files[0]; 881 this.upload = e.target.files[0];
875 if (files[0] !== undefined) { 882 if (files[0] !== undefined) {
876 this.imageName = files[0].name; 883 this.imageName = files[0].name;
877 if (this.imageName.lastIndexOf(".") <= 0) { 884 if (this.imageName.lastIndexOf(".") <= 0) {
878 return; 885 return;
879 } 886 }
880 const fr = new FileReader(); 887 const fr = new FileReader();
881 fr.readAsDataURL(files[0]); 888 fr.readAsDataURL(files[0]);
882 fr.addEventListener("load", () => { 889 fr.addEventListener("load", () => {
883 this.imageUrl = fr.result; 890 this.imageUrl = fr.result;
884 this.imageFile = files[0]; // this is an image file that can be sent to server... 891 this.imageFile = files[0]; // this is an image file that can be sent to server...
885 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 892 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
886 }); 893 });
887 // console.log("this.imageName", this.imageName); 894 // console.log("this.imageName", this.imageName);
888 } else { 895 } else {
889 this.imageName = ""; 896 this.imageName = "";
890 this.imageFile = ""; 897 this.imageFile = "";
891 this.imageUrl = ""; 898 this.imageUrl = "";
892 } 899 }
893 }, 900 },
894 displaySearch() { 901 displaySearch() {
895 (this.show = false), (this.showSearch = true); 902 (this.show = false), (this.showSearch = true);
896 }, 903 },
897 closeSearch() { 904 closeSearch() {
898 this.showSearch = false; 905 this.showSearch = false;
899 this.show = true; 906 this.show = true;
900 this.search = ""; 907 this.search = "";
901 }, 908 },
902 909
903 async generatePDF2Canvas(item) { 910 async generatePDF2Canvas(item) {
904 var dataType = ""; 911 var dataType = "";
905 var type = ""; 912 var type = "";
906 if (item.fileType == "image") { 913 if (item.fileType == "image") {
907 dataType = "file.jpg"; 914 dataType = "file.jpg";
908 } else if (item.fileType == "other") { 915 } else if (item.fileType == "other") {
909 dataType = "file.pdf"; 916 dataType = "file.pdf";
910 type = "application/pdf"; 917 type = "application/pdf";
911 } 918 }
912 var FileSaver = require("file-saver"); 919 var FileSaver = require("file-saver");
913 FileSaver.saveAs(item.file, "image.jpg"); 920 FileSaver.saveAs(item.file, "image.jpg");
914 }, 921 },
915 }, 922 },
916 mounted() { 923 mounted() {
917 this.token = this.$store.state.token; 924 this.token = this.$store.state.token;
918 this.role = this.$store.state.role; 925 this.role = this.$store.state.role;
919 this.getClass(); 926 this.getClass();
920 }, 927 },
921 }; 928 };
922 </script> 929 </script>
src/pages/Academic/syllabus.vue
Diff comments   View file @d10c266
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Syllabus ****** --> 3 <!-- ****** EDIT Syllabus ****** -->
4 <v-dialog v-model="editSyllabusDialog" max-width="400px"> 4 <v-dialog v-model="editSyllabusDialog" max-width="400px">
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 Syllabus</label> 8 <label class="title text-xs-center">Edit Syllabus</label>
9 <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> 13 <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 sm4 class="pt-4 subheading"> 15 <v-flex xs4 sm4 class="pt-4 subheading">
16 <label class="right">Title :</label> 16 <label class="right">Title :</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 sm8 class="ml-3"> 18 <v-flex xs8 sm8 class="ml-3">
19 <v-text-field v-model="editedItem.title"></v-text-field> 19 <v-text-field v-model="editedItem.title"></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-layout> 22 <v-layout>
23 <v-flex xs4 class="pt-4 subheading"> 23 <v-flex xs4 class="pt-4 subheading">
24 <label class="right">Description:</label> 24 <label class="right">Description:</label>
25 </v-flex> 25 </v-flex>
26 <v-flex xs8 class="ml-3"> 26 <v-flex xs8 class="ml-3">
27 <v-text-field v-model="editedItem.description"></v-text-field> 27 <v-text-field v-model="editedItem.description"></v-text-field>
28 </v-flex> 28 </v-flex>
29 </v-layout> 29 </v-layout>
30 <v-layout> 30 <v-layout>
31 <v-flex xs4 class="pt-4 subheading"> 31 <v-flex xs4 class="pt-4 subheading">
32 <label class="right">Class:</label> 32 <label class="right">Class:</label>
33 </v-flex> 33 </v-flex>
34 <v-flex xs8 class="ml-3"> 34 <v-flex xs8 class="ml-3">
35 <v-select 35 <v-select
36 :items="classList" 36 :items="classList"
37 v-model="editedItem.classId" 37 v-model="editedItem.classId"
38 label="Select Class" 38 label="Select Class"
39 item-text="classNum" 39 item-text="classNum"
40 item-value="_id" 40 item-value="_id"
41 name="Select Class" 41 name="Select Class"
42 @change="getSections(addSyllabus.classId)" 42 @change="getSections(addSyllabus.classId)"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 <!-- <v-layout> 47 <!-- <v-layout>
48 <v-flex xs4 sm4 class="pt-4 subheading"> 48 <v-flex xs4 sm4 class="pt-4 subheading">
49 <label class="right">Section :</label> 49 <label class="right">Section :</label>
50 </v-flex> 50 </v-flex>
51 <v-flex xs8 sm8 class="ml-3"> 51 <v-flex xs8 sm8 class="ml-3">
52 <v-select 52 <v-select
53 :items="addSection" 53 :items="addSection"
54 label="Select Section" 54 label="Select Section"
55 item-text="name" 55 item-text="name"
56 item-value="_id" 56 item-value="_id"
57 v-model="editedItem.sectionId" 57 v-model="editedItem.sectionId"
58 name="Select Section" 58 name="Select Section"
59 class="px-2" 59 class="px-2"
60 required 60 required
61 ></v-select> 61 ></v-select>
62 </v-flex> 62 </v-flex>
63 </v-layout>--> 63 </v-layout>-->
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">File:</label> 66 <label class="right">File:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs8 sm6 class="ml-3"> 68 <v-flex xs8 sm6 class="ml-3">
69 <v-text-field 69 <v-text-field
70 label="Select file" 70 label="Select file"
71 @click="pickFile" 71 @click="pickFile"
72 v-model="imageName" 72 v-model="imageName"
73 append-icon="attach_file" 73 append-icon="attach_file"
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 <input
77 type="file"
78 style="display:none"
79 ref="image"
80 accept="image/*"
81 @change="onFilePicked"
82 />
76 </v-layout> 83 </v-layout>
77 <v-flex xs12 sm12> 84 <v-flex xs12 sm12>
78 <v-card-actions> 85 <v-card-actions>
79 <v-spacer></v-spacer> 86 <v-spacer></v-spacer>
80 <v-btn 87 <v-btn
81 round 88 round
82 dark 89 dark
83 @click="save" 90 @click="save"
84 :loading="editLoading" 91 :loading="editLoading"
85 class="add-button" 92 class="add-button"
86 >Update Syllabus</v-btn> 93 >Update Syllabus</v-btn>
87 </v-card-actions> 94 </v-card-actions>
88 </v-flex> 95 </v-flex>
89 </v-form> 96 </v-form>
90 </v-container> 97 </v-container>
91 </v-card> 98 </v-card>
92 </v-dialog> 99 </v-dialog>
93 100
94 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 101 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
95 102
96 <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> 103 <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px">
97 <v-toolbar flat class="card-style pa-3" dark> 104 <v-toolbar flat class="card-style pa-3" dark>
98 <v-spacer></v-spacer> 105 <v-spacer></v-spacer>
99 <v-toolbar-title> 106 <v-toolbar-title>
100 <h3>Subject</h3> 107 <h3>Subject</h3>
101 </v-toolbar-title> 108 </v-toolbar-title>
102 <v-spacer></v-spacer> 109 <v-spacer></v-spacer>
103 <v-icon @click="close1">close</v-icon> 110 <v-icon @click="close1">close</v-icon>
104 </v-toolbar> 111 </v-toolbar>
105 <v-card> 112 <v-card>
106 <v-card-text> 113 <v-card-text>
107 <v-container grid-list-md> 114 <v-container grid-list-md>
108 <v-layout wrap> 115 <v-layout wrap>
109 <v-flex> 116 <v-flex>
110 <v-layout> 117 <v-layout>
111 <v-flex xs7 sm6> 118 <v-flex xs7 sm6>
112 <h5 class="right my-1"> 119 <h5 class="right my-1">
113 <b>Subject Name:</b> 120 <b>Subject Name:</b>
114 </h5> 121 </h5>
115 </v-flex> 122 </v-flex>
116 <v-flex sm6 xs5> 123 <v-flex sm6 xs5>
117 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 124 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
118 </v-flex> 125 </v-flex>
119 </v-layout> 126 </v-layout>
120 </v-flex> 127 </v-flex>
121 </v-layout> 128 </v-layout>
122 </v-container> 129 </v-container>
123 </v-card-text> 130 </v-card-text>
124 </v-card> 131 </v-card>
125 </v-dialog>--> 132 </v-dialog>-->
126 133
127 <!-- ****** EXISTING SYLLABUS TABLE ****** --> 134 <!-- ****** EXISTING SYLLABUS TABLE ****** -->
128 <v-toolbar color="transparent" flat> 135 <v-toolbar color="transparent" flat>
129 <v-btn 136 <v-btn
130 fab 137 fab
131 dark 138 dark
132 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 139 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
133 small 140 small
134 @click="addSyllabusDialog = true" 141 @click="addSyllabusDialog = true"
135 > 142 >
136 <v-icon dark>add</v-icon> 143 <v-icon dark>add</v-icon>
137 </v-btn> 144 </v-btn>
138 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 145 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
139 <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> 146 <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true">
140 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus 147 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus
141 </v-btn> 148 </v-btn>
142 </v-flex> 149 </v-flex>
143 <v-spacer></v-spacer> 150 <v-spacer></v-spacer>
144 <v-flex lg2 md2 xs12 v-show="show"> 151 <v-flex lg2 md2 xs12 v-show="show">
145 <v-select 152 <v-select
146 :items="classList" 153 :items="classList"
147 label="Select Class" 154 label="Select Class"
148 v-model="showSyllabus.classId" 155 v-model="showSyllabus.classId"
149 item-text="classNum" 156 item-text="classNum"
150 item-value="_id" 157 item-value="_id"
151 name="Select Class" 158 name="Select Class"
152 :rules="classRules" 159 :rules="classRules"
153 @change="getSyallabusList" 160 @change="getSyallabusList"
154 class="pl-2" 161 class="pl-2"
155 required 162 required
156 ></v-select> 163 ></v-select>
157 </v-flex> 164 </v-flex>
158 <v-card-title class="body-1" v-show="show"> 165 <v-card-title class="body-1" v-show="show">
159 <v-btn icon flat @click="displaySearch"> 166 <v-btn icon flat @click="displaySearch">
160 <v-avatar size="27"> 167 <v-avatar size="27">
161 <img src="/static/icon/search.png" alt="icon" /> 168 <img src="/static/icon/search.png" alt="icon" />
162 </v-avatar> 169 </v-avatar>
163 </v-btn> 170 </v-btn>
164 </v-card-title> 171 </v-card-title>
165 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 172 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
166 <v-layout> 173 <v-layout>
167 <v-text-field 174 <v-text-field
168 autofocus 175 autofocus
169 v-model="search" 176 v-model="search"
170 label="Search" 177 label="Search"
171 prepend-inner-icon="search" 178 prepend-inner-icon="search"
172 color="primary" 179 color="primary"
173 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 180 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
174 ></v-text-field> 181 ></v-text-field>
175 <v-icon @click="closeSearch" color="error">close</v-icon> 182 <v-icon @click="closeSearch" color="error">close</v-icon>
176 </v-layout> 183 </v-layout>
177 </v-flex> 184 </v-flex>
178 </v-toolbar> 185 </v-toolbar>
179 <v-data-table 186 <v-data-table
180 :headers="headers" 187 :headers="headers"
181 :items="syllabusList" 188 :items="syllabusList"
182 :pagination.sync="pagination" 189 :pagination.sync="pagination"
183 :search="search" 190 :search="search"
184 > 191 >
185 <template slot="items" slot-scope="props"> 192 <template slot="items" slot-scope="props">
186 <tr class="tr"> 193 <tr class="tr">
187 <td class="td-row td">{{ props.index + 1 }}</td> 194 <td class="td-row td">{{ props.index + 1 }}</td>
188 <td class="text-xs-center td td-row">{{ props.item.title }}</td> 195 <td class="text-xs-center td td-row">{{ props.item.title }}</td>
189 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 196 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
190 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> 197 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
191 <td 198 <td
192 class="text-xs-center td td-row" 199 class="text-xs-center td td-row"
193 v-if="props.item.teacherId" 200 v-if="props.item.teacherId"
194 >{{ props.item.teacherId.name }}</td> 201 >{{ props.item.teacherId.name }}</td>
195 <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td> 202 <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td>
196 <td class="text-xs-center td td-row"> 203 <td class="text-xs-center td td-row">
197 <v-btn 204 <v-btn
198 class="add-button" 205 class="add-button"
199 @click="generatePDF2Canvas(props.item)" 206 @click="generatePDF2Canvas(props.item)"
200 :loading="loadingPdf" 207 :loading="loadingPdf"
201 dark 208 dark
202 >{{ props.item.fileType }}</v-btn> 209 >{{ props.item.fileType }}</v-btn>
203 </td> 210 </td>
204 <td class="text-xs-center td td-row"> 211 <td class="text-xs-center td td-row">
205 <span> 212 <span>
206 <v-tooltip top> 213 <v-tooltip top>
207 <img 214 <img
208 slot="activator" 215 slot="activator"
209 style="cursor:pointer; width:20px; height:18px; " 216 style="cursor:pointer; width:20px; height:18px; "
210 class="mr-3" 217 class="mr-3"
211 @click="editItem(props.item)" 218 @click="editItem(props.item)"
212 src="/static/icon/edit.png" 219 src="/static/icon/edit.png"
213 /> 220 />
214 <span>Edit</span> 221 <span>Edit</span>
215 </v-tooltip> 222 </v-tooltip>
216 <v-tooltip top> 223 <v-tooltip top>
217 <img 224 <img
218 slot="activator" 225 slot="activator"
219 style="cursor:pointer; width:20px; height:20px; " 226 style="cursor:pointer; width:20px; height:20px; "
220 class="mr-3" 227 class="mr-3"
221 @click="deleteItem(props.item)" 228 @click="deleteItem(props.item)"
222 src="/static/icon/delete.png" 229 src="/static/icon/delete.png"
223 /> 230 />
224 <span>Delete</span> 231 <span>Delete</span>
225 </v-tooltip> 232 </v-tooltip>
226 </span> 233 </span>
227 </td> 234 </td>
228 </tr> 235 </tr>
229 </template> 236 </template>
230 <v-alert 237 <v-alert
231 slot="no-results" 238 slot="no-results"
232 :value="true" 239 :value="true"
233 color="error" 240 color="error"
234 icon="warning" 241 icon="warning"
235 >Your search for "{{ search }}" found no results.</v-alert> 242 >Your search for "{{ search }}" found no results.</v-alert>
236 </v-data-table> 243 </v-data-table>
237 <!-- ****** ADD SYLLABUS ****** --> 244 <!-- ****** ADD SYLLABUS ****** -->
238 <v-snackbar 245 <v-snackbar
239 :timeout="timeout" 246 :timeout="timeout"
240 :top="y === 'top'" 247 :top="y === 'top'"
241 :right="x === 'right'" 248 :right="x === 'right'"
242 :vertical="mode === 'vertical'" 249 :vertical="mode === 'vertical'"
243 v-model="snackbar" 250 v-model="snackbar"
244 :color="color" 251 :color="color"
245 >{{ text }}</v-snackbar> 252 >{{ text }}</v-snackbar>
246 <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog"> 253 <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog">
247 <v-card flat class="card-style pa-2" dark> 254 <v-card flat class="card-style pa-2" dark>
248 <v-layout> 255 <v-layout>
249 <v-flex xs12> 256 <v-flex xs12>
250 <label class="title text-xs-center">Add Syllabus</label> 257 <label class="title text-xs-center">Add Syllabus</label>
251 <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon> 258 <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon>
252 </v-flex> 259 </v-flex>
253 </v-layout> 260 </v-layout>
254 <v-container fluid fill-height> 261 <v-container fluid fill-height>
255 <v-layout align-center> 262 <v-layout align-center>
256 <v-flex xs12> 263 <v-flex xs12>
257 <v-form ref="form" v-model="valid" lazy-validation> 264 <v-form ref="form" v-model="valid" lazy-validation>
258 <v-layout> 265 <v-layout>
259 <v-flex xs4 sm4 class="pt-4 subheading"> 266 <v-flex xs4 sm4 class="pt-4 subheading">
260 <label class="right">Title :</label> 267 <label class="right">Title :</label>
261 </v-flex> 268 </v-flex>
262 <v-flex xs8 sm8 class="ml-3"> 269 <v-flex xs8 sm8 class="ml-3">
263 <v-text-field 270 <v-text-field
264 v-model="addSyllabus.title" 271 v-model="addSyllabus.title"
265 name="name" 272 name="name"
266 type="text" 273 type="text"
267 placeholder="Add Title" 274 placeholder="Add Title"
268 :rules="titleRules" 275 :rules="titleRules"
269 required 276 required
270 ></v-text-field> 277 ></v-text-field>
271 </v-flex> 278 </v-flex>
272 </v-layout> 279 </v-layout>
273 <v-layout> 280 <v-layout>
274 <v-flex xs4 sm4 class="pt-4 subheading"> 281 <v-flex xs4 sm4 class="pt-4 subheading">
275 <label class="right">Description :</label> 282 <label class="right">Description :</label>
276 </v-flex> 283 </v-flex>
277 <v-flex xs8 sm8 class="ml-3"> 284 <v-flex xs8 sm8 class="ml-3">
278 <v-text-field 285 <v-text-field
279 v-model="addSyllabus.description" 286 v-model="addSyllabus.description"
280 name="name" 287 name="name"
281 type="text" 288 type="text"
282 placeholder="Add Description" 289 placeholder="Add Description"
283 :rules="descriptionRules" 290 :rules="descriptionRules"
284 required 291 required
285 ></v-text-field> 292 ></v-text-field>
286 </v-flex> 293 </v-flex>
287 </v-layout> 294 </v-layout>
288 <v-layout> 295 <v-layout>
289 <v-flex xs4 class="pt-4 subheading"> 296 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Class:</label> 297 <label class="right">Class:</label>
291 </v-flex> 298 </v-flex>
292 <v-flex xs8 class="ml-3"> 299 <v-flex xs8 class="ml-3">
293 <v-select 300 <v-select
294 :items="classList" 301 :items="classList"
295 v-model="addSyllabus.classId" 302 v-model="addSyllabus.classId"
296 label="Select Class" 303 label="Select Class"
297 item-text="classNum" 304 item-text="classNum"
298 item-value="_id" 305 item-value="_id"
299 name="Select Class" 306 name="Select Class"
300 @change="getSections(addSyllabus.classId)" 307 @change="getSections(addSyllabus.classId)"
301 required 308 required
302 ></v-select> 309 ></v-select>
303 </v-flex> 310 </v-flex>
304 </v-layout> 311 </v-layout>
305 <!-- <v-layout> 312 <!-- <v-layout>
306 <v-flex xs4 sm4 class="pt-4 subheading"> 313 <v-flex xs4 sm4 class="pt-4 subheading">
307 <label class="right">Section :</label> 314 <label class="right">Section :</label>
308 </v-flex> 315 </v-flex>
309 <v-flex xs8 sm8 class="ml-3"> 316 <v-flex xs8 sm8 class="ml-3">
310 <v-select 317 <v-select
311 :items="addSection" 318 :items="addSection"
312 label="Select Section" 319 label="Select Section"
313 item-text="name" 320 item-text="name"
314 item-value="_id" 321 item-value="_id"
315 v-model="addSyllabus.sectionId" 322 v-model="addSyllabus.sectionId"
316 name="Select Section" 323 name="Select Section"
317 class="px-2" 324 class="px-2"
318 required 325 required
319 ></v-select> 326 ></v-select>
320 </v-flex> 327 </v-flex>
321 </v-layout>--> 328 </v-layout>-->
322 <v-layout> 329 <v-layout>
323 <v-flex xs4 class="pt-4 subheading"> 330 <v-flex xs4 class="pt-4 subheading">
324 <label class="right">File:</label> 331 <label class="right">File:</label>
325 </v-flex> 332 </v-flex>
326 <v-flex xs8 sm6 class="ml-3"> 333 <v-flex xs8 sm6 class="ml-3">
327 <v-text-field 334 <v-text-field
328 label="Select file" 335 label="Select file"
329 @click="pickFile" 336 @click="pickFile"
330 v-model="imageName" 337 v-model="imageName"
331 append-icon="attach_file" 338 append-icon="attach_file"
332 ></v-text-field> 339 ></v-text-field>
333 <input 340 <input
334 type="file" 341 type="file"
335 style="display:none" 342 style="display:none"
336 ref="image" 343 ref="image"
337 accept="image/*" 344 accept="image/*"
338 @change="onFilePicked" 345 @change="onFilePicked"
339 /> 346 />
340 </v-flex> 347 </v-flex>
341 </v-layout> 348 </v-layout>
342 <v-layout> 349 <v-layout>
343 <v-flex xs12 sm12> 350 <v-flex xs12 sm12>
344 <v-card-actions> 351 <v-card-actions>
345 <v-spacer></v-spacer> 352 <v-spacer></v-spacer>
346 <v-btn 353 <v-btn
347 @click="submit" 354 @click="submit"
348 round 355 round
349 dark 356 dark
350 :loading="loading" 357 :loading="loading"
351 class="add-button" 358 class="add-button"
352 >Add Syllabus</v-btn> 359 >Add Syllabus</v-btn>
353 </v-card-actions> 360 </v-card-actions>
354 </v-flex> 361 </v-flex>
355 </v-layout> 362 </v-layout>
356 </v-form> 363 </v-form>
357 </v-flex> 364 </v-flex>
358 </v-layout> 365 </v-layout>
359 </v-container> 366 </v-container>
360 </v-card> 367 </v-card>
361 </v-dialog> 368 </v-dialog>
362 <div class="loader" v-if="showLoader"> 369 <div class="loader" v-if="showLoader">
363 <v-progress-circular indeterminate color="white"></v-progress-circular> 370 <v-progress-circular indeterminate color="white"></v-progress-circular>
364 </div> 371 </div>
365 </v-container> 372 </v-container>
366 </template> 373 </template>
367 374
368 <script> 375 <script>
369 import http from "@/Services/http.js"; 376 import http from "@/Services/http.js";
370 import Util from "@/util"; 377 import Util from "@/util";
371 import moment from "moment"; 378 import moment from "moment";
372 import jsPDF from "jspdf"; 379 import jsPDF from "jspdf";
373 import { saveAs } from "file-saver"; 380 import { saveAs } from "file-saver";
374 381
375 export default { 382 export default {
376 data: () => ({ 383 data: () => ({
377 snackbar: false, 384 snackbar: false,
378 y: "top", 385 y: "top",
379 x: "right", 386 x: "right",
380 mode: "", 387 mode: "",
381 timeout: 3000, 388 timeout: 3000,
382 text: "", 389 text: "",
383 color: "", 390 color: "",
384 show: true, 391 show: true,
385 showSearch: false, 392 showSearch: false,
386 showLoader: false, 393 showLoader: false,
387 loading: false, 394 loading: false,
388 editLoading: false, 395 editLoading: false,
389 date: null, 396 date: null,
390 search: "", 397 search: "",
391 editSyllabusDialog: false, 398 editSyllabusDialog: false,
392 valid: true, 399 valid: true,
393 validEditSyllabus: true, 400 validEditSyllabus: true,
394 addSyllabusDialog: false, 401 addSyllabusDialog: false,
395 loadingPdf: false, 402 loadingPdf: false,
396 403
397 pagination: { 404 pagination: {
398 rowsPerPage: 10, 405 rowsPerPage: 10,
399 }, 406 },
400 token: "", 407 token: "",
401 upload: "", 408 upload: "",
402 titleRules: [(v) => !!v || " Title is required"], 409 titleRules: [(v) => !!v || " Title is required"],
403 descriptionRules: [(v) => !!v || " Description is required"], 410 descriptionRules: [(v) => !!v || " Description is required"],
404 classRules: [(v) => !!v || " Class Name is required"], 411 classRules: [(v) => !!v || " Class Name is required"],
405 fileRules: [(v) => !!v || " File is required"], 412 fileRules: [(v) => !!v || " File is required"],
406 headers: [ 413 headers: [
407 { 414 {
408 text: "No", 415 text: "No",
409 align: "", 416 align: "",
410 sortable: false, 417 sortable: false,
411 value: "No", 418 value: "No",
412 }, 419 },
413 { 420 {
414 text: "Title", 421 text: "Title",
415 value: "title", 422 value: "title",
416 sortable: false, 423 sortable: false,
417 align: "center", 424 align: "center",
418 }, 425 },
419 { 426 {
420 text: "Description", 427 text: "Description",
421 value: "description", 428 value: "description",
422 sortable: false, 429 sortable: false,
423 align: "center", 430 align: "center",
424 }, 431 },
425 { 432 {
426 text: "Date", 433 text: "Date",
427 value: "created", 434 value: "created",
428 sortable: false, 435 sortable: false,
429 align: "center", 436 align: "center",
430 }, 437 },
431 { 438 {
432 text: "Uploader", 439 text: "Uploader",
433 value: "upload", 440 value: "upload",
434 sortable: false, 441 sortable: false,
435 align: "center", 442 align: "center",
436 }, 443 },
437 { 444 {
438 text: "File", 445 text: "File",
439 value: "documentUrl", 446 value: "documentUrl",
440 sortable: false, 447 sortable: false,
441 align: "center", 448 align: "center",
442 }, 449 },
443 { text: "Action", value: "", sortable: false, align: "center" }, 450 { text: "Action", value: "", sortable: false, align: "center" },
444 ], 451 ],
445 syllabusList: [], 452 syllabusList: [],
446 classList: [], 453 classList: [],
447 addSection: [], 454 addSection: [],
448 editedIndex: -1, 455 editedIndex: -1,
449 addSyllabus: {}, 456 addSyllabus: {},
450 showSyllabus: {}, 457 showSyllabus: {},
451 458
452 editedItem: { 459 editedItem: {
453 subjectName: "", 460 subjectName: "",
454 }, 461 },
455 imageData: {}, 462 imageData: {},
456 imageName: "", 463 imageName: "",
457 imageUrl: "", 464 imageUrl: "",
458 imageFile: "", 465 imageFile: "",
459 }), 466 }),
460 467
461 watch: { 468 watch: {
462 addSyllabusDialog: function (val) { 469 addSyllabusDialog: function (val) {
463 if (!val) { 470 if (!val) {
464 this.addSyllabus = []; 471 this.addSyllabus = [];
465 this.imageName = ""; 472 this.imageName = "";
466 } 473 }
467 }, 474 },
468 }, 475 },
469 476
470 methods: { 477 methods: {
471 pickFile() { 478 pickFile() {
472 this.$refs.image.click(); 479 this.$refs.image.click();
473 }, 480 },
474 dates: function (date) { 481 dates: function (date) {
475 return moment(date).format("MMMM DD, YYYY"); 482 return moment(date).format("MMMM DD, YYYY");
476 }, 483 },
477 editItem(item) { 484 editItem(item) {
478 this.editedIndex = this.syllabusList; 485 this.editedIndex = this.syllabusList;
479 this.editedItem = Object.assign({}, item); 486 this.editedItem = Object.assign({}, item);
480 this.dialog = true; 487 this.dialog = true;
481 this.editSyllabusDialog = true; 488 this.editSyllabusDialog = true;
482 }, 489 },
483 download(item) { 490 download(item) {
484 this.editedIndex = this.syllabusList; 491 this.editedIndex = this.syllabusList;
485 this.editedItem = Object.assign({}, item); 492 this.editedItem = Object.assign({}, item);
486 this.dialog1 = true; 493 this.dialog1 = true;
487 }, 494 },
488 deleteItem(item) { 495 deleteItem(item) {
489 let deleteSyallabus = { 496 let deleteSyallabus = {
490 syallabusId: item._id, 497 syallabusId: item._id,
491 }; 498 };
492 http() 499 http()
493 .delete( 500 .delete(
494 "/deleteSyallabus", 501 "/deleteSyallabus",
495 confirm("Are you sure you want to delete this?") && { 502 confirm("Are you sure you want to delete this?") && {
496 params: deleteSyallabus, 503 params: deleteSyallabus,
497 } 504 }
498 ) 505 )
499 .then((response) => { 506 .then((response) => {
500 this.getSyallabusList(); 507 this.getSyallabusList();
501 this.snackbar = true; 508 this.snackbar = true;
502 this.color = "green"; 509 this.color = "green";
503 this.text = "Successfully delete Existing Syllabus"; 510 this.text = "Successfully delete Existing Syllabus";
504 }) 511 })
505 .catch((error) => { 512 .catch((error) => {
506 this.snackbar = true; 513 this.snackbar = true;
507 this.text = error.response.data.message; 514 this.text = error.response.data.message;
508 this.color = "error"; 515 this.color = "error";
509 }); 516 });
510 }, 517 },
511 close() { 518 close() {
512 this.editSyllabusDialog = false; 519 this.editSyllabusDialog = false;
513 }, 520 },
514 closeAddStudentModel() { 521 closeAddStudentModel() {
515 this.addSyllabusDialog = false; 522 this.addSyllabusDialog = false;
516 // this.syllabusList = []; 523 // this.syllabusList = [];
517 this.addSyllabus = []; 524 this.addSyllabus = [];
518 this.imageName = ""; 525 this.imageName = "";
519 }, 526 },
520 527
521 submit() { 528 submit() {
522 // var addSyllabus = { 529 // var addSyllabus = {
523 // classId: this.addSyllabus.classId, 530 // classId: this.addSyllabus.classId,
524 // title: this.addSyllabus.title, 531 // title: this.addSyllabus.title,
525 // description: this.addSyllabus.description, 532 // description: this.addSyllabus.description,
526 // upload: this.addSyllabus.upload, 533 // upload: this.addSyllabus.upload,
527 // fileType: this.addSyllabus.fileType 534 // fileType: this.addSyllabus.fileType
528 // }; 535 // };
529 var signatures = { 536 var signatures = {
530 JVBERi0: "other", 537 JVBERi0: "other",
531 iVBORw0KGgo: "image", 538 iVBORw0KGgo: "image",
532 UEsDBBQ: "other", 539 UEsDBBQ: "other",
533 "/": "image", 540 "/": "image",
534 AAABAA: "image", 541 AAABAA: "image",
535 IywiV2hhdC: "other", 542 IywiV2hhdC: "other",
536 bmFtZSxl: "other", 543 bmFtZSxl: "other",
537 }; 544 };
538 function detectMimeType(b64) { 545 function detectMimeType(b64) {
539 for (var s in signatures) { 546 for (var s in signatures) {
540 if (b64.indexOf(s) === 0) { 547 if (b64.indexOf(s) === 0) {
541 return signatures[s]; 548 return signatures[s];
542 } 549 }
543 } 550 }
544 } 551 }
545 if (this.$refs.form.validate()) { 552 if (this.$refs.form.validate()) {
546 if (this.imageUrl) { 553 if (this.imageUrl) {
547 var str = this.imageUrl; 554 var str = this.imageUrl;
548 const [baseUrl, imageUrl] = str.split(/,/); 555 const [baseUrl, imageUrl] = str.split(/,/);
549 this.addSyllabus.upload = imageUrl; 556 this.addSyllabus.upload = imageUrl;
550 this.addSyllabus.fileType = detectMimeType(imageUrl); 557 this.addSyllabus.fileType = detectMimeType(imageUrl);
551 this.addSyllabus.fileName = this.imageName; 558 this.addSyllabus.fileName = this.imageName;
552 } 559 }
553 http() 560 http()
554 .post("/createSyallabus", this.addSyllabus) 561 .post("/createSyallabus", this.addSyllabus)
555 .then((response) => { 562 .then((response) => {
556 this.getSyallabusList(); 563 this.getSyallabusList();
557 this.snackbar = true; 564 this.snackbar = true;
558 this.text = "Syllabus added successfully"; 565 this.text = "Syllabus added successfully";
559 this.clear(); 566 this.clear();
560 this.color = "green"; 567 this.color = "green";
561 this.addSyllabusDialog = false; 568 this.addSyllabusDialog = false;
562 }) 569 })
563 .catch((error) => { 570 .catch((error) => {
564 // console.log(error); 571 // console.log(error);
565 this.snackbar = true; 572 this.snackbar = true;
566 this.text = error.response.data.message; 573 this.text = error.response.data.message;
567 this.color = "error"; 574 this.color = "error";
568 }); 575 });
569 } 576 }
570 }, 577 },
571 onFilePicked(e) { 578 onFilePicked(e) {
572 const files = e.target.files; 579 const files = e.target.files;
573 this.upload = e.target.files[0]; 580 this.upload = e.target.files[0];
574 if (files[0] !== undefined) { 581 if (files[0] !== undefined) {
575 this.imageName = files[0].name; 582 this.imageName = files[0].name;
576 if (this.imageName.lastIndexOf(".") <= 0) { 583 if (this.imageName.lastIndexOf(".") <= 0) {
577 return; 584 return;
578 } 585 }
579 const fr = new FileReader(); 586 const fr = new FileReader();
580 fr.readAsDataURL(files[0]); 587 fr.readAsDataURL(files[0]);
581 fr.addEventListener("load", () => { 588 fr.addEventListener("load", () => {
582 this.imageUrl = fr.result; 589 this.imageUrl = fr.result;
583 this.imageFile = files[0]; // this is an image file that can be sent to server... 590 this.imageFile = files[0]; // this is an image file that can be sent to server...
584 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 591 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
585 }); 592 });
586 } else { 593 } else {
587 this.imageName = ""; 594 this.imageName = "";
588 this.imageFile = ""; 595 this.imageFile = "";
589 this.imageUrl = ""; 596 this.imageUrl = "";
590 } 597 }
591 }, 598 },
592 clear() { 599 clear() {
593 this.$refs.form.reset(); 600 this.$refs.form.reset();
594 }, 601 },
595 save() { 602 save() {
596 if (this.$refs.formEditSyllabus.validate()) { 603 if (this.$refs.formEditSyllabus.validate()) {
597 let syllabusData = { 604 let syllabusData = {
598 syallabusId: this.editedItem._id, 605 syallabusId: this.editedItem._id,
599 classId: this.editedItem.classId._id, 606 classId: this.editedItem.classId._id,
600 // sectionId: this.editedItem.sectionId, 607 // sectionId: this.editedItem.sectionId,
601 title: this.editedItem.title, 608 title: this.editedItem.title,
602 description: this.editedItem.description, 609 description: this.editedItem.description,
603 upload: this.editedItem.upload, 610 upload: this.editedItem.upload,
604 fileType: this.editedItem.fileType, 611 fileType: this.editedItem.fileType,
605 fileName: this.imageName, 612 fileName: this.imageName,
606 }; 613 };
607 this.editLoading = true; 614 this.editLoading = true;
608 var signatures = { 615 var signatures = {
609 JVBERi0: "other", 616 JVBERi0: "other",
610 iVBORw0KGgo: "image", 617 iVBORw0KGgo: "image",
611 UEsDBBQ: "other", 618 UEsDBBQ: "other",
612 "/": "image", 619 "/": "image",
613 AAABAA: "image", 620 AAABAA: "image",
614 IywiV2hhdC: "other", 621 IywiV2hhdC: "other",
615 }; 622 };
616 function detectMimeType(b64) { 623 function detectMimeType(b64) {
617 for (var s in signatures) { 624 for (var s in signatures) {
618 if (b64.indexOf(s) === 0) { 625 if (b64.indexOf(s) === 0) {
619 return signatures[s]; 626 return signatures[s];
620 } 627 }
621 } 628 }
622 } 629 }
623 if (this.imageUrl) { 630 if (this.imageUrl) {
624 var str = this.imageUrl; 631 var str = this.imageUrl;
625 const [baseUrl, imageUrl] = str.split(/,/); 632 const [baseUrl, imageUrl] = str.split(/,/);
626 syllabusData.upload = imageUrl; 633 syllabusData.upload = imageUrl;
627 syllabusData.fileType = detectMimeType(imageUrl); 634 syllabusData.fileType = detectMimeType(imageUrl);
628 } 635 }
629 http() 636 http()
630 .put("/updateSyallabus", syllabusData) 637 .put("/updateSyallabus", syllabusData)
631 .then((response) => { 638 .then((response) => {
632 this.snackbar = true; 639 this.snackbar = true;
633 this.text = "Successfully Edit Existing Syllabus"; 640 this.text = "Successfully Edit Existing Syllabus";
634 this.color = "green"; 641 this.color = "green";
635 this.editLoading = false; 642 this.editLoading = false;
636 this.editSyllabusDialog = false; 643 this.editSyllabusDialog = false;
637 http() 644 http()
638 .get( 645 .get(
639 "/getSyallabusList", 646 "/getSyallabusList",
640 { params: { classId: this.addSyllabus.classId } }, 647 { params: { classId: this.addSyllabus.classId } },
641 { 648 {
642 headers: { Authorization: "Bearer " + this.token }, 649 headers: { Authorization: "Bearer " + this.token },
643 } 650 }
644 ) 651 )
645 .then((response) => { 652 .then((response) => {
646 this.syllabusList = response.data.data; 653 this.syllabusList = response.data.data;
647 this.getSyallabusList(); 654 this.getSyallabusList();
648 this.snackbar = true; 655 this.snackbar = true;
649 this.color = "green"; 656 this.color = "green";
650 this.close(); 657 this.close();
651 }) 658 })
652 .catch((err) => { 659 .catch((err) => {
653 console.log("err====>", err); 660 console.log("err====>", err);
654 this.text = error.response.data.message; 661 this.text = error.response.data.message;
655 this.color = "error"; 662 this.color = "error";
656 }); 663 });
657 }) 664 })
658 .catch((error) => { 665 .catch((error) => {
659 this.editLoading = false; 666 this.editLoading = false;
660 }); 667 });
661 } 668 }
662 }, 669 },
663 getSyallabusList() { 670 getSyallabusList() {
664 this.showLoader = true; 671 this.showLoader = true;
665 http() 672 http()
666 .get( 673 .get(
667 "/getSyallabusList", 674 "/getSyallabusList",
668 { params: { classId: this.showSyllabus.classId } }, 675 { params: { classId: this.showSyllabus.classId } },
669 { 676 {
670 headers: { Authorization: "Bearer " + this.token }, 677 headers: { Authorization: "Bearer " + this.token },
671 } 678 }
672 ) 679 )
673 .then((response) => { 680 .then((response) => {
674 this.syllabusList = response.data.data; 681 this.syllabusList = response.data.data;
675 this.showLoader = false; 682 this.showLoader = false;
676 }) 683 })
677 .catch((err) => { 684 .catch((err) => {
678 this.showLoader = false; 685 this.showLoader = false;
679 }); 686 });
680 }, 687 },
681 getClass() { 688 getClass() {
682 http() 689 http()
683 .get("/getClassesList", { 690 .get("/getClassesList", {
684 headers: { Authorization: "Bearer " + this.token }, 691 headers: { Authorization: "Bearer " + this.token },
685 }) 692 })
686 .then((response) => { 693 .then((response) => {
687 this.classList = response.data.data; 694 this.classList = response.data.data;
688 }) 695 })
689 .catch((error) => { 696 .catch((error) => {
690 if (error.response.status === 401) { 697 if (error.response.status === 401) {
691 this.$router.replace({ path: "/" }); 698 this.$router.replace({ path: "/" });
692 this.$store.dispatch("setToken", null); 699 this.$store.dispatch("setToken", null);
693 this.$store.dispatch("Id", null); 700 this.$store.dispatch("Id", null);
694 } 701 }
695 }); 702 });
696 }, 703 },
697 getSections(_id) { 704 getSections(_id) {
698 var token = this.$store.state.token; 705 var token = this.$store.state.token;
699 this.showLoader = true; 706 this.showLoader = true;
700 http() 707 http()
701 .get( 708 .get(
702 "/getSectionsList", 709 "/getSectionsList",
703 { params: { classId: _id } }, 710 { params: { classId: _id } },
704 { 711 {
705 headers: { Authorization: "Bearer " + token }, 712 headers: { Authorization: "Bearer " + token },
706 } 713 }
707 ) 714 )
708 .then((response) => { 715 .then((response) => {
709 this.addSection = response.data.data; 716 this.addSection = response.data.data;
710 this.showLoader = false; 717 this.showLoader = false;
711 }) 718 })
712 .catch((err) => { 719 .catch((err) => {
713 this.showLoader = false; 720 this.showLoader = false;
714 }); 721 });
715 }, 722 },
716 displaySearch() { 723 displaySearch() {
717 (this.show = false), (this.showSearch = true); 724 (this.show = false), (this.showSearch = true);
718 }, 725 },
719 closeSearch() { 726 closeSearch() {
720 this.showSearch = false; 727 this.showSearch = false;
721 this.show = true; 728 this.show = true;
722 this.search = ""; 729 this.search = "";
723 }, 730 },
724 731
725 async generatePDF2Canvas(item) { 732 async generatePDF2Canvas(item) {
726 // console.log("documentUrl", documentUrl); 733 // console.log("documentUrl", documentUrl);
727 // this.loadingPdf = true; 734 // this.loadingPdf = true;
728 // const el = this.$refs.printMe; 735 // const el = this.$refs.printMe;
729 // add option type to get the image version 736 // add option type to get the image version
730 // if not provided the promise will return 737 // if not provided the promise will return
731 // the canvas. 738 // the canvas.
732 // const options = { 739 // const options = {
733 // type: "dataURL" 740 // type: "dataURL"
734 // }; 741 // };
735 // this.output = await this.$html2canvas(el, options); 742 // this.output = await this.$html2canvas(el, options);
736 // console.log("el,option", this.output); 743 // console.log("el,option", this.output);
737 // if (this.output) { 744 // if (this.output) {
738 // this.loadingPdf = false; 745 // this.loadingPdf = false;
739 // } 746 // }
740 // let doc = new jsPDF(); 747 // let doc = new jsPDF();
741 // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); 748 // doc.addImage(this.output,"JPEG", 5, 10, 200, 280);
742 // doc.save("File.pdf"); 749 // doc.save("File.pdf");
743 750
744 // function download(documentUrl, filename) { 751 // function download(documentUrl, filename) {
745 // fetch(documentUrl).then(function(t) { 752 // fetch(documentUrl).then(function(t) {
746 // return t.blob().then(b => { 753 // return t.blob().then(b => {
747 // var a = document.createElement("a"); 754 // var a = document.createElement("a");
748 // a.href = URL.createObjectURL(b); 755 // a.href = URL.createObjectURL(b);
749 // a.setAttribute("download", "filename"); 756 // a.setAttribute("download", "filename");
750 // a.click(); 757 // a.click();
751 // }); 758 // });
752 // }); 759 // });
753 // } 760 // }
754 var dataType = ""; 761 var dataType = "";
755 var type = ""; 762 var type = "";
756 if (item.fileType == "image") { 763 if (item.fileType == "image") {
757 dataType = "file.jpg"; 764 dataType = "file.jpg";
758 } else if (item.fileType == "other") { 765 } else if (item.fileType == "other") {
759 dataType = "file.pdf"; 766 dataType = "file.pdf";
760 type = "application/pdf"; 767 type = "application/pdf";
761 } 768 }
762 var FileSaver = require("file-saver"); 769 var FileSaver = require("file-saver");
763 FileSaver.saveAs(item.documentUrl, "image.jpg"); 770 FileSaver.saveAs(item.documentUrl, "image.jpg");
764 771
765 // var blob = new Blob([item.documentUrl], { 772 // var blob = new Blob([item.documentUrl], {
766 // type: type 773 // type: type
767 // }); 774 // });
768 // FileSaver.saveAs(blob, dataType); 775 // FileSaver.saveAs(blob, dataType);
769 // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); 776 // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
770 // console.log("document", item.documentUrl); 777 // console.log("document", item.documentUrl);
771 // const link = document.createElement("a"); 778 // const link = document.createElement("a");
772 // link.href = url; 779 // link.href = url;
773 // link.setAttribute("download", dataType); //or any other extension 780 // link.setAttribute("download", dataType); //or any other extension
774 // document.body.appendChild(link); 781 // document.body.appendChild(link);
775 // link.click(); 782 // link.click();
776 783
777 // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); 784 // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
778 // const link = document.createElement('a') 785 // const link = document.createElement('a')
779 // link.href = URL.createObjectURL(blob) 786 // link.href = URL.createObjectURL(blob)
780 // link.download = dataType 787 // link.download = dataType
781 // link.click() 788 // link.click()
782 // URL.revokeObjectURL(link.href) 789 // URL.revokeObjectURL(link.href)
783 }, 790 },
784 }, 791 },
785 mounted() { 792 mounted() {
786 this.token = this.$store.state.token; 793 this.token = this.$store.state.token;
787 this.role = this.$store.state.role; 794 this.role = this.$store.state.role;
788 this.getClass(); 795 this.getClass();
789 }, 796 },
790 }; 797 };
791 </script> 798 </script>
src/pages/Account/expense.vue
Diff comments   View file @d10c266
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 <input
117 type="file"
118 style="display:none"
119 ref="image"
120 accept="image/*"
121 @change="onFilePicked"
122 />
116 </v-flex> 123 </v-flex>
117 </v-layout> 124 </v-layout>
118 </v-flex> 125 </v-flex>
119 <v-flex xs12> 126 <v-flex xs12>
120 <v-layout> 127 <v-layout>
121 <v-flex xs4 class="pt-4 subheading"> 128 <v-flex xs4 class="pt-4 subheading">
122 <label class="right">Note:</label> 129 <label class="right">Note:</label>
123 </v-flex> 130 </v-flex>
124 <v-flex xs7 class="ml-3"> 131 <v-flex xs7 class="ml-3">
125 <v-textarea 132 <v-textarea
126 name="input-7-1" 133 name="input-7-1"
127 v-model="editedItem.note" 134 v-model="editedItem.note"
128 placeholder="fill your Note" 135 placeholder="fill your Note"
129 type="text" 136 type="text"
130 :rules="noteRules" 137 :rules="noteRules"
131 multi-line 138 multi-line
132 required 139 required
133 ></v-textarea> 140 ></v-textarea>
134 </v-flex> 141 </v-flex>
135 </v-layout> 142 </v-layout>
136 </v-flex> 143 </v-flex>
137 </v-layout> 144 </v-layout>
138 <v-layout> 145 <v-layout>
139 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
140 <v-card-actions> 147 <v-card-actions>
141 <v-spacer></v-spacer> 148 <v-spacer></v-spacer>
142 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 149 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
143 </v-card-actions> 150 </v-card-actions>
144 </v-flex> 151 </v-flex>
145 </v-layout> 152 </v-layout>
146 </v-card-text> 153 </v-card-text>
147 </v-card> 154 </v-card>
148 </v-dialog> 155 </v-dialog>
149 156
150 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> 157 <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** -->
151 158
152 <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable> 159 <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable>
153 <v-card flat class="card-style pa-3" dark> 160 <v-card flat class="card-style pa-3" dark>
154 <v-layout> 161 <v-layout>
155 <v-flex xs12> 162 <v-flex xs12>
156 <label class="title text-xs-center">View Expense</label> 163 <label class="title text-xs-center">View Expense</label>
157 <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> 164 <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon>
158 </v-flex> 165 </v-flex>
159 </v-layout> 166 </v-layout>
160 <v-card-text> 167 <v-card-text>
161 <v-container grid-list-md> 168 <v-container grid-list-md>
162 <v-layout wrap> 169 <v-layout wrap>
163 <v-flex> 170 <v-flex>
164 <v-flex align-center justify-center layout text-xs-center> 171 <v-flex align-center justify-center layout text-xs-center>
165 <v-avatar size="160px"> 172 <v-avatar size="160px">
166 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> 173 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
167 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> 174 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
168 </v-avatar> 175 </v-avatar>
169 </v-flex> 176 </v-flex>
170 <v-layout> 177 <v-layout>
171 <v-flex xs5 sm6> 178 <v-flex xs5 sm6>
172 <h5 class="right my-1"> 179 <h5 class="right my-1">
173 <b>Name:</b> 180 <b>Name:</b>
174 </h5> 181 </h5>
175 </v-flex> 182 </v-flex>
176 <v-flex sm6 xs8> 183 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.name }}</h5> 184 <h5 class="my-1">{{ editedItem.name }}</h5>
178 </v-flex> 185 </v-flex>
179 </v-layout> 186 </v-layout>
180 <v-layout> 187 <v-layout>
181 <v-flex xs5 sm6> 188 <v-flex xs5 sm6>
182 <h5 class="right my-1"> 189 <h5 class="right my-1">
183 <b>Amount:</b> 190 <b>Amount:</b>
184 </h5> 191 </h5>
185 </v-flex> 192 </v-flex>
186 <v-flex sm6 xs8> 193 <v-flex sm6 xs8>
187 <h5 class="my-1">{{ editedItem.amount }}</h5> 194 <h5 class="my-1">{{ editedItem.amount }}</h5>
188 </v-flex> 195 </v-flex>
189 </v-layout> 196 </v-layout>
190 <v-layout> 197 <v-layout>
191 <v-flex xs5 sm6> 198 <v-flex xs5 sm6>
192 <h5 class="right my-1"> 199 <h5 class="right my-1">
193 <b>Date:</b> 200 <b>Date:</b>
194 </h5> 201 </h5>
195 </v-flex> 202 </v-flex>
196 <v-flex sm6 xs8> 203 <v-flex sm6 xs8>
197 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 204 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
198 </v-flex> 205 </v-flex>
199 </v-layout> 206 </v-layout>
200 <v-layout> 207 <v-layout>
201 <v-flex xs5 sm6> 208 <v-flex xs5 sm6>
202 <h5 class="right my-1"> 209 <h5 class="right my-1">
203 <b>Note:</b> 210 <b>Note:</b>
204 </h5> 211 </h5>
205 </v-flex> 212 </v-flex>
206 <v-flex sm6 xs8> 213 <v-flex sm6 xs8>
207 <h5 class="my-1">{{ editedItem.note }}</h5> 214 <h5 class="my-1">{{ editedItem.note }}</h5>
208 </v-flex> 215 </v-flex>
209 </v-layout> 216 </v-layout>
210 </v-flex> 217 </v-flex>
211 </v-layout> 218 </v-layout>
212 </v-container> 219 </v-container>
213 </v-card-text> 220 </v-card-text>
214 </v-card> 221 </v-card>
215 </v-dialog> 222 </v-dialog>
216 <!-- ****** EXPENSE TABLE ****** --> 223 <!-- ****** EXPENSE TABLE ****** -->
217 <v-toolbar color="transparent" flat> 224 <v-toolbar color="transparent" flat>
218 <v-btn 225 <v-btn
219 fab 226 fab
220 dark 227 dark
221 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 228 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
222 small 229 small
223 @click="addExpenseDialog = true" 230 @click="addExpenseDialog = true"
224 > 231 >
225 <v-icon dark>add</v-icon> 232 <v-icon dark>add</v-icon>
226 </v-btn> 233 </v-btn>
227 <v-btn 234 <v-btn
228 round 235 round
229 class="open-dialog-button hidden-sm-only hidden-xs-only" 236 class="open-dialog-button hidden-sm-only hidden-xs-only"
230 dark 237 dark
231 @click="addExpenseDialog = true" 238 @click="addExpenseDialog = true"
232 > 239 >
233 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense 240 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense
234 </v-btn> 241 </v-btn>
235 <v-spacer></v-spacer> 242 <v-spacer></v-spacer>
236 <v-card-title class="body-1" v-show="show"> 243 <v-card-title class="body-1" v-show="show">
237 <v-btn icon large flat @click="displaySearch"> 244 <v-btn icon large flat @click="displaySearch">
238 <v-avatar size="27"> 245 <v-avatar size="27">
239 <img src="/static/icon/search.png" alt="icon" /> 246 <img src="/static/icon/search.png" alt="icon" />
240 </v-avatar> 247 </v-avatar>
241 </v-btn> 248 </v-btn>
242 </v-card-title> 249 </v-card-title>
243 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 250 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
244 <v-layout> 251 <v-layout>
245 <v-text-field 252 <v-text-field
246 autofocus 253 autofocus
247 v-model="search" 254 v-model="search"
248 label="Search" 255 label="Search"
249 prepend-inner-icon="search" 256 prepend-inner-icon="search"
250 color="primary" 257 color="primary"
251 ></v-text-field> 258 ></v-text-field>
252 <v-icon @click="closeSearch" color="error">close</v-icon> 259 <v-icon @click="closeSearch" color="error">close</v-icon>
253 </v-layout> 260 </v-layout>
254 </v-flex> 261 </v-flex>
255 </v-toolbar> 262 </v-toolbar>
256 <v-data-table 263 <v-data-table
257 :headers="headers" 264 :headers="headers"
258 :items="expenseList" 265 :items="expenseList"
259 :pagination.sync="pagination" 266 :pagination.sync="pagination"
260 :search="search" 267 :search="search"
261 > 268 >
262 <template slot="items" slot-scope="props"> 269 <template slot="items" slot-scope="props">
263 <tr class="tr"> 270 <tr class="tr">
264 <td class="td td-row">{{ props.index + 1}}</td> 271 <td class="td td-row">{{ props.index + 1}}</td>
265 <td class="text-xs-center td td-row"> 272 <td class="text-xs-center td td-row">
266 <v-avatar> 273 <v-avatar>
267 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 274 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
268 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 275 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
269 </v-avatar> 276 </v-avatar>
270 </td> 277 </td>
271 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 278 <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> 279 <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> 280 <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> 281 <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> 282 <td class="text-xs-center td td-row">{{ props.item.note }}</td>
276 <td class="text-xs-center td td-row"> 283 <td class="text-xs-center td td-row">
277 <span> 284 <span>
278 <v-tooltip top> 285 <v-tooltip top>
279 <img 286 <img
280 slot="activator" 287 slot="activator"
281 style="cursor:pointer; width:25px; height:25px; " 288 style="cursor:pointer; width:25px; height:25px; "
282 class="mr-3" 289 class="mr-3"
283 @click="profile(props.item)" 290 @click="profile(props.item)"
284 src="/static/icon/view.png" 291 src="/static/icon/view.png"
285 /> 292 />
286 <span>View</span> 293 <span>View</span>
287 </v-tooltip> 294 </v-tooltip>
288 <v-tooltip top> 295 <v-tooltip top>
289 <img 296 <img
290 slot="activator" 297 slot="activator"
291 style="cursor:pointer; width:20px; height:18px; " 298 style="cursor:pointer; width:20px; height:18px; "
292 class="mr-3" 299 class="mr-3"
293 @click="editItem(props.item)" 300 @click="editItem(props.item)"
294 src="/static/icon/edit.png" 301 src="/static/icon/edit.png"
295 /> 302 />
296 <span>Edit</span> 303 <span>Edit</span>
297 </v-tooltip> 304 </v-tooltip>
298 <v-tooltip top> 305 <v-tooltip top>
299 <img 306 <img
300 slot="activator" 307 slot="activator"
301 style="cursor:pointer; width:20px; height:20px; " 308 style="cursor:pointer; width:20px; height:20px; "
302 @click="deleteItem(props.item)" 309 @click="deleteItem(props.item)"
303 src="/static/icon/delete.png" 310 src="/static/icon/delete.png"
304 /> 311 />
305 <span>Delete</span> 312 <span>Delete</span>
306 </v-tooltip> 313 </v-tooltip>
307 </span> 314 </span>
308 </td> 315 </td>
309 </tr> 316 </tr>
310 </template> 317 </template>
311 <v-alert 318 <v-alert
312 slot="no-results" 319 slot="no-results"
313 :value="true" 320 :value="true"
314 color="error" 321 color="error"
315 icon="warning" 322 icon="warning"
316 >Your search for "{{ search }}" found no results.</v-alert> 323 >Your search for "{{ search }}" found no results.</v-alert>
317 </v-data-table> 324 </v-data-table>
318 325
319 <!-- ****** Add Expense Data ****** --> 326 <!-- ****** Add Expense Data ****** -->
320 <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog"> 327 <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog">
321 <v-card flat class="card-style pa-2" dark> 328 <v-card flat class="card-style pa-2" dark>
322 <v-layout> 329 <v-layout>
323 <v-flex xs12> 330 <v-flex xs12>
324 <label class="title text-xs-center">Add Expense</label> 331 <label class="title text-xs-center">Add Expense</label>
325 <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> 332 <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon>
326 </v-flex> 333 </v-flex>
327 </v-layout> 334 </v-layout>
328 <v-flex xs12 sm12> 335 <v-flex xs12 sm12>
329 <v-form ref="form" v-model="valid" lazy-validation> 336 <v-form ref="form" v-model="valid" lazy-validation>
330 <v-container fluid> 337 <v-container fluid>
331 <v-layout> 338 <v-layout>
332 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 339 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
333 <v-avatar size="80px"> 340 <v-avatar size="80px">
334 <img src="/static/icon/user.png" v-if="!imageUrl" /> 341 <img src="/static/icon/user.png" v-if="!imageUrl" />
335 </v-avatar> 342 </v-avatar>
336 <img 343 <img
337 :src="imageUrl" 344 :src="imageUrl"
338 height="150" 345 height="150"
339 v-if="imageUrl" 346 v-if="imageUrl"
340 style="border-radius:50%; width:150px" 347 style="border-radius:50%; width:150px"
341 /> 348 />
342 </v-flex> 349 </v-flex>
343 </v-layout> 350 </v-layout>
344 <v-layout> 351 <v-layout>
345 <v-flex xs12 sm12> 352 <v-flex xs12 sm12>
346 <v-layout> 353 <v-layout>
347 <v-flex xs4 class="pt-4 subheading"> 354 <v-flex xs4 class="pt-4 subheading">
348 <label class="right">Name:</label> 355 <label class="right">Name:</label>
349 </v-flex> 356 </v-flex>
350 <v-flex xs8 sm6 class="ml-3"> 357 <v-flex xs8 sm6 class="ml-3">
351 <v-text-field 358 <v-text-field
352 v-model="addExpense.name" 359 v-model="addExpense.name"
353 placeholder="fill your full Name" 360 placeholder="fill your full Name"
354 name="name" 361 name="name"
355 type="text" 362 type="text"
356 :rules="nameRules" 363 :rules="nameRules"
357 required 364 required
358 ></v-text-field> 365 ></v-text-field>
359 </v-flex> 366 </v-flex>
360 </v-layout> 367 </v-layout>
361 </v-flex> 368 </v-flex>
362 </v-layout> 369 </v-layout>
363 <v-layout> 370 <v-layout>
364 <v-flex xs12 sm12> 371 <v-flex xs12 sm12>
365 <v-layout> 372 <v-layout>
366 <v-flex xs4 class="pt-4 subheading"> 373 <v-flex xs4 class="pt-4 subheading">
367 <label class="right">Amount:</label> 374 <label class="right">Amount:</label>
368 </v-flex> 375 </v-flex>
369 <v-flex xs8 sm6 class="ml-3"> 376 <v-flex xs8 sm6 class="ml-3">
370 <v-text-field 377 <v-text-field
371 v-model="addExpense.amount" 378 v-model="addExpense.amount"
372 placeholder="fill your Amount" 379 placeholder="fill your Amount"
373 name="name" 380 name="name"
374 type="text" 381 type="text"
375 :rules="amountRules" 382 :rules="amountRules"
376 required 383 required
377 ></v-text-field> 384 ></v-text-field>
378 </v-flex> 385 </v-flex>
379 </v-layout> 386 </v-layout>
380 </v-flex> 387 </v-flex>
381 </v-layout> 388 </v-layout>
382 <v-layout> 389 <v-layout>
383 <v-flex xs12 sm12> 390 <v-flex xs12 sm12>
384 <v-layout> 391 <v-layout>
385 <v-flex xs4 class="pt-4 subheading"> 392 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Date</label> 393 <label class="right">Date</label>
387 </v-flex> 394 </v-flex>
388 <v-flex xs8 sm6 class="ml-3"> 395 <v-flex xs8 sm6 class="ml-3">
389 <v-menu 396 <v-menu
390 ref="menu1" 397 ref="menu1"
391 :close-on-content-click="false" 398 :close-on-content-click="false"
392 v-model="menu1" 399 v-model="menu1"
393 :nudge-right="40" 400 :nudge-right="40"
394 lazy 401 lazy
395 transition="scale-transition" 402 transition="scale-transition"
396 offset-y 403 offset-y
397 full-width 404 full-width
398 min-width="290px" 405 min-width="290px"
399 > 406 >
400 <v-text-field 407 <v-text-field
401 slot="activator" 408 slot="activator"
402 :rules="joinDateRules" 409 :rules="joinDateRules"
403 v-model="addExpense.date" 410 v-model="addExpense.date"
404 placeholder="Select date" 411 placeholder="Select date"
405 ></v-text-field> 412 ></v-text-field>
406 <v-date-picker 413 <v-date-picker
407 ref="picker" 414 ref="picker"
408 v-model="addExpense.date" 415 v-model="addExpense.date"
409 @input="$refs.menu1.save(addExpense.date)" 416 @input="$refs.menu1.save(addExpense.date)"
410 ></v-date-picker> 417 ></v-date-picker>
411 </v-menu> 418 </v-menu>
412 </v-flex> 419 </v-flex>
413 </v-layout> 420 </v-layout>
414 </v-flex> 421 </v-flex>
415 </v-layout> 422 </v-layout>
416 <v-layout> 423 <v-layout>
417 <v-flex xs12 sm12> 424 <v-flex xs12 sm12>
418 <v-layout> 425 <v-layout>
419 <v-flex xs4 class="pt-4 subheading"> 426 <v-flex xs4 class="pt-4 subheading">
420 <label class="right">File:</label> 427 <label class="right">File:</label>
421 </v-flex> 428 </v-flex>
422 <v-flex xs8 sm6 class="ml-3"> 429 <v-flex xs8 sm6 class="ml-3">
423 <v-text-field 430 <v-text-field
424 label="Select file" 431 label="Select file"
425 @click="pickFile" 432 @click="pickFile"
426 v-model="imageName" 433 v-model="imageName"
427 append-icon="attach_file" 434 append-icon="attach_file"
428 ></v-text-field> 435 ></v-text-field>
429 <input 436 <input
430 type="file" 437 type="file"
431 style="display:none" 438 style="display:none"
432 ref="image" 439 ref="image"
433 accept="image/*" 440 accept="image/*"
434 @change="onFilePicked" 441 @change="onFilePicked"
435 /> 442 />
436 </v-flex> 443 </v-flex>
437 </v-layout> 444 </v-layout>
438 </v-flex> 445 </v-flex>
439 </v-layout> 446 </v-layout>
440 <v-layout> 447 <v-layout>
441 <v-flex xs12 sm12> 448 <v-flex xs12 sm12>
442 <v-layout> 449 <v-layout>
443 <v-flex xs4 class="pt-4 subheading"> 450 <v-flex xs4 class="pt-4 subheading">
444 <label class="right">Note:</label> 451 <label class="right">Note:</label>
445 </v-flex> 452 </v-flex>
446 <v-flex xs8 sm6 class="ml-3"> 453 <v-flex xs8 sm6 class="ml-3">
447 <v-textarea 454 <v-textarea
448 name="input-7-1" 455 name="input-7-1"
449 v-model="addExpense.note" 456 v-model="addExpense.note"
450 placeholder="fill your Note" 457 placeholder="fill your Note"
451 type="text" 458 type="text"
452 multi-line 459 multi-line
453 required 460 required
454 ></v-textarea> 461 ></v-textarea>
455 </v-flex> 462 </v-flex>
456 </v-layout> 463 </v-layout>
457 </v-flex> 464 </v-flex>
458 </v-layout> 465 </v-layout>
459 <v-layout> 466 <v-layout>
460 <v-flex xs11> 467 <v-flex xs11>
461 <v-layout> 468 <v-layout>
462 <v-spacer></v-spacer> 469 <v-spacer></v-spacer>
463 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 470 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
464 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 471 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
465 </v-layout> 472 </v-layout>
466 </v-flex> 473 </v-flex>
467 </v-layout> 474 </v-layout>
468 </v-container> 475 </v-container>
469 </v-form> 476 </v-form>
470 </v-flex> 477 </v-flex>
471 </v-card> 478 </v-card>
472 </v-dialog> 479 </v-dialog>
473 <div class="loader" v-if="showLoader"> 480 <div class="loader" v-if="showLoader">
474 <v-progress-circular indeterminate color="white"></v-progress-circular> 481 <v-progress-circular indeterminate color="white"></v-progress-circular>
475 </div> 482 </div>
476 <v-snackbar 483 <v-snackbar
477 :timeout="timeout" 484 :timeout="timeout"
478 :top="y === 'top'" 485 :top="y === 'top'"
479 :right="x === 'right'" 486 :right="x === 'right'"
480 :vertical="mode === 'vertical'" 487 :vertical="mode === 'vertical'"
481 v-model="snackbar" 488 v-model="snackbar"
482 :color="color" 489 :color="color"
483 >{{ text }}</v-snackbar> 490 >{{ text }}</v-snackbar>
484 </v-container> 491 </v-container>
485 </template> 492 </template>
486 493
487 <script> 494 <script>
488 import http from "@/Services/http.js"; 495 import http from "@/Services/http.js";
489 import moment from "moment"; 496 import moment from "moment";
490 497
491 export default { 498 export default {
492 data: () => ({ 499 data: () => ({
493 component: "report-generate", 500 component: "report-generate",
494 snackbar: false, 501 snackbar: false,
495 y: "top", 502 y: "top",
496 x: "right", 503 x: "right",
497 mode: "", 504 mode: "",
498 timeout: 5000, 505 timeout: 5000,
499 text: "", 506 text: "",
500 color: "", 507 color: "",
501 showLoader: false, 508 showLoader: false,
502 loading: false, 509 loading: false,
503 date: null, 510 date: null,
504 search: "", 511 search: "",
505 menu: false, 512 menu: false,
506 menu1: false, 513 menu1: false,
507 menu2: false, 514 menu2: false,
508 menu3: false, 515 menu3: false,
509 editExpenseDialog: false, 516 editExpenseDialog: false,
510 viewExpenseDialog: false, 517 viewExpenseDialog: false,
511 valid: true, 518 valid: true,
512 show: true, 519 show: true,
513 addExpenseDialog: false, 520 addExpenseDialog: false,
514 showSearch: false, 521 showSearch: false,
515 pagination: { 522 pagination: {
516 rowsPerPage: 10, 523 rowsPerPage: 10,
517 }, 524 },
518 imageData: {}, 525 imageData: {},
519 token: "", 526 token: "",
520 imageName: "", 527 imageName: "",
521 imageUrl: "", 528 imageUrl: "",
522 imageFile: "", 529 imageFile: "",
523 nameRules: [(v) => !!v || " Full Name is required"], 530 nameRules: [(v) => !!v || " Full Name is required"],
524 amountRules: [(v) => !!v || "Amount is required"], 531 amountRules: [(v) => !!v || "Amount is required"],
525 noteRules: [(v) => !!v || "Note Name is required"], 532 noteRules: [(v) => !!v || "Note Name is required"],
526 joinDateRules: [(v) => !!v || "Date is required"], 533 joinDateRules: [(v) => !!v || "Date is required"],
527 errorMessages: "", 534 errorMessages: "",
528 headers: [ 535 headers: [
529 { 536 {
530 text: "No", 537 text: "No",
531 align: "center", 538 align: "center",
532 sortable: false, 539 sortable: false,
533 value: "No", 540 value: "No",
534 }, 541 },
535 { 542 {
536 text: "Profile Pic", 543 text: "Profile Pic",
537 value: "profilePicUrl", 544 value: "profilePicUrl",
538 sortable: false, 545 sortable: false,
539 align: "center", 546 align: "center",
540 }, 547 },
541 { text: "Name", value: "name", sortable: false, align: "center" }, 548 { text: "Name", value: "name", sortable: false, align: "center" },
542 { text: "Date", value: "date", sortable: false, align: "center" }, 549 { text: "Date", value: "date", sortable: false, align: "center" },
543 { text: "User", value: "user", sortable: false, align: "center" }, 550 { text: "User", value: "user", sortable: false, align: "center" },
544 { text: "Amount", value: "amount", sortable: false, align: "center" }, 551 { text: "Amount", value: "amount", sortable: false, align: "center" },
545 { text: "Note", value: "note", sortable: false, align: "center" }, 552 { text: "Note", value: "note", sortable: false, align: "center" },
546 { text: "Action", value: "", sortable: false, align: "center" }, 553 { text: "Action", value: "", sortable: false, align: "center" },
547 ], 554 ],
548 expenseList: [], 555 expenseList: [],
549 editedIndex: -1, 556 editedIndex: -1,
550 upload: "", 557 upload: "",
551 editedItem: { 558 editedItem: {
552 role: "TEACHER", 559 role: "TEACHER",
553 name: "", 560 name: "",
554 email: "", 561 email: "",
555 date: null, 562 date: null,
556 city: "", 563 city: "",
557 pincode: "", 564 pincode: "",
558 country: "", 565 country: "",
559 permanentAddress: "", 566 permanentAddress: "",
560 presentAddress: "", 567 presentAddress: "",
561 mobileNo: "", 568 mobileNo: "",
562 state: "", 569 state: "",
563 joinDate: null, 570 joinDate: null,
564 }, 571 },
565 addExpense: {}, 572 addExpense: {},
566 }), 573 }),
567 watch: { 574 watch: {
568 menu(val) { 575 menu(val) {
569 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 576 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
570 }, 577 },
571 menu1(val) { 578 menu1(val) {
572 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 579 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
573 }, 580 },
574 addExpenseDialog: function (val) { 581 addExpenseDialog: function (val) {
575 if (!val) { 582 if (!val) {
576 this.addExpense = []; 583 this.addExpense = [];
577 this.menu1 = false; 584 this.menu1 = false;
578 this.imageName = ""; 585 this.imageName = "";
579 this.imageFile = ""; 586 this.imageFile = "";
580 this.imageUrl = ""; 587 this.imageUrl = "";
581 } 588 }
582 }, 589 },
583 }, 590 },
584 methods: { 591 methods: {
585 save(date) { 592 save(date) {
586 this.$refs.menu.save(date); 593 this.$refs.menu.save(date);
587 }, 594 },
588 save(date) { 595 save(date) {
589 this.$refs.menu1.save(date); 596 this.$refs.menu1.save(date);
590 }, 597 },
591 pickFile() { 598 pickFile() {
592 this.$refs.image.click(); 599 this.$refs.image.click();
593 }, 600 },
594 dates: function (date) { 601 dates: function (date) {
595 return moment(date).format("MMMM DD, YYYY"); 602 return moment(date).format("MMMM DD, YYYY");
596 }, 603 },
597 onFilePicked(e) { 604 onFilePicked(e) {
598 // console.log(e) 605 // console.log(e)
599 const files = e.target.files; 606 const files = e.target.files;
600 this.upload = e.target.files[0]; 607 this.upload = e.target.files[0];
601 console.log("imageData-upload========>", this.upload); 608 console.log("imageData-upload========>", this.upload);
602 if (files[0] !== undefined) { 609 if (files[0] !== undefined) {
603 this.imageName = files[0].name; 610 this.imageName = files[0].name;
604 if (this.imageName.lastIndexOf(".") <= 0) { 611 if (this.imageName.lastIndexOf(".") <= 0) {
605 return; 612 return;
606 } 613 }
607 const fr = new FileReader(); 614 const fr = new FileReader();
608 fr.readAsDataURL(files[0]); 615 fr.readAsDataURL(files[0]);
609 fr.addEventListener("load", () => { 616 fr.addEventListener("load", () => {
610 this.imageUrl = fr.result; 617 this.imageUrl = fr.result;
611 this.imageFile = files[0]; // this is an image file that can be sent to server... 618 this.imageFile = files[0]; // this is an image file that can be sent to server...
612 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 619 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
613 // console.log("upload=======>", this.imageData.imageUrl); 620 // console.log("upload=======>", this.imageData.imageUrl);
614 console.log("imageFile", this.imageUrl); 621 console.log("imageFile", this.imageUrl);
615 }); 622 });
616 } else { 623 } else {
617 this.imageName = ""; 624 this.imageName = "";
618 this.imageFile = ""; 625 this.imageFile = "";
619 this.imageUrl = ""; 626 this.imageUrl = "";
620 } 627 }
621 }, 628 },
622 getExpenseList() { 629 getExpenseList() {
623 http() 630 http()
624 .get("/getExpensesList", { 631 .get("/getExpensesList", {
625 params: { schoolId: this.$store.state.schoolId }, 632 params: { schoolId: this.$store.state.schoolId },
626 headers: { Authorization: "Bearer " + this.token }, 633 headers: { Authorization: "Bearer " + this.token },
627 }) 634 })
628 .then((response) => { 635 .then((response) => {
629 this.expenseList = response.data.data; 636 this.expenseList = response.data.data;
630 this.showLoader = false; 637 this.showLoader = false;
631 // console.log("getTeacherList=====>",this.expenseList) 638 // console.log("getTeacherList=====>",this.expenseList)
632 }) 639 })
633 .catch((error) => { 640 .catch((error) => {
634 this.showLoader = false; 641 this.showLoader = false;
635 // if (error.response.status === 401) { 642 // if (error.response.status === 401) {
636 // this.$router.replace({ path: "/" }); 643 // this.$router.replace({ path: "/" });
637 // this.$store.dispatch("setToken", null); 644 // this.$store.dispatch("setToken", null);
638 // this.$store.dispatch("Id", null); 645 // this.$store.dispatch("Id", null);
639 // } 646 // }
640 }); 647 });
641 }, 648 },
642 editItem(item) { 649 editItem(item) {
643 this.editedIndex = this.expenseList.indexOf(item); 650 this.editedIndex = this.expenseList.indexOf(item);
644 this.editedItem = Object.assign({}, item); 651 this.editedItem = Object.assign({}, item);
645 this.editedItem.date = 652 this.editedItem.date =
646 this.editedItem.date != undefined 653 this.editedItem.date != undefined
647 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 654 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
648 : (this.editedItem.date = ""); 655 : (this.editedItem.date = "");
649 656
650 this.editExpenseDialog = true; 657 this.editExpenseDialog = true;
651 }, 658 },
652 profile(item) { 659 profile(item) {
653 this.editedIndex = this.expenseList.indexOf(item); 660 this.editedIndex = this.expenseList.indexOf(item);
654 this.editedItem = Object.assign({}, item); 661 this.editedItem = Object.assign({}, item);
655 this.viewExpenseDialog = true; 662 this.viewExpenseDialog = true;
656 }, 663 },
657 deleteItem(item) { 664 deleteItem(item) {
658 let deleteExpense = { 665 let deleteExpense = {
659 expenseId: item._id, 666 expenseId: item._id,
660 }; 667 };
661 // console.log("deleteUers",deleteTeachers) 668 // console.log("deleteUers",deleteTeachers)
662 http() 669 http()
663 .delete( 670 .delete(
664 "/deleteExpense", 671 "/deleteExpense",
665 confirm("Are you sure you want to delete this?") && { 672 confirm("Are you sure you want to delete this?") && {
666 params: deleteExpense, 673 params: deleteExpense,
667 } 674 }
668 ) 675 )
669 .then((response) => { 676 .then((response) => {
670 // console.log("deleteUers",deleteTeachers) 677 // console.log("deleteUers",deleteTeachers)
671 this.snackbar = true; 678 this.snackbar = true;
672 this.text = response.data.message; 679 this.text = response.data.message;
673 this.color = "green"; 680 this.color = "green";
674 this.getExpenseList(); 681 this.getExpenseList();
675 }) 682 })
676 .catch((error) => { 683 .catch((error) => {
677 this.snackbar = true; 684 this.snackbar = true;
678 this.text = error.response.data.message; 685 this.text = error.response.data.message;
679 this.color = "error"; 686 this.color = "error";
680 }); 687 });
681 }, 688 },
682 close() { 689 close() {
683 this.editExpenseDialog = false; 690 this.editExpenseDialog = false;
684 }, 691 },
685 closeAddExpenseModel() { 692 closeAddExpenseModel() {
686 this.addExpenseDialog = false; 693 this.addExpenseDialog = false;
687 this.addExpense = []; 694 this.addExpense = [];
688 this.menu1 = false; 695 this.menu1 = false;
689 this.imageName = ""; 696 this.imageName = "";
690 this.imageFile = ""; 697 this.imageFile = "";
691 this.imageUrl = ""; 698 this.imageUrl = "";
692 }, 699 },
693 submit() { 700 submit() {
694 if (this.$refs.form.validate()) { 701 if (this.$refs.form.validate()) {
695 if (this.imageUrl) { 702 if (this.imageUrl) {
696 var str = this.imageUrl; 703 var str = this.imageUrl;
697 const [baseUrl, imageUrl] = str.split(/,/); 704 const [baseUrl, imageUrl] = str.split(/,/);
698 this.addExpense.upload = imageUrl; 705 this.addExpense.upload = imageUrl;
699 } 706 }
700 this.loading = true; 707 this.loading = true;
701 // this.addExpense = this.$store.state.schoolId; 708 // this.addExpense = this.$store.state.schoolId;
702 http() 709 http()
703 .post("/createExpense", this.addExpense) 710 .post("/createExpense", this.addExpense)
704 .then((response) => { 711 .then((response) => {
705 this.getExpenseList(); 712 this.getExpenseList();
706 this.snackbar = true; 713 this.snackbar = true;
707 this.text = response.data.message; 714 this.text = response.data.message;
708 this.color = "green"; 715 this.color = "green";
709 this.clear(); 716 this.clear();
710 this.imageUrl = ""; 717 this.imageUrl = "";
711 this.loading = false; 718 this.loading = false;
712 this.addExpenseDialog = false; 719 this.addExpenseDialog = false;
713 }) 720 })
714 .catch((error) => { 721 .catch((error) => {
715 // console.log(error); 722 // console.log(error);
716 this.snackbar = true; 723 this.snackbar = true;
717 this.color = "error"; 724 this.color = "error";
718 this.text = error.response.data.message; 725 this.text = error.response.data.message;
719 this.loading = false; 726 this.loading = false;
720 }); 727 });
721 } 728 }
722 }, 729 },
723 clear() { 730 clear() {
724 this.$refs.form.reset(); 731 this.$refs.form.reset();
725 }, 732 },
726 save() { 733 save() {
727 this.loading = true; 734 this.loading = true;
728 this.editedItem.expenseId = this.editedItem._id; 735 this.editedItem.expenseId = this.editedItem._id;
729 if (this.imageUrl) { 736 if (this.imageUrl) {
730 var str = this.imageUrl; 737 var str = this.imageUrl;
731 const [baseUrl, imageUrl] = str.split(/,/); 738 const [baseUrl, imageUrl] = str.split(/,/);
732 this.editedItem.upload = imageUrl; 739 this.editedItem.upload = imageUrl;
733 } 740 }
734 http() 741 http()
735 .put("/updateExpense", this.editedItem) 742 .put("/updateExpense", this.editedItem)
736 .then((response) => { 743 .then((response) => {
737 this.snackbar = true; 744 this.snackbar = true;
738 this.text = response.data.message; 745 this.text = response.data.message;
739 this.color = "green"; 746 this.color = "green";
740 this.loading = false; 747 this.loading = false;
741 this.getExpenseList(); 748 this.getExpenseList();
742 this.close(); 749 this.close();
743 }) 750 })
744 .catch((error) => { 751 .catch((error) => {
745 this.snackbar = true; 752 this.snackbar = true;
746 this.text = error.response.data.message; 753 this.text = error.response.data.message;
747 this.color = "error"; 754 this.color = "error";
748 }); 755 });
749 }, 756 },
750 displaySearch() { 757 displaySearch() {
751 (this.show = false), (this.showSearch = true); 758 (this.show = false), (this.showSearch = true);
752 }, 759 },
753 closeSearch() { 760 closeSearch() {
754 this.showSearch = false; 761 this.showSearch = false;
755 this.show = true; 762 this.show = true;
756 this.search = ""; 763 this.search = "";
757 }, 764 },
758 }, 765 },
759 mounted() { 766 mounted() {
760 this.token = this.$store.state.token; 767 this.token = this.$store.state.token;
761 this.getExpenseList(); 768 this.getExpenseList();
762 }, 769 },
763 }; 770 };
764 </script> 771 </script>
src/pages/Account/income.vue
Diff comments   View file @d10c266
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 <input
113 type="file"
114 style="display:none"
115 ref="image"
116 accept="image/*"
117 @change="onFilePicked"
118 />
112 </v-flex> 119 </v-flex>
113 </v-layout> 120 </v-layout>
114 </v-flex> 121 </v-flex>
115 <v-flex xs12> 122 <v-flex xs12>
116 <v-layout> 123 <v-layout>
117 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
118 <label class="right">Note:</label> 125 <label class="right">Note:</label>
119 </v-flex> 126 </v-flex>
120 <v-flex xs8 sm6 class="ml-3"> 127 <v-flex xs8 sm6 class="ml-3">
121 <v-textarea 128 <v-textarea
122 name="input-7-1" 129 name="input-7-1"
123 v-model="editedItem.note" 130 v-model="editedItem.note"
124 placeholder="fill your Note" 131 placeholder="fill your Note"
125 type="text" 132 type="text"
126 :rules="noteRules" 133 :rules="noteRules"
127 multi-line 134 multi-line
128 required 135 required
129 ></v-textarea> 136 ></v-textarea>
130 </v-flex> 137 </v-flex>
131 </v-layout> 138 </v-layout>
132 </v-flex> 139 </v-flex>
133 </v-layout> 140 </v-layout>
134 <v-layout> 141 <v-layout>
135 <v-flex xs12> 142 <v-flex xs12>
136 <v-card-actions> 143 <v-card-actions>
137 <v-spacer></v-spacer> 144 <v-spacer></v-spacer>
138 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 145 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
139 <v-spacer></v-spacer> 146 <v-spacer></v-spacer>
140 </v-card-actions> 147 </v-card-actions>
141 </v-flex> 148 </v-flex>
142 </v-layout> 149 </v-layout>
143 </v-card-text> 150 </v-card-text>
144 </v-card> 151 </v-card>
145 </v-dialog> 152 </v-dialog>
146 153
147 <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> 154 <!-- ****** PROFILE VIEW INCOME DETAILS ****** -->
148 <v-dialog v-model="profileIncomeDialog" max-width="400px"> 155 <v-dialog v-model="profileIncomeDialog" max-width="400px">
149 <v-card flat class="card-style pa-3" dark> 156 <v-card flat class="card-style pa-3" dark>
150 <v-layout> 157 <v-layout>
151 <v-flex xs12> 158 <v-flex xs12>
152 <label class="title text-xs-center">View Income</label> 159 <label class="title text-xs-center">View Income</label>
153 <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> 160 <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon>
154 </v-flex> 161 </v-flex>
155 </v-layout> 162 </v-layout>
156 <v-card-text> 163 <v-card-text>
157 <v-container grid-list-md> 164 <v-container grid-list-md>
158 <v-layout wrap> 165 <v-layout wrap>
159 <v-flex> 166 <v-flex>
160 <v-flex align-center justify-center layout text-xs-center> 167 <v-flex align-center justify-center layout text-xs-center>
161 <v-avatar size="80px" v-if="!editedItem.fileUrl"> 168 <v-avatar size="80px" v-if="!editedItem.fileUrl">
162 <img src="/static/icon/user.png" /> 169 <img src="/static/icon/user.png" />
163 </v-avatar> 170 </v-avatar>
164 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> 171 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" />
165 </v-flex> 172 </v-flex>
166 <v-layout> 173 <v-layout>
167 <v-flex xs5 sm6> 174 <v-flex xs5 sm6>
168 <h5 class="right my-1"> 175 <h5 class="right my-1">
169 <b>Name:</b> 176 <b>Name:</b>
170 </h5> 177 </h5>
171 </v-flex> 178 </v-flex>
172 <v-flex sm6 xs8> 179 <v-flex sm6 xs8>
173 <h5 class="my-1">{{ editedItem.name }}</h5> 180 <h5 class="my-1">{{ editedItem.name }}</h5>
174 </v-flex> 181 </v-flex>
175 </v-layout> 182 </v-layout>
176 <v-layout> 183 <v-layout>
177 <v-flex xs5 sm6> 184 <v-flex xs5 sm6>
178 <h5 class="right my-1"> 185 <h5 class="right my-1">
179 <b>Amount:</b> 186 <b>Amount:</b>
180 </h5> 187 </h5>
181 </v-flex> 188 </v-flex>
182 <v-flex sm6 xs8> 189 <v-flex sm6 xs8>
183 <h5 class="my-1">{{ editedItem.amount }}</h5> 190 <h5 class="my-1">{{ editedItem.amount }}</h5>
184 </v-flex> 191 </v-flex>
185 </v-layout> 192 </v-layout>
186 <v-layout> 193 <v-layout>
187 <v-flex xs5 sm6> 194 <v-flex xs5 sm6>
188 <h5 class="right my-1"> 195 <h5 class="right my-1">
189 <b>Date:</b> 196 <b>Date:</b>
190 </h5> 197 </h5>
191 </v-flex> 198 </v-flex>
192 <v-flex sm6 xs8> 199 <v-flex sm6 xs8>
193 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 200 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
194 </v-flex> 201 </v-flex>
195 </v-layout> 202 </v-layout>
196 <v-layout> 203 <v-layout>
197 <v-flex xs5 sm6> 204 <v-flex xs5 sm6>
198 <h5 class="right my-1"> 205 <h5 class="right my-1">
199 <b>Note:</b> 206 <b>Note:</b>
200 </h5> 207 </h5>
201 </v-flex> 208 </v-flex>
202 <v-flex sm6 xs8> 209 <v-flex sm6 xs8>
203 <h5 class="my-1">{{ editedItem.note }}</h5> 210 <h5 class="my-1">{{ editedItem.note }}</h5>
204 </v-flex> 211 </v-flex>
205 </v-layout> 212 </v-layout>
206 </v-flex> 213 </v-flex>
207 </v-layout> 214 </v-layout>
208 </v-container> 215 </v-container>
209 </v-card-text> 216 </v-card-text>
210 </v-card> 217 </v-card>
211 </v-dialog> 218 </v-dialog>
212 <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> 219 <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
213 220
214 <v-toolbar color="transparent" flat> 221 <v-toolbar color="transparent" flat>
215 <v-btn 222 <v-btn
216 fab 223 fab
217 dark 224 dark
218 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 225 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
219 small 226 small
220 @click="addIncomeDialog = true" 227 @click="addIncomeDialog = true"
221 > 228 >
222 <v-icon dark>add</v-icon> 229 <v-icon dark>add</v-icon>
223 </v-btn> 230 </v-btn>
224 <v-btn 231 <v-btn
225 round 232 round
226 class="open-dialog-button hidden-sm-only hidden-xs-only" 233 class="open-dialog-button hidden-sm-only hidden-xs-only"
227 dark 234 dark
228 @click="addIncomeDialog = true" 235 @click="addIncomeDialog = true"
229 > 236 >
230 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income 237 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income
231 </v-btn> 238 </v-btn>
232 <v-spacer></v-spacer> 239 <v-spacer></v-spacer>
233 <v-card-title class="body-1" v-show="show"> 240 <v-card-title class="body-1" v-show="show">
234 <v-btn icon large flat @click="displaySearch"> 241 <v-btn icon large flat @click="displaySearch">
235 <v-avatar size="27"> 242 <v-avatar size="27">
236 <img src="/static/icon/search.png" alt="icon" /> 243 <img src="/static/icon/search.png" alt="icon" />
237 </v-avatar> 244 </v-avatar>
238 </v-btn> 245 </v-btn>
239 </v-card-title> 246 </v-card-title>
240 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 247 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
241 <v-layout> 248 <v-layout>
242 <v-text-field 249 <v-text-field
243 autofocus 250 autofocus
244 v-model="search" 251 v-model="search"
245 label="Search" 252 label="Search"
246 prepend-inner-icon="search" 253 prepend-inner-icon="search"
247 color="primary" 254 color="primary"
248 ></v-text-field> 255 ></v-text-field>
249 <v-icon @click="closeSearch" color="error">close</v-icon> 256 <v-icon @click="closeSearch" color="error">close</v-icon>
250 </v-layout> 257 </v-layout>
251 </v-flex> 258 </v-flex>
252 </v-toolbar> 259 </v-toolbar>
253 <v-data-table 260 <v-data-table
254 :headers="headers" 261 :headers="headers"
255 :items="incomeList" 262 :items="incomeList"
256 :pagination.sync="pagination" 263 :pagination.sync="pagination"
257 :search="search" 264 :search="search"
258 > 265 >
259 <template slot="items" slot-scope="props"> 266 <template slot="items" slot-scope="props">
260 <tr class="tr"> 267 <tr class="tr">
261 <td class="text-xs-center td td-row">{{ props.index + 1}}</td> 268 <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
262 <td class="text-xs-center td td-row"> 269 <td class="text-xs-center td td-row">
263 <v-avatar class="40"> 270 <v-avatar class="40">
264 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> 271 <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
265 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> 272 <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
266 </v-avatar> 273 </v-avatar>
267 </td> 274 </td>
268 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 275 <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> 276 <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> 277 <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> 278 <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> 279 <td class="text-xs-center td td-row">{{ props.item.note }}</td>
273 <td class="text-xs-center td td-row"> 280 <td class="text-xs-center td td-row">
274 <span> 281 <span>
275 <v-tooltip top> 282 <v-tooltip top>
276 <img 283 <img
277 slot="activator" 284 slot="activator"
278 style="cursor:pointer; width:25px; height:25px; " 285 style="cursor:pointer; width:25px; height:25px; "
279 class="mr-3" 286 class="mr-3"
280 @click="profile(props.item)" 287 @click="profile(props.item)"
281 src="/static/icon/view.png" 288 src="/static/icon/view.png"
282 /> 289 />
283 <span>View</span> 290 <span>View</span>
284 </v-tooltip> 291 </v-tooltip>
285 <v-tooltip top> 292 <v-tooltip top>
286 <img 293 <img
287 slot="activator" 294 slot="activator"
288 style="cursor:pointer; width:20px; height:18px; " 295 style="cursor:pointer; width:20px; height:18px; "
289 class="mr-3" 296 class="mr-3"
290 @click="editItem(props.item)" 297 @click="editItem(props.item)"
291 src="/static/icon/edit.png" 298 src="/static/icon/edit.png"
292 /> 299 />
293 <span>Edit</span> 300 <span>Edit</span>
294 </v-tooltip> 301 </v-tooltip>
295 <v-tooltip top> 302 <v-tooltip top>
296 <img 303 <img
297 slot="activator" 304 slot="activator"
298 style="cursor:pointer; width:20px; height:20px; " 305 style="cursor:pointer; width:20px; height:20px; "
299 @click="deleteItem(props.item)" 306 @click="deleteItem(props.item)"
300 src="/static/icon/delete.png" 307 src="/static/icon/delete.png"
301 /> 308 />
302 <span>Delete</span> 309 <span>Delete</span>
303 </v-tooltip> 310 </v-tooltip>
304 </span> 311 </span>
305 </td> 312 </td>
306 </tr> 313 </tr>
307 </template> 314 </template>
308 <v-alert 315 <v-alert
309 slot="no-results" 316 slot="no-results"
310 :value="true" 317 :value="true"
311 color="error" 318 color="error"
312 icon="warning" 319 icon="warning"
313 >Your search for "{{ search }}" found no results.</v-alert> 320 >Your search for "{{ search }}" found no results.</v-alert>
314 </v-data-table> 321 </v-data-table>
315 322
316 <!-- ****** Add Income Data****** --> 323 <!-- ****** Add Income Data****** -->
317 <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog"> 324 <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog">
318 <v-card flat class="card-style pa-2" dark> 325 <v-card flat class="card-style pa-2" dark>
319 <v-layout> 326 <v-layout>
320 <v-flex xs12> 327 <v-flex xs12>
321 <label class="title text-xs-center">Add Income</label> 328 <label class="title text-xs-center">Add Income</label>
322 <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> 329 <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon>
323 </v-flex> 330 </v-flex>
324 </v-layout> 331 </v-layout>
325 <v-form ref="form" v-model="valid" lazy-validation> 332 <v-form ref="form" v-model="valid" lazy-validation>
326 <v-container fluid> 333 <v-container fluid>
327 <v-layout> 334 <v-layout>
328 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 335 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
329 <v-avatar size="80px"> 336 <v-avatar size="80px">
330 <img src="/static/icon/user.png" v-if="!imageUrl" /> 337 <img src="/static/icon/user.png" v-if="!imageUrl" />
331 </v-avatar> 338 </v-avatar>
332 <img 339 <img
333 :src="imageUrl" 340 :src="imageUrl"
334 height="150" 341 height="150"
335 v-if="imageUrl" 342 v-if="imageUrl"
336 style="border-radius:50%; width:200px" 343 style="border-radius:50%; width:200px"
337 /> 344 />
338 </v-flex> 345 </v-flex>
339 </v-layout> 346 </v-layout>
340 <v-layout> 347 <v-layout>
341 <v-flex xs12 sm12> 348 <v-flex xs12 sm12>
342 <v-layout> 349 <v-layout>
343 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
344 <label class="right">Name:</label> 351 <label class="right">Name:</label>
345 </v-flex> 352 </v-flex>
346 <v-flex xs8 sm6 class="ml-3"> 353 <v-flex xs8 sm6 class="ml-3">
347 <v-text-field 354 <v-text-field
348 v-model="addIncome.name" 355 v-model="addIncome.name"
349 placeholder="fill your full Name" 356 placeholder="fill your full Name"
350 name="name" 357 name="name"
351 type="text" 358 type="text"
352 :rules="nameRules" 359 :rules="nameRules"
353 required 360 required
354 ></v-text-field> 361 ></v-text-field>
355 </v-flex> 362 </v-flex>
356 </v-layout> 363 </v-layout>
357 </v-flex> 364 </v-flex>
358 </v-layout> 365 </v-layout>
359 <v-layout> 366 <v-layout>
360 <v-flex xs12 sm12> 367 <v-flex xs12 sm12>
361 <v-layout> 368 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 369 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Amount:</label> 370 <label class="right">Amount:</label>
364 </v-flex> 371 </v-flex>
365 <v-flex xs8 sm6 class="ml-3"> 372 <v-flex xs8 sm6 class="ml-3">
366 <v-text-field 373 <v-text-field
367 v-model="addIncome.amount" 374 v-model="addIncome.amount"
368 placeholder="fill your Amount" 375 placeholder="fill your Amount"
369 name="name" 376 name="name"
370 type="text" 377 type="text"
371 :rules="amountRules" 378 :rules="amountRules"
372 required 379 required
373 ></v-text-field> 380 ></v-text-field>
374 </v-flex> 381 </v-flex>
375 </v-layout> 382 </v-layout>
376 </v-flex> 383 </v-flex>
377 </v-layout> 384 </v-layout>
378 <v-layout> 385 <v-layout>
379 <v-flex xs12 sm12> 386 <v-flex xs12 sm12>
380 <v-layout> 387 <v-layout>
381 <v-flex xs4 class="pt-4 subheading"> 388 <v-flex xs4 class="pt-4 subheading">
382 <label class="right">Date</label> 389 <label class="right">Date</label>
383 </v-flex> 390 </v-flex>
384 <v-flex xs8 sm6 class="ml-3"> 391 <v-flex xs8 sm6 class="ml-3">
385 <v-menu 392 <v-menu
386 ref="menu1" 393 ref="menu1"
387 :close-on-content-click="false" 394 :close-on-content-click="false"
388 v-model="menu1" 395 v-model="menu1"
389 :nudge-right="40" 396 :nudge-right="40"
390 lazy 397 lazy
391 transition="scale-transition" 398 transition="scale-transition"
392 offset-y 399 offset-y
393 full-width 400 full-width
394 min-width="290px" 401 min-width="290px"
395 > 402 >
396 <v-text-field 403 <v-text-field
397 slot="activator" 404 slot="activator"
398 :rules="joinDateRules" 405 :rules="joinDateRules"
399 v-model="addIncome.date" 406 v-model="addIncome.date"
400 placeholder="Select date" 407 placeholder="Select date"
401 ></v-text-field> 408 ></v-text-field>
402 <v-date-picker 409 <v-date-picker
403 ref="picker" 410 ref="picker"
404 v-model="addIncome.date" 411 v-model="addIncome.date"
405 @input="$refs.menu1.save(addIncome.date)" 412 @input="$refs.menu1.save(addIncome.date)"
406 ></v-date-picker> 413 ></v-date-picker>
407 </v-menu> 414 </v-menu>
408 </v-flex> 415 </v-flex>
409 </v-layout> 416 </v-layout>
410 </v-flex> 417 </v-flex>
411 </v-layout> 418 </v-layout>
412 <v-layout> 419 <v-layout>
413 <v-flex xs12 sm12> 420 <v-flex xs12 sm12>
414 <v-layout> 421 <v-layout>
415 <v-flex xs4 class="pt-4 subheading"> 422 <v-flex xs4 class="pt-4 subheading">
416 <label class="right">File:</label> 423 <label class="right">File:</label>
417 </v-flex> 424 </v-flex>
418 <v-flex xs8 sm6 class="ml-3"> 425 <v-flex xs8 sm6 class="ml-3">
419 <v-text-field 426 <v-text-field
420 label="Select file" 427 label="Select file"
421 @click="pickFile" 428 @click="pickFile"
422 v-model="imageName" 429 v-model="imageName"
423 append-icon="attach_file" 430 append-icon="attach_file"
424 ></v-text-field> 431 ></v-text-field>
425 <input 432 <input
426 type="file" 433 type="file"
427 style="display:none" 434 style="display:none"
428 ref="image" 435 ref="image"
429 accept="image/*" 436 accept="image/*"
430 @change="onFilePicked" 437 @change="onFilePicked"
431 /> 438 />
432 </v-flex> 439 </v-flex>
433 </v-layout> 440 </v-layout>
434 </v-flex> 441 </v-flex>
435 </v-layout> 442 </v-layout>
436 <v-layout> 443 <v-layout>
437 <v-flex xs12 sm12> 444 <v-flex xs12 sm12>
438 <v-layout> 445 <v-layout>
439 <v-flex xs4 class="pt-4 subheading"> 446 <v-flex xs4 class="pt-4 subheading">
440 <label class="right">Note:</label> 447 <label class="right">Note:</label>
441 </v-flex> 448 </v-flex>
442 <v-flex xs8 sm6 class="ml-3"> 449 <v-flex xs8 sm6 class="ml-3">
443 <v-textarea 450 <v-textarea
444 name="input-7-1" 451 name="input-7-1"
445 v-model="addIncome.note" 452 v-model="addIncome.note"
446 placeholder="fill your Note" 453 placeholder="fill your Note"
447 type="text" 454 type="text"
448 multi-line 455 multi-line
449 required 456 required
450 ></v-textarea> 457 ></v-textarea>
451 </v-flex> 458 </v-flex>
452 </v-layout> 459 </v-layout>
453 </v-flex> 460 </v-flex>
454 </v-layout> 461 </v-layout>
455 <v-layout> 462 <v-layout>
456 <v-flex xs12 sm11> 463 <v-flex xs12 sm11>
457 <v-layout> 464 <v-layout>
458 <v-spacer></v-spacer> 465 <v-spacer></v-spacer>
459 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 466 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
460 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 467 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
461 </v-layout> 468 </v-layout>
462 </v-flex> 469 </v-flex>
463 </v-layout> 470 </v-layout>
464 </v-container> 471 </v-container>
465 </v-form> 472 </v-form>
466 </v-card> 473 </v-card>
467 </v-dialog> 474 </v-dialog>
468 <div class="loader" v-if="showLoader"> 475 <div class="loader" v-if="showLoader">
469 <v-progress-circular indeterminate color="white"></v-progress-circular> 476 <v-progress-circular indeterminate color="white"></v-progress-circular>
470 </div> 477 </div>
471 </v-container> 478 </v-container>
472 </template> 479 </template>
473 480
474 <script> 481 <script>
475 import http from "@/Services/http.js"; 482 import http from "@/Services/http.js";
476 import Util from "@/util"; 483 import Util from "@/util";
477 import moment from "moment"; 484 import moment from "moment";
478 485
479 export default { 486 export default {
480 data: () => ({ 487 data: () => ({
481 component: "report-generate", 488 component: "report-generate",
482 snackbar: false, 489 snackbar: false,
483 y: "top", 490 y: "top",
484 x: "right", 491 x: "right",
485 mode: "", 492 mode: "",
486 timeout: 3000, 493 timeout: 3000,
487 text: "", 494 text: "",
488 show: true, 495 show: true,
489 showSearch: false, 496 showSearch: false,
490 showLoader: false, 497 showLoader: false,
491 loading: false, 498 loading: false,
492 date: null, 499 date: null,
493 search: "", 500 search: "",
494 addIncomeDialog: false, 501 addIncomeDialog: false,
495 menu: false, 502 menu: false,
496 menu1: false, 503 menu1: false,
497 menu2: false, 504 menu2: false,
498 menu3: false, 505 menu3: false,
499 editIncomeDialog: false, 506 editIncomeDialog: false,
500 profileIncomeDialog: false, 507 profileIncomeDialog: false,
501 valid: true, 508 valid: true,
502 pagination: { 509 pagination: {
503 rowsPerPage: 10, 510 rowsPerPage: 10,
504 }, 511 },
505 imageData: {}, 512 imageData: {},
506 imageName: "", 513 imageName: "",
507 imageUrl: "", 514 imageUrl: "",
508 imageFile: "", 515 imageFile: "",
509 nameRules: [(v) => !!v || " Full Name is required"], 516 nameRules: [(v) => !!v || " Full Name is required"],
510 amountRules: [(v) => !!v || "Amount is required"], 517 amountRules: [(v) => !!v || "Amount is required"],
511 noteRules: [(v) => !!v || "Note Name is required"], 518 noteRules: [(v) => !!v || "Note Name is required"],
512 joinDateRules: [(v) => !!v || "Date is required"], 519 joinDateRules: [(v) => !!v || "Date is required"],
513 errorMessages: "", 520 errorMessages: "",
514 headers: [ 521 headers: [
515 { 522 {
516 text: "No", 523 text: "No",
517 align: "", 524 align: "",
518 sortable: false, 525 sortable: false,
519 value: "No", 526 value: "No",
520 }, 527 },
521 { 528 {
522 text: "Profile Pic", 529 text: "Profile Pic",
523 value: "profilePicUrl", 530 value: "profilePicUrl",
524 sortable: false, 531 sortable: false,
525 align: "center", 532 align: "center",
526 }, 533 },
527 { text: "Name", value: "name", sortable: false, align: "center" }, 534 { text: "Name", value: "name", sortable: false, align: "center" },
528 { text: "Date", value: "date", sortable: false, align: "center" }, 535 { text: "Date", value: "date", sortable: false, align: "center" },
529 { text: "User", value: "user", sortable: false, align: "center" }, 536 { text: "User", value: "user", sortable: false, align: "center" },
530 { text: "Amount", value: "amount", sortable: false, align: "center" }, 537 { text: "Amount", value: "amount", sortable: false, align: "center" },
531 { text: "Note", value: "note", sortable: false, align: "center" }, 538 { text: "Note", value: "note", sortable: false, align: "center" },
532 { text: "Action", value: "", sortable: false, align: "center" }, 539 { text: "Action", value: "", sortable: false, align: "center" },
533 ], 540 ],
534 incomeList: [], 541 incomeList: [],
535 editedIndex: -1, 542 editedIndex: -1,
536 upload: "", 543 upload: "",
537 editedItem: {}, 544 editedItem: {},
538 addIncome: {}, 545 addIncome: {},
539 }), 546 }),
540 watch: { 547 watch: {
541 menu(val) { 548 menu(val) {
542 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 549 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
543 }, 550 },
544 menu1(val) { 551 menu1(val) {
545 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 552 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
546 }, 553 },
547 addIncomeDialog: function (val) { 554 addIncomeDialog: function (val) {
548 if (!val) { 555 if (!val) {
549 this.addIncome = []; 556 this.addIncome = [];
550 this.menu1 = false; 557 this.menu1 = false;
551 this.imageName = ""; 558 this.imageName = "";
552 this.imageUrl = ""; 559 this.imageUrl = "";
553 this.imageFile = ""; 560 this.imageFile = "";
554 } 561 }
555 }, 562 },
556 }, 563 },
557 methods: { 564 methods: {
558 save(date) { 565 save(date) {
559 this.$refs.menu.save(date); 566 this.$refs.menu.save(date);
560 }, 567 },
561 save(date) { 568 save(date) {
562 this.$refs.menu1.save(date); 569 this.$refs.menu1.save(date);
563 }, 570 },
564 pickFile() { 571 pickFile() {
565 this.$refs.image.click(); 572 this.$refs.image.click();
566 }, 573 },
567 onFilePicked(e) { 574 onFilePicked(e) {
568 // console.log(e) 575 // console.log(e)
569 const files = e.target.files; 576 const files = e.target.files;
570 this.upload = e.target.files[0]; 577 this.upload = e.target.files[0];
571 console.log("imageData-upload========>", this.upload); 578 console.log("imageData-upload========>", this.upload);
572 if (files[0] !== undefined) { 579 if (files[0] !== undefined) {
573 this.imageName = files[0].name; 580 this.imageName = files[0].name;
574 if (this.imageName.lastIndexOf(".") <= 0) { 581 if (this.imageName.lastIndexOf(".") <= 0) {
575 return; 582 return;
576 } 583 }
577 const fr = new FileReader(); 584 const fr = new FileReader();
578 fr.readAsDataURL(files[0]); 585 fr.readAsDataURL(files[0]);
579 fr.addEventListener("load", () => { 586 fr.addEventListener("load", () => {
580 this.imageUrl = fr.result; 587 this.imageUrl = fr.result;
581 this.imageFile = files[0]; // this is an image file that can be sent to server... 588 this.imageFile = files[0]; // this is an image file that can be sent to server...
582 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 589 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
583 // console.log("upload=======>", this.imageData.imageUrl); 590 // console.log("upload=======>", this.imageData.imageUrl);
584 console.log("imageFile", this.imageUrl); 591 console.log("imageFile", this.imageUrl);
585 }); 592 });
586 } else { 593 } else {
587 this.imageName = ""; 594 this.imageName = "";
588 this.imageFile = ""; 595 this.imageFile = "";
589 this.imageUrl = ""; 596 this.imageUrl = "";
590 } 597 }
591 }, 598 },
592 dates: function (date) { 599 dates: function (date) {
593 return moment(date).format("MMMM DD, YYYY"); 600 return moment(date).format("MMMM DD, YYYY");
594 }, 601 },
595 getIncomeList() { 602 getIncomeList() {
596 this.showLoader = true; 603 this.showLoader = true;
597 var token = this.$store.state.token; 604 var token = this.$store.state.token;
598 http() 605 http()
599 .get("/getIncomesList", { 606 .get("/getIncomesList", {
600 params: { schoolId: this.$store.state.schoolId }, 607 params: { schoolId: this.$store.state.schoolId },
601 headers: { Authorization: "Bearer " + token }, 608 headers: { Authorization: "Bearer " + token },
602 }) 609 })
603 .then((response) => { 610 .then((response) => {
604 this.incomeList = response.data.data; 611 this.incomeList = response.data.data;
605 this.showLoader = false; 612 this.showLoader = false;
606 // console.log("getTeacherList=====>",this.incomeList) 613 // console.log("getTeacherList=====>",this.incomeList)
607 }) 614 })
608 .catch((error) => { 615 .catch((error) => {
609 this.showLoader = false; 616 this.showLoader = false;
610 if (error.response.status === 401) { 617 if (error.response.status === 401) {
611 this.$router.replace({ path: "/" }); 618 this.$router.replace({ path: "/" });
612 this.$store.dispatch("setToken", null); 619 this.$store.dispatch("setToken", null);
613 this.$store.dispatch("Id", null); 620 this.$store.dispatch("Id", null);
614 } 621 }
615 }); 622 });
616 }, 623 },
617 editItem(item) { 624 editItem(item) {
618 this.editedIndex = this.incomeList.indexOf(item); 625 this.editedIndex = this.incomeList.indexOf(item);
619 this.editedItem = Object.assign({}, item); 626 this.editedItem = Object.assign({}, item);
620 this.editedItem.date = 627 this.editedItem.date =
621 this.editedItem.date != undefined 628 this.editedItem.date != undefined
622 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 629 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
623 : (this.editedItem.date = ""); 630 : (this.editedItem.date = "");
624 631
625 this.editIncomeDialog = true; 632 this.editIncomeDialog = true;
626 }, 633 },
627 profile(item) { 634 profile(item) {
628 this.editedIndex = this.incomeList.indexOf(item); 635 this.editedIndex = this.incomeList.indexOf(item);
629 this.editedItem = Object.assign({}, item); 636 this.editedItem = Object.assign({}, item);
630 this.profileIncomeDialog = true; 637 this.profileIncomeDialog = true;
631 }, 638 },
632 deleteItem(item) { 639 deleteItem(item) {
633 let deleteIncome = { 640 let deleteIncome = {
634 incomeId: item._id, 641 incomeId: item._id,
635 }; 642 };
636 http() 643 http()
637 .delete( 644 .delete(
638 "/deleteIncome", 645 "/deleteIncome",
639 confirm("Are you sure you want to delete this?") && { 646 confirm("Are you sure you want to delete this?") && {
640 params: deleteIncome, 647 params: deleteIncome,
641 } 648 }
642 ) 649 )
643 .then((response) => { 650 .then((response) => {
644 // console.log("deleteUers",deleteTeachers) 651 // console.log("deleteUers",deleteTeachers)
645 if ((this.snackbar = true)) { 652 if ((this.snackbar = true)) {
646 this.text = "Successfully delete Existing Income"; 653 this.text = "Successfully delete Existing Income";
647 } 654 }
648 this.getIncomeList(); 655 this.getIncomeList();
649 }) 656 })
650 .catch((error) => { 657 .catch((error) => {
651 console.log(error); 658 console.log(error);
652 }); 659 });
653 }, 660 },
654 close() { 661 close() {
655 this.editIncomeDialog = false; 662 this.editIncomeDialog = false;
656 }, 663 },
657 close1() { 664 close1() {
658 this.dialog1 = false; 665 this.dialog1 = false;
659 }, 666 },
660 closeAddIncomeModel() { 667 closeAddIncomeModel() {
661 this.addIncomeDialog = false; 668 this.addIncomeDialog = false;
662 this.addIncome = []; 669 this.addIncome = [];
663 this.menu1 = false; 670 this.menu1 = false;
664 this.imageName = ""; 671 this.imageName = "";
665 this.imageUrl = ""; 672 this.imageUrl = "";
666 this.imageFile = ""; 673 this.imageFile = "";
667 }, 674 },
668 submit() { 675 submit() {
669 if (this.$refs.form.validate()) { 676 if (this.$refs.form.validate()) {
670 if (this.imageUrl) { 677 if (this.imageUrl) {
671 var str = this.imageUrl; 678 var str = this.imageUrl;
672 const [baseUrl, imageUrl] = str.split(/,/); 679 const [baseUrl, imageUrl] = str.split(/,/);
673 this.addIncome.upload = imageUrl; 680 this.addIncome.upload = imageUrl;
674 } 681 }
675 this.loading = true; 682 this.loading = true;
676 // this.addIncome = this.$store.state.schoolId; 683 // this.addIncome = this.$store.state.schoolId;
677 http() 684 http()
678 .post("/createIncome", this.addIncome) 685 .post("/createIncome", this.addIncome)
679 .then((response) => { 686 .then((response) => {
680 this.getIncomeList(); 687 this.getIncomeList();
681 this.snackbar = true; 688 this.snackbar = true;
682 this.text = response.data.message; 689 this.text = response.data.message;
683 this.color = "green"; 690 this.color = "green";
684 this.addIncomeDialog = false; 691 this.addIncomeDialog = false;
685 this.clear(); 692 this.clear();
686 this.loading = false; 693 this.loading = false;
687 }) 694 })
688 .catch((error) => { 695 .catch((error) => {
689 // console.log(error); 696 // console.log(error);
690 this.loading = false; 697 this.loading = false;
691 this.snackbar = true; 698 this.snackbar = true;
692 this.color = "error"; 699 this.color = "error";
693 this.text = error.response.data.message; 700 this.text = error.response.data.message;
694 }); 701 });
695 } 702 }
696 }, 703 },
697 clear() { 704 clear() {
698 this.$refs.form.reset(); 705 this.$refs.form.reset();
699 }, 706 },
700 save() { 707 save() {
701 this.loading = true; 708 this.loading = true;
702 this.editedItem.incomeId = this.editedItem._id; 709 this.editedItem.incomeId = this.editedItem._id;
703 if (this.imageUrl) { 710 if (this.imageUrl) {
704 var str = this.imageUrl; 711 var str = this.imageUrl;
705 const [baseUrl, imageUrl] = str.split(/,/); 712 const [baseUrl, imageUrl] = str.split(/,/);
706 this.editedItem.upload = imageUrl; 713 this.editedItem.upload = imageUrl;
707 } 714 }
708 http() 715 http()
709 .put("/updateIncome", this.editedItem) 716 .put("/updateIncome", this.editedItem)
710 .then((response) => { 717 .then((response) => {
711 this.snackbar = true; 718 this.snackbar = true;
712 this.text = response.data.message; 719 this.text = response.data.message;
713 this.color = "green"; 720 this.color = "green";
714 this.loading = false; 721 this.loading = false;
715 this.getIncomeList(); 722 this.getIncomeList();
716 this.close(); 723 this.close();
717 }) 724 })
718 .catch((error) => { 725 .catch((error) => {
719 this.loading = false; 726 this.loading = false;
720 this.snackbar = true; 727 this.snackbar = true;
721 this.color = "error"; 728 this.color = "error";
722 this.loading = false; 729 this.loading = false;
723 }); 730 });
724 }, 731 },
725 732
726 displaySearch() { 733 displaySearch() {
727 (this.show = false), (this.showSearch = true); 734 (this.show = false), (this.showSearch = true);
728 }, 735 },
729 closeSearch() { 736 closeSearch() {
730 this.showSearch = false; 737 this.showSearch = false;
731 this.show = true; 738 this.show = true;
732 this.search = ""; 739 this.search = "";
733 }, 740 },
734 }, 741 },
735 mounted() { 742 mounted() {
736 this.getIncomeList(); 743 this.getIncomeList();
737 }, 744 },
738 }; 745 };
739 </script> 746 </script>
src/pages/Account/invoice.vue
Diff comments   View file @d10c266
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-dialog v-model="editInvoiceDialog"> 4 <v-dialog v-model="editInvoiceDialog">
5 <v-card flat class="text-xs-center white--text"> 5 <v-card flat class="text-xs-center white--text">
6 <v-layout> 6 <v-layout>
7 <v-flex xs12 class="card-styles pa-2"> 7 <v-flex xs12 class="card-styles pa-2">
8 <label class="title text-xs-center">Edit Invoice</label> 8 <label class="title text-xs-center">Edit Invoice</label>
9 <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> 12 <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
13 </v-card> 13 </v-card>
14 </v-dialog> 14 </v-dialog>
15 15
16 <!-- ****PAYMENT INVOICE DIALOG --> 16 <!-- ****PAYMENT INVOICE DIALOG -->
17 <v-dialog v-model="paymentInvoiceDialog"> 17 <v-dialog v-model="paymentInvoiceDialog">
18 <v-card flat class="text-xs-center white--text"> 18 <v-card flat class="text-xs-center white--text">
19 <v-layout> 19 <v-layout>
20 <v-flex xs12 class="card-styles pa-2"> 20 <v-flex xs12 class="card-styles pa-2">
21 <label class="title text-xs-center">Payment Template</label> 21 <label class="title text-xs-center">Payment Template</label>
22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon> 22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> 25 <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
26 </v-card> 26 </v-card>
27 </v-dialog> 27 </v-dialog>
28 28
29 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 29 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
30 30
31 <v-dialog v-model="dialog1" max-width="800px"> 31 <v-dialog v-model="dialog1" max-width="800px">
32 <v-card flat class="text-xs-center white--text"> 32 <v-card flat class="text-xs-center white--text">
33 <v-layout> 33 <v-layout>
34 <v-flex xs12 class="card-style pa-2"> 34 <v-flex xs12 class="card-style pa-2">
35 <label class="title text-xs-center">View Payments</label> 35 <label class="title text-xs-center">View Payments</label>
36 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon> 36 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
37 </v-flex> 37 </v-flex>
38 </v-layout> 38 </v-layout>
39 <table class="feeTypeTable tableRsponsive"> 39 <table class="feeTypeTable tableRsponsive">
40 <tr style="color: black"> 40 <tr style="color: black">
41 <th>#</th> 41 <th>#</th>
42 <th>Date</th> 42 <th>Date</th>
43 <th>Paid By</th> 43 <th>Paid By</th>
44 <th>Payment Amount</th> 44 <th>Payment Amount</th>
45 <th>Weaver</th> 45 <th>Weaver</th>
46 <th>Action</th> 46 <th>Action</th>
47 </tr> 47 </tr>
48 <tr v-if="editedItem.paymentStatus != 'NOT_PAID'"> 48 <tr v-if="editedItem.paymentStatus != 'NOT_PAID'">
49 <td style="width:40px ; color:black" class="tdFeeType">1</td> 49 <td style="width:40px ; color:black" class="tdFeeType">1</td>
50 <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> 50 <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
51 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> 51 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
52 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> 52 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>
53 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> 53 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
54 <td class="text-xs-center td td-row"> 54 <td class="text-xs-center td td-row">
55 <router-link 55 <router-link
56 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" 56 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
57 > 57 >
58 <v-tooltip top> 58 <v-tooltip top>
59 <img 59 <img
60 slot="activator" 60 slot="activator"
61 style="cursor:pointer; width:25px; height:25px; " 61 style="cursor:pointer; width:25px; height:25px; "
62 class="mr-3" 62 class="mr-3"
63 src="/static/icon/view.png" 63 src="/static/icon/view.png"
64 /> 64 />
65 <span>View</span> 65 <span>View</span>
66 </v-tooltip> 66 </v-tooltip>
67 </router-link> 67 </router-link>
68 <v-tooltip top> 68 <v-tooltip top>
69 <img 69 <img
70 slot="activator" 70 slot="activator"
71 style="cursor:pointer;width:20px; height:20px; " 71 style="cursor:pointer;width:20px; height:20px; "
72 class="mr-3" 72 class="mr-3"
73 @click="deletePayment(editedItem)" 73 @click="deletePayment(editedItem)"
74 src="/static/icon/delete.png" 74 src="/static/icon/delete.png"
75 /> 75 />
76 <span>Delete</span> 76 <span>Delete</span>
77 </v-tooltip> 77 </v-tooltip>
78 </td> 78 </td>
79 </tr> 79 </tr>
80 <tr v-if="editedItem.paymentStatus == 'NOT_PAID'"> 80 <tr v-if="editedItem.paymentStatus == 'NOT_PAID'">
81 <td style="width:40px ; color:black" class="tdFeeType'">-</td> 81 <td style="width:40px ; color:black" class="tdFeeType'">-</td>
82 <td style="width:120px; color:black" class="tdFeeType">-</td> 82 <td style="width:120px; color:black" class="tdFeeType">-</td>
83 <td style="width:120px; color:black" class="tdFeeType">-</td> 83 <td style="width:120px; color:black" class="tdFeeType">-</td>
84 <td style="width:120px; color:black" class="tdFeeType">-</td> 84 <td style="width:120px; color:black" class="tdFeeType">-</td>
85 <td style="width:120px; color:black" class="tdFeeType">-</td> 85 <td style="width:120px; color:black" class="tdFeeType">-</td>
86 <td class="text-xs-center td td-row"></td> 86 <td class="text-xs-center td td-row"></td>
87 </tr> 87 </tr>
88 </table> 88 </table>
89 </v-card> 89 </v-card>
90 </v-dialog> 90 </v-dialog>
91 91
92 <!-- ****** Invoice Table ****** --> 92 <!-- ****** Invoice Table ****** -->
93 <v-toolbar color="transparent" flat> 93 <v-toolbar color="transparent" flat>
94 <v-btn 94 <v-btn
95 fab 95 fab
96 dark 96 dark
97 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 97 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
98 small 98 small
99 @click="addInvoiceDialog = true" 99 @click="addInvoiceDialog = true"
100 > 100 >
101 <v-icon dark>add</v-icon> 101 <v-icon dark>add</v-icon>
102 </v-btn> 102 </v-btn>
103 <v-btn 103 <v-btn
104 round 104 round
105 class="open-dialog-button hidden-sm-only hidden-xs-only" 105 class="open-dialog-button hidden-sm-only hidden-xs-only"
106 dark 106 dark
107 @click="addInvoiceDialog = true" 107 @click="addInvoiceDialog = true"
108 > 108 >
109 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice 109 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
110 </v-btn> 110 </v-btn>
111 <v-spacer></v-spacer> 111 <v-spacer></v-spacer>
112 <v-card-title class="body-1" v-show="show"> 112 <v-card-title class="body-1" v-show="show">
113 <v-btn icon large flat @click="displaySearch"> 113 <v-btn icon large flat @click="displaySearch">
114 <v-avatar size="27"> 114 <v-avatar size="27">
115 <img src="/static/icon/search.png" alt="icon" /> 115 <img src="/static/icon/search.png" alt="icon" />
116 </v-avatar> 116 </v-avatar>
117 </v-btn> 117 </v-btn>
118 </v-card-title> 118 </v-card-title>
119 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 119 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
120 <v-layout> 120 <v-layout>
121 <v-text-field 121 <v-text-field
122 autofocus 122 autofocus
123 v-model="search" 123 v-model="search"
124 label="Search" 124 label="Search"
125 prepend-inner-icon="search" 125 prepend-inner-icon="search"
126 color="primary" 126 color="primary"
127 ></v-text-field> 127 ></v-text-field>
128 <v-icon @click="closeSearch" color="error">close</v-icon> 128 <v-icon @click="closeSearch" color="error">close</v-icon>
129 </v-layout> 129 </v-layout>
130 </v-flex> 130 </v-flex>
131 </v-toolbar> 131 </v-toolbar>
132 <v-data-table 132 <v-data-table
133 :headers="headers" 133 :headers="headers"
134 :items="invoiceList" 134 :items="invoiceList"
135 :pagination.sync="pagination" 135 :pagination.sync="pagination"
136 :search="search" 136 :search="search"
137 > 137 >
138 <template slot="items" slot-scope="props"> 138 <template slot="items" slot-scope="props">
139 <tr class="tr"> 139 <tr class="tr">
140 <td class="td td-row">{{ props.index + 1 }}</td> 140 <td class="td td-row">{{ props.index + 1 }}</td>
141 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> 141 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
142 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> 142 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
143 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> 143 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
144 <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> 144 <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>
145 <td 145 <td
146 class="text-xs-center td td-row" 146 class="text-xs-center td td-row"
147 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 147 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
148 <td 148 <td
149 class="text-xs-center td td-row" 149 class="text-xs-center td td-row"
150 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 150 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
151 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> 151 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
152 <span 152 <span
153 class="red lighten-1 py-1 px-2 white--text paymentStatus" 153 class="red lighten-1 py-1 px-2 white--text paymentStatus"
154 >{{ props.item.paymentStatus }}</span> 154 >{{ props.item.paymentStatus }}</span>
155 </td> 155 </td>
156 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> 156 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
157 <span 157 <span
158 class="green lighten-1 py-1 px-2 white--text paymentStatus" 158 class="green lighten-1 py-1 px-2 white--text paymentStatus"
159 >{{ props.item.paymentStatus }}</span> 159 >{{ props.item.paymentStatus }}</span>
160 </td> 160 </td>
161 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 161 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
162 <span 162 <span
163 class="yellow darken-3 py-1 px-2 white--text paymentStatus" 163 class="yellow darken-3 py-1 px-2 white--text paymentStatus"
164 >{{ props.item.paymentStatus }}</span> 164 >{{ props.item.paymentStatus }}</span>
165 </td> 165 </td>
166 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 166 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
167 <td class="text-xs-center td td-row"> 167 <td class="text-xs-center td td-row">
168 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> 168 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
169 <v-tooltip top> 169 <v-tooltip top>
170 <img 170 <img
171 slot="activator" 171 slot="activator"
172 style="cursor:pointer; width:25px; height:25px; " 172 style="cursor:pointer; width:25px; height:25px; "
173 class="mr-3" 173 class="mr-3"
174 src="/static/icon/view.png" 174 src="/static/icon/view.png"
175 /> 175 />
176 <span>View</span> 176 <span>View</span>
177 </v-tooltip> 177 </v-tooltip>
178 </router-link> 178 </router-link>
179 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 179 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
180 <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> 180 <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">
181 <v-tooltip top> 181 <v-tooltip top>
182 <img 182 <img
183 slot="activator" 183 slot="activator"
184 style="cursor:pointer; width:20px; height:18px; " 184 style="cursor:pointer; width:20px; height:18px; "
185 class="mr-3" 185 class="mr-3"
186 @click="editItem(props.item)" 186 @click="editItem(props.item)"
187 src="/static/icon/edit.png" 187 src="/static/icon/edit.png"
188 /> 188 />
189 <span>Edit</span> 189 <span>Edit</span>
190 </v-tooltip> 190 </v-tooltip>
191 </router-link>--> 191 </router-link>-->
192 <v-tooltip top> 192 <v-tooltip top>
193 <img 193 <img
194 slot="activator" 194 slot="activator"
195 style="cursor:pointer; width:20px; height:18px; " 195 style="cursor:pointer; width:20px; height:18px; "
196 class="mr-3" 196 class="mr-3"
197 @click="editItem(props.item)" 197 @click="editItem(props.item)"
198 src="/static/icon/edit.png" 198 src="/static/icon/edit.png"
199 /> 199 />
200 <span>Edit</span> 200 <span>Edit</span>
201 </v-tooltip> 201 </v-tooltip>
202 <v-tooltip top> 202 <v-tooltip top>
203 <img 203 <img
204 slot="activator" 204 slot="activator"
205 style="cursor:pointer;width:20px; height:20px; " 205 style="cursor:pointer;width:20px; height:20px; "
206 class="mr-3" 206 class="mr-3"
207 @click="deleteItem(props.item)" 207 @click="deleteItem(props.item)"
208 src="/static/icon/delete.png" 208 src="/static/icon/delete.png"
209 /> 209 />
210 <span>Delete</span> 210 <span>Delete</span>
211 </v-tooltip> 211 </v-tooltip>
212 <v-tooltip top> 212 <v-tooltip top>
213 <img 213 <img
214 slot="activator" 214 slot="activator"
215 style="cursor:pointer; width:20px; height:18px; " 215 style="cursor:pointer; width:20px; height:18px; "
216 class="mr-3" 216 class="mr-3"
217 @click="paymentItem(props.item)" 217 @click="paymentItem(props.item)"
218 src="/static/schoolIcons/Account.png" 218 src="/static/schoolIcons/Account.png"
219 /> 219 />
220 <span>Payment</span> 220 <span>Payment</span>
221 </v-tooltip> 221 </v-tooltip>
222 </span> 222 </span>
223 <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 223 <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
224 <v-tooltip top> 224 <v-tooltip top>
225 <img 225 <img
226 slot="activator" 226 slot="activator"
227 style="cursor:pointer; width:20px; height:18px; " 227 style="cursor:pointer; width:20px; height:18px; "
228 class="mr-3" 228 class="mr-3"
229 @click="paymentItem(props.item)" 229 @click="paymentItem(props.item)"
230 src="/static/schoolIcons/Account.png" 230 src="/static/schoolIcons/Account.png"
231 /> 231 />
232 <span>Payment</span> 232 <span>Payment</span>
233 </v-tooltip> 233 </v-tooltip>
234 </span> 234 </span>
235 <v-tooltip top> 235 <v-tooltip top>
236 <img 236 <img
237 slot="activator" 237 slot="activator"
238 style="cursor:pointer; width:18px; height:17px;" 238 style="cursor:pointer; width:18px; height:17px;"
239 @click="profile(props.item)" 239 @click="profile(props.item)"
240 src="/static/icon/eye1.png" 240 src="/static/icon/eye1.png"
241 /> 241 />
242 <span>View Payment</span> 242 <span>View Payment</span>
243 </v-tooltip> 243 </v-tooltip>
244 </td> 244 </td>
245 </tr> 245 </tr>
246 </template> 246 </template>
247 <v-alert 247 <v-alert
248 slot="no-results" 248 slot="no-results"
249 :value="true" 249 :value="true"
250 color="error" 250 color="error"
251 icon="warning" 251 icon="warning"
252 >Your search for "{{ search }}" found no results.</v-alert> 252 >Your search for "{{ search }}" found no results.</v-alert>
253 </v-data-table> 253 </v-data-table>
254 254
255 <!-- ****** ADD INVOICE ****** --> 255 <!-- ****** ADD INVOICE ****** -->
256 <v-snackbar 256 <v-snackbar
257 :timeout="timeout" 257 :timeout="timeout"
258 :top="y === 'top'" 258 :top="y === 'top'"
259 :right="x === 'right'" 259 :right="x === 'right'"
260 :vertical="mode === 'vertical'" 260 :vertical="mode === 'vertical'"
261 v-model="snackbar" 261 v-model="snackbar"
262 :color="color" 262 :color="color"
263 >{{ text }}</v-snackbar> 263 >{{ text }}</v-snackbar>
264 <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog"> 264 <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog">
265 <v-card flat class="text-xs-center white--text"> 265 <v-card flat class="text-xs-center white--text">
266 <v-layout> 266 <v-layout>
267 <v-flex xs12 class="card-styles pa-2"> 267 <v-flex xs12 class="card-styles pa-2">
268 <label class="title text-xs-center">Add Invoice</label> 268 <label class="title text-xs-center">Add Invoice</label>
269 <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon> 269 <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon>
270 </v-flex> 270 </v-flex>
271 </v-layout> 271 </v-layout>
272 <v-flex xs12 sm12> 272 <v-flex xs12 sm12>
273 <v-container fluid grid-list-md> 273 <v-container fluid grid-list-md>
274 <v-layout wrap> 274 <v-layout wrap>
275 <v-flex xs12 sm12 md5> 275 <v-flex xs12 sm12 md5>
276 <v-card flat> 276 <v-card flat>
277 <v-toolbar dark class="card-styles" flat> 277 <v-toolbar dark class="card-styles" flat>
278 <v-spacer></v-spacer> 278 <v-spacer></v-spacer>
279 <h3>Invoice</h3> 279 <h3>Invoice</h3>
280 <v-spacer></v-spacer> 280 <v-spacer></v-spacer>
281 </v-toolbar> 281 </v-toolbar>
282 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 282 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
283 <v-layout> 283 <v-layout>
284 <v-flex xs4 class="pt-4 subheading"> 284 <v-flex xs4 class="pt-4 subheading">
285 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 285 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
286 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 286 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
287 </v-flex> 287 </v-flex>
288 <v-flex xs6 class="ml-3"> 288 <v-flex xs6 class="ml-3">
289 <v-select 289 <v-select
290 :items="addclass" 290 :items="addclass"
291 label="Select Class" 291 label="Select Class"
292 v-model="invoiceData.classNum" 292 v-model="invoiceData.classNum"
293 item-text="classNum" 293 item-text="classNum"
294 item-value="_id" 294 item-value="_id"
295 @change="getAllStudents()" 295 @change="getAllStudents()"
296 :rules="classRules" 296 :rules="classRules"
297 required 297 required
298 ></v-select> 298 ></v-select>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 <v-layout> 301 <v-layout>
302 <v-flex xs4 class="pt-4 subheading"> 302 <v-flex xs4 class="pt-4 subheading">
303 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 303 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
304 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 304 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
305 </v-flex> 305 </v-flex>
306 <v-flex xs6 class="ml-3"> 306 <v-flex xs6 class="ml-3">
307 <v-select 307 <v-select
308 :items="studentList" 308 :items="studentList"
309 label="Select Student" 309 label="Select Student"
310 v-model="invoiceData.studentId" 310 v-model="invoiceData.studentId"
311 item-text="name" 311 item-text="name"
312 item-value="_id" 312 item-value="_id"
313 :rules="inchargeRules" 313 :rules="inchargeRules"
314 @change="selectAllStudent()" 314 @change="selectAllStudent()"
315 required 315 required
316 ></v-select> 316 ></v-select>
317 </v-flex> 317 </v-flex>
318 </v-layout> 318 </v-layout>
319 <v-layout> 319 <v-layout>
320 <v-flex xs4 class="pt-4 subheading"> 320 <v-flex xs4 class="pt-4 subheading">
321 <label class="right">Date:</label> 321 <label class="right">Date:</label>
322 </v-flex> 322 </v-flex>
323 <v-flex xs6 class="ml-3"> 323 <v-flex xs6 class="ml-3">
324 <v-menu 324 <v-menu
325 ref="menu1" 325 ref="menu1"
326 :close-on-content-click="false" 326 :close-on-content-click="false"
327 v-model="menu1" 327 v-model="menu1"
328 :nudge-right="40" 328 :nudge-right="40"
329 lazy 329 lazy
330 :return-value.sync="invoiceData.date" 330 :return-value.sync="invoiceData.date"
331 transition="scale-transition" 331 transition="scale-transition"
332 offset-y 332 offset-y
333 full-width 333 full-width
334 min-width="290px" 334 min-width="290px"
335 > 335 >
336 <v-text-field 336 <v-text-field
337 slot="activator" 337 slot="activator"
338 :rules="dateRules" 338 :rules="dateRules"
339 v-model="invoiceData.date" 339 v-model="invoiceData.date"
340 placeholder="Select date" 340 placeholder="Select date"
341 ></v-text-field> 341 ></v-text-field>
342 <v-date-picker 342 <v-date-picker
343 v-model="invoiceData.date" 343 v-model="invoiceData.date"
344 @input="$refs.menu1.save(invoiceData.date)" 344 @input="$refs.menu1.save(invoiceData.date)"
345 ></v-date-picker> 345 ></v-date-picker>
346 </v-menu> 346 </v-menu>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 <v-layout> 349 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
351 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 351 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
352 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 352 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
353 </v-flex> 353 </v-flex>
354 <v-flex xs6 class="ml-3"> 354 <v-flex xs6 class="ml-3">
355 <v-select 355 <v-select
356 :items="paymentStatus" 356 :items="paymentStatus"
357 v-model="invoiceData.paymentStatus" 357 v-model="invoiceData.paymentStatus"
358 item-text="name" 358 item-text="name"
359 item-value="value" 359 item-value="value"
360 label="Select Payment Status" 360 label="Select Payment Status"
361 @change="getPayMethodList" 361 @change="getPayMethodList"
362 :rules="paymentStatusRules" 362 :rules="paymentStatusRules"
363 required 363 required
364 ></v-select> 364 ></v-select>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 <v-layout v-show="showPayMethods"> 367 <v-layout v-show="showPayMethods">
368 <v-flex xs4 class="pt-4 subheading"> 368 <v-flex xs4 class="pt-4 subheading">
369 <label class="right">Payment Method:</label> 369 <label class="right">Payment Method:</label>
370 </v-flex> 370 </v-flex>
371 <v-flex xs6 class="ml-3"> 371 <v-flex xs6 class="ml-3">
372 <v-select 372 <v-select
373 :items="paymentMethods" 373 :items="paymentMethods"
374 v-model="invoiceData.paymentMethod" 374 v-model="invoiceData.paymentMethod"
375 :rules="paymentMethodRules" 375 :rules="paymentMethodRules"
376 label="Select Payment Method" 376 label="Select Payment Method"
377 required 377 required
378 ></v-select> 378 ></v-select>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs12 sm11> 382 <v-flex xs12 sm11>
383 <v-card-actions> 383 <v-card-actions>
384 <v-spacer></v-spacer> 384 <v-spacer></v-spacer>
385 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 385 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
386 <v-btn 386 <v-btn
387 @click="submit" 387 @click="submit"
388 round 388 round
389 dark 389 dark
390 :loading="loading" 390 :loading="loading"
391 class="add-button" 391 class="add-button"
392 >Add</v-btn> 392 >Add</v-btn>
393 </v-card-actions> 393 </v-card-actions>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 </v-form> 396 </v-form>
397 </v-card> 397 </v-card>
398 </v-flex> 398 </v-flex>
399 <v-flex xs12 sm12 md7> 399 <v-flex xs12 sm12 md7>
400 <v-card> 400 <v-card>
401 <v-toolbar dark class="card-styles" flat> 401 <v-toolbar dark class="card-styles" flat>
402 <v-spacer></v-spacer> 402 <v-spacer></v-spacer>
403 <h3>Fee Type List</h3> 403 <h3>Fee Type List</h3>
404 <v-spacer></v-spacer> 404 <v-spacer></v-spacer>
405 </v-toolbar> 405 </v-toolbar>
406 <v-layout> 406 <v-layout>
407 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> 407 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
408 <label class="right title">Fee Type:</label> 408 <label class="right title">Fee Type:</label>
409 </v-flex> 409 </v-flex>
410 <v-flex xs8 sm4> 410 <v-flex xs8 sm4>
411 <v-select 411 <v-select
412 :items="feeTypes" 412 :items="feeTypes"
413 v-model="feeType.feeTypeName" 413 v-model="feeType.feeTypeName"
414 item-text="feeType" 414 item-text="feeType"
415 item-value="feeType" 415 item-value="feeType"
416 label="Select Fee Type" 416 label="Select Fee Type"
417 required 417 required
418 ></v-select> 418 ></v-select>
419 </v-flex> 419 </v-flex>
420 <v-flex xs4 sm6> 420 <v-flex xs4 sm6>
421 <v-btn 421 <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn>
422 color="open-dialog-button"
423 round
424 dark
425 class="right mt-3"
426 @click="selectFeeType"
427 >ADD</v-btn>
428 </v-flex> 422 </v-flex>
429 </v-layout> 423 </v-layout>
430 <table class="feeTypeTable tableRsponsive"> 424 <table class="feeTypeTable tableRsponsive">
431 <tr class="info white--text"> 425 <tr class="info white--text">
432 <th>#</th> 426 <th>#</th>
433 <th>Fee Type</th> 427 <th>Fee Type</th>
434 <th>Amount</th> 428 <th>Amount</th>
435 <th>Discount</th> 429 <th>Discount</th>
436 <th>Subtotal</th> 430 <th>Subtotal</th>
437 <th>Paid Amount</th> 431 <th>Paid Amount</th>
438 <th>Action</th> 432 <th>Action</th>
439 </tr> 433 </tr>
440 <tr 434 <tr
441 v-show="showFeeType" 435 v-show="showFeeType"
442 v-for="(feeType, index) in feeTypeData" 436 v-for="(feeType, index) in feeTypeData"
443 :key="index" 437 :key="index"
444 v-on:keyup="getAmmountDetails(feeType)" 438 v-on:keyup="getAmmountDetails(feeType)"
445 > 439 >
446 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> 440 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
447 <td 441 <td
448 style="width:120px" 442 style="width:120px"
449 class="tdFeeType" 443 class="tdFeeType"
450 :rules="feeTypeNameRules" 444 :rules="feeTypeNameRules"
451 >{{ feeType.feeTypeName }}</td> 445 >{{ feeType.feeTypeName }}</td>
452 <td class="tdFeeType"> 446 <td class="tdFeeType">
453 <v-text-field 447 <v-text-field
454 placeholder="fill your Amount" 448 placeholder="fill your Amount"
455 v-model="feeType.amount" 449 v-model="feeType.amount"
456 type="number" 450 type="number"
457 :rules="amountRules" 451 :rules="amountRules"
458 required 452 required
459 ></v-text-field> 453 ></v-text-field>
460 </td> 454 </td>
461 <td class="tdFeeType"> 455 <td class="tdFeeType">
462 <v-text-field 456 <v-text-field
463 placeholder="fill your Discount" 457 placeholder="fill your Discount"
464 v-model="feeType.discount" 458 v-model="feeType.discount"
465 type="number" 459 type="number"
466 :rules="discountRules" 460 :rules="discountRules"
467 required 461 required
468 ></v-text-field> 462 ></v-text-field>
469 </td> 463 </td>
470 <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> 464 <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
471 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 465 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
472 <v-text-field 466 <v-text-field
473 placeholder="fill your Paid Amount" 467 placeholder="fill your Paid Amount"
474 v-model="feeType.paidAmount" 468 v-model="feeType.paidAmount"
475 type="number" 469 type="number"
476 :disabled="disabled" 470 :disabled="disabled"
477 ></v-text-field> 471 ></v-text-field>
478 </td> 472 </td>
479 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> 473 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
480 <v-text-field 474 <v-text-field
481 placeholder="fill your Paid Amount" 475 placeholder="fill your Paid Amount"
482 v-model="feeType.paidAmount" 476 v-model="feeType.paidAmount"
483 type="number" 477 type="number"
484 :disabled="disabled" 478 :disabled="disabled"
485 ></v-text-field> 479 ></v-text-field>
486 </td> 480 </td>
487 <td 481 <td
488 class="tdFeeType" 482 class="tdFeeType"
489 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 483 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
490 > 484 >
491 <v-text-field 485 <v-text-field
492 placeholder="fill your Paid Amount" 486 placeholder="fill your Paid Amount"
493 v-model="feeType.paidAmount" 487 v-model="feeType.paidAmount"
494 type="number" 488 type="number"
495 ></v-text-field> 489 ></v-text-field>
496 </td> 490 </td>
497 <td class="tdFeeType"> 491 <td class="tdFeeType">
498 <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon> 492 <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon>
499 </td> 493 </td>
500 </tr> 494 </tr>
501 <tfoot> 495 <tfoot>
502 <tr> 496 <tr>
503 <td colspan="2" class="tdFeeType">Total:</td> 497 <td colspan="2" class="tdFeeType">Total:</td>
504 <td class="tdFeeType">{{ feeType.amount }}</td> 498 <td class="tdFeeType">{{ feeType.amount }}</td>
505 <td class="tdFeeType">{{ feeType.discount }}</td> 499 <td class="tdFeeType">{{ feeType.discount }}</td>
506 <td class="tdFeeType">{{ feeType.subTotal }}</td> 500 <td class="tdFeeType">{{ feeType.subTotal }}</td>
507 <td class="tdFeeType">{{ feeType.paidAmount }}</td> 501 <td class="tdFeeType">{{ feeType.paidAmount }}</td>
508 <!-- <td class="tdFeeType"> 502 <!-- <td class="tdFeeType">
509 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 503 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
510 </td>--> 504 </td>-->
511 </tr> 505 </tr>
512 </tfoot> 506 </tfoot>
513 </table> 507 </table>
514 </v-card> 508 </v-card>
515 </v-flex> 509 </v-flex>
516 </v-layout> 510 </v-layout>
517 </v-container> 511 </v-container>
518 </v-flex> 512 </v-flex>
519 </v-card> 513 </v-card>
520 </v-dialog> 514 </v-dialog>
521 <div class="loader" v-if="showLoader"> 515 <div class="loader" v-if="showLoader">
522 <v-progress-circular indeterminate color="white"></v-progress-circular> 516 <v-progress-circular indeterminate color="white"></v-progress-circular>
523 </div> 517 </div>
524 </v-container> 518 </v-container>
525 </template> 519 </template>
526 520
527 <script> 521 <script>
528 import http from "@/Services/http.js"; 522 import http from "@/Services/http.js";
529 import editInvoice from "./editInvoice"; 523 import editInvoice from "./editInvoice";
530 import paymentTemplate from "./paymentTemplate.vue"; 524 import paymentTemplate from "./paymentTemplate.vue";
531 import moment from "moment"; 525 import moment from "moment";
532 526
533 export default { 527 export default {
534 components: { 528 components: {
535 editInvoice: editInvoice, 529 editInvoice: editInvoice,
536 paymentTemplate: paymentTemplate, 530 paymentTemplate: paymentTemplate,
537 }, 531 },
538 data: () => ({ 532 data: () => ({
539 snackbar: false, 533 snackbar: false,
540 showPayMethods: false, 534 showPayMethods: false,
541 y: "top", 535 y: "top",
542 x: "right", 536 x: "right",
543 mode: "", 537 mode: "",
544 timeout: 5000, 538 timeout: 5000,
545 text: "", 539 text: "",
546 color: "", 540 color: "",
547 show: true, 541 show: true,
548 showSearch: false, 542 showSearch: false,
549 showLoader: false, 543 showLoader: false,
550 loading: false, 544 loading: false,
551 date: null, 545 date: null,
552 search: "", 546 search: "",
553 dialog: false, 547 dialog: false,
554 dialog1: false, 548 dialog1: false,
555 valid: true, 549 valid: true,
556 validEdit: true, 550 validEdit: true,
557 isActive: true, 551 isActive: true,
558 newActive: false, 552 newActive: false,
559 showFeeType: true, 553 showFeeType: true,
560 addInvoiceDialog: false, 554 addInvoiceDialog: false,
561 editInvoiceDialog: false, 555 editInvoiceDialog: false,
562 paymentInvoiceDialog: false, 556 paymentInvoiceDialog: false,
563 disabled: true, 557 disabled: true,
564 details: [], 558 details: [],
565 feeTypes: [], 559 feeTypes: [],
566 invoiceData: [], 560 invoiceData: [],
567 editData: [], 561 editData: [],
568 invoiceList: [], 562 invoiceList: [],
569 editPayment: { 563 editPayment: {
570 studentId: { 564 studentId: {
571 name: "", 565 name: "",
572 rollNo: "", 566 rollNo: "",
573 }, 567 },
574 classId: { 568 classId: {
575 classNum: "", 569 classNum: "",
576 }, 570 },
577 }, 571 },
578 menu1: false, 572 menu1: false,
579 paymentMethods: ["Cash", "Cheque"], 573 paymentMethods: ["Cash", "Cheque"],
580 feeType: { 574 feeType: {
581 amount: "0.00", 575 amount: "0.00",
582 discount: "0.00", 576 discount: "0.00",
583 subTotal: "0.00", 577 subTotal: "0.00",
584 paidAmount: "0.00", 578 paidAmount: "0.00",
585 feeTypeName: "", 579 feeTypeName: "",
586 }, 580 },
587 581
588 feeTypeData: [], 582 feeTypeData: [],
589 editFeeTypeData: [], 583 editFeeTypeData: [],
590 paymentFeeTypeData: [], 584 paymentFeeTypeData: [],
591 pagination: { 585 pagination: {
592 rowsPerPage: 10, 586 rowsPerPage: 10,
593 }, 587 },
594 classRules: [(v) => !!v || " Class Name is required"], 588 classRules: [(v) => !!v || " Class Name is required"],
595 inchargeRules: [(v) => !!v || "Student Name is required"], 589 inchargeRules: [(v) => !!v || "Student Name is required"],
596 dateRules: [(v) => !!v || " Date is required"], 590 dateRules: [(v) => !!v || " Date is required"],
597 paymentStatusRules: [(v) => !!v || "Payment Status is required"], 591 paymentStatusRules: [(v) => !!v || "Payment Status is required"],
598 paymentMethodsRules: [(v) => !!v || "payment Method is required"], 592 paymentMethodsRules: [(v) => !!v || "payment Method is required"],
599 feeTypeRules: [(v) => !!v || "Fee Type is required"], 593 feeTypeRules: [(v) => !!v || "Fee Type is required"],
600 feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"], 594 feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"],
601 amountRules: [(v) => !!v || "Amount is required"], 595 amountRules: [(v) => !!v || "Amount is required"],
602 discountRules: [(v) => !!v || "Discount is required"], 596 discountRules: [(v) => !!v || "Discount is required"],
603 subtotalRules: [(v) => !!v || "Subtotal is required"], 597 subtotalRules: [(v) => !!v || "Subtotal is required"],
604 paymentRules: [(v) => !!v || "Payment is required"], 598 paymentRules: [(v) => !!v || "Payment is required"],
605 paidAmountRules: [(v) => !!v || "Paid Amount is required"], 599 paidAmountRules: [(v) => !!v || "Paid Amount is required"],
606 paymentMethodRules: [], 600 paymentMethodRules: [],
607 headers: [ 601 headers: [
608 { 602 {
609 text: "No", 603 text: "No",
610 align: "", 604 align: "",
611 sortable: false, 605 sortable: false,
612 value: "No", 606 value: "No",
613 }, 607 },
614 { 608 {
615 text: "Student", 609 text: "Student",
616 value: "name", 610 value: "name",
617 sortable: false, 611 sortable: false,
618 align: "center", 612 align: "center",
619 }, 613 },
620 { text: "Class", value: "class", sortable: false, align: "center" }, 614 { text: "Class", value: "class", sortable: false, align: "center" },
621 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 615 { text: "Total", value: "subtotal", sortable: false, align: "center" },
622 { 616 {
623 text: "Discount", 617 text: "Discount",
624 value: "discount", 618 value: "discount",
625 sortable: false, 619 sortable: false,
626 align: "center", 620 align: "center",
627 }, 621 },
628 { 622 {
629 text: "Paid Amount", 623 text: "Paid Amount",
630 value: "paidAmount", 624 value: "paidAmount",
631 sortable: false, 625 sortable: false,
632 align: "center", 626 align: "center",
633 }, 627 },
634 { 628 {
635 text: "Balance", 629 text: "Balance",
636 value: "Balance", 630 value: "Balance",
637 sortable: false, 631 sortable: false,
638 align: "center", 632 align: "center",
639 }, 633 },
640 { 634 {
641 text: "Status", 635 text: "Status",
642 value: "paymentStatus", 636 value: "paymentStatus",
643 sortable: false, 637 sortable: false,
644 align: "center", 638 align: "center",
645 }, 639 },
646 { 640 {
647 text: "Date", 641 text: "Date",
648 value: "date", 642 value: "date",
649 sortable: false, 643 sortable: false,
650 align: "center", 644 align: "center",
651 }, 645 },
652 { text: "Action", value: "", sortable: false, align: "center" }, 646 { text: "Action", value: "", sortable: false, align: "center" },
653 ], 647 ],
654 648
655 studentId: { 649 studentId: {
656 name: "", 650 name: "",
657 }, 651 },
658 token: "", 652 token: "",
659 editedItem: {}, 653 editedItem: {},
660 invoiceData: { 654 invoiceData: {
661 paymentStatus: "", 655 paymentStatus: "",
662 students: [], 656 students: [],
663 }, 657 },
664 addclass: [], 658 addclass: [],
665 studentList: [], 659 studentList: [],
666 paymentStatus: [ 660 paymentStatus: [
667 { 661 {
668 name: "Not Paid", 662 name: "Not Paid",
669 value: "NOT_PAID", 663 value: "NOT_PAID",
670 }, 664 },
671 { 665 {
672 name: "Partially Paid", 666 name: "Partially Paid",
673 value: "PARTIALLY_PAID", 667 value: "PARTIALLY_PAID",
674 }, 668 },
675 { 669 {
676 name: "Fully Paid", 670 name: "Fully Paid",
677 value: "FULLY_PAID", 671 value: "FULLY_PAID",
678 }, 672 },
679 ], 673 ],
680 }), 674 }),
681 watch: { 675 watch: {
682 addInvoiceDialog: function (val) { 676 addInvoiceDialog: function (val) {
683 if (!val) { 677 if (!val) {
684 this.invoiceData = []; 678 this.invoiceData = [];
685 this.menu1 = false; 679 this.menu1 = false;
686 this.feeType = []; 680 this.feeType = [];
687 this.feeTypeData = []; 681 this.feeTypeData = [];
688 } 682 }
689 }, 683 },
690 }, 684 },
691 methods: { 685 methods: {
692 save(date) { 686 save(date) {
693 this.$refs.menu1.save(date); 687 this.$refs.menu1.save(date);
694 }, 688 },
695 dates: function (date) { 689 dates: function (date) {
696 return moment(date).format("MMMM DD, YYYY"); 690 return moment(date).format("MMMM DD, YYYY");
697 }, 691 },
698 profile(item) { 692 profile(item) {
699 // console.log("item", item); 693 // console.log("item", item);
700 this.editedIndex = this.invoiceList.indexOf(item); 694 this.editedIndex = this.invoiceList.indexOf(item);
701 this.editedItem = Object.assign({}, item); 695 this.editedItem = Object.assign({}, item);
702 console.log("editedItem", this.editedItem); 696 console.log("editedItem", this.editedItem);
703 this.dialog1 = true; 697 this.dialog1 = true;
704 }, 698 },
705 editItem(item) { 699 editItem(item) {
706 this.editedIndex = this.invoiceList.indexOf(item); 700 this.editedIndex = this.invoiceList.indexOf(item);
707 this.editData = Object.assign({}, item); 701 this.editData = Object.assign({}, item);
708 this.editData.date = this.editData.date.slice(0, 10); 702 this.editData.date = this.editData.date.slice(0, 10);
709 // console.log("invoiceData", this.editData); 703 // console.log("invoiceData", this.editData);
710 this.editFeeTypeData = this.editData.feeType; 704 this.editFeeTypeData = this.editData.feeType;
711 this.editInvoiceDialog = true; 705 this.editInvoiceDialog = true;
712 }, 706 },
713 paymentItem(item) { 707 paymentItem(item) {
714 // console.log("item", item); 708 // console.log("item", item);
715 this.editedIndex = this.invoiceList.indexOf(item); 709 this.editedIndex = this.invoiceList.indexOf(item);
716 this.editPayment = Object.assign({}, item); 710 this.editPayment = Object.assign({}, item);
717 this.editPayment.date = this.editPayment.date.slice(0, 10); 711 this.editPayment.date = this.editPayment.date.slice(0, 10);
718 if (this.editPayment.paymentStatus == "NOT_PAID") { 712 if (this.editPayment.paymentStatus == "NOT_PAID") {
719 for (let i = 0; i < this.editPayment.feeType.length; i++) { 713 for (let i = 0; i < this.editPayment.feeType.length; i++) {
720 this.editPayment.feeType[i].paidAmount = "0.00"; 714 this.editPayment.feeType[i].paidAmount = "0.00";
721 } 715 }
722 } 716 }
723 // console.log("this.editPayment", this.editPayment); 717 // console.log("this.editPayment", this.editPayment);
724 this.paymentFeeTypeData = this.editPayment.feeType; 718 this.paymentFeeTypeData = this.editPayment.feeType;
725 this.paymentInvoiceDialog = true; 719 this.paymentInvoiceDialog = true;
726 }, 720 },
727 deleteItem(item) { 721 deleteItem(item) {
728 let deleteInvoice = { 722 let deleteInvoice = {
729 invoiceId: item._id, 723 invoiceId: item._id,
730 }; 724 };
731 http() 725 http()
732 .delete( 726 .delete(
733 "/deleteInvoice", 727 "/deleteInvoice",
734 confirm("Are you sure you want to delete this?") && { 728 confirm("Are you sure you want to delete this?") && {
735 params: deleteInvoice, 729 params: deleteInvoice,
736 } 730 }
737 ) 731 )
738 .then((response) => { 732 .then((response) => {
739 this.snackbar = true; 733 this.snackbar = true;
740 this.text = "Successfully delete Existing Invoice"; 734 this.text = "Successfully delete Existing Invoice";
741 this.color = "green"; 735 this.color = "green";
742 this.dialog1 = false; 736 this.dialog1 = false;
743 this.getInvoiceList(); 737 this.getInvoiceList();
744 }) 738 })
745 .catch((error) => { 739 .catch((error) => {
746 // console.log(error); 740 // console.log(error);
747 }); 741 });
748 }, 742 },
749 deletePayment(editedItem) { 743 deletePayment(editedItem) {
750 let deleteInvoice = { 744 let deleteInvoice = {
751 invoiceId: editedItem._id, 745 invoiceId: editedItem._id,
752 }; 746 };
753 http() 747 http()
754 .put( 748 .put(
755 "/removePayment", 749 "/removePayment",
756 deleteInvoice, 750 deleteInvoice,
757 confirm("Are you sure you want to delete this?") && { 751 confirm("Are you sure you want to delete this?") && {
758 headers: { 752 headers: {
759 Authorization: "Bearer " + this.token, 753 Authorization: "Bearer " + this.token,
760 }, 754 },
761 } 755 }
762 ) 756 )
763 .then((response) => { 757 .then((response) => {
764 this.snackbar = true; 758 this.snackbar = true;
765 this.text = "Successfully delete Existing Invoice"; 759 this.text = "Successfully delete Existing Invoice";
766 this.color = "green"; 760 this.color = "green";
767 this.dialog1 = false; 761 this.dialog1 = false;
768 this.getInvoiceList(); 762 this.getInvoiceList();
769 }) 763 })
770 .catch((error) => { 764 .catch((error) => {
771 // console.log(error); 765 // console.log(error);
772 }); 766 });
773 }, 767 },
774 close() { 768 close() {
775 this.dialog = false; 769 this.dialog = false;
776 }, 770 },
777 closeAddInvoiceModel() { 771 closeAddInvoiceModel() {
778 this.addInvoiceDialog = false; 772 this.addInvoiceDialog = false;
779 this.invoiceData = []; 773 this.invoiceData = [];
780 this.menu1 = false; 774 this.menu1 = false;
781 this.feeType = []; 775 this.feeType = [];
782 this.feeTypeData = []; 776 this.feeTypeData = [];
783 }, 777 },
784 // totalAmount() { 778 // totalAmount() {
785 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); 779 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
786 // // console.log( 780 // // console.log(
787 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", 781 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ",
788 // // this.feeType.subTotal 782 // // this.feeType.subTotal
789 // // ); 783 // // );
790 784
791 // if (this.feeType.paidAmount < this.feeType.subTotal) { 785 // if (this.feeType.paidAmount < this.feeType.subTotal) {
792 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); 786 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
793 787
794 // this.feeType.paidAmount = this.feeType.subTotal; 788 // this.feeType.paidAmount = this.feeType.subTotal;
795 // console.log( 789 // console.log(
796 // "this.feeType.paidAmount BBBBBBBBBBB", 790 // "this.feeType.paidAmount BBBBBBBBBBB",
797 // this.feeType.paidAmount 791 // this.feeType.paidAmount
798 // ); 792 // );
799 // } 793 // }
800 // }, 794 // },
801 submit() { 795 submit() {
802 let feeTypeId = ""; 796 let feeTypeId = "";
803 for (let i = 0; i < this.feeTypes.length; i++) { 797 for (let i = 0; i < this.feeTypes.length; i++) {
804 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 798 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
805 feeTypeId = this.feeTypes[i]._id; 799 feeTypeId = this.feeTypes[i]._id;
806 } 800 }
807 } 801 }
808 if (this.$refs.form.validate()) { 802 if (this.$refs.form.validate()) {
809 let invoiceData = { 803 let invoiceData = {
810 classId: this.invoiceData.classNum, 804 classId: this.invoiceData.classNum,
811 students: this.invoiceData.students, 805 students: this.invoiceData.students,
812 date: this.invoiceData.date, 806 date: this.invoiceData.date,
813 paymentStatus: this.invoiceData.paymentStatus, 807 paymentStatus: this.invoiceData.paymentStatus,
814 paymentMethod: this.invoiceData.paymentMethod, 808 paymentMethod: this.invoiceData.paymentMethod,
815 feeType: this.feeTypeData, 809 feeType: this.feeTypeData,
816 totalAmount: this.feeType.amount.toString(), 810 totalAmount: this.feeType.amount.toString(),
817 totalDiscount: this.feeType.discount.toString(), 811 totalDiscount: this.feeType.discount.toString(),
818 totalSubTotal: this.feeType.subTotal.toString(), 812 totalSubTotal: this.feeType.subTotal.toString(),
819 totalPaidAmount: this.feeType.paidAmount, 813 totalPaidAmount: this.feeType.paidAmount,
820 }; 814 };
821 815
822 if (invoiceData.paymentStatus == "NOT_PAID") { 816 if (invoiceData.paymentStatus == "NOT_PAID") {
823 delete invoiceData.paymentMethod; 817 delete invoiceData.paymentMethod;
824 } 818 }
825 if (this.feeType.paidAmount != "0.00") { 819 if (this.feeType.paidAmount != "0.00") {
826 if (this.feeType.subTotal == this.feeType.paidAmount) { 820 if (this.feeType.subTotal == this.feeType.paidAmount) {
827 invoiceData.paymentStatus = "FULLY_PAID"; 821 invoiceData.paymentStatus = "FULLY_PAID";
828 // console.log("FULLY_PAID"); 822 // console.log("FULLY_PAID");
829 } 823 }
830 if (invoiceData.totalPaidAmount) { 824 if (invoiceData.totalPaidAmount) {
831 if (this.feeType.subTotal != this.feeType.paidAmount) { 825 if (this.feeType.subTotal != this.feeType.paidAmount) {
832 invoiceData.paymentStatus = "PARTIALLY_PAID"; 826 invoiceData.paymentStatus = "PARTIALLY_PAID";
833 // console.log("PARTIALLY_PAID"); 827 // console.log("PARTIALLY_PAID");
834 } 828 }
835 } 829 }
836 } 830 }
837 831
838 if (invoiceData.totalSubTotal == "0.00") { 832 if (invoiceData.totalSubTotal == "0.00") {
839 invoiceData.paymentStatus = "FULLY_PAID"; 833 invoiceData.paymentStatus = "FULLY_PAID";
840 } else if (invoiceData.totalSubTotal != "0.00") { 834 } else if (invoiceData.totalSubTotal != "0.00") {
841 if (this.feeType.paidAmount === "0.00") { 835 if (this.feeType.paidAmount === "0.00") {
842 invoiceData.paymentStatus = "NOT_PAID"; 836 invoiceData.paymentStatus = "NOT_PAID";
843 delete invoiceData.paymentMethod; 837 delete invoiceData.paymentMethod;
844 } 838 }
845 } 839 }
846 http() 840 http()
847 .post("/createInvoice", invoiceData) 841 .post("/createInvoice", invoiceData)
848 .then((response) => { 842 .then((response) => {
849 this.getInvoiceList(); 843 this.getInvoiceList();
850 this.snackbar = true; 844 this.snackbar = true;
851 this.text = "New Invoice added successfully"; 845 this.text = "New Invoice added successfully";
852 this.color = "green"; 846 this.color = "green";
853 this.clear(); 847 this.clear();
854 this.feeTypeData = []; 848 this.feeTypeData = [];
855 if (this.feeTypeData.length == 0) { 849 if (this.feeTypeData.length == 0) {
856 this.feeType = { 850 this.feeType = {
857 amount: "0.00", 851 amount: "0.00",
858 discount: "0.00", 852 discount: "0.00",
859 paidAmount: "0.00", 853 paidAmount: "0.00",
860 subTotal: "0.00", 854 subTotal: "0.00",
861 feeTypeList: "", 855 feeTypeList: "",
862 }; 856 };
863 } 857 }
864 this.loading = false; 858 this.loading = false;
865 this.addInvoiceDialog = false; 859 this.addInvoiceDialog = false;
866 }) 860 })
867 .catch((error) => { 861 .catch((error) => {
868 this.snackbar = true; 862 this.snackbar = true;
869 this.text = error.response.data.errors[0].messages[0]; 863 this.text = error.response.data.errors[0].messages[0];
870 this.color = "error"; 864 this.color = "error";
871 this.loading = false; 865 this.loading = false;
872 }); 866 });
873 } 867 }
874 }, 868 },
875 clear() { 869 clear() {
876 this.$refs.form.reset(); 870 this.$refs.form.reset();
877 }, 871 },
878 getInvoiceList() { 872 getInvoiceList() {
879 this.showLoader = true; 873 this.showLoader = true;
880 http() 874 http()
881 .get("/getInvoicesList", { 875 .get("/getInvoicesList", {
882 params: { schoolId: this.$store.state.schoolId }, 876 params: { schoolId: this.$store.state.schoolId },
883 headers: { Authorization: "Bearer " + this.token }, 877 headers: { Authorization: "Bearer " + this.token },
884 }) 878 })
885 .then((response) => { 879 .then((response) => {
886 this.invoiceList = response.data.data; 880 this.invoiceList = response.data.data;
887 this.showLoader = false; 881 this.showLoader = false;
888 }) 882 })
889 .catch((error) => { 883 .catch((error) => {
890 // console.log("err====>", err); 884 // console.log("err====>", err);
891 this.showLoader = false; 885 this.showLoader = false;
892 if (error.response.status === 401) { 886 if (error.response.status === 401) {
893 this.$router.replace({ path: "/" }); 887 this.$router.replace({ path: "/" });
894 this.$store.dispatch("setToken", null); 888 this.$store.dispatch("setToken", null);
895 this.$store.dispatch("Id", null); 889 this.$store.dispatch("Id", null);
896 } 890 }
897 }); 891 });
898 }, 892 },
899 selectFeeType() { 893 selectFeeType() {
900 this.showFeeType = true; 894 this.showFeeType = true;
901 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 895 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
902 }, 896 },
903 deleteSelectFee: function (index, feeTyp) { 897 deleteSelectFee: function (index, feeTyp) {
904 console.log("---index----", index); 898 console.log("---index----", index);
905 this.feeTypeData.splice(index, 1); 899 this.feeTypeData.splice(index, 1);
906 this.getAmmountDetails(feeTyp); 900 this.getAmmountDetails(feeTyp);
907 if (this.feeTypeData.length == 0) { 901 if (this.feeTypeData.length == 0) {
908 this.feeType = { 902 this.feeType = {
909 amount: "0.00", 903 amount: "0.00",
910 discount: "0.00", 904 discount: "0.00",
911 paidAmount: "0.00", 905 paidAmount: "0.00",
912 subTotal: "0.00", 906 subTotal: "0.00",
913 feeTypeName: "", 907 feeTypeName: "",
914 }; 908 };
915 } 909 }
916 }, 910 },
917 getAllClasses() { 911 getAllClasses() {
918 http() 912 http()
919 .get("/getClassesList", { 913 .get("/getClassesList", {
920 params: { schoolId: this.$store.state.schoolId }, 914 params: { schoolId: this.$store.state.schoolId },
921 headers: { Authorization: "Bearer " + this.token }, 915 headers: { Authorization: "Bearer " + this.token },
922 }) 916 })
923 .then((response) => { 917 .then((response) => {
924 this.addclass = response.data.data; 918 this.addclass = response.data.data;
925 }) 919 })
926 .catch((err) => { 920 .catch((err) => {
927 // console.log("err====>", err); 921 // console.log("err====>", err);
928 // this.$router.replace({ path: "/" }); 922 // this.$router.replace({ path: "/" });
929 }); 923 });
930 }, 924 },
931 getAllStudents() { 925 getAllStudents() {
932 this.showLoader = true; 926 this.showLoader = true;
933 http() 927 http()
934 .get("/getStudentsList", { 928 .get("/getStudentsList", {
935 params: { 929 params: {
936 classId: this.invoiceData.classNum, 930 classId: this.invoiceData.classNum,
937 schoolId: this.$store.state.schoolId, 931 schoolId: this.$store.state.schoolId,
938 }, 932 },
939 headers: { Authorization: "Bearer " + this.token }, 933 headers: { Authorization: "Bearer " + this.token },
940 }) 934 })
941 .then((response) => { 935 .then((response) => {
942 response.data.data.unshift({ 936 response.data.data.unshift({
943 name: "Select All", 937 name: "Select All",
944 _id: "Select All", 938 _id: "Select All",
945 }); 939 });
946 this.studentList = response.data.data; 940 this.studentList = response.data.data;
947 this.showLoader = false; 941 this.showLoader = false;
948 }) 942 })
949 .catch((err) => { 943 .catch((err) => {
950 this.showLoader = false; 944 this.showLoader = false;
951 // console.log("err====>", err); 945 // console.log("err====>", err);
952 // this.$router.replace({ path: "/" }); 946 // this.$router.replace({ path: "/" });
953 }); 947 });
954 }, 948 },
955 getfeeType() { 949 getfeeType() {
956 http() 950 http()
957 .get("/getFeesList", { 951 .get("/getFeesList", {
958 params: { 952 params: {
959 schoolId: this.$store.state.schoolId, 953 schoolId: this.$store.state.schoolId,
960 }, 954 },
961 headers: { Authorization: "Bearer " + this.token }, 955 headers: { Authorization: "Bearer " + this.token },
962 }) 956 })
963 .then((response) => { 957 .then((response) => {
964 this.feeTypes = response.data.data; 958 this.feeTypes = response.data.data;
965 }) 959 })
966 .catch((err) => { 960 .catch((err) => {
967 // console.log("err====>", err); 961 // console.log("err====>", err);
968 // this.$router.replace({ path: "/" }); 962 // this.$router.replace({ path: "/" });
969 }); 963 });
970 }, 964 },
971 965
972 getAmmountDetails(feeTyp) { 966 getAmmountDetails(feeTyp) {
973 let feeType = { 967 let feeType = {
974 amount: "0.00", 968 amount: "0.00",
975 discount: "0.00", 969 discount: "0.00",
976 subTotal: "0.00", 970 subTotal: "0.00",
977 subParticularTotal: "0.00", 971 subParticularTotal: "0.00",
978 paidAmount: "", 972 paidAmount: "",
979 }; 973 };
980 for (let i = 0; i < this.feeTypeData.length; i++) { 974 for (let i = 0; i < this.feeTypeData.length; i++) {
981 // *********** AMOUNT *********** 975 // *********** AMOUNT ***********
982 if (this.feeTypeData[i].amount) { 976 if (this.feeTypeData[i].amount) {
983 feeType.amount = 977 feeType.amount =
984 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 978 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
985 this.feeType.amount = feeType.amount; 979 this.feeType.amount = feeType.amount;
986 this.feeType.subTotal = feeType.amount; 980 this.feeType.subTotal = feeType.amount;
987 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 981 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
988 } else if (this.feeTypeData[0].amount == "") { 982 } else if (this.feeTypeData[0].amount == "") {
989 this.feeType.amount = "0.00"; 983 this.feeType.amount = "0.00";
990 this.feeTypeData[i].subTotal = "0.00"; 984 this.feeTypeData[i].subTotal = "0.00";
991 this.feeType.subTotal = "0.00"; 985 this.feeType.subTotal = "0.00";
992 } else if (this.feeTypeData[i].amount == "") { 986 } else if (this.feeTypeData[i].amount == "") {
993 this.feeType.amount = 987 this.feeType.amount =
994 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 988 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
995 this.feeTypeData[i].subTotal = 989 this.feeTypeData[i].subTotal =
996 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 990 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
997 this.feeType.subTotal = 991 this.feeType.subTotal =
998 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 992 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
999 } 993 }
1000 // *********** DISCOUNT *********** 994 // *********** DISCOUNT ***********
1001 if (this.feeTypeData[i].discount) { 995 if (this.feeTypeData[i].discount) {
1002 if ( 996 if (
1003 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount 997 Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
1004 ) { 998 ) {
1005 feeType.discount = 999 feeType.discount =
1006 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 1000 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1007 this.feeType.discount = feeType.discount; 1001 this.feeType.discount = feeType.discount;
1008 feeType.subParticularTotal = 1002 feeType.subParticularTotal =
1009 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 1003 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
1010 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( 1004 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
1011 2 1005 2
1012 ); 1006 );
1013 } else if ( 1007 } else if (
1014 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount 1008 Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
1015 ) { 1009 ) {
1016 this.feeTypeData[i].discount = this.feeTypeData[i].amount; 1010 this.feeTypeData[i].discount = this.feeTypeData[i].amount;
1017 feeType.discount = 1011 feeType.discount =
1018 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 1012 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1019 this.feeType.discount = feeType.discount.toString(); 1013 this.feeType.discount = feeType.discount.toString();
1020 feeType.subParticularTotal = 1014 feeType.subParticularTotal =
1021 this.feeTypeData[i].amount - this.feeTypeData[i].discount; 1015 this.feeTypeData[i].amount - this.feeTypeData[i].discount;
1022 this.feeTypeData[ 1016 this.feeTypeData[
1023 i 1017 i
1024 ].subTotal = feeType.subParticularTotal.toString(); 1018 ].subTotal = feeType.subParticularTotal.toString();
1025 } 1019 }
1026 } else if (this.feeTypeData[0].discount == "") { 1020 } else if (this.feeTypeData[0].discount == "") {
1027 this.feeType.discount = "0.00"; 1021 this.feeType.discount = "0.00";
1028 } 1022 }
1029 // else if (this.feeTypeData[i].discount == "") { 1023 // else if (this.feeTypeData[i].discount == "") {
1030 // this.feeType.discount = 1024 // this.feeType.discount =
1031 // Number(feeType.discount) + Number(this.feeTypeData[i].discount); 1025 // Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1032 // } 1026 // }
1033 1027
1034 // *********** SUBTOTAL *********** 1028 // *********** SUBTOTAL ***********
1035 if (this.feeTypeData[i].subTotal) { 1029 if (this.feeTypeData[i].subTotal) {
1036 feeType.subTotal = 1030 feeType.subTotal =
1037 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 1031 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
1038 this.feeType.subTotal = feeType.subTotal.toFixed(2); 1032 this.feeType.subTotal = feeType.subTotal.toFixed(2);
1039 } 1033 }
1040 1034
1041 // *********** PAID-AMOUNT *********** 1035 // *********** PAID-AMOUNT ***********
1042 if (this.feeTypeData[i].paidAmount) { 1036 if (this.feeTypeData[i].paidAmount) {
1043 feeType.paidAmount = 1037 feeType.paidAmount =
1044 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 1038 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1045 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 1039 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
1046 } else if (this.feeTypeData[0].paidAmount == "") { 1040 } else if (this.feeTypeData[0].paidAmount == "") {
1047 this.feeType.paidAmount = "0.00"; 1041 this.feeType.paidAmount = "0.00";
1048 } else if (this.feeTypeData[i].paidAmount == "") { 1042 } else if (this.feeTypeData[i].paidAmount == "") {
1049 this.feeType.paidAmount = feeType.paidAmount = 1043 this.feeType.paidAmount = feeType.paidAmount =
1050 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 1044 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1051 } 1045 }
1052 1046
1053 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. 1047 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
1054 if (feeType.paidAmount > feeType.subTotal) { 1048 if (feeType.paidAmount > feeType.subTotal) {
1055 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; 1049 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
1056 this.feeType.paidAmount = feeType.subTotal; 1050 this.feeType.paidAmount = feeType.subTotal;
1057 } 1051 }
1058 } 1052 }
1059 }, 1053 },
1060 getPayMethodList() { 1054 getPayMethodList() {
1061 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 1055 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
1062 this.showPayMethods = true; 1056 this.showPayMethods = true;
1063 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; 1057 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
1064 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 1058 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
1065 this.showPayMethods = true; 1059 this.showPayMethods = true;
1066 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; 1060 this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
1067 } else if (this.invoiceData.paymentStatus == "NOT_PAID") { 1061 } else if (this.invoiceData.paymentStatus == "NOT_PAID") {
1068 for (let i = 0; i < this.feeTypeData.length; i++) { 1062 for (let i = 0; i < this.feeTypeData.length; i++) {
1069 this.feeTypeData[i].paidAmount = "0.00"; 1063 this.feeTypeData[i].paidAmount = "0.00";
1070 this.feeType.paidAmount = "0.00"; 1064 this.feeType.paidAmount = "0.00";
1071 } 1065 }
1072 this.paymentMethodRules = ""; 1066 this.paymentMethodRules = "";
1073 this.showPayMethods = false; 1067 this.showPayMethods = false;
1074 } else { 1068 } else {
1075 this.showPayMethods = false; 1069 this.showPayMethods = false;
1076 } 1070 }
1077 }, 1071 },
1078 selectAllStudent() { 1072 selectAllStudent() {
1079 this.invoiceData.students = []; 1073 this.invoiceData.students = [];
1080 if (this.invoiceData.studentId === "Select All") { 1074 if (this.invoiceData.studentId === "Select All") {
1081 for (let i = 1; i < this.studentList.length; i++) { 1075 for (let i = 1; i < this.studentList.length; i++) {
1082 this.invoiceData.students.push(this.studentList[i]._id); 1076 this.invoiceData.students.push(this.studentList[i]._id);
1083 console.log("data", this.invoiceData.students); 1077 console.log("data", this.invoiceData.students);
1084 // data.push(this.studentList[i]._id); 1078 // data.push(this.studentList[i]._id);
1085 // console.log("data", data); 1079 // console.log("data", data);
1086 } 1080 }
1087 } else { 1081 } else {
1088 this.invoiceData.students.push(this.invoiceData.studentId); 1082 this.invoiceData.students.push(this.invoiceData.studentId);
1089 } 1083 }
1090 }, 1084 },
1091 displaySearch() { 1085 displaySearch() {
1092 this.show = false; 1086 this.show = false;
1093 this.showSearch = true; 1087 this.showSearch = true;
1094 }, 1088 },
1095 closeSearch() { 1089 closeSearch() {
1096 this.showSearch = false; 1090 this.showSearch = false;
1097 this.show = true; 1091 this.show = true;
1098 this.search = ""; 1092 this.search = "";
1099 }, 1093 },
1100 updateDoneInvoice() { 1094 updateDoneInvoice() {
1101 this.editInvoiceDialog = false; 1095 this.editInvoiceDialog = false;
1102 this.getInvoiceList(); 1096 this.getInvoiceList();
1103 }, 1097 },
1104 updatePayment() { 1098 updatePayment() {
1105 this.paymentInvoiceDialog = false; 1099 this.paymentInvoiceDialog = false;
1106 this.getInvoiceList(); 1100 this.getInvoiceList();
1107 this.snackbar = true; 1101 this.snackbar = true;
1108 this.text = "Payment added successfully"; 1102 this.text = "Payment added successfully";
1109 this.color = "green"; 1103 this.color = "green";
1110 }, 1104 },
1111 }, 1105 },
1112 mounted() { 1106 mounted() {
1113 this.token = this.$store.state.token; 1107 this.token = this.$store.state.token;
1114 this.getInvoiceList(); 1108 this.getInvoiceList();
1115 this.getAllClasses(); 1109 this.getAllClasses();
1116 this.getfeeType(); 1110 this.getfeeType();
1117 this.getAllStudents(); 1111 this.getAllStudents();
1118 }, 1112 },
1119 }; 1113 };
1120 </script> 1114 </script>
1121 1115
1122 1116
1123 <style scoped> 1117 <style scoped>
1124 table { 1118 table {
1125 border-collapse: collapse; 1119 border-collapse: collapse;
1126 border: 1px solid #e2e7eb; 1120 border: 1px solid #e2e7eb;
1127 } 1121 }
1128 1122
1129 th, 1123 th,
1130 .tdFeeType { 1124 .tdFeeType {
1131 border: 1px solid #e2e7eb; 1125 border: 1px solid #e2e7eb;
1132 padding: 10px; 1126 padding: 10px;
1133 text-align: center; 1127 text-align: center;
1134 } 1128 }
1135 table.feeTypeTable { 1129 table.feeTypeTable {
1136 table-layout: auto !important; 1130 table-layout: auto !important;
1137 width: 100% !important; 1131 width: 100% !important;
1138 } 1132 }
1139 .card-style { 1133 .card-style {
1140 background: #7f62f8 !important; 1134 background: #7f62f8 !important;
1141 border-color: #7f62f8 !important; 1135 border-color: #7f62f8 !important;
1142 border-radius: 12px; 1136 border-radius: 12px;
1143 text-align: center !important; 1137 text-align: center !important;
1144 padding-top: 10px !important; 1138 padding-top: 10px !important;
1145 } 1139 }
1146 .add-button { 1140 .add-button {
1147 background: #feb83c !important; 1141 background: #feb83c !important;
1148 border-color: #feb83c !important; 1142 border-color: #feb83c !important;
1149 text-transform: none !important; 1143 text-transform: none !important;
1150 -webkit-box-shadow: none !important; 1144 -webkit-box-shadow: none !important;
1151 box-shadow: none !important; 1145 box-shadow: none !important;
1152 } 1146 }
1153 .clear-button { 1147 .clear-button {
1154 background: #fa7676 !important; 1148 background: #fa7676 !important;
1155 border-color: #fa7676 !important; 1149 border-color: #fa7676 !important;
1156 text-transform: none !important; 1150 text-transform: none !important;
1157 -webkit-box-shadow: none !important; 1151 -webkit-box-shadow: none !important;
1158 box-shadow: none !important; 1152 box-shadow: none !important;
1159 } 1153 }
1160 .card-styles { 1154 .card-styles {
1161 background: #7f62f8 !important; 1155 background: #7f62f8 !important;
1162 border-color: #7f62f8 !important; 1156 border-color: #7f62f8 !important;
1163 } 1157 }
1164 .v-card__actions .v-btn { 1158 .v-card__actions .v-btn {
1165 margin: 0 15px !important; 1159 margin: 0 15px !important;
1166 min-width: 96px !important; 1160 min-width: 96px !important;
1167 } 1161 }
1168 </style> 1162 </style>
src/pages/Library/issue.vue
Diff comments   View file @d10c266
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" 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._id;
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>
src/pages/NoticeBoard/noticeBoard.vue
Diff comments   View file @d10c266
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Notice Board ****** --> 3 <!-- ****** Edit Notice Board ****** -->
4 <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable> 4 <v-dialog v-model="editNoticeBoardDialog" max-width="500px" 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 Notice Board</label> 8 <label class="title text-xs-center">Edit Notice Board</label>
9 <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editNoticeBoardDialog = 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 xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
15 <img 15 <img
16 src="/static/icon/user.png" 16 src="/static/icon/user.png"
17 v-if="!editedItem.eventImageUrl && !imageUrl" 17 v-if="!editedItem.eventImageUrl && !imageUrl"
18 width="100px" 18 width="100px"
19 /> 19 />
20 <img 20 <img
21 :src="editedItem.eventImageUrl" 21 :src="editedItem.eventImageUrl"
22 height="150" 22 height="150"
23 v-else-if="editedItem.eventImageUrl && !imageUrl" 23 v-else-if="editedItem.eventImageUrl && !imageUrl"
24 width="150px" 24 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> 42 <v-flex xs12>
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">Title:</label> 45 <label class="right">Title:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 class="ml-3"> 47 <v-flex xs8 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.title" 49 v-model="editedItem.title"
50 placeholder="fill your Title" 50 placeholder="fill your Title"
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-flex xs12> 58 <v-flex xs12>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading"> 60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Description:</label> 61 <label class="right">Description:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs7 class="ml-3"> 63 <v-flex xs7 class="ml-3">
64 <v-text-field 64 <v-text-field
65 placeholder="fill your Description" 65 placeholder="fill your Description"
66 v-model="editedItem.description" 66 v-model="editedItem.description"
67 type="text" 67 type="text"
68 name="email" 68 name="email"
69 required 69 required
70 ></v-text-field> 70 ></v-text-field>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12> 74 <v-flex xs12>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</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 label="Select Image" 82 label="Select Image"
83 @click="pickFile" 83 @click="pickFile"
84 v-model="imageName" 84 v-model="imageName"
85 append-icon="attach_file" 85 append-icon="attach_file"
86 ></v-text-field> 86 ></v-text-field>
87 <input
88 type="file"
89 style="display: none"
90 ref="image"
91 accept="image/*"
92 @change="onFilePicked"
93 />
87 </v-flex> 94 </v-flex>
88 </v-layout> 95 </v-layout>
89 </v-flex> 96 </v-flex>
90 <v-flex xs12> 97 <v-flex xs12>
91 <v-card-actions> 98 <v-card-actions>
92 <v-spacer></v-spacer> 99 <v-spacer></v-spacer>
93 <v-btn round dark @click="save" class="add-button">Save</v-btn> 100 <v-btn round dark @click="save" class="add-button">Save</v-btn>
94 </v-card-actions> 101 </v-card-actions>
95 </v-flex> 102 </v-flex>
96 </v-layout> 103 </v-layout>
97 </v-card-text> 104 </v-card-text>
98 </v-card> 105 </v-card>
99 </v-dialog> 106 </v-dialog>
100 107
101 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 108 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
102 109
103 <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable> 110 <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable>
104 <v-card flat class="card-style pa-3" dark> 111 <v-card flat class="card-style pa-3" dark>
105 <v-layout> 112 <v-layout>
106 <v-flex xs12> 113 <v-flex xs12>
107 <label class="title text-xs-center">View Notice Board</label> 114 <label class="title text-xs-center">View Notice Board</label>
108 <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> 115 <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon>
109 </v-flex> 116 </v-flex>
110 </v-layout> 117 </v-layout>
111 <v-card-text> 118 <v-card-text>
112 <v-layout> 119 <v-layout>
113 <v-flex align-center justify-center layout text-xs-center> 120 <v-flex align-center justify-center layout text-xs-center>
114 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> 121 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" />
115 <img 122 <img
116 :src="editedItem.eventImageUrl" 123 :src="editedItem.eventImageUrl"
117 v-else-if="editedItem.eventImageUrl" 124 v-else-if="editedItem.eventImageUrl"
118 class="img" 125 class="img"
119 width="200" 126 width="200"
120 /> 127 />
121 </v-flex> 128 </v-flex>
122 </v-layout> 129 </v-layout>
123 <v-container grid-list-md> 130 <v-container grid-list-md>
124 <v-layout wrap> 131 <v-layout wrap>
125 <v-flex> 132 <v-flex>
126 <v-layout> 133 <v-layout>
127 <v-flex xs5 sm6> 134 <v-flex xs5 sm6>
128 <h5 class="right my-1"> 135 <h5 class="right my-1">
129 <b>Title:</b> 136 <b>Title:</b>
130 </h5> 137 </h5>
131 </v-flex> 138 </v-flex>
132 <v-flex sm6 xs8> 139 <v-flex sm6 xs8>
133 <h5 class="my-1">{{ editedItem.title }}</h5> 140 <h5 class="my-1">{{ editedItem.title }}</h5>
134 </v-flex> 141 </v-flex>
135 </v-layout> 142 </v-layout>
136 <v-layout> 143 <v-layout>
137 <v-flex xs5 sm6> 144 <v-flex xs5 sm6>
138 <h5 class="right my-1"> 145 <h5 class="right my-1">
139 <b>Description:</b> 146 <b>Description:</b>
140 </h5> 147 </h5>
141 </v-flex> 148 </v-flex>
142 <v-flex sm6 xs8> 149 <v-flex sm6 xs8>
143 <h5 class="my-1">{{ editedItem.description }}</h5> 150 <h5 class="my-1">{{ editedItem.description }}</h5>
144 </v-flex> 151 </v-flex>
145 </v-layout> 152 </v-layout>
146 </v-flex> 153 </v-flex>
147 </v-layout> 154 </v-layout>
148 </v-container> 155 </v-container>
149 </v-card-text> 156 </v-card-text>
150 </v-card> 157 </v-card>
151 </v-dialog> 158 </v-dialog>
152 <!-- ****** EXISTING Notice Board TABLE ****** --> 159 <!-- ****** EXISTING Notice Board TABLE ****** -->
153 <v-toolbar color="transparent" flat> 160 <v-toolbar color="transparent" flat>
154 <v-btn 161 <v-btn
155 fab 162 fab
156 dark 163 dark
157 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
158 small 165 small
159 @click="addNoticeBoardDialog = true" 166 @click="addNoticeBoardDialog = true"
160 > 167 >
161 <v-icon dark>add</v-icon> 168 <v-icon dark>add</v-icon>
162 </v-btn> 169 </v-btn>
163 <v-btn 170 <v-btn
164 round 171 round
165 class="open-dialog-button hidden-sm-only hidden-xs-only" 172 class="open-dialog-button hidden-sm-only hidden-xs-only"
166 dark 173 dark
167 @click="addNoticeBoardDialog = true" 174 @click="addNoticeBoardDialog = true"
168 > 175 >
169 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board 176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board
170 </v-btn> 177 </v-btn>
171 <v-spacer></v-spacer> 178 <v-spacer></v-spacer>
172 <v-card-title class="body-1" v-show="show"> 179 <v-card-title class="body-1" v-show="show">
173 <v-btn icon large flat @click="displaySearch"> 180 <v-btn icon large flat @click="displaySearch">
174 <v-avatar size="27"> 181 <v-avatar size="27">
175 <img src="/static/icon/search.png" alt="icon" /> 182 <img src="/static/icon/search.png" alt="icon" />
176 </v-avatar> 183 </v-avatar>
177 </v-btn> 184 </v-btn>
178 </v-card-title> 185 </v-card-title>
179 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 186 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
180 <v-layout> 187 <v-layout>
181 <v-text-field 188 <v-text-field
182 autofocus 189 autofocus
183 v-model="search" 190 v-model="search"
184 label="Search" 191 label="Search"
185 prepend-inner-icon="search" 192 prepend-inner-icon="search"
186 color="primary" 193 color="primary"
187 ></v-text-field> 194 ></v-text-field>
188 <v-icon @click="closeSearch" color="error">close</v-icon> 195 <v-icon @click="closeSearch" color="error">close</v-icon>
189 </v-layout> 196 </v-layout>
190 </v-flex> 197 </v-flex>
191 </v-toolbar> 198 </v-toolbar>
192 <v-data-table 199 <v-data-table
193 :headers="headers" 200 :headers="headers"
194 :items="notices" 201 :items="notices"
195 :pagination.sync="pagination" 202 :pagination.sync="pagination"
196 :search="search" 203 :search="search"
197 > 204 >
198 <template slot="items" slot-scope="props"> 205 <template slot="items" slot-scope="props">
199 <tr class="tr"> 206 <tr class="tr">
200 <td class="td td-row">{{ props.index + 1}}</td> 207 <td class="td td-row">{{ props.index + 1}}</td>
201 <td class="td td-row text-xs-center"> 208 <td class="td td-row text-xs-center">
202 <v-avatar size="40"> 209 <v-avatar size="40">
203 <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> 210 <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" />
204 <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> 211 <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" />
205 </v-avatar> 212 </v-avatar>
206 </td> 213 </td>
207 <td class="text-xs-center td td-row">{{ props.item.title}}</td> 214 <td class="text-xs-center td td-row">{{ props.item.title}}</td>
208 <td class="text-xs-center td td-row"> 215 <td class="text-xs-center td td-row">
209 <v-btn 216 <v-btn
210 class="add-button" 217 class="add-button"
211 @click="generatePDF2Canvas(props.item)" 218 @click="generatePDF2Canvas(props.item)"
212 :loading="loadingPdf" 219 :loading="loadingPdf"
213 dark 220 dark
214 >{{ props.item.fileType }}</v-btn> 221 >{{ props.item.fileType }}</v-btn>
215 </td> 222 </td>
216 <td class="text-xs-center td td-row"> 223 <td class="text-xs-center td td-row">
217 <span> 224 <span>
218 <v-tooltip top> 225 <v-tooltip top>
219 <img 226 <img
220 slot="activator" 227 slot="activator"
221 style="cursor:pointer; width:25px; height:25px; " 228 style="cursor:pointer; width:25px; height:25px; "
222 class="mr-3" 229 class="mr-3"
223 @click="profile(props.item)" 230 @click="profile(props.item)"
224 src="/static/icon/view.png" 231 src="/static/icon/view.png"
225 /> 232 />
226 <span>View</span> 233 <span>View</span>
227 </v-tooltip> 234 </v-tooltip>
228 <v-tooltip top> 235 <v-tooltip top>
229 <img 236 <img
230 slot="activator" 237 slot="activator"
231 style="cursor:pointer; width:20px; height:18px; " 238 style="cursor:pointer; width:20px; height:18px; "
232 class="mr-3" 239 class="mr-3"
233 @click="editItem(props.item)" 240 @click="editItem(props.item)"
234 src="/static/icon/edit.png" 241 src="/static/icon/edit.png"
235 /> 242 />
236 <span>Edit</span> 243 <span>Edit</span>
237 </v-tooltip> 244 </v-tooltip>
238 <v-tooltip top> 245 <v-tooltip top>
239 <img 246 <img
240 slot="activator" 247 slot="activator"
241 style="cursor:pointer; width:20px; height:20px; " 248 style="cursor:pointer; width:20px; height:20px; "
242 @click="deleteItem(props.item)" 249 @click="deleteItem(props.item)"
243 src="/static/icon/delete.png" 250 src="/static/icon/delete.png"
244 /> 251 />
245 <span>Delete</span> 252 <span>Delete</span>
246 </v-tooltip> 253 </v-tooltip>
247 </span> 254 </span>
248 </td> 255 </td>
249 </tr> 256 </tr>
250 </template> 257 </template>
251 <v-alert 258 <v-alert
252 slot="no-results" 259 slot="no-results"
253 :value="true" 260 :value="true"
254 color="error" 261 color="error"
255 icon="warning" 262 icon="warning"
256 >Your search for "{{ search }}" found no results.</v-alert> 263 >Your search for "{{ search }}" found no results.</v-alert>
257 </v-data-table> 264 </v-data-table>
258 <!-- ****** ADD Notice Board ****** --> 265 <!-- ****** ADD Notice Board ****** -->
259 <v-dialog v-model="addNoticeBoardDialog" max-width="600px" v-if="addNoticeBoardDialog"> 266 <v-dialog v-model="addNoticeBoardDialog" max-width="600px" v-if="addNoticeBoardDialog">
260 <v-card flat class="card-style pa-2" dark> 267 <v-card flat class="card-style pa-2" dark>
261 <v-layout> 268 <v-layout>
262 <v-flex xs12> 269 <v-flex xs12>
263 <label class="title text-xs-center">Add Notice Board</label> 270 <label class="title text-xs-center">Add Notice Board</label>
264 <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon> 271 <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon>
265 </v-flex> 272 </v-flex>
266 </v-layout> 273 </v-layout>
267 <v-container fluid fill-height> 274 <v-container fluid fill-height>
268 <v-layout align-center> 275 <v-layout align-center>
269 <v-flex xs12> 276 <v-flex xs12>
270 <v-form ref="form" v-model="valid" lazy-validation> 277 <v-form ref="form" v-model="valid" lazy-validation>
271 <v-layout> 278 <v-layout>
272 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 279 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
273 <v-avatar size="80px" v-if="!imageUrl"> 280 <v-avatar size="80px" v-if="!imageUrl">
274 <img src="/static/icon/user.png" /> 281 <img src="/static/icon/user.png" />
275 </v-avatar> 282 </v-avatar>
276 <input 283 <input
277 type="file" 284 type="file"
278 style="display: none" 285 style="display: none"
279 ref="image" 286 ref="image"
280 accept="image/*" 287 accept="image/*"
281 @change="onFilePicked" 288 @change="onFilePicked"
282 /> 289 />
283 290
284 <v-avatar size="150px" v-if="imageUrl"> 291 <v-avatar size="150px" v-if="imageUrl">
285 <img :src="imageUrl" height="150" /> 292 <img :src="imageUrl" height="150" />
286 </v-avatar> 293 </v-avatar>
287 </v-flex> 294 </v-flex>
288 </v-layout> 295 </v-layout>
289 <v-layout> 296 <v-layout>
290 <v-flex xs4 class="pt-4 subheading"> 297 <v-flex xs4 class="pt-4 subheading">
291 <label class="right">Title:</label> 298 <label class="right">Title:</label>
292 </v-flex> 299 </v-flex>
293 <v-flex xs7 class="ml-3"> 300 <v-flex xs7 class="ml-3">
294 <v-text-field 301 <v-text-field
295 v-model="addNoticeBoard.title" 302 v-model="addNoticeBoard.title"
296 placeholder="fill your Title" 303 placeholder="fill your Title"
297 name="name" 304 name="name"
298 type="text" 305 type="text"
299 :rules="titleRules" 306 :rules="titleRules"
300 required 307 required
301 ></v-text-field> 308 ></v-text-field>
302 </v-flex> 309 </v-flex>
303 </v-layout> 310 </v-layout>
304 <v-layout> 311 <v-layout>
305 <v-flex xs4 class="pt-4 subheading"> 312 <v-flex xs4 class="pt-4 subheading">
306 <label class="right">Description:</label> 313 <label class="right">Description:</label>
307 </v-flex> 314 </v-flex>
308 <v-flex xs7 class="ml-3"> 315 <v-flex xs7 class="ml-3">
309 <v-text-field 316 <v-text-field
310 v-model="addNoticeBoard.description" 317 v-model="addNoticeBoard.description"
311 placeholder="fill your Description" 318 placeholder="fill your Description"
312 name="name" 319 name="name"
313 type="text" 320 type="text"
314 :rules="descriptionRules" 321 :rules="descriptionRules"
315 required 322 required
316 ></v-text-field> 323 ></v-text-field>
317 </v-flex> 324 </v-flex>
318 </v-layout> 325 </v-layout>
319 <v-layout> 326 <v-layout>
320 <v-flex xs4 class="pt-4 subheading"> 327 <v-flex xs4 class="pt-4 subheading">
321 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 328 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
322 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 329 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
323 </v-flex> 330 </v-flex>
324 <v-flex xs7 class="ml-3"> 331 <v-flex xs7 class="ml-3">
325 <v-text-field 332 <v-text-field
326 label="Select Image" 333 label="Select Image"
327 @click="pickFile" 334 @click="pickFile"
328 v-model="imageName" 335 v-model="imageName"
329 append-icon="attach_file" 336 append-icon="attach_file"
330 ></v-text-field> 337 ></v-text-field>
331 <input 338 <input
332 type="file" 339 type="file"
333 style="display:none" 340 style="display:none"
334 ref="image" 341 ref="image"
335 accept="image/*" 342 accept="image/*"
336 @change="onFilePicked" 343 @change="onFilePicked"
337 /> 344 />
338 </v-flex> 345 </v-flex>
339 </v-layout> 346 </v-layout>
340 <v-layout> 347 <v-layout>
341 <v-flex xs12> 348 <v-flex xs12>
342 <v-card-actions> 349 <v-card-actions>
343 <v-spacer></v-spacer> 350 <v-spacer></v-spacer>
344 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 351 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
345 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 352 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
346 </v-card-actions> 353 </v-card-actions>
347 </v-flex> 354 </v-flex>
348 </v-layout> 355 </v-layout>
349 </v-form> 356 </v-form>
350 </v-flex> 357 </v-flex>
351 </v-layout> 358 </v-layout>
352 </v-container> 359 </v-container>
353 </v-card> 360 </v-card>
354 </v-dialog> 361 </v-dialog>
355 <v-snackbar 362 <v-snackbar
356 :timeout="timeout" 363 :timeout="timeout"
357 :top="y === 'top'" 364 :top="y === 'top'"
358 :right="x === 'right'" 365 :right="x === 'right'"
359 :vertical="mode === 'vertical'" 366 :vertical="mode === 'vertical'"
360 v-model="snackbar" 367 v-model="snackbar"
361 :color="color" 368 :color="color"
362 >{{ text }}</v-snackbar> 369 >{{ text }}</v-snackbar>
363 <div class="loader" v-if="showLoader"> 370 <div class="loader" v-if="showLoader">
364 <v-progress-circular indeterminate color="white"></v-progress-circular> 371 <v-progress-circular indeterminate color="white"></v-progress-circular>
365 </div> 372 </div>
366 </v-container> 373 </v-container>
367 </template> 374 </template>
368 375
369 <script> 376 <script>
370 import http from "@/Services/http.js"; 377 import http from "@/Services/http.js";
371 378
372 export default { 379 export default {
373 data: () => ({ 380 data: () => ({
374 snackbar: false, 381 snackbar: false,
375 y: "top", 382 y: "top",
376 x: "right", 383 x: "right",
377 mode: "", 384 mode: "",
378 timeout: 3000, 385 timeout: 3000,
379 text: "", 386 text: "",
380 color: "", 387 color: "",
381 show: true, 388 show: true,
382 showSearch: false, 389 showSearch: false,
383 showLoader: false, 390 showLoader: false,
384 loading: false, 391 loading: false,
385 date: null, 392 date: null,
386 search: "", 393 search: "",
387 addNoticeBoardDialog: false, 394 addNoticeBoardDialog: false,
388 editNoticeBoardDialog: false, 395 editNoticeBoardDialog: false,
389 viewNoticeBoardDialog: false, 396 viewNoticeBoardDialog: false,
390 valid: true, 397 valid: true,
391 addclass: [], 398 addclass: [],
392 addSection: [], 399 addSection: [],
393 gender: ["Male", "Female"], 400 gender: ["Male", "Female"],
394 pagination: { 401 pagination: {
395 rowsPerPage: 10, 402 rowsPerPage: 10,
396 }, 403 },
397 imageName: "", 404 imageName: "",
398 imageUrl: "", 405 imageUrl: "",
399 imageFile: "", 406 imageFile: "",
400 upload: "", 407 upload: "",
401 loadingPdf: false, 408 loadingPdf: false,
402 409
403 titleRules: [(v) => !!v || " Title is required"], 410 titleRules: [(v) => !!v || " Title is required"],
404 descriptionRules: [(v) => !!v || " Description is required"], 411 descriptionRules: [(v) => !!v || " Description is required"],
405 headers: [ 412 headers: [
406 { 413 {
407 text: "No", 414 text: "No",
408 align: "", 415 align: "",
409 sortable: false, 416 sortable: false,
410 value: "No", 417 value: "No",
411 }, 418 },
412 { 419 {
413 text: "Event Image", 420 text: "Event Image",
414 align: "center", 421 align: "center",
415 sortable: false, 422 sortable: false,
416 value: "eventImageUrl", 423 value: "eventImageUrl",
417 }, 424 },
418 { text: "Title", value: "title", sortable: false, align: "center" }, 425 { text: "Title", value: "title", sortable: false, align: "center" },
419 { 426 {
420 text: "File", 427 text: "File",
421 value: "eventImageUrl", 428 value: "eventImageUrl",
422 sortable: false, 429 sortable: false,
423 align: "center", 430 align: "center",
424 }, 431 },
425 { text: "Action", value: "", sortable: false, align: "center" }, 432 { text: "Action", value: "", sortable: false, align: "center" },
426 ], 433 ],
427 notices: [], 434 notices: [],
428 editedIndex: -1, 435 editedIndex: -1,
429 addNoticeBoard: {}, 436 addNoticeBoard: {},
430 editedItem: { 437 editedItem: {
431 title: "", 438 title: "",
432 description: "", 439 description: "",
433 }, 440 },
434 }), 441 }),
435 watch: { 442 watch: {
436 addNoticeBoardDialog: function (val) { 443 addNoticeBoardDialog: function (val) {
437 if (!val) { 444 if (!val) {
438 this.addNoticeBoard = []; 445 this.addNoticeBoard = [];
439 this.imageName = ""; 446 this.imageName = "";
440 this.imageFile = ""; 447 this.imageFile = "";
441 this.imageUrl = ""; 448 this.imageUrl = "";
442 } 449 }
443 }, 450 },
444 }, 451 },
445 methods: { 452 methods: {
446 pickFile() { 453 pickFile() {
447 this.$refs.image.click(); 454 this.$refs.image.click();
448 }, 455 },
449 getNoticeDataList() { 456 getNoticeDataList() {
450 this.showLoader = true; 457 this.showLoader = true;
451 var token = this.$store.state.token; 458 var token = this.$store.state.token;
452 http() 459 http()
453 .get("/getEventsList", { 460 .get("/getEventsList", {
454 headers: { Authorization: "Bearer " + token }, 461 headers: { Authorization: "Bearer " + token },
455 }) 462 })
456 .then((response) => { 463 .then((response) => {
457 this.notices = response.data.data; 464 this.notices = response.data.data;
458 this.showLoader = false; 465 this.showLoader = false;
459 }) 466 })
460 .catch((error) => { 467 .catch((error) => {
461 this.showLoader = false; 468 this.showLoader = false;
462 if (error.response.status === 401) { 469 if (error.response.status === 401) {
463 this.$router.replace({ path: "/" }); 470 this.$router.replace({ path: "/" });
464 this.$store.dispatch("setToken", null); 471 this.$store.dispatch("setToken", null);
465 this.$store.dispatch("Id", null); 472 this.$store.dispatch("Id", null);
466 } 473 }
467 }); 474 });
468 }, 475 },
469 editItem(item) { 476 editItem(item) {
470 this.editedIndex = this.notices.indexOf(item); 477 this.editedIndex = this.notices.indexOf(item);
471 this.editedItem = Object.assign({}, item); 478 this.editedItem = Object.assign({}, item);
472 this.editNoticeBoardDialog = true; 479 this.editNoticeBoardDialog = true;
473 }, 480 },
474 profile(item) { 481 profile(item) {
475 this.editedIndex = this.notices.indexOf(item); 482 this.editedIndex = this.notices.indexOf(item);
476 this.editedItem = Object.assign({}, item); 483 this.editedItem = Object.assign({}, item);
477 this.viewNoticeBoardDialog = true; 484 this.viewNoticeBoardDialog = true;
478 }, 485 },
479 deleteItem(item) { 486 deleteItem(item) {
480 let deleteEvent = { 487 let deleteEvent = {
481 eventId: item._id, 488 eventId: item._id,
482 }; 489 };
483 http() 490 http()
484 .delete( 491 .delete(
485 "/deleteEvent", 492 "/deleteEvent",
486 confirm("Are you sure you want to delete this?") && { 493 confirm("Are you sure you want to delete this?") && {
487 params: deleteEvent, 494 params: deleteEvent,
488 } 495 }
489 ) 496 )
490 .then((response) => { 497 .then((response) => {
491 // console.log("deleteUers",deleteEvent) 498 // console.log("deleteUers",deleteEvent)
492 if ((this.snackbar = true)) { 499 if ((this.snackbar = true)) {
493 this.text = "Successfully delete Existing Notice Data"; 500 this.text = "Successfully delete Existing Notice Data";
494 } 501 }
495 this.snackbar = true; 502 this.snackbar = true;
496 this.color = "green"; 503 this.color = "green";
497 this.getNoticeDataList(); 504 this.getNoticeDataList();
498 }) 505 })
499 .catch((error) => { 506 .catch((error) => {
500 // console.log(error); 507 // console.log(error);
501 this.snackbar = true; 508 this.snackbar = true;
502 this.text = error.response.data.message; 509 this.text = error.response.data.message;
503 this.color = "error"; 510 this.color = "error";
504 }); 511 });
505 }, 512 },
506 close() { 513 close() {
507 this.editNoticeBoardDialog = false; 514 this.editNoticeBoardDialog = false;
508 }, 515 },
509 closeNoticeBoardModel() { 516 closeNoticeBoardModel() {
510 this.addNoticeBoardDialog = false; 517 this.addNoticeBoardDialog = false;
511 this.addNoticeBoard = []; 518 this.addNoticeBoard = [];
512 this.imageName = ""; 519 this.imageName = "";
513 this.imageFile = ""; 520 this.imageFile = "";
514 this.imageUrl = ""; 521 this.imageUrl = "";
515 }, 522 },
516 submit() { 523 submit() {
517 var signatures = { 524 var signatures = {
518 JVBERi0: "other", 525 JVBERi0: "other",
519 iVBORw0KGgo: "image", 526 iVBORw0KGgo: "image",
520 UEsDBBQ: "other", 527 UEsDBBQ: "other",
521 "/": "image", 528 "/": "image",
522 AAABAA: "image", 529 AAABAA: "image",
523 IywiV2hhdC: "other", 530 IywiV2hhdC: "other",
524 bmFtZSxl: "other", 531 bmFtZSxl: "other",
525 }; 532 };
526 function detectMimeType(b64) { 533 function detectMimeType(b64) {
527 for (var s in signatures) { 534 for (var s in signatures) {
528 if (b64.indexOf(s) === 0) { 535 if (b64.indexOf(s) === 0) {
529 return signatures[s]; 536 return signatures[s];
530 } 537 }
531 } 538 }
532 } 539 }
533 if (this.$refs.form.validate()) { 540 if (this.$refs.form.validate()) {
534 if (this.imageUrl) { 541 if (this.imageUrl) {
535 var str = this.imageUrl; 542 var str = this.imageUrl;
536 const [baseUrl, imageUrl] = str.split(/,/); 543 const [baseUrl, imageUrl] = str.split(/,/);
537 this.addNoticeBoard.upload = imageUrl; 544 this.addNoticeBoard.upload = imageUrl;
538 this.addNoticeBoard.fileType = detectMimeType(imageUrl); 545 this.addNoticeBoard.fileType = detectMimeType(imageUrl);
539 this.addNoticeBoard.fileName = this.imageName; 546 this.addNoticeBoard.fileName = this.imageName;
540 } 547 }
541 http() 548 http()
542 .post("/createEvent", this.addNoticeBoard) 549 .post("/createEvent", this.addNoticeBoard)
543 .then((response) => { 550 .then((response) => {
544 this.imageUrl = ""; 551 this.imageUrl = "";
545 this.snackbar = true; 552 this.snackbar = true;
546 this.color = "green"; 553 this.color = "green";
547 this.text = response.data.message; 554 this.text = response.data.message;
548 this.getNoticeDataList(); 555 this.getNoticeDataList();
549 this.addNoticeBoardDialog = false; 556 this.addNoticeBoardDialog = false;
550 this.clear(); 557 this.clear();
551 }) 558 })
552 .catch((error) => { 559 .catch((error) => {
553 this.snackbar = true; 560 this.snackbar = true;
554 this.text = error.response.data.message; 561 this.text = error.response.data.message;
555 this.color = "error"; 562 this.color = "error";
556 }); 563 });
557 } 564 }
558 }, 565 },
559 onFilePicked(e) { 566 onFilePicked(e) {
560 const files = e.target.files; 567 const files = e.target.files;
561 this.upload = e.target.files[0]; 568 this.upload = e.target.files[0];
562 if (files[0] !== undefined) { 569 if (files[0] !== undefined) {
563 this.imageName = files[0].name; 570 this.imageName = files[0].name;
564 if (this.imageName.lastIndexOf(".") <= 0) { 571 if (this.imageName.lastIndexOf(".") <= 0) {
565 return; 572 return;
566 } 573 }
567 const fr = new FileReader(); 574 const fr = new FileReader();
568 fr.readAsDataURL(files[0]); 575 fr.readAsDataURL(files[0]);
569 fr.addEventListener("load", () => { 576 fr.addEventListener("load", () => {
570 this.imageUrl = fr.result; 577 this.imageUrl = fr.result;
571 this.imageFile = files[0]; // this is an image file that can be sent to server... 578 this.imageFile = files[0]; // this is an image file that can be sent to server...
572 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 579 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
573 }); 580 });
574 } else { 581 } else {
575 this.imageName = ""; 582 this.imageName = "";
576 this.imageFile = ""; 583 this.imageFile = "";
577 this.imageUrl = ""; 584 this.imageUrl = "";
578 } 585 }
579 }, 586 },
580 clear() { 587 clear() {
581 this.$refs.form.reset(); 588 this.$refs.form.reset();
582 this.imageUrl = ""; 589 this.imageUrl = "";
583 }, 590 },
584 save() { 591 save() {
585 let editNoticeBoard = { 592 let editNoticeBoard = {
586 eventId: this.editedItem._id, 593 eventId: this.editedItem._id,
587 title: this.editedItem.title, 594 title: this.editedItem.title,
588 description: this.editedItem.description, 595 description: this.editedItem.description,
589 fileName: this.imageName, 596 fileName: this.imageName,
590 }; 597 };
591 var signatures = { 598 var signatures = {
592 JVBERi0: "other", 599 JVBERi0: "other",
593 iVBORw0KGgo: "image", 600 iVBORw0KGgo: "image",
594 UEsDBBQ: "other", 601 UEsDBBQ: "other",
595 "/": "image", 602 "/": "image",
596 AAABAA: "image", 603 AAABAA: "image",
597 IywiV2hhdC: "other", 604 IywiV2hhdC: "other",
598 }; 605 };
599 function detectMimeType(b64) { 606 function detectMimeType(b64) {
600 for (var s in signatures) { 607 for (var s in signatures) {
601 if (b64.indexOf(s) === 0) { 608 if (b64.indexOf(s) === 0) {
602 return signatures[s]; 609 return signatures[s];
603 } 610 }
604 } 611 }
605 } 612 }
606 if (this.imageUrl) { 613 if (this.imageUrl) {
607 var str = this.imageUrl; 614 var str = this.imageUrl;
608 const [baseUrl, imageUrl] = str.split(/,/); 615 const [baseUrl, imageUrl] = str.split(/,/);
609 editNoticeBoard.upload = imageUrl; 616 editNoticeBoard.upload = imageUrl;
610 editNoticeBoard.fileType = detectMimeType(imageUrl); 617 editNoticeBoard.fileType = detectMimeType(imageUrl);
611 } 618 }
612 http() 619 http()
613 .put("/updateEvent", editNoticeBoard) 620 .put("/updateEvent", editNoticeBoard)
614 .then((response) => { 621 .then((response) => {
615 if ((this.snackbar = true)) { 622 if ((this.snackbar = true)) {
616 this.text = "Successfully Edit Existing Notice Data"; 623 this.text = "Successfully Edit Existing Notice Data";
617 } 624 }
618 this.color = "green"; 625 this.color = "green";
619 this.snackbar = true; 626 this.snackbar = true;
620 this.getNoticeDataList(); 627 this.getNoticeDataList();
621 this.close(); 628 this.close();
622 }) 629 })
623 .catch((error) => { 630 .catch((error) => {
624 // console.log(error); 631 // console.log(error);
625 this.snackbar = true; 632 this.snackbar = true;
626 this.text = error.response.data.message; 633 this.text = error.response.data.message;
627 this.color = "red"; 634 this.color = "red";
628 }); 635 });
629 }, 636 },
630 displaySearch() { 637 displaySearch() {
631 (this.show = false), (this.showSearch = true); 638 (this.show = false), (this.showSearch = true);
632 }, 639 },
633 closeSearch() { 640 closeSearch() {
634 this.showSearch = false; 641 this.showSearch = false;
635 this.show = true; 642 this.show = true;
636 this.search = ""; 643 this.search = "";
637 }, 644 },
638 async generatePDF2Canvas(item) { 645 async generatePDF2Canvas(item) {
639 var dataType = ""; 646 var dataType = "";
640 var type = ""; 647 var type = "";
641 if (item.fileType == "image") { 648 if (item.fileType == "image") {
642 dataType = "file.jpg"; 649 dataType = "file.jpg";
643 } else if (item.fileType == "other") { 650 } else if (item.fileType == "other") {
644 dataType = "file.pdf"; 651 dataType = "file.pdf";
645 type = "application/pdf"; 652 type = "application/pdf";
646 } 653 }
647 var FileSaver = require("file-saver"); 654 var FileSaver = require("file-saver");
648 FileSaver.saveAs(item.eventImageUrl, "image.jpg"); 655 FileSaver.saveAs(item.eventImageUrl, "image.jpg");
649 }, 656 },
650 }, 657 },
651 mounted() { 658 mounted() {
652 this.getNoticeDataList(); 659 this.getNoticeDataList();
653 }, 660 },
654 }; 661 };
655 </script> 662 </script>
src/pages/Payroll/salaryTemplate.vue
Diff comments   View file @d10c266
1 <template> 1 <template>
2 <v-container fluid class="body-color" style="box-sizing: border-box;"> 2 <v-container fluid class="body-color" style="box-sizing: border-box;">
3 <!-- ****** EDIT SALARY ****** --> 3 <!-- ****** EDIT SALARY ****** -->
4 <v-dialog v-model="editSalaryDialog"> 4 <v-dialog v-model="editSalaryDialog">
5 <v-card flat class="text-xs-center white--text"> 5 <v-card flat class="text-xs-center white--text">
6 <v-layout> 6 <v-layout>
7 <v-flex xs12 class="card-style pa-2"> 7 <v-flex xs12 class="card-style pa-2">
8 <label class="title text-xs-center">Edit Salary</label> 8 <label class="title text-xs-center">Edit Salary</label>
9 <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon> 9 <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 12
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-container fluid grid-list-md> 14 <v-container fluid grid-list-md>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12 md6> 16 <v-flex xs12 sm12 md6>
17 <v-card flat> 17 <v-card flat>
18 <v-toolbar dark class="card-styles" flat> 18 <v-toolbar dark class="card-styles" flat>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <h3>Salary Template</h3> 20 <h3>Salary Template</h3>
21 <v-spacer></v-spacer> 21 <v-spacer></v-spacer>
22 </v-toolbar> 22 </v-toolbar>
23 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 23 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
24 <v-layout> 24 <v-layout>
25 <v-flex xs4 class="pt-4 subheading"> 25 <v-flex xs4 class="pt-4 subheading">
26 <label class="right hidden-xs-only">Salary Grades :</label> 26 <label class="right hidden-xs-only">Salary Grades :</label>
27 </v-flex> 27 </v-flex>
28 <v-flex xs8 sm7 class="ml-3"> 28 <v-flex xs8 sm7 class="ml-3">
29 <v-flex xs8 sm7 class="ml-3"> 29 <v-flex xs8 sm7 class="ml-3">
30 <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field> 30 <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field>
31 </v-flex> 31 </v-flex>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs4 class="pt-4 subheading"> 35 <v-flex xs4 class="pt-4 subheading">
36 <label class="right">Basic Salary :</label> 36 <label class="right">Basic Salary :</label>
37 </v-flex> 37 </v-flex>
38 <v-flex xs8 sm7 class="ml-3"> 38 <v-flex xs8 sm7 class="ml-3">
39 <v-flex xs8 sm7 class="ml-3"> 39 <v-flex xs8 sm7 class="ml-3">
40 <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field> 40 <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field>
41 </v-flex> 41 </v-flex>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Overtime Rate (Per Hour) :</label> 46 <label class="right">Overtime Rate (Per Hour) :</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8 sm7 class="ml-3"> 48 <v-flex xs8 sm7 class="ml-3">
49 <v-flex xs8 sm7 class="ml-3"> 49 <v-flex xs8 sm7 class="ml-3">
50 <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field> 50 <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field>
51 </v-flex> 51 </v-flex>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 </v-form> 54 </v-form>
55 </v-card> 55 </v-card>
56 </v-flex> 56 </v-flex>
57 <!-- <v-flex xs12 sm12 md5></v-flex> --> 57 <!-- <v-flex xs12 sm12 md5></v-flex> -->
58 <v-flex xs12 sm12 md6> 58 <v-flex xs12 sm12 md6>
59 <v-card flat> 59 <v-card flat>
60 <v-toolbar dark class="card-styles" flat> 60 <v-toolbar dark class="card-styles" flat>
61 <v-spacer></v-spacer> 61 <v-spacer></v-spacer>
62 <h3>Allowances</h3> 62 <h3>Allowances</h3>
63 <v-spacer></v-spacer> 63 <v-spacer></v-spacer>
64 </v-toolbar> 64 </v-toolbar>
65 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> 65 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
66 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 66 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
67 <v-text-field 67 <v-text-field
68 solo 68 solo
69 label="Enter Allowances Label" 69 label="Enter Allowances Label"
70 v-model="editedItem.allowancesName" 70 v-model="editedItem.allowancesName"
71 ></v-text-field> 71 ></v-text-field>
72 </v-flex> 72 </v-flex>
73 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 73 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
74 <v-text-field 74 <v-text-field
75 solo 75 solo
76 v-model="editedItem.allowancesValue" 76 v-model="editedItem.allowancesValue"
77 label="Enter Allowances Value" 77 label="Enter Allowances Value"
78 v-on:keyup="addAllowancesValue" 78 v-on:keyup="addAllowancesValue"
79 ></v-text-field> 79 ></v-text-field>
80 </v-flex> 80 </v-flex>
81 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 81 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
82 <v-btn 82 <v-btn
83 color="white" 83 color="white"
84 round 84 round
85 class="right mt-3" 85 class="right mt-3"
86 @click="deleteallowancesAdd(index)" 86 @click="deleteallowancesAdd(index)"
87 v-if="index != 0" 87 v-if="index != 0"
88 > 88 >
89 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 89 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
90 </v-btn> 90 </v-btn>
91 <v-btn color="white" round class="right mt-3" @click="allowancesAdd"> 91 <v-btn color="white" round class="right mt-3" @click="allowancesAdd">
92 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 92 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
93 </v-btn> 93 </v-btn>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <!-- <v-flex xs12 sm12 md6> --> 96 <!-- <v-flex xs12 sm12 md6> -->
97 <v-card flat> 97 <v-card flat>
98 <v-toolbar dark class="card-styles" flat> 98 <v-toolbar dark class="card-styles" flat>
99 <v-spacer></v-spacer> 99 <v-spacer></v-spacer>
100 <h3>Deduction</h3> 100 <h3>Deduction</h3>
101 <v-spacer></v-spacer> 101 <v-spacer></v-spacer>
102 </v-toolbar> 102 </v-toolbar>
103 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 103 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
104 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 104 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
105 <v-text-field 105 <v-text-field
106 solo 106 solo
107 label="Enter Deduction Label" 107 label="Enter Deduction Label"
108 v-model="editedItem.deductionName" 108 v-model="editedItem.deductionName"
109 ></v-text-field> 109 ></v-text-field>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 111 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
112 <v-text-field 112 <v-text-field
113 solo 113 solo
114 label="Enter Deduction Value" 114 label="Enter Deduction Value"
115 v-model="editedItem.deductionValue" 115 v-model="editedItem.deductionValue"
116 v-on:keyup="addDeductionValue" 116 v-on:keyup="addDeductionValue"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 119 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
120 <v-btn 120 <v-btn
121 color="white" 121 color="white"
122 round 122 round
123 class="right mt-3" 123 class="right mt-3"
124 @click="deletedeductionAdd(index)" 124 @click="deletedeductionAdd(index)"
125 v-if="index != 0" 125 v-if="index != 0"
126 > 126 >
127 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 127 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
128 </v-btn> 128 </v-btn>
129 <v-btn color="white" round class="right mt-3" @click="deductionAdd"> 129 <v-btn color="white" round class="right mt-3" @click="deductionAdd">
130 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 130 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
131 </v-btn> 131 </v-btn>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 </v-card> 134 </v-card>
135 <!-- </v-flex> --> 135 <!-- </v-flex> -->
136 </v-card> 136 </v-card>
137 </v-flex> 137 </v-flex>
138 <!-- <v-flex xs12 sm12 md6> 138 <!-- <v-flex xs12 sm12 md6>
139 <v-card flat> 139 <v-card flat>
140 <v-toolbar dark class="card-styles" flat> 140 <v-toolbar dark class="card-styles" flat>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <h3>Deduction</h3> 142 <h3>Deduction</h3>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 </v-toolbar> 144 </v-toolbar>
145 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 145 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
146 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 146 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
147 <v-text-field 147 <v-text-field
148 solo 148 solo
149 label="Enter Deduction Label" 149 label="Enter Deduction Label"
150 v-model="editedItem.deductionName" 150 v-model="editedItem.deductionName"
151 ></v-text-field> 151 ></v-text-field>
152 </v-flex> 152 </v-flex>
153 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 153 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
154 <v-text-field 154 <v-text-field
155 solo 155 solo
156 label="Enter Deduction Value" 156 label="Enter Deduction Value"
157 v-model="editedItem.deductionValue" 157 v-model="editedItem.deductionValue"
158 v-on:keyup="addDeductionValue" 158 v-on:keyup="addDeductionValue"
159 ></v-text-field> 159 ></v-text-field>
160 </v-flex> 160 </v-flex>
161 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 161 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
162 <v-btn 162 <v-btn
163 color="white" 163 color="white"
164 round 164 round
165 class="right mt-3" 165 class="right mt-3"
166 @click="deletedeductionAdd(index)" 166 @click="deletedeductionAdd(index)"
167 v-if="index != 0" 167 v-if="index != 0"
168 > 168 >
169 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 169 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
170 </v-btn> 170 </v-btn>
171 <v-btn color="white" round class="right mt-3" @click="deductionAdd"> 171 <v-btn color="white" round class="right mt-3" @click="deductionAdd">
172 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 172 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
173 </v-btn> 173 </v-btn>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-card> 176 </v-card>
177 </v-flex>--> 177 </v-flex>-->
178 <!-- <v-flex xs12 sm12 md4></v-flex> --> 178 <!-- <v-flex xs12 sm12 md4></v-flex> -->
179 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 179 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
180 <v-card flat> 180 <v-card flat>
181 <v-toolbar dark class="card-styles" flat> 181 <v-toolbar dark class="card-styles" flat>
182 <v-spacer></v-spacer> 182 <v-spacer></v-spacer>
183 <h3>Total Salary Details</h3> 183 <h3>Total Salary Details</h3>
184 <v-spacer></v-spacer> 184 <v-spacer></v-spacer>
185 </v-toolbar> 185 </v-toolbar>
186 <v-layout> 186 <v-layout>
187 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 187 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
188 <v-text-field solo value="Gross Salary"></v-text-field> 188 <v-text-field solo value="Gross Salary"></v-text-field>
189 </v-flex> 189 </v-flex>
190 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 190 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
191 <v-flex xs8 sm7 class="ml-3"> 191 <v-flex xs8 sm7 class="ml-3">
192 <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field> 192 <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field>
193 </v-flex> 193 </v-flex>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 <v-layout> 196 <v-layout>
197 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 197 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
198 <v-text-field solo value="Total Deduction"></v-text-field> 198 <v-text-field solo value="Total Deduction"></v-text-field>
199 </v-flex> 199 </v-flex>
200 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 200 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
201 <v-flex xs8 sm7 class="ml-3"> 201 <v-flex xs8 sm7 class="ml-3">
202 <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field> 202 <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field>
203 </v-flex> 203 </v-flex>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 <v-layout> 206 <v-layout>
207 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 207 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
208 <v-text-field solo value="Net Salary"></v-text-field> 208 <v-text-field solo value="Net Salary"></v-text-field>
209 </v-flex> 209 </v-flex>
210 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 210 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
211 <v-flex xs8 sm7 class="ml-3"> 211 <v-flex xs8 sm7 class="ml-3">
212 <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field> 212 <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field>
213 </v-flex> 213 </v-flex>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-card> 216 </v-card>
217 <v-layout> 217 <v-layout>
218 <v-flex xs12> 218 <v-flex xs12>
219 <v-card-actions> 219 <v-card-actions>
220 <v-spacer class="hidden-xs-only"></v-spacer> 220 <v-spacer class="hidden-xs-only"></v-spacer>
221 <v-btn 221 <v-btn
222 color="open-dialog-button" 222 color="open-dialog-button"
223 dark 223 dark
224 class="right mt-3" 224 class="right add-button"
225 @click="save" 225 @click="save"
226 >Update Salary Template</v-btn> 226 >Update Salary Template</v-btn>
227 </v-card-actions> 227 </v-card-actions>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-container> 232 </v-container>
233 </v-flex> 233 </v-flex>
234 </v-card> 234 </v-card>
235 </v-dialog> 235 </v-dialog>
236 236
237 <!-- ****** PROFILE VIEW ****** --> 237 <!-- ****** PROFILE VIEW ****** -->
238 238
239 <v-dialog v-model="profileSalaryDialog"> 239 <v-dialog v-model="profileSalaryDialog">
240 <v-card flat class="text-xs-center white--text"> 240 <v-card flat class="text-xs-center white--text">
241 <v-layout> 241 <v-layout>
242 <v-flex xs12 class="card-style pa-2"> 242 <v-flex xs12 class="card-style pa-2">
243 <label class="title text-xs-center">View Salary</label> 243 <label class="title text-xs-center">View Salary</label>
244 <v-icon 244 <v-icon
245 size="24" 245 size="24"
246 color="white" 246 color="white"
247 class="right" 247 class="right"
248 @click="profileSalaryDialog = false" 248 @click="profileSalaryDialog = false"
249 >cancel</v-icon> 249 >cancel</v-icon>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 252
253 <v-flex xs12 sm12> 253 <v-flex xs12 sm12>
254 <v-container fluid grid-list-md> 254 <v-container fluid grid-list-md>
255 <v-layout wrap> 255 <v-layout wrap>
256 <v-flex xs12 sm12 md6> 256 <v-flex xs12 sm12 md6>
257 <v-card flat> 257 <v-card flat>
258 <v-toolbar dark class="card-styles" flat> 258 <v-toolbar dark class="card-styles" flat>
259 <v-spacer></v-spacer> 259 <v-spacer></v-spacer>
260 <h3>Salary Template</h3> 260 <h3>Salary Template</h3>
261 <v-spacer></v-spacer> 261 <v-spacer></v-spacer>
262 </v-toolbar> 262 </v-toolbar>
263 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 263 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
264 <v-layout> 264 <v-layout>
265 <v-flex xs4 class="pt-4 subheading"> 265 <v-flex xs4 class="pt-4 subheading">
266 <label class="right hidden-xs-only">Salary Grades :</label> 266 <label class="right hidden-xs-only">Salary Grades :</label>
267 </v-flex> 267 </v-flex>
268 <v-flex xs8 sm7 class="ml-3"> 268 <v-flex xs8 sm7 class="ml-3">
269 <v-flex xs8 sm7 class="ml-3"> 269 <v-flex xs8 sm7 class="ml-3">
270 <v-text-field 270 <v-text-field
271 :rules="salaryRules" 271 :rules="salaryRules"
272 v-model="editedItem.salaryGrades" 272 v-model="editedItem.salaryGrades"
273 readonly 273 readonly
274 ></v-text-field> 274 ></v-text-field>
275 </v-flex> 275 </v-flex>
276 </v-flex> 276 </v-flex>
277 </v-layout> 277 </v-layout>
278 <v-layout> 278 <v-layout>
279 <v-flex xs4 class="pt-4 subheading"> 279 <v-flex xs4 class="pt-4 subheading">
280 <label class="right">Basic Salary :</label> 280 <label class="right">Basic Salary :</label>
281 </v-flex> 281 </v-flex>
282 <v-flex xs8 sm7 class="ml-3"> 282 <v-flex xs8 sm7 class="ml-3">
283 <v-flex xs8 sm7 class="ml-3"> 283 <v-flex xs8 sm7 class="ml-3">
284 <v-text-field 284 <v-text-field
285 :rules="basicRules" 285 :rules="basicRules"
286 v-model="editedItem.basicSalary" 286 v-model="editedItem.basicSalary"
287 readonly 287 readonly
288 ></v-text-field> 288 ></v-text-field>
289 </v-flex> 289 </v-flex>
290 </v-flex> 290 </v-flex>
291 </v-layout> 291 </v-layout>
292 <v-layout> 292 <v-layout>
293 <v-flex xs4 class="pt-4 subheading"> 293 <v-flex xs4 class="pt-4 subheading">
294 <label class="right">Overtime Rate (Per Hour) :</label> 294 <label class="right">Overtime Rate (Per Hour) :</label>
295 </v-flex> 295 </v-flex>
296 <v-flex xs8 sm7 class="ml-3"> 296 <v-flex xs8 sm7 class="ml-3">
297 <v-flex xs8 sm7 class="ml-3"> 297 <v-flex xs8 sm7 class="ml-3">
298 <v-text-field 298 <v-text-field
299 :rules="overtimeRules" 299 :rules="overtimeRules"
300 v-model="editedItem.overtimeRate" 300 v-model="editedItem.overtimeRate"
301 readonly 301 readonly
302 ></v-text-field> 302 ></v-text-field>
303 </v-flex> 303 </v-flex>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 </v-form> 306 </v-form>
307 </v-card> 307 </v-card>
308 </v-flex> 308 </v-flex>
309 <!-- <v-flex xs12 sm12 md5></v-flex> --> 309 <!-- <v-flex xs12 sm12 md5></v-flex> -->
310 <v-flex xs12 sm12 md6> 310 <v-flex xs12 sm12 md6>
311 <v-card flat> 311 <v-card flat>
312 <v-toolbar dark class="card-styles" flat> 312 <v-toolbar dark class="card-styles" flat>
313 <v-spacer></v-spacer> 313 <v-spacer></v-spacer>
314 <h3>Allowances</h3> 314 <h3>Allowances</h3>
315 <v-spacer></v-spacer> 315 <v-spacer></v-spacer>
316 </v-toolbar> 316 </v-toolbar>
317 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> 317 <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
318 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 318 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
319 <v-text-field 319 <v-text-field
320 solo 320 solo
321 readonly 321 readonly
322 label="Enter Allowances Label" 322 label="Enter Allowances Label"
323 v-model="editedItem.allowancesName" 323 v-model="editedItem.allowancesName"
324 ></v-text-field> 324 ></v-text-field>
325 </v-flex> 325 </v-flex>
326 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 326 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
327 <v-text-field 327 <v-text-field
328 solo 328 solo
329 readonly 329 readonly
330 v-model="editedItem.allowancesValue" 330 v-model="editedItem.allowancesValue"
331 label="Enter Allowances Value" 331 label="Enter Allowances Value"
332 ></v-text-field> 332 ></v-text-field>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
335 <!-- <v-flex xs12 sm12 md6> --> 335 <!-- <v-flex xs12 sm12 md6> -->
336 <v-card flat> 336 <v-card flat>
337 <v-toolbar dark class="card-styles" flat> 337 <v-toolbar dark class="card-styles" flat>
338 <v-spacer></v-spacer> 338 <v-spacer></v-spacer>
339 <h3>Deduction</h3> 339 <h3>Deduction</h3>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 </v-toolbar> 341 </v-toolbar>
342 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 342 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
343 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 343 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
344 <v-text-field 344 <v-text-field
345 solo 345 solo
346 readonly 346 readonly
347 label="Enter Deduction Label" 347 label="Enter Deduction Label"
348 v-model="editedItem.deductionName" 348 v-model="editedItem.deductionName"
349 ></v-text-field> 349 ></v-text-field>
350 </v-flex> 350 </v-flex>
351 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 351 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
352 <v-text-field 352 <v-text-field
353 solo 353 solo
354 readonly 354 readonly
355 label="Enter Deduction Value" 355 label="Enter Deduction Value"
356 v-model="editedItem.deductionValue" 356 v-model="editedItem.deductionValue"
357 ></v-text-field> 357 ></v-text-field>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 </v-card> 360 </v-card>
361 <!-- </v-flex> --> 361 <!-- </v-flex> -->
362 </v-card> 362 </v-card>
363 </v-flex> 363 </v-flex>
364 <!-- <v-flex xs12 sm12 md6> 364 <!-- <v-flex xs12 sm12 md6>
365 <v-card flat> 365 <v-card flat>
366 <v-toolbar dark class="card-styles" flat> 366 <v-toolbar dark class="card-styles" flat>
367 <v-spacer></v-spacer> 367 <v-spacer></v-spacer>
368 <h3>Deduction</h3> 368 <h3>Deduction</h3>
369 <v-spacer></v-spacer> 369 <v-spacer></v-spacer>
370 </v-toolbar> 370 </v-toolbar>
371 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> 371 <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
372 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 372 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
373 <v-text-field 373 <v-text-field
374 solo 374 solo
375 label="Enter Deduction Label" 375 label="Enter Deduction Label"
376 v-model="editedItem.deductionName" 376 v-model="editedItem.deductionName"
377 ></v-text-field> 377 ></v-text-field>
378 </v-flex> 378 </v-flex>
379 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 379 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
380 <v-text-field 380 <v-text-field
381 solo 381 solo
382 label="Enter Deduction Value" 382 label="Enter Deduction Value"
383 v-model="editedItem.deductionValue" 383 v-model="editedItem.deductionValue"
384 ></v-text-field> 384 ></v-text-field>
385 </v-flex> 385 </v-flex>
386 </v-layout> 386 </v-layout>
387 </v-card> 387 </v-card>
388 </v-flex>--> 388 </v-flex>-->
389 <v-flex xs12 sm12 md4></v-flex> 389 <v-flex xs12 sm12 md4></v-flex>
390 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 390 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
391 <v-card flat> 391 <v-card flat>
392 <v-toolbar dark class="card-styles" flat> 392 <v-toolbar dark class="card-styles" flat>
393 <v-spacer></v-spacer> 393 <v-spacer></v-spacer>
394 <h3>Total Salary Details</h3> 394 <h3>Total Salary Details</h3>
395 <v-spacer></v-spacer> 395 <v-spacer></v-spacer>
396 </v-toolbar> 396 </v-toolbar>
397 <v-layout> 397 <v-layout>
398 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 398 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
399 <v-text-field solo value="Gross Salary"></v-text-field> 399 <v-text-field solo value="Gross Salary"></v-text-field>
400 </v-flex> 400 </v-flex>
401 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 401 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
402 <v-flex xs8 sm7 class="ml-3"> 402 <v-flex xs8 sm7 class="ml-3">
403 <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field> 403 <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field>
404 </v-flex> 404 </v-flex>
405 </v-flex> 405 </v-flex>
406 </v-layout> 406 </v-layout>
407 <v-layout> 407 <v-layout>
408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
409 <v-text-field solo value="Total Deduction"></v-text-field> 409 <v-text-field solo value="Total Deduction"></v-text-field>
410 </v-flex> 410 </v-flex>
411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
412 <v-flex xs8 sm7 class="ml-3"> 412 <v-flex xs8 sm7 class="ml-3">
413 <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field> 413 <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field>
414 </v-flex> 414 </v-flex>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 <v-layout> 417 <v-layout>
418 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 418 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
419 <v-text-field solo value="Net Salary"></v-text-field> 419 <v-text-field solo value="Net Salary"></v-text-field>
420 </v-flex> 420 </v-flex>
421 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 421 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
422 <v-flex xs8 sm7 class="ml-3"> 422 <v-flex xs8 sm7 class="ml-3">
423 <b> 423 <b>
424 <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field> 424 <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field>
425 </b> 425 </b>
426 </v-flex> 426 </v-flex>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-card> 429 </v-card>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 </v-container> 432 </v-container>
433 </v-flex> 433 </v-flex>
434 </v-card> 434 </v-card>
435 </v-dialog> 435 </v-dialog>
436 <!-- ****** EXAM TABLE****** --> 436 <!-- ****** EXAM TABLE****** -->
437 437
438 <v-toolbar color="transparent" flat> 438 <v-toolbar color="transparent" flat>
439 <v-btn 439 <v-btn
440 fab 440 fab
441 dark 441 dark
442 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 442 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
443 small 443 small
444 @click="addSalaryDialog = true" 444 @click="addSalaryDialog = true"
445 > 445 >
446 <v-icon dark>add</v-icon> 446 <v-icon dark>add</v-icon>
447 </v-btn> 447 </v-btn>
448 <v-btn 448 <v-btn
449 round 449 round
450 class="open-dialog-button hidden-sm-only hidden-xs-only" 450 class="open-dialog-button hidden-sm-only hidden-xs-only"
451 dark 451 dark
452 @click="addSalaryDialog = true" 452 @click="addSalaryDialog = true"
453 > 453 >
454 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary 454 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary
455 </v-btn> 455 </v-btn>
456 <v-spacer></v-spacer> 456 <v-spacer></v-spacer>
457 <v-card-title class="body-1" v-show="show"> 457 <v-card-title class="body-1" v-show="show">
458 <v-btn icon large flat @click="displaySearch"> 458 <v-btn icon large flat @click="displaySearch">
459 <v-avatar size="27"> 459 <v-avatar size="27">
460 <img src="/static/icon/search.png" alt="icon" /> 460 <img src="/static/icon/search.png" alt="icon" />
461 </v-avatar> 461 </v-avatar>
462 </v-btn> 462 </v-btn>
463 </v-card-title> 463 </v-card-title>
464 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 464 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
465 <v-layout> 465 <v-layout>
466 <v-text-field 466 <v-text-field
467 autofocus 467 autofocus
468 v-model="search" 468 v-model="search"
469 label="Search" 469 label="Search"
470 prepend-inner-icon="search" 470 prepend-inner-icon="search"
471 color="primary" 471 color="primary"
472 ></v-text-field> 472 ></v-text-field>
473 <v-icon @click="closeSearch" color="error">close</v-icon> 473 <v-icon @click="closeSearch" color="error">close</v-icon>
474 </v-layout> 474 </v-layout>
475 </v-flex> 475 </v-flex>
476 </v-toolbar> 476 </v-toolbar>
477 <v-data-table 477 <v-data-table
478 :headers="headers" 478 :headers="headers"
479 :items="salaryData" 479 :items="salaryData"
480 :pagination.sync="pagination" 480 :pagination.sync="pagination"
481 :search="search" 481 :search="search"
482 > 482 >
483 <template slot="items" slot-scope="props"> 483 <template slot="items" slot-scope="props">
484 <tr class="tr"> 484 <tr class="tr">
485 <td class="td td-row">{{ props.index + 1}}</td> 485 <td class="td td-row">{{ props.index + 1}}</td>
486 <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td> 486 <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td>
487 <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td> 487 <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td>
488 <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> 488 <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td>
489 <td class="td td-row text-xs-center"> 489 <td class="td td-row text-xs-center">
490 <span> 490 <span>
491 <v-tooltip top> 491 <v-tooltip top>
492 <img 492 <img
493 slot="activator" 493 slot="activator"
494 style="cursor:pointer; width:25px; height:25px; " 494 style="cursor:pointer; width:25px; height:25px; "
495 class="mr-3" 495 class="mr-3"
496 @click="profile(props.item)" 496 @click="profile(props.item)"
497 src="/static/icon/view.png" 497 src="/static/icon/view.png"
498 /> 498 />
499 <span>View</span> 499 <span>View</span>
500 </v-tooltip> 500 </v-tooltip>
501 <v-tooltip top> 501 <v-tooltip top>
502 <img 502 <img
503 slot="activator" 503 slot="activator"
504 style="cursor:pointer; width:20px; height:18px; " 504 style="cursor:pointer; width:20px; height:18px; "
505 class="mr-3" 505 class="mr-3"
506 @click="editItem(props.item)" 506 @click="editItem(props.item)"
507 src="/static/icon/edit.png" 507 src="/static/icon/edit.png"
508 /> 508 />
509 <span>Edit</span> 509 <span>Edit</span>
510 </v-tooltip> 510 </v-tooltip>
511 <v-tooltip top> 511 <v-tooltip top>
512 <img 512 <img
513 slot="activator" 513 slot="activator"
514 style="cursor:pointer; width:20px; height:20px; " 514 style="cursor:pointer; width:20px; height:20px; "
515 class="mr-3" 515 class="mr-3"
516 @click="deleteItem(props.item)" 516 @click="deleteItem(props.item)"
517 src="/static/icon/delete.png" 517 src="/static/icon/delete.png"
518 /> 518 />
519 <span>Delete</span> 519 <span>Delete</span>
520 </v-tooltip> 520 </v-tooltip>
521 </span> 521 </span>
522 </td> 522 </td>
523 </tr> 523 </tr>
524 </template> 524 </template>
525 <v-alert 525 <v-alert
526 slot="no-results" 526 slot="no-results"
527 :value="true" 527 :value="true"
528 color="error" 528 color="error"
529 icon="warning" 529 icon="warning"
530 >Your search for "{{ search }}" found no results.</v-alert> 530 >Your search for "{{ search }}" found no results.</v-alert>
531 </v-data-table> 531 </v-data-table>
532 532
533 <!-- ****** ADD SALARY ****** --> 533 <!-- ****** ADD SALARY ****** -->
534 <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog"> 534 <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog">
535 <v-card flat class="text-xs-center white--text"> 535 <v-card flat class="text-xs-center white--text">
536 <v-layout> 536 <v-layout>
537 <v-flex xs12 class="card-style pa-2"> 537 <v-flex xs12 class="card-style pa-2">
538 <label class="title text-xs-center">Add Salary</label> 538 <label class="title text-xs-center">Add Salary</label>
539 <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon> 539 <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon>
540 </v-flex> 540 </v-flex>
541 </v-layout> 541 </v-layout>
542 542
543 <v-flex xs12 sm12> 543 <v-flex xs12 sm12>
544 <v-container fluid grid-list-md> 544 <v-container fluid grid-list-md>
545 <v-layout wrap> 545 <v-layout wrap>
546 <v-flex xs12 sm12 md6> 546 <v-flex xs12 sm12 md6>
547 <v-card flat> 547 <v-card flat>
548 <v-toolbar dark class="card-styles" flat> 548 <v-toolbar dark class="card-styles" flat>
549 <v-spacer></v-spacer> 549 <v-spacer></v-spacer>
550 <h3>Salary Template</h3> 550 <h3>Salary Template</h3>
551 <v-spacer></v-spacer> 551 <v-spacer></v-spacer>
552 </v-toolbar> 552 </v-toolbar>
553 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 553 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
554 <v-layout> 554 <v-layout>
555 <v-flex xs4 class="pt-4 subheading"> 555 <v-flex xs4 class="pt-4 subheading">
556 <label class="right hidden-xs-only">Salary Grades :</label> 556 <label class="right hidden-xs-only">Salary Grades :</label>
557 </v-flex> 557 </v-flex>
558 <v-flex xs8 sm7 class="ml-3"> 558 <v-flex xs8 sm7 class="ml-3">
559 <v-flex xs8 sm7 class="ml-3"> 559 <v-flex xs8 sm7 class="ml-3">
560 <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field> 560 <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field>
561 </v-flex> 561 </v-flex>
562 </v-flex> 562 </v-flex>
563 </v-layout> 563 </v-layout>
564 <v-layout> 564 <v-layout>
565 <v-flex xs4 class="pt-4 subheading"> 565 <v-flex xs4 class="pt-4 subheading">
566 <label class="right">Basic Salary :</label> 566 <label class="right">Basic Salary :</label>
567 </v-flex> 567 </v-flex>
568 <v-flex xs8 sm7 class="ml-3"> 568 <v-flex xs8 sm7 class="ml-3">
569 <v-flex xs8 sm7 class="ml-3"> 569 <v-flex xs8 sm7 class="ml-3">
570 <v-text-field 570 <v-text-field
571 :rules="basicRules" 571 :rules="basicRules"
572 v-on:keyup="addSalary" 572 v-on:keyup="addSalary"
573 v-model="salaryType.basicSalary" 573 v-model="salaryType.basicSalary"
574 ></v-text-field> 574 ></v-text-field>
575 </v-flex> 575 </v-flex>
576 </v-flex> 576 </v-flex>
577 </v-layout> 577 </v-layout>
578 <v-layout> 578 <v-layout>
579 <v-flex xs4 class="pt-4 subheading"> 579 <v-flex xs4 class="pt-4 subheading">
580 <label class="right">Overtime Rate (Per Hour) :</label> 580 <label class="right">Overtime Rate (Per Hour) :</label>
581 </v-flex> 581 </v-flex>
582 <v-flex xs8 sm7 class="ml-3"> 582 <v-flex xs8 sm7 class="ml-3">
583 <v-flex xs8 sm7 class="ml-3"> 583 <v-flex xs8 sm7 class="ml-3">
584 <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field> 584 <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field>
585 </v-flex> 585 </v-flex>
586 </v-flex> 586 </v-flex>
587 </v-layout> 587 </v-layout>
588 </v-form> 588 </v-form>
589 </v-card> 589 </v-card>
590 </v-flex> 590 </v-flex>
591 <!-- <v-flex xs12 sm12 md5></v-flex> --> 591 <!-- <v-flex xs12 sm12 md5></v-flex> -->
592 <v-flex xs12 sm12 md6> 592 <v-flex xs12 sm12 md6>
593 <v-card flat> 593 <v-card flat>
594 <v-toolbar dark class="card-styles" flat> 594 <v-toolbar dark class="card-styles" flat>
595 <v-spacer></v-spacer> 595 <v-spacer></v-spacer>
596 <h3>Allowances</h3> 596 <h3>Allowances</h3>
597 <v-spacer></v-spacer> 597 <v-spacer></v-spacer>
598 </v-toolbar> 598 </v-toolbar>
599 <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index"> 599 <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index">
600 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 600 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
601 <v-text-field 601 <v-text-field
602 solo 602 solo
603 label="Enter Allowances Label" 603 label="Enter Allowances Label"
604 v-model="salaryType.allowancesName" 604 v-model="salaryType.allowancesName"
605 ></v-text-field> 605 ></v-text-field>
606 </v-flex> 606 </v-flex>
607 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 607 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
608 <v-text-field 608 <v-text-field
609 solo 609 solo
610 v-model="salaryType.allowancesValue" 610 v-model="salaryType.allowancesValue"
611 label="Enter Allowances Value" 611 label="Enter Allowances Value"
612 v-on:keyup="addAllowances" 612 v-on:keyup="addAllowances"
613 ></v-text-field> 613 ></v-text-field>
614 </v-flex> 614 </v-flex>
615 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 615 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
616 <v-btn 616 <v-btn
617 color="white" 617 color="white"
618 round 618 round
619 class="right mt-3" 619 class="right mt-3"
620 @click="deleteSelectAllowances(index)" 620 @click="deleteSelectAllowances(index)"
621 v-if="index != 0" 621 v-if="index != 0"
622 > 622 >
623 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 623 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
624 </v-btn> 624 </v-btn>
625 <v-btn color="white" round class="right mt-3" @click="selectAllowances"> 625 <v-btn color="white" round class="right mt-3" @click="selectAllowances">
626 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 626 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
627 </v-btn> 627 </v-btn>
628 </v-flex> 628 </v-flex>
629 </v-layout> 629 </v-layout>
630 <!-- <v-flex xs12 sm12 md6> --> 630 <!-- <v-flex xs12 sm12 md6> -->
631 <v-card flat> 631 <v-card flat>
632 <v-toolbar dark class="card-styles" flat> 632 <v-toolbar dark class="card-styles" flat>
633 <v-spacer></v-spacer> 633 <v-spacer></v-spacer>
634 <h3>Deduction</h3> 634 <h3>Deduction</h3>
635 <v-spacer></v-spacer> 635 <v-spacer></v-spacer>
636 </v-toolbar> 636 </v-toolbar>
637 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> 637 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
638 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 638 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
639 <v-text-field 639 <v-text-field
640 solo 640 solo
641 label="Enter Deduction Label" 641 label="Enter Deduction Label"
642 v-model="salaryType.deductionName" 642 v-model="salaryType.deductionName"
643 ></v-text-field> 643 ></v-text-field>
644 </v-flex> 644 </v-flex>
645 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 645 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
646 <v-text-field 646 <v-text-field
647 solo 647 solo
648 label="Enter Deduction Value" 648 label="Enter Deduction Value"
649 v-model="salaryType.deductionValue" 649 v-model="salaryType.deductionValue"
650 v-on:keyup="addDeduction" 650 v-on:keyup="addDeduction"
651 ></v-text-field> 651 ></v-text-field>
652 </v-flex> 652 </v-flex>
653 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 653 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
654 <v-btn 654 <v-btn
655 color="white" 655 color="white"
656 round 656 round
657 class="right mt-3" 657 class="right mt-3"
658 @click="deleteSelectDeduction(index)" 658 @click="deleteSelectDeduction(index)"
659 v-if="index != 0" 659 v-if="index != 0"
660 > 660 >
661 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 661 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
662 </v-btn> 662 </v-btn>
663 <v-btn color="white" round class="right mt-3" @click="selectDeduction"> 663 <v-btn color="white" round class="right mt-3" @click="selectDeduction">
664 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 664 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
665 </v-btn> 665 </v-btn>
666 </v-flex> 666 </v-flex>
667 </v-layout> 667 </v-layout>
668 </v-card> 668 </v-card>
669 <!-- </v-flex> --> 669 <!-- </v-flex> -->
670 </v-card> 670 </v-card>
671 </v-flex> 671 </v-flex>
672 <!-- <v-flex xs12 sm12 md6> 672 <!-- <v-flex xs12 sm12 md6>
673 <v-card flat> 673 <v-card flat>
674 <v-toolbar dark class="card-styles" flat> 674 <v-toolbar dark class="card-styles" flat>
675 <v-spacer></v-spacer> 675 <v-spacer></v-spacer>
676 <h3>Deduction</h3> 676 <h3>Deduction</h3>
677 <v-spacer></v-spacer> 677 <v-spacer></v-spacer>
678 </v-toolbar> 678 </v-toolbar>
679 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> 679 <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
680 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 680 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
681 <v-text-field 681 <v-text-field
682 solo 682 solo
683 label="Enter Deduction Label" 683 label="Enter Deduction Label"
684 v-model="salaryType.deductionName" 684 v-model="salaryType.deductionName"
685 ></v-text-field> 685 ></v-text-field>
686 </v-flex> 686 </v-flex>
687 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 687 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
688 <v-text-field 688 <v-text-field
689 solo 689 solo
690 label="Enter Deduction Value" 690 label="Enter Deduction Value"
691 v-model="salaryType.deductionValue" 691 v-model="salaryType.deductionValue"
692 v-on:keyup="addDeduction" 692 v-on:keyup="addDeduction"
693 ></v-text-field> 693 ></v-text-field>
694 </v-flex> 694 </v-flex>
695 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> 695 <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
696 <v-btn 696 <v-btn
697 color="white" 697 color="white"
698 round 698 round
699 class="right mt-3" 699 class="right mt-3"
700 @click="deleteSelectDeduction(index)" 700 @click="deleteSelectDeduction(index)"
701 v-if="index != 0" 701 v-if="index != 0"
702 > 702 >
703 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> 703 <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
704 </v-btn> 704 </v-btn>
705 <v-btn color="white" round class="right mt-3" @click="selectDeduction"> 705 <v-btn color="white" round class="right mt-3" @click="selectDeduction">
706 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> 706 <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
707 </v-btn> 707 </v-btn>
708 </v-flex> 708 </v-flex>
709 </v-layout> 709 </v-layout>
710 </v-card> 710 </v-card>
711 </v-flex>--> 711 </v-flex>-->
712 <!-- <v-flex xs12 sm12 md4></v-flex> --> 712 <!-- <v-flex xs12 sm12 md4></v-flex> -->
713 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 713 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
714 <v-card flat> 714 <v-card flat>
715 <v-toolbar dark class="card-styles" flat> 715 <v-toolbar dark class="card-styles" flat>
716 <v-spacer></v-spacer> 716 <v-spacer></v-spacer>
717 <h3>Total Salary Details</h3> 717 <h3>Total Salary Details</h3>
718 <v-spacer></v-spacer> 718 <v-spacer></v-spacer>
719 </v-toolbar> 719 </v-toolbar>
720 <v-layout> 720 <v-layout>
721 <v-flex xs4 class="pt-4 subheading"> 721 <v-flex xs4 class="pt-4 subheading">
722 <v-text-field solo value="Gross Salary"></v-text-field> 722 <v-text-field solo value="Gross Salary"></v-text-field>
723 </v-flex> 723 </v-flex>
724 <v-flex xs8 sm7 class="ml-3"> 724 <v-flex xs8 sm7 class="ml-3">
725 <v-flex xs8 sm7 class="ml-3"> 725 <v-flex xs8 sm7 class="ml-3">
726 <v-text-field v-model="grossSalary" box readonly></v-text-field> 726 <v-text-field v-model="grossSalary" box readonly></v-text-field>
727 </v-flex> 727 </v-flex>
728 </v-flex> 728 </v-flex>
729 </v-layout> 729 </v-layout>
730 <v-layout> 730 <v-layout>
731 <v-flex xs4 class="pt-4 subheading"> 731 <v-flex xs4 class="pt-4 subheading">
732 <v-text-field solo value="Total Deduction"></v-text-field> 732 <v-text-field solo value="Total Deduction"></v-text-field>
733 </v-flex> 733 </v-flex>
734 <v-flex xs8 sm7 class="ml-3"> 734 <v-flex xs8 sm7 class="ml-3">
735 <v-flex xs8 sm7 class="ml-3"> 735 <v-flex xs8 sm7 class="ml-3">
736 <v-text-field v-model="totalDeduction" box readonly></v-text-field> 736 <v-text-field v-model="totalDeduction" box readonly></v-text-field>
737 </v-flex> 737 </v-flex>
738 </v-flex> 738 </v-flex>
739 </v-layout> 739 </v-layout>
740 <v-layout> 740 <v-layout>
741 <v-flex xs4 class="pt-4 subheading"> 741 <v-flex xs4 class="pt-4 subheading">
742 <v-text-field solo value="Net Salary"></v-text-field> 742 <v-text-field solo value="Net Salary"></v-text-field>
743 </v-flex> 743 </v-flex>
744 <v-flex xs8 sm7 class="ml-3"> 744 <v-flex xs8 sm7 class="ml-3">
745 <v-flex xs8 sm7 class="ml-3"> 745 <v-flex xs8 sm7 class="ml-3">
746 <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field> 746 <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field>
747 </v-flex> 747 </v-flex>
748 </v-flex> 748 </v-flex>
749 </v-layout> 749 </v-layout>
750 </v-card> 750 </v-card>
751 <v-layout> 751 <v-layout>
752 <v-flex xs12> 752 <v-flex xs12>
753 <v-card-actions> 753 <v-card-actions>
754 <v-spacer class="hidden-xs-only"></v-spacer> 754 <v-spacer class="hidden-xs-only"></v-spacer>
755 <v-btn 755 <v-btn
756 color="open-dialog-button" 756 color="open-dialog-button"
757 dark 757 dark
758 class="right mt-3" 758 class="right add-button"
759 @click="submit" 759 @click="submit"
760 >Add Salary Template</v-btn> 760 >Add Salary Template</v-btn>
761 </v-card-actions> 761 </v-card-actions>
762 </v-flex> 762 </v-flex>
763 </v-layout> 763 </v-layout>
764 </v-flex> 764 </v-flex>
765 </v-layout> 765 </v-layout>
766 </v-container> 766 </v-container>
767 </v-flex> 767 </v-flex>
768 </v-card> 768 </v-card>
769 </v-dialog> 769 </v-dialog>
770 <v-snackbar 770 <v-snackbar
771 :timeout="timeout" 771 :timeout="timeout"
772 :top="y === 'top'" 772 :top="y === 'top'"
773 :right="x === 'right'" 773 :right="x === 'right'"
774 :vertical="mode === 'vertical'" 774 :vertical="mode === 'vertical'"
775 v-model="snackbar" 775 v-model="snackbar"
776 :color="color" 776 :color="color"
777 >{{ text }}</v-snackbar> 777 >{{ text }}</v-snackbar>
778 <div class="loader" v-if="showLoader"> 778 <div class="loader" v-if="showLoader">
779 <v-progress-circular indeterminate color="white"></v-progress-circular> 779 <v-progress-circular indeterminate color="white"></v-progress-circular>
780 </div> 780 </div>
781 </v-container> 781 </v-container>
782 </template> 782 </template>
783 783
784 <script> 784 <script>
785 import http from "@/Services/http.js"; 785 import http from "@/Services/http.js";
786 import moment from "moment"; 786 import moment from "moment";
787 787
788 export default { 788 export default {
789 data: () => ({ 789 data: () => ({
790 snackbar: false, 790 snackbar: false,
791 date: null, 791 date: null,
792 color: "", 792 color: "",
793 y: "top", 793 y: "top",
794 x: "right", 794 x: "right",
795 mode: "", 795 mode: "",
796 timeout: 10000, 796 timeout: 10000,
797 text: "", 797 text: "",
798 show: true, 798 show: true,
799 showSearch: false, 799 showSearch: false,
800 addSalaryDialog: false, 800 addSalaryDialog: false,
801 loading: false, 801 loading: false,
802 loadingSearch: false, 802 loadingSearch: false,
803 search: "", 803 search: "",
804 showLoader: false, 804 showLoader: false,
805 editSalaryDialog: false, 805 editSalaryDialog: false,
806 profileSalaryDialog: false, 806 profileSalaryDialog: false,
807 valid: true, 807 valid: true,
808 disabled: true, 808 disabled: true,
809 showAllowances: false, 809 showAllowances: false,
810 showDeduction: false, 810 showDeduction: false,
811 pagination: { 811 pagination: {
812 rowsPerPage: 10, 812 rowsPerPage: 10,
813 }, 813 },
814 salaryTypes: [], 814 salaryTypes: [],
815 salaryTypeData: [ 815 salaryTypeData: [
816 { 816 {
817 allowancesValue: "", 817 allowancesValue: "",
818 allowancesName: "House Rent", 818 allowancesName: "House Rent",
819 totalAllowances: 0, 819 totalAllowances: 0,
820 }, 820 },
821 ], 821 ],
822 salaryTypeDeductionData: [ 822 salaryTypeDeductionData: [
823 { 823 {
824 deductionValue: "", 824 deductionValue: "",
825 deductionName: "Provident fund", 825 deductionName: "Provident fund",
826 totalDeductions: 0, 826 totalDeductions: 0,
827 }, 827 },
828 ], 828 ],
829 grossSalary: 0, 829 grossSalary: 0,
830 totalDeduction: 0, 830 totalDeduction: 0,
831 salaryType: { 831 salaryType: {
832 netSalary: 0, 832 netSalary: 0,
833 salaryGrades: "", 833 salaryGrades: "",
834 allowancesValue: "", 834 allowancesValue: "",
835 deductionValue: "", 835 deductionValue: "",
836 overtimeRate: "", 836 overtimeRate: "",
837 }, 837 },
838 838
839 basicRules: [(v) => !!v || " Basic Salary is required"], 839 basicRules: [(v) => !!v || " Basic Salary is required"],
840 salaryRules: [(v) => !!v || "Salary Grades is required"], 840 salaryRules: [(v) => !!v || "Salary Grades is required"],
841 overtimeRules: [(v) => !!v || "Overtime Rate is required"], 841 overtimeRules: [(v) => !!v || "Overtime Rate is required"],
842 842
843 headers: [ 843 headers: [
844 { 844 {
845 align: "", 845 align: "",
846 text: "No", 846 text: "No",
847 sortable: false, 847 sortable: false,
848 value: "No", 848 value: "No",
849 }, 849 },
850 { 850 {
851 text: "Salary Grades", 851 text: "Salary Grades",
852 value: "salaryGrades", 852 value: "salaryGrades",
853 sortable: false, 853 sortable: false,
854 align: "center", 854 align: "center",
855 }, 855 },
856 { 856 {
857 text: "Basic Salary", 857 text: "Basic Salary",
858 value: "basicSalary", 858 value: "basicSalary",
859 sortable: false, 859 sortable: false,
860 align: "center", 860 align: "center",
861 }, 861 },
862 { 862 {
863 text: "Overtime Rate", 863 text: "Overtime Rate",
864 value: "overtimeRate", 864 value: "overtimeRate",
865 sortable: false, 865 sortable: false,
866 align: "center", 866 align: "center",
867 }, 867 },
868 { text: "Action", value: "", sortable: false, align: "center" }, 868 { text: "Action", value: "", sortable: false, align: "center" },
869 ], 869 ],
870 salaryData: [], 870 salaryData: [],
871 editedItem: {}, 871 editedItem: {},
872 token: "", 872 token: "",
873 }), 873 }),
874 watch: { 874 watch: {
875 addSalaryDialog: function (val) { 875 addSalaryDialog: function (val) {
876 if (!val) { 876 if (!val) {
877 this.salaryType = []; 877 this.salaryType = [];
878 this.grossSalary = 0; 878 this.grossSalary = 0;
879 this.totalDeduction = 0; 879 this.totalDeduction = 0;
880 (this.salaryTypeData = [ 880 (this.salaryTypeData = [
881 { 881 {
882 allowancesValue: "", 882 allowancesValue: "",
883 allowancesName: "", 883 allowancesName: "",
884 totalAllowances: 0, 884 totalAllowances: 0,
885 }, 885 },
886 ]), 886 ]),
887 (this.salaryTypeDeductionData = [ 887 (this.salaryTypeDeductionData = [
888 { 888 {
889 deductionValue: "", 889 deductionValue: "",
890 deductionName: "", 890 deductionName: "",
891 totalDeductions: 0, 891 totalDeductions: 0,
892 }, 892 },
893 ]); 893 ]);
894 } 894 }
895 }, 895 },
896 }, 896 },
897 methods: { 897 methods: {
898 getSalaryList() { 898 getSalaryList() {
899 this.showLoader = true; 899 this.showLoader = true;
900 this.loadingSearch = true; 900 this.loadingSearch = true;
901 http() 901 http()
902 .get("/getSalaryList", { 902 .get("/getSalaryList", {
903 headers: { Authorization: "Bearer " + this.token }, 903 headers: { Authorization: "Bearer " + this.token },
904 }) 904 })
905 .then((response) => { 905 .then((response) => {
906 this.salaryData = response.data.data; 906 this.salaryData = response.data.data;
907 this.showLoader = false; 907 this.showLoader = false;
908 this.loadingSearch = false; 908 this.loadingSearch = false;
909 }) 909 })
910 .catch((error) => { 910 .catch((error) => {
911 // console.log("err====>", err); 911 // console.log("err====>", err);
912 this.showLoader = false; 912 this.showLoader = false;
913 this.loadingSearch = false; 913 this.loadingSearch = false;
914 this.snackbar = true; 914 this.snackbar = true;
915 this.text = error.response.data.message; 915 this.text = error.response.data.message;
916 if (error.response.status === 401) { 916 if (error.response.status === 401) {
917 this.$router.replace({ path: "/" }); 917 this.$router.replace({ path: "/" });
918 this.$store.dispatch("setToken", null); 918 this.$store.dispatch("setToken", null);
919 this.$store.dispatch("Id", null); 919 this.$store.dispatch("Id", null);
920 } 920 }
921 }); 921 });
922 }, 922 },
923 editItem(item) { 923 editItem(item) {
924 this.editedIndex = this.salaryData.indexOf(item); 924 this.editedIndex = this.salaryData.indexOf(item);
925 this.editedItem = Object.assign({}, item); 925 this.editedItem = Object.assign({}, item);
926 this.editedItem.date = 926 this.editedItem.date =
927 this.editedItem.date != undefined 927 this.editedItem.date != undefined
928 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 928 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
929 : (this.editedItem.date = ""); 929 : (this.editedItem.date = "");
930 this.editSalaryDialog = true; 930 this.editSalaryDialog = true;
931 }, 931 },
932 profile(item) { 932 profile(item) {
933 this.editedIndex = this.salaryData.indexOf(item); 933 this.editedIndex = this.salaryData.indexOf(item);
934 this.editedItem = Object.assign({}, item); 934 this.editedItem = Object.assign({}, item);
935 this.profileSalaryDialog = true; 935 this.profileSalaryDialog = true;
936 }, 936 },
937 deleteItem(item) { 937 deleteItem(item) {
938 let Salary = { 938 let Salary = {
939 salaryId: item._id, 939 salaryId: item._id,
940 }; 940 };
941 http() 941 http()
942 .delete( 942 .delete(
943 "/deleteSalary", 943 "/deleteSalary",
944 confirm("Are you sure you want to Delete this?") && { 944 confirm("Are you sure you want to Delete this?") && {
945 params: Salary, 945 params: Salary,
946 }, 946 },
947 { 947 {
948 headers: { Authorization: "Bearer " + this.token }, 948 headers: { Authorization: "Bearer " + this.token },
949 } 949 }
950 ) 950 )
951 .then((response) => { 951 .then((response) => {
952 this.snackbar = true; 952 this.snackbar = true;
953 this.text = "Successfully Delete Salary "; 953 this.text = "Successfully Delete Salary ";
954 this.text = response.data.message; 954 this.text = response.data.message;
955 this.color = "green"; 955 this.color = "green";
956 this.getSalaryList(); 956 this.getSalaryList();
957 }) 957 })
958 .catch((error) => { 958 .catch((error) => {
959 this.snackbar = true; 959 this.snackbar = true;
960 this.text = error.response.data.message; 960 this.text = error.response.data.message;
961 this.color = "red"; 961 this.color = "red";
962 }); 962 });
963 }, 963 },
964 close() { 964 close() {
965 this.editSalaryDialog = false; 965 this.editSalaryDialog = false;
966 }, 966 },
967 closeAddSalaryModel() { 967 closeAddSalaryModel() {
968 this.addSalaryDialog = false; 968 this.addSalaryDialog = false;
969 // this.salaryData = []; 969 // this.salaryData = [];
970 this.salaryType = []; 970 this.salaryType = [];
971 this.grossSalary = 0; 971 this.grossSalary = 0;
972 this.totalDeduction = 0; 972 this.totalDeduction = 0;
973 (this.salaryTypeData = [ 973 (this.salaryTypeData = [
974 { 974 {
975 allowancesValue: "", 975 allowancesValue: "",
976 allowancesName: "", 976 allowancesName: "",
977 totalAllowances: 0, 977 totalAllowances: 0,
978 }, 978 },
979 ]), 979 ]),
980 (this.salaryTypeDeductionData = [ 980 (this.salaryTypeDeductionData = [
981 { 981 {
982 deductionValue: "", 982 deductionValue: "",
983 deductionName: "", 983 deductionName: "",
984 totalDeductions: 0, 984 totalDeductions: 0,
985 }, 985 },
986 ]); 986 ]);
987 }, 987 },
988 submit() { 988 submit() {
989 var salary = { 989 var salary = {
990 salaryGrades: this.salaryType.salaryGrades, 990 salaryGrades: this.salaryType.salaryGrades,
991 basicSalary: this.salaryType.basicSalary, 991 basicSalary: this.salaryType.basicSalary,
992 overtimeRate: this.salaryType.overtimeRate, 992 overtimeRate: this.salaryType.overtimeRate,
993 allowances: this.salaryTypeData, 993 allowances: this.salaryTypeData,
994 deduction: this.salaryTypeDeductionData, 994 deduction: this.salaryTypeDeductionData,
995 grossSalary: this.grossSalary, 995 grossSalary: this.grossSalary,
996 totalDeduction: this.totalDeduction, 996 totalDeduction: this.totalDeduction,
997 netSalary: this.salaryType.netSalary, 997 netSalary: this.salaryType.netSalary,
998 }; 998 };
999 if (this.$refs.form.validate()) { 999 if (this.$refs.form.validate()) {
1000 this.loading = true; 1000 this.loading = true;
1001 // console.log("api data", this.salaryType); 1001 // console.log("api data", this.salaryType);
1002 http() 1002 http()
1003 .post("/createSalary", salary) 1003 .post("/createSalary", salary)
1004 .then((response) => { 1004 .then((response) => {
1005 // console.log("response", response); 1005 // console.log("response", response);
1006 this.snackbar = true; 1006 this.snackbar = true;
1007 this.text = "Successfully Created Salary "; 1007 this.text = "Successfully Created Salary ";
1008 this.text = response.data.message; 1008 this.text = response.data.message;
1009 this.color = "green"; 1009 this.color = "green";
1010 this.addSalaryDialog = false; 1010 this.addSalaryDialog = false;
1011 this.getSalaryList(); 1011 this.getSalaryList();
1012 this.color = "success"; 1012 this.color = "success";
1013 this.salaryTypeData = []; 1013 this.salaryTypeData = [];
1014 this.salaryTypeDeductionData = []; 1014 this.salaryTypeDeductionData = [];
1015 this.salaryType = ""; 1015 this.salaryType = "";
1016 this.grossSalary = ""; 1016 this.grossSalary = "";
1017 this.totalDeduction = ""; 1017 this.totalDeduction = "";
1018 this.loading = false; 1018 this.loading = false;
1019 this.clear(); 1019 this.clear();
1020 }) 1020 })
1021 .catch((error) => { 1021 .catch((error) => {
1022 console.log("error", error); 1022 console.log("error", error);
1023 this.snackbar = true; 1023 this.snackbar = true;
1024 this.text = error.response.data.message; 1024 this.text = error.response.data.message;
1025 this.color = "red"; 1025 this.color = "red";
1026 this.loading = false; 1026 this.loading = false;
1027 }); 1027 });
1028 } 1028 }
1029 }, 1029 },
1030 selectAllowances() { 1030 selectAllowances() {
1031 this.salaryTypeData.push({ 1031 this.salaryTypeData.push({
1032 allowancesValue: (this.salaryType.allowancesValue = ""), 1032 allowancesValue: (this.salaryType.allowancesValue = ""),
1033 }); 1033 });
1034 // console.log("this.salaryTypeData", this.salaryTypeData); 1034 // console.log("this.salaryTypeData", this.salaryTypeData);
1035 var totalAllowances = ""; 1035 var totalAllowances = "";
1036 this.salaryTypeData.forEach((allowancesValue_) => { 1036 this.salaryTypeData.forEach((allowancesValue_) => {
1037 if (allowancesValue_.allowancesValue != "") { 1037 if (allowancesValue_.allowancesValue != "") {
1038 // console.log("allowances", allowancesValue_.allowancesValue); 1038 // console.log("allowances", allowancesValue_.allowancesValue);
1039 totalAllowances = 1039 totalAllowances =
1040 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1040 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1041 } 1041 }
1042 this.grossSalary = 1042 this.grossSalary =
1043 totalAllowances + Number(this.salaryType.basicSalary); 1043 totalAllowances + Number(this.salaryType.basicSalary);
1044 }); 1044 });
1045 }, 1045 },
1046 allowancesAdd() { 1046 allowancesAdd() {
1047 this.editedItem.allowances.push({ 1047 this.editedItem.allowances.push({
1048 allowancesValue: (this.salaryType.allowancesValue = ""), 1048 allowancesValue: (this.salaryType.allowancesValue = ""),
1049 }); 1049 });
1050 var totalAllowances = ""; 1050 var totalAllowances = "";
1051 this.editedItem.allowances.forEach((allowancesValue_) => { 1051 this.editedItem.allowances.forEach((allowancesValue_) => {
1052 if (allowancesValue_.allowancesValue != "") { 1052 if (allowancesValue_.allowancesValue != "") {
1053 // console.log("allowances", allowancesValue_.allowancesValue); 1053 // console.log("allowances", allowancesValue_.allowancesValue);
1054 totalAllowances = 1054 totalAllowances =
1055 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1055 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1056 console.log("totalAllowances", totalAllowances); 1056 console.log("totalAllowances", totalAllowances);
1057 } 1057 }
1058 this.editedItem.grossSalary = 1058 this.editedItem.grossSalary =
1059 totalAllowances + Number(this.editedItem.basicSalary); 1059 totalAllowances + Number(this.editedItem.basicSalary);
1060 console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); 1060 console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
1061 }); 1061 });
1062 }, 1062 },
1063 selectDeduction() { 1063 selectDeduction() {
1064 this.salaryTypeDeductionData.push({ 1064 this.salaryTypeDeductionData.push({
1065 deductionValue: (this.salaryType.deductionValue = ""), 1065 deductionValue: (this.salaryType.deductionValue = ""),
1066 }); 1066 });
1067 var totalDeductions = ""; 1067 var totalDeductions = "";
1068 this.salaryTypeDeductionData.forEach((deductionValue_) => { 1068 this.salaryTypeDeductionData.forEach((deductionValue_) => {
1069 if (deductionValue_.deductionValue != "") { 1069 if (deductionValue_.deductionValue != "") {
1070 // console.log("deduction", deductionValue_.deductionValue); 1070 // console.log("deduction", deductionValue_.deductionValue);
1071 totalDeductions = 1071 totalDeductions =
1072 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1072 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1073 } 1073 }
1074 }); 1074 });
1075 }, 1075 },
1076 deductionAdd() { 1076 deductionAdd() {
1077 this.editedItem.deduction.push({ 1077 this.editedItem.deduction.push({
1078 deductionValue: (this.salaryType.deductionValue = ""), 1078 deductionValue: (this.salaryType.deductionValue = ""),
1079 }); 1079 });
1080 var totalDeductions = ""; 1080 var totalDeductions = "";
1081 this.editedItem.deduction.forEach((deductionValue_) => { 1081 this.editedItem.deduction.forEach((deductionValue_) => {
1082 if (deductionValue_.deductionValue != "") { 1082 if (deductionValue_.deductionValue != "") {
1083 // console.log("deduction", deductionValue_.deductionValue); 1083 // console.log("deduction", deductionValue_.deductionValue);
1084 totalDeductions = 1084 totalDeductions =
1085 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1085 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1086 console.log("this.totalDeductions", totalDeductions); 1086 console.log("this.totalDeductions", totalDeductions);
1087 } 1087 }
1088 // this.editedItem.totalDeduction = totalDeductions; 1088 // this.editedItem.totalDeduction = totalDeductions;
1089 // console.log("this.totalDeduction", this.editedItem.totalDeduction); 1089 // console.log("this.totalDeduction", this.editedItem.totalDeduction);
1090 }); 1090 });
1091 }, 1091 },
1092 deleteSelectAllowances: function (index) { 1092 deleteSelectAllowances: function (index) {
1093 this.salaryTypeData.splice(index, 1); 1093 this.salaryTypeData.splice(index, 1);
1094 }, 1094 },
1095 deleteallowancesAdd: function (index) { 1095 deleteallowancesAdd: function (index) {
1096 this.editedItem.allowances.splice(index, 1); 1096 this.editedItem.allowances.splice(index, 1);
1097 }, 1097 },
1098 deleteSelectDeduction: function (index) { 1098 deleteSelectDeduction: function (index) {
1099 this.salaryTypeDeductionData.splice(index, 1); 1099 this.salaryTypeDeductionData.splice(index, 1);
1100 }, 1100 },
1101 deletedeductionAdd: function (index) { 1101 deletedeductionAdd: function (index) {
1102 this.editedItem.deduction.splice(index, 1); 1102 this.editedItem.deduction.splice(index, 1);
1103 }, 1103 },
1104 clear() { 1104 clear() {
1105 this.$refs.form.reset(); 1105 this.$refs.form.reset();
1106 this.disable = false; 1106 this.disable = false;
1107 }, 1107 },
1108 save() { 1108 save() {
1109 var updateSalary = { 1109 var updateSalary = {
1110 salaryId: this.editedItem._id, 1110 salaryId: this.editedItem._id,
1111 salaryGrades: this.editedItem.salaryGrades, 1111 salaryGrades: this.editedItem.salaryGrades,
1112 basicSalary: this.editedItem.basicSalary, 1112 basicSalary: this.editedItem.basicSalary,
1113 overtimeRate: this.editedItem.overtimeRate, 1113 overtimeRate: this.editedItem.overtimeRate,
1114 allowances: this.salaryTypeData, 1114 allowances: this.salaryTypeData,
1115 deduction: this.salaryTypeDeductionData, 1115 deduction: this.salaryTypeDeductionData,
1116 grossSalary: this.editedItem.grossSalary, 1116 grossSalary: this.editedItem.grossSalary,
1117 totalDeduction: this.editedItem.totalDeduction, 1117 totalDeduction: this.editedItem.totalDeduction,
1118 netSalary: this.editedItem.netSalary, 1118 netSalary: this.editedItem.netSalary,
1119 }; 1119 };
1120 http() 1120 http()
1121 .put("/updateSalary", updateSalary) 1121 .put("/updateSalary", updateSalary)
1122 .then((response) => { 1122 .then((response) => {
1123 this.snackbar = true; 1123 this.snackbar = true;
1124 this.text = response.data.message; 1124 this.text = response.data.message;
1125 this.color = "green"; 1125 this.color = "green";
1126 this.getSalaryList(); 1126 this.getSalaryList();
1127 this.close(); 1127 this.close();
1128 }) 1128 })
1129 .catch((error) => { 1129 .catch((error) => {
1130 this.snackbar = true; 1130 this.snackbar = true;
1131 this.text = error.response.data.message; 1131 this.text = error.response.data.message;
1132 this.color = "red"; 1132 this.color = "red";
1133 }); 1133 });
1134 }, 1134 },
1135 displaySearch() { 1135 displaySearch() {
1136 (this.show = false), (this.showSearch = true); 1136 (this.show = false), (this.showSearch = true);
1137 }, 1137 },
1138 closeSearch() { 1138 closeSearch() {
1139 this.showSearch = false; 1139 this.showSearch = false;
1140 this.show = true; 1140 this.show = true;
1141 this.search = ""; 1141 this.search = "";
1142 }, 1142 },
1143 addSalary: function () { 1143 addSalary: function () {
1144 var showSalary = this.salaryType.basicSalary; 1144 var showSalary = this.salaryType.basicSalary;
1145 this.grossSalary = showSalary; 1145 this.grossSalary = showSalary;
1146 // console.log("salary", this.grossSalary); 1146 // console.log("salary", this.grossSalary);
1147 }, 1147 },
1148 addAllowances: function () { 1148 addAllowances: function () {
1149 var totalAllowances = ""; 1149 var totalAllowances = "";
1150 this.salaryTypeData.forEach((allowancesValue_) => { 1150 this.salaryTypeData.forEach((allowancesValue_) => {
1151 if (allowancesValue_.allowancesValue != "") { 1151 if (allowancesValue_.allowancesValue != "") {
1152 totalAllowances = 1152 totalAllowances =
1153 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1153 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1154 } 1154 }
1155 this.grossSalary = 1155 this.grossSalary =
1156 totalAllowances + 1156 totalAllowances +
1157 Number(this.salaryType.basicSalary) + 1157 Number(this.salaryType.basicSalary) +
1158 Number(this.salaryType.allowancesValue); 1158 Number(this.salaryType.allowancesValue);
1159 }); 1159 });
1160 }, 1160 },
1161 addAllowancesValue: function () { 1161 addAllowancesValue: function () {
1162 var totalAllowances = ""; 1162 var totalAllowances = "";
1163 this.editedItem.allowances.forEach((allowancesValue_) => { 1163 this.editedItem.allowances.forEach((allowancesValue_) => {
1164 if (allowancesValue_.allowancesValue != "") { 1164 if (allowancesValue_.allowancesValue != "") {
1165 totalAllowances = 1165 totalAllowances =
1166 Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 1166 Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
1167 } 1167 }
1168 this.grossSalary = 1168 this.grossSalary =
1169 totalAllowances + 1169 totalAllowances +
1170 Number(this.editedItem.basicSalary) + 1170 Number(this.editedItem.basicSalary) +
1171 Number(this.editedItem.allowancesValue); 1171 Number(this.editedItem.allowancesValue);
1172 }); 1172 });
1173 }, 1173 },
1174 addDeduction: function () { 1174 addDeduction: function () {
1175 // console.log( 1175 // console.log(
1176 // "this.salaryType.deductionValue", 1176 // "this.salaryType.deductionValue",
1177 // this.salaryType.deductionValue 1177 // this.salaryType.deductionValue
1178 // ); 1178 // );
1179 var totalDeductions = ""; 1179 var totalDeductions = "";
1180 this.salaryTypeDeductionData.forEach((deductionValue_) => { 1180 this.salaryTypeDeductionData.forEach((deductionValue_) => {
1181 if (deductionValue_.deductionValue != "") { 1181 if (deductionValue_.deductionValue != "") {
1182 totalDeductions = 1182 totalDeductions =
1183 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1183 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1184 } 1184 }
1185 }); 1185 });
1186 // console.log("deduction", totalDeductions); 1186 // console.log("deduction", totalDeductions);
1187 this.totalDeduction = totalDeductions; 1187 this.totalDeduction = totalDeductions;
1188 this.salaryType.netSalary = this.grossSalary - this.totalDeduction; 1188 this.salaryType.netSalary = this.grossSalary - this.totalDeduction;
1189 }, 1189 },
1190 addDeductionValue: function () { 1190 addDeductionValue: function () {
1191 var totalDeductions = ""; 1191 var totalDeductions = "";
1192 this.editedItem.deduction.forEach((deductionValue_) => { 1192 this.editedItem.deduction.forEach((deductionValue_) => {
1193 if (deductionValue_.deductionValue != "") { 1193 if (deductionValue_.deductionValue != "") {
1194 totalDeductions = 1194 totalDeductions =
1195 Number(totalDeductions) + Number(deductionValue_.deductionValue); 1195 Number(totalDeductions) + Number(deductionValue_.deductionValue);
1196 } 1196 }
1197 // this.totalDeduction = totalDeductions; 1197 // this.totalDeduction = totalDeductions;
1198 // console.log("this.totalDeductions", this.totalDeduction); 1198 // console.log("this.totalDeductions", this.totalDeduction);
1199 }); 1199 });
1200 this.editedItem.totalDeduction = totalDeductions; 1200 this.editedItem.totalDeduction = totalDeductions;
1201 this.editedItem.netSalary = 1201 this.editedItem.netSalary =
1202 this.editedItem.grossSalary - this.editedItem.totalDeduction; 1202 this.editedItem.grossSalary - this.editedItem.totalDeduction;
1203 }, 1203 },
1204 }, 1204 },
1205 1205
1206 mounted() { 1206 mounted() {
1207 this.token = this.$store.state.token; 1207 this.token = this.$store.state.token;
1208 this.getSalaryList(); 1208 this.getSalaryList();
1209 }, 1209 },
1210 }; 1210 };
1211 </script> 1211 </script>
1212 1212
1213 <style scoped> 1213 <style scoped>
1214 </style> 1214 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @d10c266
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT TIME-TABLE****** --> 3 <!-- ****** EDIT TIME-TABLE****** -->
4 <v-dialog v-model="dialog" max-width="600px"> 4 <v-dialog v-model="dialog" max-width="600px">
5 <v-flex xs12 sm12> 5 <v-flex xs12 sm12>
6 <v-card flat class="card-style pa-2" dark> 6 <v-card flat class="card-style pa-2" dark>
7 <v-layout> 7 <v-layout>
8 <v-flex xs12> 8 <v-flex xs12>
9 <label class="title text-xs-center">Edit Time Table</label> 9 <label class="title text-xs-center">Edit Time Table</label>
10 <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> 10 <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
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" 16 class="text-xs-center text-sm-center text-md-center text-lg-center"
17 > 17 >
18 <v-avatar size="100px"> 18 <v-avatar size="100px">
19 <img src="/static/icon/user.png" v-if="!imageUrl" /> 19 <img src="/static/icon/user.png" v-if="!imageUrl" />
20 </v-avatar> 20 </v-avatar>
21 <input 21 <input
22 type="file" 22 type="file"
23 style="display: none" 23 style="display: none"
24 ref="image" 24 ref="image"
25 accept="image/*" 25 accept="image/*"
26 @change="onFilePicked" 26 @change="onFilePicked"
27 /> 27 />
28 <img 28 <img
29 :src="imageData.imageUrl" 29 :src="imageData.imageUrl"
30 height="150" 30 height="150"
31 v-if="imageUrl" 31 v-if="imageUrl"
32 style="border-radius:50%; width:200px" 32 style="border-radius:50%; width:200px"
33 /> 33 />
34 </v-flex> 34 </v-flex>
35 </v-layout>--> 35 </v-layout>-->
36 <v-flex xs12 sm12> 36 <v-flex xs12 sm12>
37 <v-layout> 37 <v-layout>
38 <v-flex xs4 class="pt-4 subheading"> 38 <v-flex xs4 class="pt-4 subheading">
39 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 39 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
40 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 40 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
41 </v-flex> 41 </v-flex>
42 <v-flex xs8 sm5 class="ml-3"> 42 <v-flex xs8 sm5 class="ml-3">
43 <v-select 43 <v-select
44 :items="addclass" 44 :items="addclass"
45 label="Select Class" 45 label="Select Class"
46 v-model="editedItem.classNum" 46 v-model="editedItem.classNum"
47 item-text="classNum" 47 item-text="classNum"
48 item-value="_id" 48 item-value="_id"
49 @change="getSections(editedItem.classNum)" 49 @change="getSections(editedItem.classNum)"
50 ></v-select> 50 ></v-select>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-flex> 53 </v-flex>
54 <v-flex xs12 sm12> 54 <v-flex xs12 sm12>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> 57 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
58 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 58 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
59 </v-flex> 59 </v-flex>
60 <v-flex xs8 sm5 class="ml-3"> 60 <v-flex xs8 sm5 class="ml-3">
61 <v-select 61 <v-select
62 :items="addSection" 62 :items="addSection"
63 label="Select Section" 63 label="Select Section"
64 v-model="editedItem.selectSection" 64 v-model="editedItem.selectSection"
65 item-text="name" 65 item-text="name"
66 item-value="_id" 66 item-value="_id"
67 ></v-select> 67 ></v-select>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-flex> 70 </v-flex>
71 <v-layout> 71 <v-layout>
72 <v-flex xs12 sm9 offset-sm1> 72 <v-flex xs12 sm9 offset-sm1>
73 <v-card-actions> 73 <v-card-actions>
74 <v-spacer></v-spacer> 74 <v-spacer></v-spacer>
75 <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> 75 <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn>
76 <v-btn round dark @click="save" class="add-button">Save</v-btn> 76 <v-btn round dark @click="save" class="add-button">Save</v-btn>
77 </v-card-actions> 77 </v-card-actions>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-card> 80 </v-card>
81 </v-flex> 81 </v-flex>
82 </v-dialog> 82 </v-dialog>
83 83
84 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> 84 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** -->
85 85
86 <v-dialog v-model="dialogSchedule" max-width="600px"> 86 <v-dialog v-model="dialogSchedule" max-width="600px">
87 <v-flex xs12 sm12> 87 <v-flex xs12 sm12>
88 <v-card flat class="card-style pa-2" dark> 88 <v-card flat class="card-style pa-2" dark>
89 <v-layout> 89 <v-layout>
90 <v-flex xs12> 90 <v-flex xs12>
91 <label class="title text-xs-center">Add Schedule</label> 91 <label class="title text-xs-center">Add Schedule</label>
92 <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> 92 <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> 95 <v-form ref="formAddDay" v-model="validAddDay" lazy-validation>
96 <v-container fluid> 96 <v-container fluid>
97 <v-flex xs12 sm12 class="py-3"> 97 <v-flex xs12 sm12 class="py-3">
98 <v-layout> 98 <v-layout>
99 <v-flex xs4 class="pt-4 subheading"> 99 <v-flex xs4 class="pt-4 subheading">
100 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> 100 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
101 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> 101 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm5 class="pl-3"> 103 <v-flex xs12 sm5 class="pl-3">
104 <v-select 104 <v-select
105 :items="addOneDay" 105 :items="addOneDay"
106 label="Select Day" 106 label="Select Day"
107 v-model="schedule.selectDay" 107 v-model="schedule.selectDay"
108 :rules="selecDayRule" 108 :rules="selecDayRule"
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-layout> 113 <v-layout>
114 <v-flex xs12 sm8 offset-sm2> 114 <v-flex xs12 sm8 offset-sm2>
115 <v-card-actions> 115 <v-card-actions>
116 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
117 <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> 117 <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn>
118 <v-spacer></v-spacer> 118 <v-spacer></v-spacer>
119 </v-card-actions> 119 </v-card-actions>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-container> 122 </v-container>
123 </v-form> 123 </v-form>
124 </v-card> 124 </v-card>
125 </v-flex> 125 </v-flex>
126 </v-dialog> 126 </v-dialog>
127 127
128 <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> 128 <!-- ****** ADD LECTURES IN TIME-TABLE ****** -->
129 129
130 <v-dialog v-model="dialogAddLecture" max-width="600px" persistent> 130 <v-dialog v-model="dialogAddLecture" max-width="600px" persistent>
131 <v-flex xs12 sm12> 131 <v-flex xs12 sm12>
132 <v-card flat class="card-style pa-2" dark> 132 <v-card flat class="card-style pa-2" dark>
133 <v-layout> 133 <v-layout>
134 <v-flex xs12> 134 <v-flex xs12>
135 <label class="title text-xs-center">Add Lecture</label> 135 <label class="title text-xs-center">Add Lecture</label>
136 <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> 136 <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 <v-form ref="lectureForm" v-model="valid" lazy-validation> 139 <v-form ref="lectureForm" v-model="valid" lazy-validation>
140 <v-container fluid> 140 <v-container fluid>
141 <v-flex xs12 sm12> 141 <v-flex xs12 sm12>
142 <v-layout> 142 <v-layout>
143 <v-flex xs4 class="pt-4 subheading"> 143 <v-flex xs4 class="pt-4 subheading">
144 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 144 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
145 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 145 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
146 </v-flex> 146 </v-flex>
147 <v-flex xs5 class="ml-3"> 147 <v-flex xs5 class="ml-3">
148 <v-select 148 <v-select
149 :items="addclass" 149 :items="addclass"
150 label="Select Class" 150 label="Select Class"
151 v-model="timeTable.select" 151 v-model="timeTable.select"
152 item-text="classNum" 152 item-text="classNum"
153 item-value="_id" 153 item-value="_id"
154 @change="getClassSubject(timeTable.select)" 154 @change="getClassSubject(timeTable.select)"
155 :rules="classRules" 155 :rules="classRules"
156 required 156 required
157 ></v-select> 157 ></v-select>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-flex> 160 </v-flex>
161 <v-flex xs12 sm12> 161 <v-flex xs12 sm12>
162 <v-layout> 162 <v-layout>
163 <v-flex xs4 class="pt-4 subheading"> 163 <v-flex xs4 class="pt-4 subheading">
164 <label class="right">Subject Name:</label> 164 <label class="right">Subject Name:</label>
165 </v-flex> 165 </v-flex>
166 <v-flex xs5 class="ml-3"> 166 <v-flex xs5 class="ml-3">
167 <v-select 167 <v-select
168 :items="subjectList.subjects" 168 :items="subjectList.subjects"
169 label="Select Subject" 169 label="Select Subject"
170 v-model="addlectures.subjectName" 170 v-model="addlectures.subjectName"
171 item-text="subjectName" 171 item-text="subjectName"
172 item-value="subjectName" 172 item-value="subjectName"
173 :rules="subjectNameRules" 173 :rules="subjectNameRules"
174 required 174 required
175 ></v-select> 175 ></v-select>
176 <!-- <v-text-field 176 <!-- <v-text-field
177 v-model="addlectures.subjectName" 177 v-model="addlectures.subjectName"
178 :rules="subjectNameRules" 178 :rules="subjectNameRules"
179 placeholder="fill your Subject Name" 179 placeholder="fill your Subject Name"
180 type="text" 180 type="text"
181 ></v-text-field>--> 181 ></v-text-field>-->
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 </v-flex> 184 </v-flex>
185 <v-flex xs12 sm12> 185 <v-flex xs12 sm12>
186 <v-layout> 186 <v-layout>
187 <v-flex xs4 class="pt-4 subheading"> 187 <v-flex xs4 class="pt-4 subheading">
188 <label class="right">Time In:</label> 188 <label class="right">Time In:</label>
189 </v-flex> 189 </v-flex>
190 <v-flex xs5 class="ml-3"> 190 <v-flex xs5 class="ml-3">
191 <v-menu 191 <v-menu
192 ref="menuD" 192 ref="menuD"
193 :close-on-content-click="false" 193 :close-on-content-click="false"
194 v-model="menu5" 194 v-model="menu5"
195 :nudge-right="40" 195 :nudge-right="40"
196 lazy 196 lazy
197 transition="scale-transition" 197 transition="scale-transition"
198 offset-y 198 offset-y
199 full-width 199 full-width
200 max-width="290px" 200 max-width="290px"
201 min-width="290px" 201 min-width="290px"
202 > 202 >
203 <v-text-field 203 <v-text-field
204 slot="activator" 204 slot="activator"
205 v-model="addlectures.timeIn" 205 v-model="addlectures.timeIn"
206 label="Select your Time In" 206 label="Select your Time In"
207 append-icon="access_time" 207 append-icon="access_time"
208 :rules="timeInRules" 208 :rules="timeInRules"
209 readonly 209 readonly
210 ></v-text-field> 210 ></v-text-field>
211 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> 211 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>
212 </v-menu> 212 </v-menu>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 </v-flex> 215 </v-flex>
216 <v-flex xs12 sm12> 216 <v-flex xs12 sm12>
217 <v-layout> 217 <v-layout>
218 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
219 <label class="right">Time Out:</label> 219 <label class="right">Time Out:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex xs5 class="ml-3"> 221 <v-flex xs5 class="ml-3">
222 <v-menu 222 <v-menu
223 ref="menuE" 223 ref="menuE"
224 :close-on-content-click="false" 224 :close-on-content-click="false"
225 v-model="menu6" 225 v-model="menu6"
226 :nudge-right="40" 226 :nudge-right="40"
227 lazy 227 lazy
228 transition="scale-transition" 228 transition="scale-transition"
229 offset-y 229 offset-y
230 full-width 230 full-width
231 max-width="290px" 231 max-width="290px"
232 min-width="290px" 232 min-width="290px"
233 > 233 >
234 <v-text-field 234 <v-text-field
235 slot="activator" 235 slot="activator"
236 :rules="timeOutRules" 236 :rules="timeOutRules"
237 v-model="addlectures.timeOut" 237 v-model="addlectures.timeOut"
238 label="Select your Time Out" 238 label="Select your Time Out"
239 append-icon="access_time" 239 append-icon="access_time"
240 readonly 240 readonly
241 ></v-text-field> 241 ></v-text-field>
242 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> 242 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>
243 </v-menu> 243 </v-menu>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 <v-flex xs12 sm12> 247 <v-flex xs12 sm12>
248 <v-layout> 248 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 249 <v-flex xs4 class="pt-4 subheading">
250 <label class="right">Select Teacher:</label> 250 <label class="right">Select Teacher:</label>
251 </v-flex> 251 </v-flex>
252 <v-flex xs5 class="ml-3"> 252 <v-flex xs5 class="ml-3">
253 <v-select 253 <v-select
254 :items="addTeachers" 254 :items="addTeachers"
255 label="Select Teacher" 255 label="Select Teacher"
256 v-model="addlectures.teacherId" 256 v-model="addlectures.teacherId"
257 :rules="teacherRules" 257 :rules="teacherRules"
258 item-text="name" 258 item-text="name"
259 item-value="_id" 259 item-value="_id"
260 required 260 required
261 ></v-select> 261 ></v-select>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 <v-layout> 265 <v-layout>
266 <v-flex xs12 sm8 offset-sm2> 266 <v-flex xs12 sm8 offset-sm2>
267 <v-card-actions> 267 <v-card-actions>
268 <v-spacer></v-spacer> 268 <v-spacer></v-spacer>
269 <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> 269 <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn>
270 </v-card-actions> 270 </v-card-actions>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
273 </v-container> 273 </v-container>
274 </v-form> 274 </v-form>
275 </v-card> 275 </v-card>
276 </v-flex> 276 </v-flex>
277 </v-dialog> 277 </v-dialog>
278 278
279 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> 279 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** -->
280 280
281 <v-dialog v-model="dialogUpdateLectures" max-width="600px"> 281 <v-dialog v-model="dialogUpdateLectures" max-width="600px">
282 <v-flex xs12 sm12 class> 282 <v-flex xs12 sm12 class>
283 <v-card flat class="card-style pa-2" dark> 283 <v-card flat class="card-style pa-2" dark>
284 <v-layout> 284 <v-layout>
285 <v-flex xs12> 285 <v-flex xs12>
286 <label class="title text-xs-center">Edit Lecture</label> 286 <label class="title text-xs-center">Edit Lecture</label>
287 <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> 287 <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-flex xs12 sm12> 290 <v-flex xs12 sm12>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 293 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
294 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 294 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
295 </v-flex> 295 </v-flex>
296 <v-flex xs7 sm6 class="ml-3"> 296 <v-flex xs7 sm6 class="ml-3">
297 <v-select 297 <v-select
298 :items="addclass" 298 :items="addclass"
299 label="Select Class" 299 label="Select Class"
300 v-model="updateLectures.select" 300 v-model="updateLectures.select"
301 item-text="classNum" 301 item-text="classNum"
302 item-value="_id" 302 item-value="_id"
303 @change="getClassSubject(updateLectures.select)" 303 @change="getClassSubject(updateLectures.select)"
304 required 304 required
305 ></v-select> 305 ></v-select>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 </v-flex> 308 </v-flex>
309 <v-flex xs12 sm12> 309 <v-flex xs12 sm12>
310 <v-layout> 310 <v-layout>
311 <v-flex xs4 class="pt-4 subheading"> 311 <v-flex xs4 class="pt-4 subheading">
312 <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label> 312 <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label>
313 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 313 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
314 </v-flex> 314 </v-flex>
315 <v-flex xs7 sm6 class="ml-3"> 315 <v-flex xs7 sm6 class="ml-3">
316 <v-select 316 <v-select
317 :items="subjectList.subjects" 317 :items="subjectList.subjects"
318 label="Select Subject" 318 label="Select Subject"
319 v-model="updateLectures.subjectName" 319 v-model="updateLectures.subjectName"
320 item-text="subjectName" 320 item-text="subjectName"
321 item-value="subjectName" 321 item-value="subjectName"
322 required 322 required
323 ></v-select> 323 ></v-select>
324 <!-- <v-text-field 324 <!-- <v-text-field
325 v-model="updateLectures.subjectName" 325 v-model="updateLectures.subjectName"
326 placeholder="fill your Subject Name" 326 placeholder="fill your Subject Name"
327 type="text" 327 type="text"
328 ></v-text-field>--> 328 ></v-text-field>-->
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 <v-flex xs12 sm12> 332 <v-flex xs12 sm12>
333 <v-layout> 333 <v-layout>
334 <v-flex xs5 sm4 class="pt-4 subheading"> 334 <v-flex xs5 sm4 class="pt-4 subheading">
335 <label class="right">Time In:</label> 335 <label class="right">Time In:</label>
336 </v-flex> 336 </v-flex>
337 <v-flex xs7 sm6 class="ml-3"> 337 <v-flex xs7 sm6 class="ml-3">
338 <v-menu 338 <v-menu
339 ref="menuC" 339 ref="menuC"
340 :close-on-content-click="false" 340 :close-on-content-click="false"
341 v-model="menu4" 341 v-model="menu4"
342 :nudge-right="40" 342 :nudge-right="40"
343 lazy 343 lazy
344 transition="scale-transition" 344 transition="scale-transition"
345 offset-y 345 offset-y
346 full-width 346 full-width
347 max-width="290px" 347 max-width="290px"
348 min-width="290px" 348 min-width="290px"
349 > 349 >
350 <v-text-field 350 <v-text-field
351 slot="activator" 351 slot="activator"
352 v-model="updateLectures.timeIn" 352 v-model="updateLectures.timeIn"
353 placeholder="Select your Time In" 353 placeholder="Select your Time In"
354 append-icon="access_time" 354 append-icon="access_time"
355 readonly 355 readonly
356 ></v-text-field> 356 ></v-text-field>
357 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> 357 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
358 </v-menu> 358 </v-menu>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-flex> 361 </v-flex>
362 <v-flex xs12 sm12> 362 <v-flex xs12 sm12>
363 <v-layout> 363 <v-layout>
364 <v-flex xs5 sm4 class="pt-4 subheading"> 364 <v-flex xs5 sm4 class="pt-4 subheading">
365 <label class="right">Time Out:</label> 365 <label class="right">Time Out:</label>
366 </v-flex> 366 </v-flex>
367 <v-flex xs7 sm6 class="ml-3"> 367 <v-flex xs7 sm6 class="ml-3">
368 <v-menu 368 <v-menu
369 ref="menuB" 369 ref="menuB"
370 :close-on-content-click="false" 370 :close-on-content-click="false"
371 v-model="menu3" 371 v-model="menu3"
372 :nudge-right="40" 372 :nudge-right="40"
373 lazy 373 lazy
374 transition="scale-transition" 374 transition="scale-transition"
375 offset-y 375 offset-y
376 full-width 376 full-width
377 max-width="290px" 377 max-width="290px"
378 min-width="290px" 378 min-width="290px"
379 > 379 >
380 <v-text-field 380 <v-text-field
381 slot="activator" 381 slot="activator"
382 v-model="updateLectures.timeOut" 382 v-model="updateLectures.timeOut"
383 placeholder="Select your Time Out" 383 placeholder="Select your Time Out"
384 append-icon="access_time" 384 append-icon="access_time"
385 readonly 385 readonly
386 ></v-text-field> 386 ></v-text-field>
387 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> 387 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
388 </v-menu> 388 </v-menu>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 </v-flex> 391 </v-flex>
392 <v-flex xs12 sm12> 392 <v-flex xs12 sm12>
393 <v-layout> 393 <v-layout>
394 <v-flex xs5 sm4 class="pt-4 subheading"> 394 <v-flex xs5 sm4 class="pt-4 subheading">
395 <label class="right">Select Teacher:</label> 395 <label class="right">Select Teacher:</label>
396 </v-flex> 396 </v-flex>
397 <v-flex xs7 sm6 class="ml-3"> 397 <v-flex xs7 sm6 class="ml-3">
398 <v-select 398 <v-select
399 :items="addTeachers" 399 :items="addTeachers"
400 label="Select Teacher" 400 label="Select Teacher"
401 v-model="updateLectures.teacherId" 401 v-model="updateLectures.teacherId"
402 item-text="name" 402 item-text="name"
403 item-value="_id" 403 item-value="_id"
404 required 404 required
405 ></v-select> 405 ></v-select>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 </v-flex> 408 </v-flex>
409 <v-layout> 409 <v-layout>
410 <v-flex xs12 sm10 offset-sm1> 410 <v-flex xs12 sm10 offset-sm1>
411 <v-card-actions> 411 <v-card-actions>
412 <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> 412 <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> -->
413 <v-spacer></v-spacer> 413 <v-spacer></v-spacer>
414 <v-btn 414 <v-btn
415 round 415 round
416 dark 416 dark
417 class="add-button" 417 class="add-button"
418 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" 418 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
419 >Save</v-btn> 419 >Save</v-btn>
420 </v-card-actions> 420 </v-card-actions>
421 </v-flex> 421 </v-flex>
422 </v-layout> 422 </v-layout>
423 </v-card> 423 </v-card>
424 </v-flex> 424 </v-flex>
425 </v-dialog> 425 </v-dialog>
426 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 426 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
427 427
428 <!-- <v-card flat> 428 <!-- <v-card flat>
429 <v-card-actions class="hidden-xs-only hidden-sm-only"> 429 <v-card-actions class="hidden-xs-only hidden-sm-only">
430 <v-layout> 430 <v-layout>
431 <label class="right mt-4 ml-5">Select Class:</label> 431 <label class="right mt-4 ml-5">Select Class:</label>
432 <v-select 432 <v-select
433 :items="addclass" 433 :items="addclass"
434 label="Select Class" 434 label="Select Class"
435 v-model="selectTimeTable.select" 435 v-model="selectTimeTable.select"
436 item-text="classNum" 436 item-text="classNum"
437 item-value="_id" 437 item-value="_id"
438 name="Select Class" 438 name="Select Class"
439 @change="getSections(selectTimeTable.select)" 439 @change="getSections(selectTimeTable.select)"
440 class="px-4" 440 class="px-4"
441 required 441 required
442 ></v-select> 442 ></v-select>
443 <label class="right mt-4">Select Section:</label> 443 <label class="right mt-4">Select Section:</label>
444 <v-select 444 <v-select
445 :items="addSection" 445 :items="addSection"
446 label="Select Section" 446 label="Select Section"
447 v-model="selectTimeTable.selectSection" 447 v-model="selectTimeTable.selectSection"
448 item-text="name" 448 item-text="name"
449 item-value="_id" 449 item-value="_id"
450 name="Select Section" 450 name="Select Section"
451 class="pl-3" 451 class="pl-3"
452 required 452 required
453 ></v-select> 453 ></v-select>
454 </v-layout> 454 </v-layout>
455 <v-spacer></v-spacer> 455 <v-spacer></v-spacer>
456 <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> 456 <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn>
457 </v-card-actions> 457 </v-card-actions>
458 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 458 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
459 <v-flex xs4 sm2 class="mt-4 ml-2"> 459 <v-flex xs4 sm2 class="mt-4 ml-2">
460 <label>Select Class:</label> 460 <label>Select Class:</label>
461 </v-flex> 461 </v-flex>
462 <v-flex xs6 sm9> 462 <v-flex xs6 sm9>
463 <v-select 463 <v-select
464 :items="addclass" 464 :items="addclass"
465 label="Select Class" 465 label="Select Class"
466 v-model="selectTimeTable.select" 466 v-model="selectTimeTable.select"
467 item-text="classNum" 467 item-text="classNum"
468 item-value="_id" 468 item-value="_id"
469 name="Select Class" 469 name="Select Class"
470 @change="getSections(selectTimeTable.select)" 470 @change="getSections(selectTimeTable.select)"
471 required 471 required
472 ></v-select> 472 ></v-select>
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 475 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
476 <v-flex xs4 sm2 class="mt-4 ml-2"> 476 <v-flex xs4 sm2 class="mt-4 ml-2">
477 <label>Select Section:</label> 477 <label>Select Section:</label>
478 </v-flex> 478 </v-flex>
479 <v-flex xs6 sm9> 479 <v-flex xs6 sm9>
480 <v-select 480 <v-select
481 :items="addSection" 481 :items="addSection"
482 label="Select Section" 482 label="Select Section"
483 v-model="selectTimeTable.selectSection" 483 v-model="selectTimeTable.selectSection"
484 item-text="name" 484 item-text="name"
485 item-value="_id" 485 item-value="_id"
486 name="Select Section" 486 name="Select Section"
487 required 487 required
488 ></v-select> 488 ></v-select>
489 </v-flex> 489 </v-flex>
490 </v-layout> 490 </v-layout>
491 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 491 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
492 <v-flex xs12> 492 <v-flex xs12>
493 <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> 493 <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn>
494 </v-flex> 494 </v-flex>
495 </v-layout> 495 </v-layout>
496 </v-card>--> 496 </v-card>-->
497 <v-flex xs12> 497 <v-flex xs12>
498 <v-toolbar color="transparent" flat> 498 <v-toolbar color="transparent" flat>
499 <v-btn 499 <v-btn
500 fab 500 fab
501 dark 501 dark
502 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 502 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
503 small 503 small
504 @click="addTimeTableDialog = true" 504 @click="addTimeTableDialog = true"
505 > 505 >
506 <v-icon dark>add</v-icon> 506 <v-icon dark>add</v-icon>
507 </v-btn> 507 </v-btn>
508 <v-btn 508 <v-btn
509 round 509 round
510 class="open-dialog-button hidden-sm-only hidden-xs-only" 510 class="open-dialog-button hidden-sm-only hidden-xs-only"
511 dark 511 dark
512 @click="addTimeTableDialog = true" 512 @click="addTimeTableDialog = true"
513 > 513 >
514 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table 514 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table
515 </v-btn> 515 </v-btn>
516 <v-flex xs4 md2> 516 <v-flex xs4 md2>
517 <v-select 517 <v-select
518 :items="addclass" 518 :items="addclass"
519 label="Select Class" 519 label="Select Class"
520 v-model="selectTimeTable.select" 520 v-model="selectTimeTable.select"
521 item-text="classNum" 521 item-text="classNum"
522 item-value="_id" 522 item-value="_id"
523 name="Select Class" 523 name="Select Class"
524 @change="getSections(selectTimeTable.select)" 524 @change="getSections(selectTimeTable.select)"
525 required 525 required
526 ></v-select> 526 ></v-select>
527 </v-flex> 527 </v-flex>
528 <v-flex xs4 md2 class="ml-4"> 528 <v-flex xs4 md2 class="ml-4">
529 <v-select 529 <v-select
530 :items="addSection" 530 :items="addSection"
531 label="Select Section" 531 label="Select Section"
532 v-model="selectTimeTable.selectSection" 532 v-model="selectTimeTable.selectSection"
533 item-text="name" 533 item-text="name"
534 item-value="_id" 534 item-value="_id"
535 name="Select Section" 535 name="Select Section"
536 required 536 required
537 ></v-select> 537 ></v-select>
538 </v-flex> 538 </v-flex>
539 <v-spacer></v-spacer> 539 <v-spacer></v-spacer>
540 <v-btn 540 <v-btn
541 @click="findTimeTable()" 541 @click="findTimeTable()"
542 round 542 round
543 dark 543 dark
544 :loading="loading" 544 :loading="loading"
545 class="right mb-2 open-dialog-button" 545 class="right mb-2 open-dialog-button"
546 >Find</v-btn> 546 >Find</v-btn>
547 <v-card-title class="body-1" v-show="show"> 547 <v-card-title class="body-1" v-show="show">
548 <v-btn icon large flat @click="displaySearch"> 548 <v-btn icon large flat @click="displaySearch">
549 <v-avatar size="27"> 549 <v-avatar size="27">
550 <img src="/static/icon/search.png" alt="icon" /> 550 <img src="/static/icon/search.png" alt="icon" />
551 </v-avatar> 551 </v-avatar>
552 </v-btn> 552 </v-btn>
553 </v-card-title> 553 </v-card-title>
554 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 554 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
555 <v-layout> 555 <v-layout>
556 <v-text-field 556 <v-text-field
557 autofocus 557 autofocus
558 v-model="search" 558 v-model="search"
559 label="Search" 559 label="Search"
560 prepend-inner-icon="search" 560 prepend-inner-icon="search"
561 color="primary" 561 color="primary"
562 ></v-text-field> 562 ></v-text-field>
563 <v-icon @click="closeSearch" color="error">close</v-icon> 563 <v-icon @click="closeSearch" color="error">close</v-icon>
564 </v-layout> 564 </v-layout>
565 </v-flex> 565 </v-flex>
566 </v-toolbar> 566 </v-toolbar>
567 <v-data-table 567 <v-data-table
568 :headers="headers" 568 :headers="headers"
569 :items="desserts" 569 :items="desserts"
570 :pagination.sync="pagination" 570 :pagination.sync="pagination"
571 :search="search" 571 :search="search"
572 item-key="_id" 572 item-key="_id"
573 > 573 >
574 <template slot="items" slot-scope="props"> 574 <template slot="items" slot-scope="props">
575 <tr 575 <tr
576 style="cursor: pointer;" 576 style="cursor: pointer;"
577 class="tr" 577 class="tr"
578 @click="getTimeTable(props.item), props.expanded = !props.expanded" 578 @click="getTimeTable(props.item), props.expanded = !props.expanded"
579 > 579 >
580 <td class="td td-row">{{ props.index + 1}}</td> 580 <td class="td td-row">{{ props.index + 1}}</td>
581 <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> 581 <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td>
582 <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> 582 <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td>
583 <td class="text-xs-center td td-row"> 583 <td class="text-xs-center td td-row">
584 <span> 584 <span>
585 <v-tooltip top> 585 <v-tooltip top>
586 <img 586 <img
587 slot="activator" 587 slot="activator"
588 style="cursor:pointer; width:20px; height:20px; " 588 style="cursor:pointer; width:20px; height:20px; "
589 class="mr-3" 589 class="mr-3"
590 @click="editItem(props.item)" 590 @click="editItem(props.item)"
591 src="/static/icon/edit.png" 591 src="/static/icon/edit.png"
592 /> 592 />
593 <span>Edit</span> 593 <span>Edit</span>
594 </v-tooltip> 594 </v-tooltip>
595 <v-tooltip top> 595 <v-tooltip top>
596 <img 596 <img
597 slot="activator" 597 slot="activator"
598 style="cursor:pointer; width:20px; height:20px; " 598 style="cursor:pointer; width:20px; height:20px; "
599 class="mr-3" 599 class="mr-3"
600 @click="deleteItem(props.item)" 600 @click="deleteItem(props.item)"
601 src="/static/icon/delete.png" 601 src="/static/icon/delete.png"
602 /> 602 />
603 <span>Delete</span> 603 <span>Delete</span>
604 </v-tooltip> 604 </v-tooltip>
605 <v-tooltip top> 605 <v-tooltip top>
606 <img 606 <img
607 slot="activator" 607 slot="activator"
608 style="cursor:pointer; width:20px; height:20px; " 608 style="cursor:pointer; width:20px; height:20px; "
609 class="mr-3" 609 class="mr-3"
610 src="/static/icon/add1.png" 610 src="/static/icon/add1.png"
611 @click="addSchedule(props.item._id)" 611 @click="addSchedule(props.item._id)"
612 /> 612 />
613 <span>Add</span> 613 <span>Add</span>
614 </v-tooltip> 614 </v-tooltip>
615 </span> 615 </span>
616 </td> 616 </td>
617 </tr> 617 </tr>
618 </template> 618 </template>
619 <template slot="expand" slot-scope="props"> 619 <template slot="expand" slot-scope="props">
620 <v-data-table 620 <v-data-table
621 :items="timeTableList.schedule" 621 :items="timeTableList.schedule"
622 hide-actions 622 hide-actions
623 item-key="title" 623 item-key="title"
624 style="width: auto;" 624 style="width: auto;"
625 > 625 >
626 <template slot="items" slot-scope="props"> 626 <template slot="items" slot-scope="props">
627 <tr class="tr"> 627 <tr class="tr">
628 <td class="text-xs-left subheading table-td td td-row"> 628 <td class="text-xs-left subheading table-td td td-row">
629 <b>{{ props.item.day }}</b> 629 <b>{{ props.item.day }}</b>
630 </td> 630 </td>
631 <td class="table-td td td-row"> 631 <td class="table-td td td-row">
632 <b>Subject</b> 632 <b>Subject</b>
633 <br /> 633 <br />
634 <b>Time In</b> 634 <b>Time In</b>
635 <br /> 635 <br />
636 <b>Time Out</b> 636 <b>Time Out</b>
637 </td> 637 </td>
638 <td v-for="list in props.item.lectures" class="table-td td td-row"> 638 <td v-for="list in props.item.lectures" class="table-td td td-row">
639 <b>{{ list.subjectName }}</b> 639 <b>{{ list.subjectName }}</b>
640 <img 640 <img
641 style="cursor:pointer; width:20px; height:18px; " 641 style="cursor:pointer; width:20px; height:18px; "
642 class="mr-2 ml-2" 642 class="mr-2 ml-2"
643 src="/static/icon/edit1.png" 643 src="/static/icon/edit1.png"
644 @click="updateTimeTable(list, timeTableList,props.item._id)" 644 @click="updateTimeTable(list, timeTableList,props.item._id)"
645 /> 645 />
646 <img 646 <img
647 style="cursor:pointer; width:20px; height:20px; " 647 style="cursor:pointer; width:20px; height:20px; "
648 src="/static/icon/delete1.png" 648 src="/static/icon/delete1.png"
649 @click="deleteTimeTable(list,props.item.lectures)" 649 @click="deleteTimeTable(list,props.item.lectures)"
650 /> 650 />
651 <br /> 651 <br />
652 {{list.timeIn}} 652 {{list.timeIn}}
653 <br /> 653 <br />
654 {{list.timeOut}} 654 {{list.timeOut}}
655 </td> 655 </td>
656 <td class="td td-row"> 656 <td class="td td-row">
657 <v-tooltip top> 657 <v-tooltip top>
658 <v-icon 658 <v-icon
659 slot="activator" 659 slot="activator"
660 color="black" 660 color="black"
661 @click="addLecture(props.item._id, timeTableList._id)" 661 @click="addLecture(props.item._id, timeTableList._id)"
662 >add_circle_outline</v-icon> 662 >add_circle_outline</v-icon>
663 <span>Add</span> 663 <span>Add</span>
664 </v-tooltip> 664 </v-tooltip>
665 </td> 665 </td>
666 </tr> 666 </tr>
667 </template> 667 </template>
668 </v-data-table> 668 </v-data-table>
669 </template> 669 </template>
670 <v-alert 670 <v-alert
671 slot="no-results" 671 slot="no-results"
672 :value="true" 672 :value="true"
673 color="error" 673 color="error"
674 icon="warning" 674 icon="warning"
675 >Your search for "{{ search }}" found no results.</v-alert> 675 >Your search for "{{ search }}" found no results.</v-alert>
676 </v-data-table> 676 </v-data-table>
677 <br /> 677 <br />
678 <br /> 678 <br />
679 </v-flex> 679 </v-flex>
680 680
681 <!-- ****** ADD TIME-TABLE ****** --> 681 <!-- ****** ADD TIME-TABLE ****** -->
682 <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog"> 682 <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog">
683 <v-card flat class="card-style pa-2" dark> 683 <v-card flat class="card-style pa-2" dark>
684 <v-layout> 684 <v-layout>
685 <v-flex xs12> 685 <v-flex xs12>
686 <label class="title text-xs-center">Add Time Table</label> 686 <label class="title text-xs-center">Add Time Table</label>
687 <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon> 687 <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon>
688 </v-flex> 688 </v-flex>
689 </v-layout> 689 </v-layout>
690 <v-form ref="form" v-model="valid" lazy-validation> 690 <v-form ref="form" v-model="valid" lazy-validation>
691 <v-container fluid class="pt-3"> 691 <v-container fluid class="pt-3">
692 <v-flex xs12> 692 <v-flex xs12>
693 <v-layout> 693 <v-layout>
694 <v-flex xs4 class="pt-4 subheading"> 694 <v-flex xs4 class="pt-4 subheading">
695 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 695 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
696 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 696 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
697 </v-flex> 697 </v-flex>
698 <v-flex xs8 sm6 class="ml-3"> 698 <v-flex xs8 sm6 class="ml-3">
699 <v-select 699 <v-select
700 :items="addclass" 700 :items="addclass"
701 label="Select Class" 701 label="Select Class"
702 v-model="timeTable.select" 702 v-model="timeTable.select"
703 item-text="classNum" 703 item-text="classNum"
704 item-value="_id" 704 item-value="_id"
705 @change="getSections(timeTable.select)" 705 @change="getSections(timeTable.select)"
706 :rules="classRules" 706 :rules="classRules"
707 required 707 required
708 ></v-select> 708 ></v-select>
709 </v-flex> 709 </v-flex>
710 </v-layout> 710 </v-layout>
711 </v-flex> 711 </v-flex>
712 <v-flex xs12> 712 <v-flex xs12>
713 <v-layout> 713 <v-layout>
714 <v-flex xs4 class="pt-4 subheading"> 714 <v-flex xs4 class="pt-4 subheading">
715 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 715 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
716 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 716 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
717 </v-flex> 717 </v-flex>
718 <v-flex sm6 xs8 class="ml-3"> 718 <v-flex sm6 xs8 class="ml-3">
719 <v-select 719 <v-select
720 :items="addSection" 720 :items="addSection"
721 label="Select Section" 721 label="Select Section"
722 v-model="timeTable.selectSection" 722 v-model="timeTable.selectSection"
723 item-text="name" 723 item-text="name"
724 item-value="_id" 724 item-value="_id"
725 :rules="sectionRules" 725 :rules="sectionRules"
726 @change="getClassSubject(timeTable.select)" 726 @change="getClassSubject(timeTable.select)"
727 required 727 required
728 ></v-select> 728 ></v-select>
729 </v-flex> 729 </v-flex>
730 </v-layout> 730 </v-layout>
731 <v-layout> 731 <v-layout>
732 <v-flex xs4 class="pt-4 subheading"> 732 <v-flex xs4 class="pt-4 subheading">
733 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> 733 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
734 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 734 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
735 </v-flex> 735 </v-flex>
736 <v-flex xs8 sm6 class="ml-3"> 736 <v-flex xs8 sm6 class="ml-3">
737 <v-select 737 <v-select
738 :items="subjectList.subjects" 738 :items="subjectList.subjects"
739 label="Select Subject" 739 label="Select Subject"
740 v-model="timeTable.subjectName" 740 v-model="timeTable.subjectName"
741 item-text="subjectName" 741 item-text="subjectName"
742 item-value="subjectName" 742 item-value="subjectName"
743 :rules="subjectNameRules" 743 :rules="subjectNameRules"
744 required 744 required
745 ></v-select> 745 ></v-select>
746 </v-flex> 746 </v-flex>
747 </v-layout> 747 </v-layout>
748 </v-flex> 748 </v-flex>
749 <v-flex xs12> 749 <v-flex xs12>
750 <v-layout> 750 <v-layout>
751 <v-flex xs4 class="pt-4 subheading"> 751 <v-flex xs4 class="pt-4 subheading">
752 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> 752 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
753 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> 753 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
754 </v-flex> 754 </v-flex>
755 <v-flex xs8 sm6 class="ml-3"> 755 <v-flex xs8 sm6 class="ml-3">
756 <v-select 756 <v-select
757 :items="addTeachers" 757 :items="addTeachers"
758 label="Select Teacher" 758 label="Select Teacher"
759 v-model="timeTable.selectTeacher" 759 v-model="timeTable.selectTeacher"
760 item-text="name" 760 item-text="name"
761 item-value="_id" 761 item-value="_id"
762 :rules="teacherRules" 762 :rules="teacherRules"
763 required 763 required
764 ></v-select> 764 ></v-select>
765 </v-flex> 765 </v-flex>
766 </v-layout> 766 </v-layout>
767 </v-flex> 767 </v-flex>
768 <v-flex xs12> 768 <v-flex xs12>
769 <v-layout> 769 <v-layout>
770 <v-flex xs4 class="pt-4 subheading"> 770 <v-flex xs4 class="pt-4 subheading">
771 <label class="right">Select Day:</label> 771 <label class="right">Select Day:</label>
772 </v-flex> 772 </v-flex>
773 <v-flex xs8 sm6 class="ml-3"> 773 <v-flex xs8 sm6 class="ml-3">
774 <v-select 774 <v-select
775 :items="addOneDay" 775 :items="addOneDay"
776 label="Select Day" 776 label="Select Day"
777 v-model="timeTable.selectDay" 777 v-model="timeTable.selectDay"
778 :rules="dayRules" 778 :rules="dayRules"
779 item-text="name" 779 item-text="name"
780 item-value="_id" 780 item-value="_id"
781 required 781 required
782 ></v-select> 782 ></v-select>
783 </v-flex> 783 </v-flex>
784 </v-layout> 784 </v-layout>
785 </v-flex> 785 </v-flex>
786 <!-- <v-flex xs12> 786 <!-- <v-flex xs12>
787 <v-layout> 787 <v-layout>
788 <v-flex xs4 class="pt-4 subheading"> 788 <v-flex xs4 class="pt-4 subheading">
789 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> 789 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
790 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 790 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
791 </v-flex> 791 </v-flex>
792 <v-flex xs8 sm6 class="ml-3"> 792 <v-flex xs8 sm6 class="ml-3">
793 <v-text-field 793 <v-text-field
794 placeholder="fill your Subject Name" 794 placeholder="fill your Subject Name"
795 :rules="subjectNameRules" 795 :rules="subjectNameRules"
796 v-model="timeTable.subjectName" 796 v-model="timeTable.subjectName"
797 type="text" 797 type="text"
798 required 798 required
799 ></v-text-field> 799 ></v-text-field>
800 </v-flex> 800 </v-flex>
801 </v-layout> 801 </v-layout>
802 </v-flex>--> 802 </v-flex>-->
803 <v-flex xs12> 803 <v-flex xs12>
804 <v-layout> 804 <v-layout>
805 <v-flex xs4 class="pt-4 subheading"> 805 <v-flex xs4 class="pt-4 subheading">
806 <label class="right">Time In:</label> 806 <label class="right">Time In:</label>
807 </v-flex> 807 </v-flex>
808 <v-flex xs8 sm6 class="ml-3"> 808 <v-flex xs8 sm6 class="ml-3">
809 <v-menu 809 <v-menu
810 ref="menuA" 810 ref="menuA"
811 :close-on-content-click="false" 811 :close-on-content-click="false"
812 v-model="menu2" 812 v-model="menu2"
813 :nudge-right="40" 813 :nudge-right="40"
814 :return-value.sync="timeTable.timeIn" 814 :return-value.sync="timeTable.timeIn"
815 lazy 815 lazy
816 transition="scale-transition" 816 transition="scale-transition"
817 offset-y 817 offset-y
818 full-width 818 full-width
819 max-width="290px" 819 max-width="290px"
820 min-width="290px" 820 min-width="290px"
821 > 821 >
822 <v-text-field 822 <v-text-field
823 slot="activator" 823 slot="activator"
824 v-model="timeTable.timeIn" 824 v-model="timeTable.timeIn"
825 label="Select your timeIn" 825 label="Select your timeIn"
826 append-icon="access_time" 826 append-icon="access_time"
827 :rules="timeInRules" 827 :rules="timeInRules"
828 readonly 828 readonly
829 ></v-text-field> 829 ></v-text-field>
830 <v-time-picker 830 <v-time-picker
831 v-model="timeTable.timeIn" 831 v-model="timeTable.timeIn"
832 @change="$refs.menuA.save(timeTable.timeIn)" 832 @change="$refs.menuA.save(timeTable.timeIn)"
833 ></v-time-picker> 833 ></v-time-picker>
834 </v-menu> 834 </v-menu>
835 </v-flex> 835 </v-flex>
836 </v-layout> 836 </v-layout>
837 </v-flex> 837 </v-flex>
838 <v-flex xs12> 838 <v-flex xs12>
839 <v-layout> 839 <v-layout>
840 <v-flex xs4 class="pt-4 subheading"> 840 <v-flex xs4 class="pt-4 subheading">
841 <label class="right">Time Out:</label> 841 <label class="right">Time Out:</label>
842 </v-flex> 842 </v-flex>
843 <v-flex xs8 sm6 class="ml-3"> 843 <v-flex xs8 sm6 class="ml-3">
844 <v-menu 844 <v-menu
845 ref="menu" 845 ref="menu"
846 :close-on-content-click="false" 846 :close-on-content-click="false"
847 v-model="menu1" 847 v-model="menu1"
848 :nudge-right="40" 848 :nudge-right="40"
849 :return-value.sync="timeTable.timeOut" 849 :return-value.sync="timeTable.timeOut"
850 lazy 850 lazy
851 transition="scale-transition" 851 transition="scale-transition"
852 offset-y 852 offset-y
853 full-width 853 full-width
854 max-width="290px" 854 max-width="290px"
855 min-width="290px" 855 min-width="290px"
856 > 856 >
857 <v-text-field 857 <v-text-field
858 slot="activator" 858 slot="activator"
859 v-model="timeTable.timeOut" 859 v-model="timeTable.timeOut"
860 label="Select your Time Out" 860 label="Select your Time Out"
861 append-icon="access_time" 861 append-icon="access_time"
862 :rules="timeOutRules" 862 :rules="timeOutRules"
863 readonly 863 readonly
864 ></v-text-field> 864 ></v-text-field>
865 <v-time-picker 865 <v-time-picker
866 v-model="timeTable.timeOut" 866 v-model="timeTable.timeOut"
867 @change="$refs.menu.save(timeTable.timeOut)" 867 @change="$refs.menu.save(timeTable.timeOut)"
868 ></v-time-picker> 868 ></v-time-picker>
869 </v-menu> 869 </v-menu>
870 </v-flex> 870 </v-flex>
871 </v-layout> 871 </v-layout>
872 </v-flex> 872 </v-flex>
873 <v-layout> 873 <v-layout>
874 <v-flex xs12 sm11> 874 <v-flex xs12 sm11>
875 <v-layout> 875 <v-layout>
876 <v-spacer></v-spacer> 876 <v-spacer></v-spacer>
877 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 877 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
878 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 878 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
879 </v-layout> 879 </v-layout>
880 </v-flex> 880 </v-flex>
881 </v-layout> 881 </v-layout>
882 </v-container> 882 </v-container>
883 </v-form> 883 </v-form>
884 </v-card> 884 </v-card>
885 </v-dialog> 885 </v-dialog>
886 <div class="loader" v-if="showLoader"> 886 <div class="loader" v-if="showLoader">
887 <v-progress-circular indeterminate color="white"></v-progress-circular> 887 <v-progress-circular indeterminate color="white"></v-progress-circular>
888 </div> 888 </div>
889 <v-snackbar 889 <v-snackbar
890 :timeout="timeout" 890 :timeout="timeout"
891 :top="y === 'top'" 891 :top="y === 'top'"
892 :right="x === 'right'" 892 :right="x === 'right'"
893 :vertical="mode === 'vertical'" 893 :vertical="mode === 'vertical'"
894 v-model="snackbar" 894 v-model="snackbar"
895 :color="color" 895 :color="color"
896 >{{ text }}</v-snackbar> 896 >{{ text }}</v-snackbar>
897 </v-container> 897 </v-container>
898 </template> 898 </template>
899 <script> 899 <script>
900 import http from "@/Services/http.js"; 900 import http from "@/Services/http.js";
901 import Util from "@/util"; 901 import Util from "@/util";
902 902
903 export default { 903 export default {
904 data: () => ({ 904 data: () => ({
905 y: "top", 905 y: "top",
906 x: "right", 906 x: "right",
907 mode: "", 907 mode: "",
908 timeout: 3000, 908 timeout: 3000,
909 text: "", 909 text: "",
910 search: "", 910 search: "",
911 color: "", 911 color: "",
912 snackbar: false, 912 snackbar: false,
913 loading: false, 913 loading: false,
914 showLoader: false, 914 showLoader: false,
915 dialog: false, 915 dialog: false,
916 show: true, 916 show: true,
917 showSearch: false, 917 showSearch: false,
918 dialogAddLecture: false, 918 dialogAddLecture: false,
919 dialogUpdateLectures: false, 919 dialogUpdateLectures: false,
920 dialogSchedule: false, 920 dialogSchedule: false,
921 dialog1: false, 921 dialog1: false,
922 valid: true, 922 valid: true,
923 addTimeTableDialog: false, 923 addTimeTableDialog: false,
924 validAddDay: true, 924 validAddDay: true,
925 loadingFindData: false, 925 loadingFindData: false,
926 addclass: [], 926 addclass: [],
927 addSection: [], 927 addSection: [],
928 subjectList: [], 928 subjectList: [],
929 addTeachers: [], 929 addTeachers: [],
930 gender: ["Male", "Female"], 930 gender: ["Male", "Female"],
931 pagination: { 931 pagination: {
932 rowsPerPage: 15, 932 rowsPerPage: 15,
933 }, 933 },
934 imageData: {}, 934 imageData: {},
935 imageName: "", 935 imageName: "",
936 imageUrl: "", 936 imageUrl: "",
937 imageFile: "", 937 imageFile: "",
938 timeInRules: [(v) => !!v || "Time In is required"], 938 timeInRules: [(v) => !!v || "Time In is required"],
939 timeOutRules: [(v) => !!v || "Time Out is required"], 939 timeOutRules: [(v) => !!v || "Time Out is required"],
940 lectureRules: [(v) => !!v || "Lecture No is required"], 940 lectureRules: [(v) => !!v || "Lecture No is required"],
941 subjectNameRules: [(v) => !!v || "Subject Name is required"], 941 subjectNameRules: [(v) => !!v || "Subject Name is required"],
942 classRules: [(v) => !!v || "Class Name is required"], 942 classRules: [(v) => !!v || "Class Name is required"],
943 sectionRules: [(v) => !!v || "Section Name is required"], 943 sectionRules: [(v) => !!v || "Section Name is required"],
944 sectionRules: [(v) => !!v || "Section Name is required"], 944 sectionRules: [(v) => !!v || "Section Name is required"],
945 teacherRules: [(v) => !!v || "Teacher Name is required"], 945 teacherRules: [(v) => !!v || "Teacher Name is required"],
946 selecDayRule: [(v) => !!v || "Day is required"], 946 selecDayRule: [(v) => !!v || "Day is required"],
947 dayRules: [(v) => !!v || "Day is required"], 947 dayRules: [(v) => !!v || "Day is required"],
948 getParticulerLecture: "", 948 getParticulerLecture: "",
949 headers: [ 949 headers: [
950 { 950 {
951 text: "No", 951 text: "No",
952 align: "", 952 align: "",
953 sortable: false, 953 sortable: false,
954 value: "No", 954 value: "No",
955 }, 955 },
956 { 956 {
957 text: "Class Name", 957 text: "Class Name",
958 value: "classData.classNum", 958 value: "classData.classNum",
959 sortable: false, 959 sortable: false,
960 align: "center", 960 align: "center",
961 }, 961 },
962 { 962 {
963 text: "Section Name", 963 text: "Section Name",
964 value: "sectionData.name", 964 value: "sectionData.name",
965 sortable: false, 965 sortable: false,
966 align: "center", 966 align: "center",
967 }, 967 },
968 { text: "Action", value: "", sortable: false, align: "center" }, 968 { text: "Action", value: "", sortable: false, align: "center" },
969 ], 969 ],
970 daysHeaders: [ 970 daysHeaders: [
971 { text: "Day", value: "dayday", sortable: false, align: "center" }, 971 { text: "Day", value: "dayday", sortable: false, align: "center" },
972 { 972 {
973 text: "Subject Name", 973 text: "Subject Name",
974 value: "subjectName", 974 value: "subjectName",
975 sortable: false, 975 sortable: false,
976 align: "center", 976 align: "center",
977 }, 977 },
978 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 978 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
979 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }, 979 { text: "Time Out", value: "timeOut", sortable: false, align: "center" },
980 ], 980 ],
981 addOneDay: [ 981 addOneDay: [
982 "Monday", 982 "Monday",
983 "Tuesday", 983 "Tuesday",
984 "Wednesday", 984 "Wednesday",
985 "Thursday", 985 "Thursday",
986 "Friday", 986 "Friday",
987 "Saturday", 987 "Saturday",
988 "Sunday", 988 "Sunday",
989 ], 989 ],
990 schedule: { 990 schedule: {
991 selectDay: "", 991 selectDay: "",
992 }, 992 },
993 desserts: [], 993 desserts: [],
994 timeTableList: [], 994 timeTableList: [],
995 editedIndex: -1, 995 editedIndex: -1,
996 selectTimeTable: { 996 selectTimeTable: {
997 select: "", 997 select: "",
998 selectSection: "", 998 selectSection: "",
999 }, 999 },
1000 timeTable: { 1000 timeTable: {
1001 select: "", 1001 select: "",
1002 selectSection: "", 1002 selectSection: "",
1003 selectDay: "", 1003 selectDay: "",
1004 timeIn: null, 1004 timeIn: null,
1005 timeOut: null, 1005 timeOut: null,
1006 subjectName: "", 1006 subjectName: "",
1007 selectTeacher: "", 1007 selectTeacher: "",
1008 }, 1008 },
1009 editedItem: { 1009 editedItem: {
1010 classNum: "", 1010 classNum: "",
1011 selectSection: "", 1011 selectSection: "",
1012 }, 1012 },
1013 addlectures: { 1013 addlectures: {
1014 timeIn: null, 1014 timeIn: null,
1015 timeOut: null, 1015 timeOut: null,
1016 subjectName: "", 1016 subjectName: "",
1017 teacherId: "", 1017 teacherId: "",
1018 scheduleId: "", 1018 scheduleId: "",
1019 timeTableId: "", 1019 timeTableId: "",
1020 select: "", 1020 select: "",
1021 }, 1021 },
1022 updateLectures: { 1022 updateLectures: {
1023 timeIn: null, 1023 timeIn: null,
1024 timeOut: null, 1024 timeOut: null,
1025 subjectName: "", 1025 subjectName: "",
1026 teacherId: "", 1026 teacherId: "",
1027 select: "", 1027 select: "",
1028 }, 1028 },
1029 updateLecturesId: { 1029 updateLecturesId: {
1030 lectureId: "", 1030 lectureId: "",
1031 scheduleId: "", 1031 scheduleId: "",
1032 }, 1032 },
1033 menu1: false, 1033 menu1: false,
1034 menu2: false, 1034 menu2: false,
1035 menu3: false, 1035 menu3: false,
1036 menu4: false, 1036 menu4: false,
1037 menu5: false, 1037 menu5: false,
1038 menu6: false, 1038 menu6: false,
1039 scheduleDayId: "", 1039 scheduleDayId: "",
1040 showData: false, 1040 showData: false,
1041 }), 1041 }),
1042 watch: { 1042 watch: {
1043 addTimeTableDialog: function (val) { 1043 addTimeTableDialog: function (val) {
1044 if (!val) { 1044 if (!val) {
1045 this.timeTable = []; 1045 this.timeTable = [];
1046 } 1046 }
1047 }, 1047 },
1048 }, 1048 },
1049 methods: { 1049 methods: {
1050 findTimeTable() { 1050 findTimeTable() {
1051 this.loadingFindData = true; 1051 this.loadingFindData = true;
1052 http() 1052 http()
1053 .get("/getParticularClassTimeTable", { 1053 .get("/getParticularClassTimeTable", {
1054 params: { 1054 params: {
1055 sectionId: this.selectTimeTable.selectSection, 1055 sectionId: this.selectTimeTable.selectSection,
1056 classId: this.selectTimeTable.select, 1056 classId: this.selectTimeTable.select,
1057 }, 1057 },
1058 }) 1058 })
1059 .then((response) => { 1059 .then((response) => {
1060 this.desserts = response.data.data; 1060 this.desserts = response.data.data;
1061 if (this.desserts.length === 0) { 1061 if (this.desserts.length === 0) {
1062 this.showLoader = false; 1062 this.showLoader = false;
1063 this.snackbar = true; 1063 this.snackbar = true;
1064 this.text = "Data not found!"; 1064 this.text = "Data not found!";
1065 this.color = "error"; 1065 this.color = "error";
1066 return; 1066 return;
1067 } 1067 }
1068 this.showData = true; 1068 this.showData = true;
1069 this.loadingFindData = false; 1069 this.loadingFindData = false;
1070 }) 1070 })
1071 .catch((error) => { 1071 .catch((error) => {
1072 this.loadingFindData = false; 1072 this.loadingFindData = false;
1073 this.snackbar = true; 1073 this.snackbar = true;
1074 this.text = error.response.data.message; 1074 this.text = error.response.data.message;
1075 this.text = error.response.data.statusText; 1075 this.text = error.response.data.statusText;
1076 }); 1076 });
1077 }, 1077 },
1078 getSections(_id) { 1078 getSections(_id) {
1079 var token = this.$store.state.token; 1079 var token = this.$store.state.token;
1080 http() 1080 http()
1081 .get( 1081 .get(
1082 "/getSectionsList", 1082 "/getSectionsList",
1083 { params: { classId: _id } }, 1083 { params: { classId: _id } },
1084 { 1084 {
1085 headers: { Authorization: "Bearer " + token }, 1085 headers: { Authorization: "Bearer " + token },
1086 } 1086 }
1087 ) 1087 )
1088 .then((response) => { 1088 .then((response) => {
1089 this.addSection = response.data.data; 1089 this.addSection = response.data.data;
1090 }) 1090 })
1091 .catch((err) => { 1091 .catch((err) => {
1092 // console.log("err====>", err); 1092 // console.log("err====>", err);
1093 }); 1093 });
1094 }, 1094 },
1095 getClassSubject(_id) { 1095 getClassSubject(_id) {
1096 this.showLoader = true; 1096 this.showLoader = true;
1097 // this.classId = this.classId; 1097 // this.classId = this.classId;
1098 http() 1098 http()
1099 .get( 1099 .get(
1100 "/getParticularClass", 1100 "/getParticularClass",
1101 { params: { classId: _id } }, 1101 { params: { classId: _id } },
1102 { 1102 {
1103 headers: { Authorization: "Bearer " + this.token }, 1103 headers: { Authorization: "Bearer " + this.token },
1104 } 1104 }
1105 ) 1105 )
1106 .then((response) => { 1106 .then((response) => {
1107 this.subjectList = response.data.data; 1107 this.subjectList = response.data.data;
1108 this.showLoader = false; 1108 this.showLoader = false;
1109 }) 1109 })
1110 .catch((err) => { 1110 .catch((err) => {
1111 this.showLoader = false; 1111 this.showLoader = false;
1112 }); 1112 });
1113 }, 1113 },
1114 getTimeTable(item) { 1114 getTimeTable(item) {
1115 this.showLoader = true; 1115 this.showLoader = true;
1116 this.getParticulerLecture = item._id; 1116 this.getParticulerLecture = item._id;
1117 this.getTimeTableDayData(); 1117 this.getTimeTableDayData();
1118 }, 1118 },
1119 getTimeTableDayData() { 1119 getTimeTableDayData() {
1120 var token = this.$store.state.token; 1120 var token = this.$store.state.token;
1121 http() 1121 http()
1122 .get( 1122 .get(
1123 "/getParticularTimeTable", 1123 "/getParticularTimeTable",
1124 { params: { timeTableId: this.getParticulerLecture } }, 1124 { params: { timeTableId: this.getParticulerLecture } },
1125 { 1125 {
1126 headers: { Authorization: "Bearer " + token }, 1126 headers: { Authorization: "Bearer " + token },
1127 } 1127 }
1128 ) 1128 )
1129 .then((response) => { 1129 .then((response) => {
1130 this.timeTableList = response.data.data; 1130 this.timeTableList = response.data.data;
1131 this.showLoader = false; 1131 this.showLoader = false;
1132 }) 1132 })
1133 .catch((err) => { 1133 .catch((err) => {
1134 this.showLoader = false; 1134 this.showLoader = false;
1135 // console.log("err====>", err); 1135 // console.log("err====>", err);
1136 }); 1136 });
1137 }, 1137 },
1138 pickFile() { 1138 pickFile() {
1139 this.$refs.image.click(); 1139 this.$refs.image.click();
1140 }, 1140 },
1141 1141
1142 onFilePicked(e) { 1142 onFilePicked(e) {
1143 const files = e.target.files; 1143 const files = e.target.files;
1144 this.imageData.upload = e.target.files[0]; 1144 this.imageData.upload = e.target.files[0];
1145 if (files[0] !== undefined) { 1145 if (files[0] !== undefined) {
1146 this.imageName = files[0].name; 1146 this.imageName = files[0].name;
1147 if (this.imageName.lastIndexOf(".") <= 0) { 1147 if (this.imageName.lastIndexOf(".") <= 0) {
1148 return; 1148 return;
1149 } 1149 }
1150 const fr = new FileReader(); 1150 const fr = new FileReader();
1151 fr.readAsDataURL(files[0]); 1151 fr.readAsDataURL(files[0]);
1152 fr.addEventListener("load", () => { 1152 fr.addEventListener("load", () => {
1153 this.imageUrl = fr.result; 1153 this.imageUrl = fr.result;
1154 this.imageFile = files[0]; // this is an image file that can be sent to server... 1154 this.imageFile = files[0]; // this is an image file that can be sent to server...
1155 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1155 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1156 }); 1156 });
1157 } else { 1157 } else {
1158 this.imageName = ""; 1158 this.imageName = "";
1159 this.imageFile = ""; 1159 this.imageFile = "";
1160 this.imageUrl = ""; 1160 this.imageUrl = "";
1161 } 1161 }
1162 }, 1162 },
1163 // getTimeTableList() { 1163 // getTimeTableList() {
1164 // this.showLoader = true; 1164 // this.showLoader = true;
1165 // var token = this.$store.state.token; 1165 // var token = this.$store.state.token;
1166 // http() 1166 // http()
1167 // .get("/getTimeTablesList", { 1167 // .get("/getTimeTablesList", {
1168 // headers: { Authorization: "Bearer " + token } 1168 // headers: { Authorization: "Bearer " + token }
1169 // }) 1169 // })
1170 // .then(response => { 1170 // .then(response => {
1171 // this.desserts = response.data.data; 1171 // this.desserts = response.data.data;
1172 // this.showLoader = false; 1172 // this.showLoader = false;
1173 // // console.log("getTimeTableList=====>", response.data.data); 1173 // // console.log("getTimeTableList=====>", response.data.data);
1174 // }) 1174 // })
1175 // .catch(err => { 1175 // .catch(err => {
1176 // // console.log("err====>", err); 1176 // // console.log("err====>", err);
1177 // this.showLoader = false; 1177 // this.showLoader = false;
1178 // this.$router.replace({ path: "/" }); 1178 // this.$router.replace({ path: "/" });
1179 // }); 1179 // });
1180 // }, 1180 // },
1181 editItem(item) { 1181 editItem(item) {
1182 this.editedIndex = this.desserts.indexOf(item); 1182 this.editedIndex = this.desserts.indexOf(item);
1183 this.editedItem = Object.assign({}, item); 1183 this.editedItem = Object.assign({}, item);
1184 this.dialog = true; 1184 this.dialog = true;
1185 }, 1185 },
1186 updateTimeTable(timeToUpdate, classToUpdate, scheduleId) { 1186 updateTimeTable(timeToUpdate, classToUpdate, scheduleId) {
1187 this.updateLecturesId.scheduleId = scheduleId; 1187 this.updateLecturesId.scheduleId = scheduleId;
1188 this.updateLecturesId.lectureId = timeToUpdate._id; 1188 this.updateLecturesId.lectureId = timeToUpdate._id;
1189 this.updateLectures = timeToUpdate; 1189 this.updateLectures = timeToUpdate;
1190 this.dialogUpdateLectures = true; 1190 this.dialogUpdateLectures = true;
1191 }, 1191 },
1192 addLecture(scheduleId, timeTableId) { 1192 addLecture(scheduleId, timeTableId) {
1193 this.addlectures.scheduleId = scheduleId; 1193 this.addlectures.scheduleId = scheduleId;
1194 this.addlectures.timeTableId = timeTableId; 1194 this.addlectures.timeTableId = timeTableId;
1195 this.dialogAddLecture = true; 1195 this.dialogAddLecture = true;
1196 }, 1196 },
1197 AddLecture() { 1197 AddLecture() {
1198 if (this.$refs.lectureForm.validate()) { 1198 if (this.$refs.lectureForm.validate()) {
1199 http() 1199 http()
1200 .post("/addLecture", this.addlectures) 1200 .post("/addLecture", this.addlectures)
1201 .then((response) => { 1201 .then((response) => {
1202 this.snackbar = true; 1202 this.snackbar = true;
1203 this.text = "New Add Lecture successfully"; 1203 this.text = "New Add Lecture successfully";
1204 var token = this.$store.state.token; 1204 var token = this.$store.state.token;
1205 http() 1205 http()
1206 .get( 1206 .get(
1207 "/getParticularTimeTable", 1207 "/getParticularTimeTable",
1208 { params: { timeTableId: this.getParticulerLecture } }, 1208 { params: { timeTableId: this.getParticulerLecture } },
1209 { 1209 {
1210 headers: { Authorization: "Bearer " + token }, 1210 headers: { Authorization: "Bearer " + token },
1211 } 1211 }
1212 ) 1212 )
1213 .then((response) => { 1213 .then((response) => {
1214 this.timeTableList = response.data.data; 1214 this.timeTableList = response.data.data;
1215 this.snackbar = true; 1215 this.snackbar = true;
1216 this.text = response.data.message; 1216 this.text = response.data.message;
1217 this.color = "green"; 1217 this.color = "green";
1218 this.showLoader = false; 1218 this.showLoader = false;
1219 }) 1219 })
1220 .catch((err) => { 1220 .catch((err) => {
1221 this.showLoader = false; 1221 this.showLoader = false;
1222 // console.log("err====>", err); 1222 // console.log("err====>", err);
1223 this.snackbar = true; 1223 this.snackbar = true;
1224 this.color = "error"; 1224 this.color = "error";
1225 this.text = error.response.data.message; 1225 this.text = error.response.data.message;
1226 }); 1226 });
1227 this.closedialogLecture(); 1227 this.closedialogLecture();
1228 this.clearLeactureData(); 1228 this.clearLeactureData();
1229 }) 1229 })
1230 .catch((error) => { 1230 .catch((error) => {
1231 this.snackbar = true; 1231 this.snackbar = true;
1232 this.text = error.response.data.message; 1232 this.text = error.response.data.message;
1233 this.text = error.response.data.statusText; 1233 this.text = error.response.data.statusText;
1234 }); 1234 });
1235 } 1235 }
1236 }, 1236 },
1237 updateParticularTable() { 1237 updateParticularTable() {
1238 let EditLecture = { 1238 let EditLecture = {
1239 lectureId: this.updateLecturesId.lectureId, 1239 lectureId: this.updateLecturesId.lectureId,
1240 scheduleId: this.updateLecturesId.scheduleId, 1240 scheduleId: this.updateLecturesId.scheduleId,
1241 updatedLecture: { 1241 updatedLecture: {
1242 timeIn: this.updateLectures.timeIn, 1242 timeIn: this.updateLectures.timeIn,
1243 timeOut: this.updateLectures.timeOut, 1243 timeOut: this.updateLectures.timeOut,
1244 subjectName: this.updateLectures.subjectName, 1244 subjectName: this.updateLectures.subjectName,
1245 teacherId: this.updateLectures.teacherId, 1245 teacherId: this.updateLectures.teacherId,
1246 }, 1246 },
1247 }; 1247 };
1248 http() 1248 http()
1249 .put("/updateLecture", EditLecture) 1249 .put("/updateLecture", EditLecture)
1250 .then((response) => { 1250 .then((response) => {
1251 console.log("updateLecture", EditLecture); 1251 console.log("updateLecture", EditLecture);
1252 this.snackbar = true; 1252 this.snackbar = true;
1253 this.text = response.data.message; 1253 this.text = response.data.message;
1254 this.color = "green"; 1254 this.color = "green";
1255 this.closeUpdateLectures(); 1255 this.closeUpdateLectures();
1256 }) 1256 })
1257 .catch((error) => { 1257 .catch((error) => {
1258 // console.log(error); 1258 // console.log(error);
1259 1259
1260 this.snackbar = true; 1260 this.snackbar = true;
1261 this.color = "error"; 1261 this.color = "error";
1262 this.text = error.response.data.message; 1262 this.text = error.response.data.message;
1263 if (error.response.data.statusText) { 1263 if (error.response.data.statusText) {
1264 this.text = error.response.data.statusText; 1264 this.text = error.response.data.statusText;
1265 } 1265 }
1266 }); 1266 });
1267 }, 1267 },
1268 deleteItem(item) { 1268 deleteItem(item) {
1269 let deleteTimeTable = { 1269 let deleteTimeTable = {
1270 timeTableId: item._id, 1270 timeTableId: item._id,
1271 }; 1271 };
1272 http() 1272 http()
1273 .delete( 1273 .delete(
1274 "/deleteTimeTable", 1274 "/deleteTimeTable",
1275 confirm("Are you sure you want to delete this?") && { 1275 confirm("Are you sure you want to delete this?") && {
1276 params: deleteTimeTable, 1276 params: deleteTimeTable,
1277 } 1277 }
1278 ) 1278 )
1279 .then((response) => { 1279 .then((response) => {
1280 // console.log("deleteUers",deleteTimeTable) 1280 // console.log("deleteUers",deleteTimeTable)
1281 this.snackbar = true; 1281 this.snackbar = true;
1282 this.text = response.data.message; 1282 this.text = response.data.message;
1283 this.color = "green"; 1283 this.color = "green";
1284 this.findTimeTable(); 1284 this.findTimeTable();
1285 }) 1285 })
1286 .catch((error) => { 1286 .catch((error) => {
1287 // console.log(error); 1287 // console.log(error);
1288 }); 1288 });
1289 }, 1289 },
1290 close() { 1290 close() {
1291 this.dialog = false; 1291 this.dialog = false;
1292 }, 1292 },
1293 close1() { 1293 close1() {
1294 this.dialog1 = false; 1294 this.dialog1 = false;
1295 }, 1295 },
1296 closedialogLecture() { 1296 closedialogLecture() {
1297 this.dialogAddLecture = false; 1297 this.dialogAddLecture = false;
1298 }, 1298 },
1299 closeUpdateLectures() { 1299 closeUpdateLectures() {
1300 this.dialogUpdateLectures = false; 1300 this.dialogUpdateLectures = false;
1301 }, 1301 },
1302 closeAddTimeTableModel() { 1302 closeAddTimeTableModel() {
1303 this.addTimeTableDialog = false; 1303 this.addTimeTableDialog = false;
1304 this.timeTableList = []; 1304 this.timeTableList = [];
1305 this.timeTable = []; 1305 this.timeTable = [];
1306 }, 1306 },
1307 submit() { 1307 submit() {
1308 if (this.$refs.form.validate()) { 1308 if (this.$refs.form.validate()) {
1309 let imageData = new FormData(); 1309 let imageData = new FormData();
1310 imageData.append("upload", this.imageFile); 1310 imageData.append("upload", this.imageFile);
1311 let addTimeTable = { 1311 let addTimeTable = {
1312 sectionId: this.timeTable.selectSection, 1312 sectionId: this.timeTable.selectSection,
1313 classId: this.timeTable.select, 1313 classId: this.timeTable.select,
1314 schedule: [ 1314 schedule: [
1315 { 1315 {
1316 day: this.timeTable.selectDay, 1316 day: this.timeTable.selectDay,
1317 lectures: [ 1317 lectures: [
1318 { 1318 {
1319 timeIn: this.timeTable.timeIn, 1319 timeIn: this.timeTable.timeIn,
1320 timeOut: this.timeTable.timeOut, 1320 timeOut: this.timeTable.timeOut,
1321 subjectName: this.timeTable.subjectName, 1321 subjectName: this.timeTable.subjectName,
1322 teacherId: this.timeTable.selectTeacher, 1322 teacherId: this.timeTable.selectTeacher,
1323 }, 1323 },
1324 ], 1324 ],
1325 }, 1325 },
1326 ], 1326 ],
1327 }; 1327 };
1328 this.loading = true; 1328 this.loading = true;
1329 http() 1329 http()
1330 .post("/createTimeTable", addTimeTable) 1330 .post("/createTimeTable", addTimeTable)
1331 .then((response) => { 1331 .then((response) => {
1332 // console.log("addTimeTable=====>", addTimeTable); 1332 // console.log("addTimeTable=====>", addTimeTable);
1333 if ((this.snackbar = true)) { 1333 if ((this.snackbar = true)) {
1334 this.text = "New Time Table added successfully"; 1334 this.text = "New Time Table added successfully";
1335 } 1335 }
1336 this.color = "green"; 1336 this.color = "green";
1337 this.clear(); 1337 this.clear();
1338 this.addTimeTableDialog = false; 1338 this.addTimeTableDialog = false;
1339 this.loading = false; 1339 this.loading = false;
1340 }) 1340 })
1341 .catch((error) => { 1341 .catch((error) => {
1342 // console.log(error); 1342 // console.log(error);
1343 if ((this.snackbar = true)) { 1343 if ((this.snackbar = true)) {
1344 this.text = error.response.data.message; 1344 this.text = error.response.data.message;
1345 } 1345 }
1346 this.loading = false; 1346 this.loading = false;
1347 }); 1347 });
1348 } 1348 }
1349 }, 1349 },
1350 clear() { 1350 clear() {
1351 this.$refs.form.reset(); 1351 this.$refs.form.reset();
1352 }, 1352 },
1353 clearLeactureData() { 1353 clearLeactureData() {
1354 this.$refs.lectureForm.reset(); 1354 this.$refs.lectureForm.reset();
1355 }, 1355 },
1356 save() { 1356 save() {
1357 let imageData = new FormData(); 1357 let imageData = new FormData();
1358 imageData.append("upload", this.imageFile); 1358 imageData.append("upload", this.imageFile);
1359 // console.log(imageData); 1359 // console.log(imageData);
1360 let editTimeTable = { 1360 let editTimeTable = {
1361 timeTableId: this.editedItem._id, 1361 timeTableId: this.editedItem._id,
1362 classId: this.editedItem.classNum, 1362 classId: this.editedItem.classNum,
1363 sectionId: this.editedItem.selectSection, 1363 sectionId: this.editedItem.selectSection,
1364 // imageData 1364 // imageData
1365 }; 1365 };
1366 http() 1366 http()
1367 .put("/updateTimeTable", editTimeTable) 1367 .put("/updateTimeTable", editTimeTable)
1368 .then((response) => { 1368 .then((response) => {
1369 console.log("editTimeTable", editTimeTable); 1369 // console.log("editTimeTable", editTimeTable);
1370 if ((this.snackbar = true)) { 1370 if ((this.snackbar = true)) {
1371 this.text = "Successfully Edit Existing Time Table"; 1371 this.text = "Successfully Edit Existing Time Table";
1372 this.color = "success";
1372 } 1373 }
1373 this.findTimeTable(); 1374 this.findTimeTable();
1374 }) 1375 })
1375 .catch((error) => { 1376 .catch((error) => {
1376 // console.log(error); 1377 // console.log(error);
1377 if ((this.snackbar = true)) { 1378 if ((this.snackbar = true)) {
1378 this.text = error.response.data.message; 1379 this.text = error.response.data.message;
1379 } 1380 }
1380 }); 1381 });
1381 this.close(); 1382 this.close();
1382 }, 1383 },
1383 deleteTimeTable(timeToDelete, deleteLectures) { 1384 deleteTimeTable(timeToDelete, deleteLectures) {
1384 let deleteLecture = { 1385 let deleteLecture = {
1385 lectureId: timeToDelete._id, 1386 lectureId: timeToDelete._id,
1386 }; 1387 };
1387 http() 1388 http()
1388 .delete( 1389 .delete(
1389 "/deleteLecture", 1390 "/deleteLecture",
1390 confirm("Are you sure you want to delete this?") && { 1391 confirm("Are you sure you want to delete this?") && {
1391 params: deleteLecture, 1392 params: deleteLecture,
1392 } 1393 }
1393 ) 1394 )
1394 .then((response) => { 1395 .then((response) => {
1395 if ((this.snackbar = true)) { 1396 if ((this.snackbar = true)) {
1396 this.text = "Successfully delete Existing Time Table"; 1397 this.text = "Successfully delete Existing Time Table";
1397 } 1398 }
1398 const index = this.timeTableList.schedule.indexOf(deleteLectures); 1399 const index = this.timeTableList.schedule.indexOf(deleteLectures);
1399 for (let i = 0; i < this.timeTableList.schedule.length; i++) { 1400 for (let i = 0; i < this.timeTableList.schedule.length; i++) {
1400 this.timeTableList.schedule[i].lectures.splice(index, 1); 1401 this.timeTableList.schedule[i].lectures.splice(index, 1);
1401 } 1402 }
1402 }) 1403 })
1403 .catch((error) => { 1404 .catch((error) => {
1404 console.log(error); 1405 console.log(error);
1405 }); 1406 });
1406 }, 1407 },
1407 addSchedule(id) { 1408 addSchedule(id) {
1408 this.scheduleDayId = id; 1409 this.scheduleDayId = id;
1409 this.dialogSchedule = true; 1410 this.dialogSchedule = true;
1410 }, 1411 },
1411 submitSchedule() { 1412 submitSchedule() {
1412 if (this.$refs.formAddDay.validate()) { 1413 if (this.$refs.formAddDay.validate()) {
1413 let scheduleDayData = { 1414 let scheduleDayData = {
1414 timeTableId: this.scheduleDayId, 1415 timeTableId: this.scheduleDayId,
1415 day: this.schedule.selectDay, 1416 day: this.schedule.selectDay,
1416 }; 1417 };
1417 http() 1418 http()
1418 .post("/addSchedule", scheduleDayData) 1419 .post("/addSchedule", scheduleDayData)
1419 .then((response) => { 1420 .then((response) => {
1420 this.snackbar = true; 1421 this.snackbar = true;
1421 this.text = "New Schedule Day added successfully"; 1422 this.text = "New Schedule Day added successfully";
1422 this.dialogSchedule = false; 1423 this.dialogSchedule = false;
1423 this.loading = false; 1424 this.loading = false;
1424 this.getTimeTableDayData(); 1425 this.getTimeTableDayData();
1425 }) 1426 })
1426 .catch((error) => { 1427 .catch((error) => {
1427 // console.log(error); 1428 // console.log(error);
1428 this.snackbar = true; 1429 this.snackbar = true;
1429 this.text = error.response.data.message; 1430 this.text = error.response.data.message;
1430 this.loading = false; 1431 this.loading = false;
1431 }); 1432 });
1432 } 1433 }
1433 }, 1434 },
1434 displaySearch() { 1435 displaySearch() {
1435 (this.show = false), (this.showSearch = true); 1436 (this.show = false), (this.showSearch = true);
1436 }, 1437 },
1437 closeSearch() { 1438 closeSearch() {
1438 this.showSearch = false; 1439 this.showSearch = false;
1439 this.show = true; 1440 this.show = true;
1440 this.search = ""; 1441 this.search = "";
1441 }, 1442 },
1442 }, 1443 },
1443 mounted() { 1444 mounted() {
1444 // this.getTimeTableList(); 1445 // this.getTimeTableList();
1445 var token = this.$store.state.token; 1446 var token = this.$store.state.token;
1446 http() 1447 http()
1447 .get("/getClassesList", { 1448 .get("/getClassesList", {
1448 headers: { Authorization: "Bearer " + token }, 1449 headers: { Authorization: "Bearer " + token },
1449 }) 1450 })
1450 .then((response) => { 1451 .then((response) => {
1451 this.addclass = response.data.data; 1452 this.addclass = response.data.data;
1452 // console.log("getClassesList=====>",this.addclass) 1453 // console.log("getClassesList=====>",this.addclass)
1453 }) 1454 })
1454 .catch((error) => { 1455 .catch((error) => {
1455 this.showLoader = false; 1456 this.showLoader = false;
1456 if (error.response.status === 401) { 1457 if (error.response.status === 401) {
1457 this.$router.replace({ path: "/" }); 1458 this.$router.replace({ path: "/" });
1458 this.$store.dispatch("setToken", null); 1459 this.$store.dispatch("setToken", null);
1459 this.$store.dispatch("Id", null); 1460 this.$store.dispatch("Id", null);
1460 this.$store.dispatch("Role", null); 1461 this.$store.dispatch("Role", null);
1461 } 1462 }
1462 }); 1463 });
1463 1464
1464 http() 1465 http()
1465 .get("/getTeachersList", { 1466 .get("/getTeachersList", {
1466 headers: { Authorization: "Bearer " + token }, 1467 headers: { Authorization: "Bearer " + token },
1467 }) 1468 })
1468 .then((response) => { 1469 .then((response) => {
1469 this.addTeachers = response.data.data; 1470 this.addTeachers = response.data.data;
1470 // console.log("getClassesList=====>",this.addTeachers) 1471 // console.log("getClassesList=====>",this.addTeachers)
1471 }) 1472 })
1472 .catch((error) => { 1473 .catch((error) => {
1473 this.showLoader = false; 1474 this.showLoader = false;
1474 if (error.response.status === 401) { 1475 if (error.response.status === 401) {
1475 this.$router.replace({ path: "/" }); 1476 this.$router.replace({ path: "/" });
1476 this.$store.dispatch("setToken", null); 1477 this.$store.dispatch("setToken", null);
1477 this.$store.dispatch("Id", null); 1478 this.$store.dispatch("Id", null);
1478 this.$store.dispatch("Role", null); 1479 this.$store.dispatch("Role", null);
1479 } 1480 }
1480 }); 1481 });
1481 }, 1482 },
1482 }; 1483 };
1483 </script> 1484 </script>